[WPtips] Cách ngắt trang, nhảy trang và thu gọn nội dung bài viết trên WordPress

Nội dung

1.Ngắt trang
2.Nhảy trang
3.Thu gọn nội dung bài viết

Xin chào Mình là Sera đây Phần này có khá nhiều bạn hỏi (đặc biệt là cách nhảy trang) và mình cũng trả lời ở các bình luận trong blog rồi. Vì những thao tác này rất ngắn nên mình lười viết thành một bài hướng dẫn hoàn chỉnh mà thay vào đó, mình sẽ đưa luôn link hướng dẫn bằng tiếng Anh bên trang hỗ trợ của WordPress cho các bạn ấy luôn Nhưng đó là chuyện trước đây, bây giờ mình quyết định sẽ viết hướng dẫn chi tiết cho những nội dung nhỏ xíu nhưng có vẻ rất cần thiết này Dù sao thì không phải ai cũng đọc hiểu tiếng Anh đúng không nào?

Trước khi đi vào nội dung chi tiết của bài này, các bạn cần lưu ý những điều sau:

1. Nếu bạn là một người mới, hoàn toàn không biết bất cứ điều gì về WordPress, hãy xem bài Hướng dẫn WordPress cơ bản cho người mới bắt đầu trước khi đọc bài này.
2. Trong bài viết có thể nhắc đến những khái niệm liên quan đến các thành phần của blog, nếu các bạn không biết hoặc không hiểu những khái niệm này, hãy bấm vào ĐÂY để xem hình minh hoạ.
3. Trong bài viết có nhắc đến các trình soạn thảo văn bản của WordPress, bao gồm trình soạn thảo Cổ điển (Phiên bản 1 và Phiên bản 2) và trình soạn thảo Block-Editor. Nếu các bạn chưa hiểu rõ về các trình soạn thảo này, hãy đọc bài Sơ lược về các trình soạn thảo văn bản của WordPress và một số thao tác cơ bản để biết thêm chi tiết.
4. Mình không phải là dân công nghệ thông tin hay nhân viên của WordPress nên mình không dùng các thuật ngữ chuyên ngành (nên các bạn đừng bắt bẻ mình về cách dùng từ nhé ). Tất cả các bài hướng dẫn trên blog của mình được viết dưới góc nhìn của một người sử dụng WordPress. Mình chỉ viết hướng dẫn cho blog được tạo miễn phí với WordPress.com, không viết hướng dẫn cho WordPress.org hay những phiên bản tính phí khác.
5. Một số hình ảnh trong bài viết này có độ rộng trên 1000px, nhưng do giới hạn của vùng hiển thị bài đăng nên sẽ bị giảm xuống còn khoảng 560px. Nếu các bạn muốn xem kích thước đầy đủ (full size) của những hình ảnh này, hãy click chuột trái vào những hình ảnh đó. Nếu trong bài viết có sử dụng video từ YouTube, các bạn hãy lựa chọn chế độ xem video với chất lượng cao nhất (720p hoặc 1080p).
6. Cuối mỗi nội dung hướng dẫn của bài này sẽ có video minh hoạ, nếu các bạn đọc hướng dẫn bằng lời và hình ảnh mà vẫn chưa hiểu thì hãy xem video minh hoạ để dễ hình dung thao tác hơn nhé
7. Các hướng dẫn trong blog của mình được thực hiện với ngôn ngữ blog và ngôn ngữ giao diện là tiếng Anh. Do đó, nếu blog của các bạn đang sử dụng tiếng Việt thì hãy làm theo video dưới đây để chuyển sang tiếng Anh nhé. Còn vì sao nên để ngôn ngữ blog và ngôn ngữ giao diện là tiếng Anh thì các bạn có thể đọc ở ĐÂY nhé

Video 1. Thay đổi Ngôn ngữ blog và Ngôn ngữ giao diện

Bây giờ chúng ta sẽ đi vào từng nội dung chi tiết nhé

1. Ngắt trang

Khi nội dung bài viết quá dài, các bạn có thể dùng chức năng ngắt trang của WordPress để chia bài viết thành nhiều trang. Điều này sẽ giúp bài viết trở nên khoa học và tốc độ tải bài viết cũng sẽ nhanh hơn. Các bạn có thể xem ví dụ tại series Hướng dẫn WordPress cơ bản cho người mới bắt đầu trong blog của mình. Vì nội dung của series rất dài nên mình đã chia các nội dung thành từng trang (10 trang) để người đọc dễ theo dõi. Mình sẽ hướng dẫn các bạn thực hiện thao tác này trên cả trình soạn thảo văn bản Cổ điển (Phiên bản 1) lẫn trình soạn thảo văn bản Block-Editor nhé Nếu các bạn chưa biết hoặc chưa hiểu về 2 trình soạn thảo này thì hãy đọc bài Sơ lược về các trình soạn thảo văn bản của WordPress và một số thao tác cơ bản để biết nhé

a) Ngắt trang trên trình soạn thảo Cổ điển (Phiên bản 1)

Đầu tiên, nếu các bạn đang ở giao diện trực quan (Visual) thì hãy chuyển sang giao diện HTML nhé. Sau đó, các bạn đặt con trỏ chuột vào vị trí muốn ngắt trang và dán vào đó dòng code sau đây:

<!--nextpage-->

Như vậy là các bạn đã hoàn thành công việc ngắt trang rồi Sau khi ngắt trang xong, các bạn có thể quay trở lại giao diện trực quan và chỉnh sửa như bình thường nhé

b) Ngắt trang trên trình soạn thảo Block-Editor

Vì trình soạn thảo Block-Editor chia nội dung thành các khối, do đó, nếu các bạn muốn ngắt trang ở khối nào thì hãy click chuột vào khối đó. Sau đó, các bạn di chuyển chuột xuống vị trí cuối cùng của khối, lúc này sẽ xuất hiện biểu tượng thêm khối (). Các bạn bấm vào biểu tượng này và thêm khối Page Break. Như vậy là các bạn đã hoàn thành thao tác ngắt trang trên trình soạn thảo Block-Editor rồi đó

Thao tác ngắt trang trên 2 trình soạn thảo này sẽ được minh hoạ bằng video sau:

Video 2. Ngắt trang

2. Nhảy trang

Nhảy trang (Page Jump) hiểu đơn giản là khi bấm vào một liên kết, nó sẽ đưa các bạn đến một vị trí được chỉ định trong bài viết. Ví dụ như khi các bạn bấm vào ĐÂY, nó sẽ đưa các bạn về bảng nội dung của bài viết này. Nếu các bạn bấm vào mục 2. Nhảy trang trên bảng nội dung, nó sẽ đưa các bạn xuống mục nhảy trang này. Vậy thao tác nhảy trang này thực hiện như thế nào? Mình sẽ hướng dẫn các bạn thực hiện thao tác này trên cả trình soạn thảo văn bản Cổ điển (Phiên bản 1) lẫn trình soạn thảo văn bản Block-Editor nhé! Nếu các bạn chưa biết hoặc chưa hiểu về 2 trình soạn thảo này thì hãy đọc bài Sơ lược về các trình soạn thảo văn bản của WordPress và một số thao tác cơ bản để biết nhé

a) Nhảy trang trên trình soạn thảo Cổ điển (Phiên bản 1)

Đầu tiên, các bạn phải xác định vị trí cần nhảy đến trong bài viết và đặt tên cho nó trước. Tức là mình muốn khi bấm vào A thì nó sẽ nhảy đến B thì mình phải xác định B trước. Sau đó, các bạn chuyển sang giao diện HTML và thêm đoạn code dưới đây vào ngay trước vị trí cần nhảy đến trong bài viết:

<a name="tên-vị-trí-cần-nhảy-đến"></a>

Vậy là xong phần xác định vị trí cần nhảy đến, tác dụng của phần này là tạo ra một liên kết ảo cho vị trí muốn nhảy trang. Cũng giống như việc các bạn chèn liên kết ẩn khi làm mục lục truyện vậy, phải có liên kết dẫn đến bài viết chứa chương truyện thì mới chèn được đúng không? Nếu bài viết đó không hề tồn tại thì làm sao có liên kết mà chèn được Thế nên, bây giờ chúng ta sẽ đến với bước chèn liên kết dẫn đến vị trí cần nhảy trang trong bài viết nhé

Để chèn liên kết ẩn, các bạn có thể chèn ở giao diện trực quan (Visual) hoặc giao diện HTML đều được. Nhưng để cho dễ, mình sẽ hướng dẫn các bạn thực hiện trên giao diện trực quan (Visual) nhé. Tương tự như khi chèn liên kết ẩn, các bạn bôi đen phần văn bản muốn chèn liên kết dẫn đến vị trí cần nhảy trang. Sau đó, các bạn bấm vào biểu tượng chèn liên kết (hoặc bấm tổ hợp phím Ctrl+K) trên thanh công cụ soạn thảo để chèn liên kết. Lúc này, một khung trắng với dòng chữ Paste URL or type to search sẽ hiện ra, các bạn nhập vào khung trắng đó theo cú pháp sau:

#tên-vị-trí-cần-nhảy-đến

Sau khi nhập xong, các bạn ấn phím Enter hoặc bấm vào biểu tượng để hoàn tất quá trình chèn liên kết.

Hình 1. Thêm liên kết ẩn

LƯU Ý:

1Tên của các vị trí cần nhảy đến trong cùng một trang không được phép trùng lặp.

2Tên của vị trí cần nhảy đến nên sử dụng chữ không dấu (chữ thường hay chữ hoa đều được) hoặc số, không nên sử dụng các kí tự đặc biệt. Nếu muốn ngăn cách giữa các chữ, các bạn hãy dùng dấu gạch nối.

3Để nhảy đến một vị trí trong một bài viết (hoặc trang) khác, ở bước chèn liên kết ẩn, các bạn chèn liên kết dẫn đến bài viết (hoặc trang) đó trước, sau đó thêm đoạn code #tên-vị-trí-cần-nhảy-đến vào ngay sau liên kết đó rồi mới ấn Enter hoặc bấm vào biểu tượng . Ví dụ: Hiện tại, mình đang ở bài hướng dẫn nhảy trang, bây giờ mình muốn dẫn các bạn đến phần Chuyển đổi giữa các trình soạn thảo văn bản trong bài Sơ lược về các trình soạn thảo văn bản của WordPress và một số thao tác cơ bản thì đầu tiên, mình sẽ đặt tên cho vị trí cần nhảy đến trước (ở đây, mình đặt tên cho nó là chuyen-doi). Tiếp theo, mình muốn khi các bạn bấm vào chữ NÀY thì sẽ nhảy đến phần Chuyển đổi giữa các trình soạn thảo văn bản thì mình sẽ chèn liên kết dẫn đến bài Sơ lược về các trình soạn thảo văn bản của WordPress và một số thao tác cơ bản vào khung trắng trước, sau đó thêm đoạn code #chuyen-doi vào ngay sau liên kết đó rồi mới ấn Enter, tức là phần liên kết hoàn chỉnh khi nhập vào khung trắng của mình sẽ như thế này:

https://wptutbyserahwang.wordpress.com/2019/09/27/so-luoc-ve-cac-trinh-soan-thao/#chuyen-doi

4Tương tự như trên, giả sử bài viết (hoặc trang) của các bạn có nhiều hơn một trang, các bạn đang ở trang 1 mà lại muốn khi bấm vào liên kết ẩn ở trang 1 thì nó sẽ nhảy đến một vị trí nào đó ở trang 2 (hoặc trang 3, 4, 5,…) thì ở bước chèn liên kết ẩn, các bạn hãy chèn theo cú pháp sau:

Liên kết dẫn đến bài viết (hoặc trang) cần nhảy/số trang/#tên-vị-trí-cần-nhảy-đến

Nếu vị trí cần nhảy đến là ở trang 1 thì các bạn không cần thêm số trang mà sẽ thêm luôn đoạn code #tên-vị-trí-cần-nhảy đến vào ngay sau liên kết dẫn đến bài viết (hoặc trang) như lưu ý số 3 ở trên. Các bạn chỉ cần thêm số trang khi vị trí cần nhảy đến nằm ở trang thứ 2 trở đi. Ví dụ: Mình muốn dẫn các bạn đến mục Trình soạn thảo văn bản Block-Editor trong series Hướng dẫn WordPress cơ bản cho người mới bắt đầu thì đầu tiên, mình cũng phải đặt tên cho mục này trước (ở đây mình đặt tên là trinh-soan-thao-block-editor). Mục này thuộc bài 3 và nằm ở trang số 4 của series này nên mình sẽ thêm số trang là 4 vào sau liên kết của series, sau đó mới thêm vị trí cần nhảy đến. Tức là phần liên kết hoàn chỉnh để chèn vào khung trắng của mình sẽ có dạng như sau:

https://wptutbyserahwang.wordpress.com/2019/04/29/wordpress-co-ban/4/#trinh-soan-thao-block-editor

5Khi nhảy trang, liên kết sẽ nhảy đến chính giữa hoặc chỗ thấp nhất của vị trí cần nhảy đến. Ví dụ như các bạn đặt code xác định vị trí tại dòng có chứa chữ A, thì khi nhảy trang, liên kết sẽ nhảy đến chỗ thấp nhất của chữ A, tức là phần chân của chữ A chứ không phải phần đỉnh của chữ A. Nếu vẫn chưa hình dung được, các bạn hãy xem hình ảnh dưới đây:

Hình 2. Vị trí liên kết nhảy đến

Do đó, để liên kết nhảy đúng đến vị trí mong muốn, các bạn nên đặt code xác định vị trí cần nhảy đến ở trước vị trí đó một dòng, như vậy sẽ không xảy ra tình trạng mất chữ Lưu ý là nếu dòng đó có chứa thẻ </p> đóng hoặc thẻ </div> đóng thì các bạn hãy đặt code vào trước 2 thẻ này nhé.

6Nếu vị trí cần nhảy đến là dòng đầu tiên của bài viết, các bạn có thể sử dụng id “main” có sẵn thay vì code <a name> để tránh tình trạng mất chữ. Khi sử dụng id “main” này, các bạn chỉ cần thực hiện bước chèn liên kết ẩn với cú pháp #main mà không cần phải thực hiện thao tác đặt tên cho vị trí cần nhảy đến nữa.

7Thao tác chèn liên kết ẩn có thể áp dụng cho hình ảnh, trình tự thực hiện tương như chèn liên kết ẩn đối với văn bản.

8Ngoài cách đặt tên cho vị trí cần nhảy đến bằng code <a name> như mình đã hướng dẫn ở trên, chúng ta còn có cách khác là sử dụng id. Nhưng id thì sẽ đi với các thẻ định dạng như div, p, span nên mình hướng dẫn các bạn dùng <a name> cho tiện.

b) Nhảy trang trên trình soạn thảo Block-Editor

Bởi vì trình soạn thảo Block-Editor chia nội dung thành từng khối nên thực hiện thao tác nhảy trang trên trình soạn thảo này hơi phiền một chút. Trước khi đọc hướng dẫn của phần này, hãy chắc chắn là các bạn đã có hiểu biết cơ bản về trình soạn thảo Block-Editor rồi nhé

Bước đầu tiên, các bạn cũng sẽ phải xác định và đặt tên cho vị trí cần nhảy đến trong bài viết, tức là nếu muốn bấm vào A thì nó sẽ nhảy đến B thì các bạn sẽ phải xác định B trước. Đối với trình soạn thảo Block-Editor, các bạn có 2 cách để xác định vị trí cần nhảy đến.

Cách 1: Bấm vào nút tuỳ chọn bổ sung () trên thanh công cụ tuỳ chọn chính của khối có chứa vị trí cần nhảy đến và chọn Edit as HTML để chuyển sang giao diện chỉnh sửa HTML. Sau đó, các bạn sử dụng đoạn code <a name="tên-vị-trí-cần-nhảy-đến"></a> để xác định vị trí cần nhảy đến tương tự như đối với trình soạn thảo Cổ điển. Sau khi thêm code xong, các bạn có thể bấm vào nút tuỳ chọn bổ sung của khối và chọn Edit visually để quay trở lại giao diện chỉnh sửa trực quan.

Cách 2: Nếu vị trí cần nhảy đến là ở đầu một đoạn văn bản hay hình ảnh, các bạn có thể sử dụng khối Heading với nội dung trống để xác định vị trí cần nhảy đến. Cách làm như sau:

• Đầu tiên, các bạn click chuột vào khối ở phía trên khối (vị trí) cần nhảy đến. Tức là nếu có 3 khối A, B, C mà các bạn muốn nhảy đến khối B, thì các bạn sẽ click chuột vào khối ở trên khối B là khối A. Sau đó, các bạn di chuyển chuột xuống cuối khối này, lúc này, nút thêm khối () sẽ hiện ra. Các bạn bấm vào nút này và thêm khối Heading vào.

• Tại tab tuỳ chọn bổ sung của khối Heading, các bạn bấm vào tuỳ chọn Advanced và đặt tên cho vị trí cần nhảy đến bằng cách nhập vào khung trống dưới mục HTML Anchor. Cách đặt tên và các lưu ý đều tương tự như phần lưu ý mình đã nhắc đến khi thao tác trên trình soạn thảo Cổ điển, nếu các bạn chưa đọc thì hãy kéo lên trên để đọc nhé

Vậy là đã xong bước xác định vị trí cần nhảy đến, bây giờ, chúng ta sẽ đến với bước chèn liên kết ẩn nhé

Đầu tiên, các bạn click vào khối có chứa văn bản cần chèn liên kết ẩn, sau đó bôi đen đoạn văn bản cần chèn liên kết ẩn. Tiếp theo, các bạn bấm vào biểu tượng chèn liên kết () trên thanh công cụ tuỳ chọn chính của khối đó (hoặc bấm tổ hợp phím Ctrl+K). Lúc này, một khung trắng với dòng chữ Paste URL or type to search sẽ hiện ra, các bạn nhập vào khung trắng đó theo cú pháp sau:

#tên-vị-trí-cần-nhảy-đến

Sau khi nhập xong, các bạn ấn phím Enter hoặc bấm vào biểu tượng để hoàn tất quá trình chèn liên kết.

Hình 3. Thêm liên kết ẩn (trình soạn thảo Block-Editor)

Thao tác nhảy trang sẽ được minh hoạ bằng video sau:

Video 3. Nhảy trang

3. Thu gọn nội dung bài viết

Các bạn có thể nhìn vào trang chủ blog của mình và sẽ thấy các bài viết không hiển thị toàn bộ mà chỉ hiển thị một đoạn của phần đầu. Nếu muốn đọc tiếp, các bạn phải bấm vào chữ Continue Reading hoặc bấm vào liên kết bài viết để xem nội dung đầy đủ. Đó chính là tác dụng của việc thu gọn nội dung bài viết!

Thu gọn nội dung bài viết sẽ làm cho blog của các bạn nhìn chuyên nghiệp hơn, tiết kiệm thời gian tải blog và giúp blog tải nhanh hơn. Hơn nữa, việc các bạn chỉ hiển thị một đoạn ngắn của bài viết sẽ khiến người đọc buộc phải bấm vào để xem bài viết nếu như muốn đọc tiếp, điều này sẽ làm tăng lượt xem của blog. Nếu như các bạn không thu gọn bài viết và để nội dung bài viết hiển thị toàn bộ trên trang chủ thì người đọc sẽ không cần phải bấm vào viết đó để xem mà có thể đọc hết trên trang chủ. Như vậy sẽ khiến cho lượt xem blog của các bạn bị giảm.

Trong phần này, mình chỉ hướng dẫn các bạn cách thu gọn nội dung bài viết trên trình soạn thảo Cổ điển (Phiên bản 1). Còn cách thu gọn trên trình soạn thảo Block-Editor thì mình đã viết trong series Hướng dẫn WordPress cơ bản cho người mới bắt đầu rồi, các bạn có thể bấm vào ĐÂY để đọc nhé

Để thu gọn nội dung bài viết, chúng ta sẽ dùng thẻ Read More. Đầu tiên, các bạn chuyển bài viết cần thu gọn nội dung sang giao diện HTML và đặt con trỏ chuột vào vị trí muốn thu gọn nội dung bài viết. Sau đó, các bạn bấm vào nút trên thanh công cụ soạn thảo. Sau khi các bạn bấm nút , đoạn code thu gọn nội dung <!--more--> sẽ hiện ra. Phần nội dung ở phía dưới đoạn code này sẽ không được hiển thị khi xuất hiện trên trên trang chủ hay các trang lưu trữ. Nếu muốn đọc những phần này, người đọc buộc phải bấm vào tiêu đề bài viết hoặc chữ Continue Reading (hoặc các chữ More, Đọc tiếp,… tuỳ thuộc vào từng blog) để đọc tiếp. Thật ra các bạn có thể bấm nút thu gọn bài viết này ngay ở giao diện trực quan (lúc này nó sẽ là nút ) nhưng để tránh phát sinh các lỗi linh tinh thì mình hướng dẫn các bạn chèn ở giao diện HTML luôn cho khoẻ

Tiếp theo là phần tuỳ biến cho thẻ Read More, thay vì các chữ More, Đọc tiếp,… các bạn hoàn toàn có thể chỉnh sửa nó thành từ khác nếu muốn. Cách thực hiện như sau:

Đầu tiên, nếu các bạn đang soạn thảo bài viết ở giao diện trực quan thì hãy chuyển nó sang giao diện HTML nhé

Tiếp theo, các bạn tìm đến đoạn code thu gọn nội dung có dạng <!--more--> và thêm một dấu cách (Space) vào ngay sau chữ more trong code. Sau khi thêm dấu cách, các bạn hãy nhập nội dung muốn thay đổi vào ngay sau dấu cách này. Ví dụ: Mình muốn sửa chữ More thành Bấm vào đây để đọc tiếp thì đoạn code hoàn chỉnh của mình sẽ như sau:

<!--more Bấm vào đây để đọc tiếp-->

Đối với những bạn sử dụng trình soạn thảo Block-Editor, các bạn chỉ cần xoá chữ READ MORE trên khối More rồi thay bằng nội dung muốn chỉnh sửa là xong nhé

Thao tác thu gọn nội dung bài viết sẽ được minh hoạ bằng video sau:

Video 4. Thu gọn nội dung bài viết

Lưu ý: Nếu thẻ Read More không hoạt động như ý muốn, các bạn hãy kiểm tra lại yếu tố Content Options trên theme (nếu có). Nếu mục Blog Display của yếu tố này đang ở tuỳ chọn Post Excerpt thì các bạn hãy chuyển sang tuỳ chọn Full Post nhé Ngoài ra, việc thẻ Read More hoạt động không đúng (không tuỳ biến được) còn có thể do theme các bạn đang sử dụng không hỗ trợ việc tuỳ biến thẻ Read More, cái này thì mình không chữa được, chỉ còn cách đổi sang theme khác có hỗ trợ tuỳ biến thẻ Read More thôi

Xong rồi Bài hướng dẫn này đến đây là kết thúc Chúc các bạn thành công

← Về trang chủ

↑ Về bảng nội dung ↑

VUI LÒNG KHÔNG SAO CHÉP BÀI VIẾT NÀY! CẢM ƠN CÁC BẠN!

Nguồn bài viết: https://wptutbyserahwang.wordpress.com/