Cách dễ dàng thêm Bullet Points và Numbered Lists trong WordPress

Bạn có muốn thêm bullet points và numbered lists trong WordPress không? Thêm danh sách vào nội dung giúp cải thiện khả năng đọc của trang web. Nó cũng là một cách tuyệt vời để chia sẻ hướng dẫn từng bước hoặc dữ liệu phức tạp với khách truy cập. Trong bài viết này, Vietnix sẽ hướng dẫn bạn cách dễ dàng thêm bullet points và numbered lists trong WordPress.

Tại sao nên thêm bullet points và numbered lists trong WordPress?

Thay vì hiển thị một khối văn bản dài, Vietnix tin rằng nên chia nội dung thành các phần dễ quét. Có nhiều cách để làm cho trang của bạn dễ đọc hơn, bao gồm tạo bảng, sử dụng tiêu đề phụ, thêm video và tạo danh sách.

Một danh sách có thể giúp khách truy cập hiểu được nội dung của bạn chỉ với một cái nhìn, ngay cả khi bạn chia sẻ thông tin phức tạp hoặc nhiều dữ liệu. Điều này có thể cải thiện trải nghiệm người dùng và giữ khách truy cập trên trang web của bạn lâu hơn.

Chúng cũng rất lý tưởng để tạo danh sách công việc hoặc chia sẻ hướng dẫn từng bước với khách truy cập của bạn. Ví dụ, bạn có thể biến một công thức nấu ăn thành numbered list trên blog về đồ ăn.

Với những điều đó, hãy xem cách bạn có thể thêm bullet points và numbered lists trong WordPress. Chỉ cần sử dụng các liên kết nhanh dưới đây để điều hướng trực tiếp đến phương pháp bạn muốn sử dụng.

Phương pháp 1. Sử dụng khối danh sách tích hợp trong WordPress (Dễ dàng)

Cách dễ nhất để thêm bullet points và numbered lists trong WordPress là sử dụng List block tích hợp và trình chỉnh sửa khối WordPress (WordPress block editor).

Điều này cho phép bạn tạo danh sách đơn giản mà không cần cài đặt plugin WordPress riêng biệt, tuy nhiên block mặc định chỉ có một số tùy chọn tùy chỉnh.

Nếu bạn muốn điều chỉnh từng phần của danh sách với biểu tượng tùy chỉnh, bố cục ngang, màu sắc khác nhau và nhiều hơn nữa, thì Vietnix khuyến nghị sử dụng một trong các phương pháp khác trong bài viết này.

Để bắt đầu, chỉ cần mở bài viết hoặc trang mà bạn muốn thêm danh sách. Sau đó, bạn có thể chọn tạo bullet points và numbered lists.

Cách tạo danh sách bullet point trong WordPress

Để tạo danh sách bullet point, nhấp vào biểu tượng “+” để thêm khối mới.

Trong hộp thoại xuất hiện, nhập “List”.

Khi block nằm bên phải hiện lên, nhấp vào để thêm vào trang.

Điều này tạo ra mục đầu tiên trong danh sách bullet point. Chỉ cần nhập văn bản bạn muốn sử dụng cho mục đầu tiên của danh sách.

Sau khi hoàn thành, nhấn phím “Enter” trên bàn phím để chuyển đến dòng tiếp theo. WordPress sẽ tự động tạo ra mục bullet point thứ hai.

Bạn có thể tiếp tục và nhập văn bản bạn muốn sử dụng cho mục bullet point thứ hai. Chỉ cần lặp lại các bước này để thêm nhiều mục vào danh sách.

Nếu bạn muốn tạo danh sách lồng nhau, nhấp vào nút “Indent”. Điều này di chuyển con trỏ một bước sang phải, sẵn sàng để bạn nhập văn bản được lùi vào.

Bạn có thể nhấp vào nút “Indent” một lần nữa để tạo hai cấp bullet point lồng nhau.

Như bạn có thể thấy trong hình ảnh sau, mỗi cấp sử dụng một biểu tượng khác nhau.

Để giảm lùi, nhấp vào nút “Outdent”. Điều này di chuyển con trỏ một bước sang trái, sẵn sàng để bạn bắt đầu nhập.

Bằng cách nhấn các nút “Indent” và “Outdent”, bạn có thể tạo danh sách lồng nhau với nhiều cấp độ khác nhau.

Mặc định, WordPress sử dụng kích thước phông chữ “Medium”, nhưng bạn có thể chuyển đổi giữa nhỏ, lớn và rất lớn bằng cách sử dụng các cài đặt “Typography” trong các tùy chọn khối bên phải.

Bạn cũng có thể thêm liên kết hoặc sử dụng các tùy chọn định dạng văn bản tiêu chuẩn, chẳng hạn như in đậm và nghiêng.

Cách tạo Numbered List trong WordPress

Để tạo numbered list trong WordPress, chỉ cần nhấn phím “1” trên bàn phím, theo sau là dấu chấm (.) hoặc dấu chấm phẩy (,).

WordPress sẽ tự động chuyển đổi văn bản này thành mục đầu tiên trong numbered list.

Bây giờ bạn có thể nhập mục đầu tiên trong numbered list.

Sau đó, chỉ cần nhấn phím “Enter” trên bàn phím và WordPress sẽ tự động tạo ra các numbered point tiếp theo.

Tương tự như danh sách bullet point, bạn có thể tạo danh sách lồng nhau bằng cách nhấp vào các nút “Indent” và “Outdent”.

Điều này tạo ra một mục bullet point lồng vào numbered bullet point.

Khác với danh sách bullet point, bạn chỉ có thể sử dụng một cấp lùi.

Khi bạn hài lòng với cách danh sách hiển thị, chỉ cần nhấp vào nút “Updated” hoặc “Published” để xuất bản danh sách trên trang web WordPress của bạn.

Phương pháp 2. Sử dụng plugin Super List Block WordPress (Tạo danh sách đa phương tiện)

Khối danh sách có sẵn là hoàn hảo để tạo danh sách dựa trên văn bản, nhưng đôi khi bạn có thể muốn bao gồm nội dung khác. Ví dụ, bạn có thể muốn tạo bảng giá có hình ảnh, văn bản và nút gọi hành động.

Cách đơn giản nhất để làm điều này là sử dụng plugin Super List Block. Plugin miễn phí này thêm một block mới cho phép bạn sử dụng bất kỳ block WordPress nào trong danh sách của mình.

Bạn còn có thể tạo danh sách đa phương tiện bằng cách thêm nhiều khối vào một mục danh sách duy nhất. Ở hình ảnh dưới đây, Vietnix sử dụng một khối đoạn văn và khối ảnh trong mỗi mục danh sách.

Super List Block cho phép bạn chuyển đổi giữa kiểu danh sách dọc và ngang, và tạo danh sách “no marker” không có biểu tượng bullet point hoặc số.

Đầu tiên, bạn cần cài đặt và kích hoạt plugin Super List Block. Nếu cần trợ giúp, vui lòng xem hướng dẫn cho người mới bắt đầu của Vietnix về cách cài đặt plugin WordPress.

Sau đó, truy cập vào trang hoặc bài viết mà bạn muốn thêm danh sách. Bạn sau đó có thể nhấp vào biểu tượng “+” và bắt đầu gõ “Super List”.

Khi khối phù hợp xuất hiện, hãy nhấp vào nó.

Điều này thêm một khối mới với hai mục danh sách mặc định.

Để bắt đầu, bạn có thể chuyển đổi giữa giao diện dạng ngang và dọc bằng cách sử dụng các mũi tên trong thanh công cụ và trong menu bên trái.

Bạn cũng có thể chọn giữa numbered list hoặc danh sách bullet point bằng cách sử dụng các biểu tượng dưới “Change List Style”.

Tùy chọn khác là “No Marker”, là kiểu danh sách độc đáo được cung cấp bởi plugin này.

Khi bạn đã hài lòng với cách cấu hình danh sách, bạn đã sẵn sàng tạo mục đầu tiên.

Chỉ cần nhấp vào nút “+” ở góc của khối Super List và chọn khối đầu tiên bạn muốn thêm. Super List tương thích với tất cả các khối mặc định của WordPress, vì vậy bạn có thể thêm ảnh, tiêu đề hoặc bất kỳ block nào khác mà bạn muốn.

Sau đó, bạn có thể tạo kiểu cho block như thông thường. Ví dụ, bạn có thể tải lên một hình ảnh, thêm liên kết tải về hoặc nhập một số văn bản.

Để thêm một block khác vào mục danh sách bullet point, chỉ cần nhấn phím “Enter” trên bàn phím. Điều này thêm một dòng “Type / to choose a block” mới phía dưới khối đầu tiên.

Bây giờ, bạn có thể nhấp vào biểu tượng “+” bên trong mục danh sách và thêm một block khác theo cùng quy trình đã mô tả ở trên.

Khi bạn hài lòng với cách cấu hình mục danh sách đầu tiên, bạn có thể cấu hình mục mặc định thứ hai bằng cách làm theo các bước tương tự.

Để thêm nhiều bullet point, bạn cần chọn một mục danh sách toàn bộ. Điều này có thể hơi khó khăn, vì bạn cần chọn toàn bộ mục đó, chứ không phải các khối riêng lẻ trong mục đó.

Khi bạn thấy biểu tượng “+” trong thanh công cụ, tức là bạn đã chọn đúng mục. Sau khi hoàn thành, hãy nhấp vào nút “+”.

Điều này thêm một mục mới và trống vào danh sách.

Chỉ cần lặp lại các bước này để thêm nhiều bullet point và khối khác.

Khi bạn hài lòng với cách danh sách hiển thị, bạn có thể nhấp vào nút “Update”hoặc “Publish” để đưa nó lên trang web hoặc blog WordPress của bạn.

Phương pháp 3. Sử dụng plugin Page Builder (Tốt nhất cho trang đích)

Nếu bạn muốn tạo danh sách đẹp với phong cách tùy chỉnh, thì bạn có thể sử dụng SeedProd.

Tiện ích xây dựng trang kéo và thả tiên tiến này cho phép bạn tạo các trang được thiết kế chuyên nghiệp bằng cách sử dụng trình chỉnh sửa kéo và thả đơn giản. Nó cũng đi kèm với một khối danh sách sẵn có cho phép bạn điều chỉnh từng phần của thiết kế danh sách, bao gồm thay đổi khoảng cách giữa các mục riêng lẻ, thay thế các bullet point tiêu chuẩn bằng các biểu tượng tùy chỉnh và nhiều hơn nữa.

SeedProd giúp bạn dễ dàng thiết kế các trang độc lập có thiết kế riêng biệt, vì vậy đây cũng là một lựa chọn tuyệt vời nếu bạn muốn thêm danh sách vào trang chủ tùy chỉnh hoặc trang đích.

Điều đầu tiên bạn cần làm là cài đặt và kích hoạt SeedProd. Để biết thêm chi tiết, xem hướng dẫn từng bước của Vietnix về cách cài đặt một tiện ích WordPress.

Sau khi kích hoạt, bạn cần nhập khóa cấp phép của mình.

Bạn có thể tìm thông tin này trong tài khoản của mình trên trang web SeedProd. Sau khi thêm khóa cấp phép, chỉ cần nhấp vào “Verify Key”.

Sau đó, truy cập vào SeedProd > Trang đích và nhấp vào “Add New Landing Page”.

Trên màn hình tiếp theo, bạn sẽ được yêu cầu chọn một mẫu.

SeedProd đi kèm với hơn 180 mẫu đẹp được tổ chức thành các danh mục khác nhau như mẫu trang 404 và các trang “thank you” tùy chỉnh của WooCommerce.

Chỉ cần nhấp vào bất kỳ tab nào để xem các mẫu khác nhau trong danh mục đó.

Khi bạn tìm thấy một mẫu mà bạn muốn sử dụng, chỉ cần di chuột qua nó và sau đó nhấp vào biểu tượng đánh dấu kiểm.

Vietnix đang sử dụng mẫu “Explosive Growth Webinar” trong tất cả các hình ảnh của Vietnix, nhưng bạn có thể sử dụng bất kỳ thiết kế nào bạn muốn.

Tiếp theo, bạn cần đặt tiêu đề cho trang.

SeedProd sẽ tự động tạo URL dựa trên tiêu đề trang, nhưng bạn có thể thay đổi thành bất cứ điều gì bạn muốn. Ví dụ, thêm từ khóa liên quan vào URL thường cải thiện SEO của WordPress và giúp trang xuất hiện trong kết quả tìm kiếm liên quan.

Để tìm hiểu thêm, vui lòng xem hướng dẫn của Vietnix về cách nghiên cứu từ khóa cho blog WordPress của bạn.

Khi bạn hài lòng với tiêu đề và URL, nhấp vào “Save and Start Editing the Page”.

Điều này sẽ tải trình chỉnh sửa trang kéo và thả SeedProd. Bên phải, bạn sẽ thấy một bản xem trước trực tiếp của thiết kế trang, với một số cài đặt bên trái

SeedProd đi kèm với rất nhiều khối mà bạn có thể thêm vào thiết kế của mình, bao gồm các khối cho phép bạn thêm nút chia sẻ mạng xã hội, video, biểu mẫu liên hệ và nhiều hơn nữa. Để biết thêm thông tin, vui lòng xem hướng dẫn của Vietnix về cách tạo một trang tùy chỉnh trong WordPress.

Để thêm một danh sách vào thiết kế của bạn, tìm block “List” và kéo nó vào trang.

Điều này thêm một danh sách dọc vào trang của bạn với mục “Item 1” mặc định.

Nếu bạn muốn tạo một danh sách ngang thay vì đứng, sau đó nhấp vào tab “Advanced” và sau đó chọn nút “Horizontal”.

Bạn đã sẵn sàng để bắt đầu xây dựng danh sách của mình bằng cách chọn tab “Content”.

Để thay thế văn bản mặc định bằng thông điệp của bạn, nhấp vào “Item 1” trong menu bên trái.

Bạn bây giờ có thể gõ mục danh sách của mình vào trình soạn thảo văn bản nhỏ hiển thị.

Ở đây, bạn cũng có thể áp dụng bất kỳ định dạng nào bạn muốn sử dụng, chẳng hạn như in đậm hoặc in nghiêng.

Mặc định, SeedProd sử dụng một dấu kiểm cho mỗi bullet point, nhưng nó có một Icon Library tích hợp, bao gồm 1400 biểu tượng Font Awesome mà bạn có thể sử dụng thay thế.

Để thay thế dấu kiểm, chỉ cần di chuột qua nó và sau đó nhấp vào “Icon Library” khi nó xuất hiện.

Điều này mở ra một cửa sổ pop-up nơi bạn có thể chọn biểu tượng bạn muốn sử dụng thay cho nó.

Bạn có thể sử dụng các biểu tượng khác nhau cho từng bullet point riêng lẻ trong danh sách, vì vậy đây là một cách tuyệt vời để tạo danh sách hấp dẫn và thu hút sự chú ý.

Để tạo thêm bullet point, chỉ cần nhấp vào nút “Add New Item”.

Bây giờ bạn có thể thêm văn bản và thay đổi biểu tượng mặc định bằng cách làm theo cùng quy trình được mô tả ở trên.

Sau khi thêm tất cả các mục vào danh sách của bạn, bạn có thể thay đổi kích thước và căn chỉnh chữ bằng cách sử dụng các cài đặt trong menu bên trái.

Bạn cũng có thể tăng hoặc giảm khoảng cách giữa các mục danh sách bằng cách sử dụng thanh trượt “Space Between”.

Sau đó, bạn có thể thay đổi màu sắc của các biểu tượng trong danh sách. Ngay cả khi bạn sử dụng các biểu tượng khác nhau, SeedProd sẽ áp dụng cùng một màu cho mỗi mục, vì vậy thiết kế sẽ luôn trông nhất quán.

Để thay đổi điều này, nhấp vào khu vực “Icon Color” và sau đó chọn màu mới từ cửa sổ pop-up xuất hiện.

Sau khi hoàn thành điều đó, bạn có thể nhấp vào “Advanced” và xem một số cài đặt bổ sung. Chúng ta đã thấy cách chuyển đổi giữa giao diện danh sách dọc và ngang, nhưng bạn cũng có thể thay đổi màu chữ và phông chữ.

Để thực sự làm cho danh sách của bạn nổi bật, bạn có thể thêm hiệu ứng đổ bóng hoặc hiệu ứng CSS.

Hầu hết các cài đặt trong tab “Advanced” khá dễ hiểu nên đáng xem qua chúng để xem bạn có thể tạo ra những hiệu ứng khác nhau.

Khi hoàn thành, bạn có thể tiếp tục làm việc trên thiết kế trang của mình bằng cách thêm các khối khác và sau đó tùy chỉnh chúng bằng cách sử dụng các cài đặt trong menu bên trái.

Khi bạn hài lòng với cách trang trí trang, nhấp vào menu thả xuống trên nút “Save” và chọn “Publish”.

Bạn có thể truy cập trang này để xem danh sách trực tiếp trên cửa hàng trực tuyến hoặc trang web của bạn.

Phương pháp 4. Thêm bullet point đầu dòng và numbered list bằng mã code (Nâng cao)

Bạn cũng có thể tạo danh sách bằng cách sử dụng WordPress code editor tích hợp và HTML.

Phương pháp này phức tạp hơn nên không phù hợp cho người mới bắt đầu. Tuy nhiên, nó cho phép bạn sử dụng nhiều kiểu và định dạng hơn trong khối danh sách tích hợp. Ví dụ, bạn có thể nhanh chóng và dễ dàng thêm kiểu tiêu đề cho các mục danh sách bằng cách sử dụng các thẻ như h1 và h2.

Để biết thêm về chủ đề này, xem hướng dẫn của Vietnix về cách chỉnh sửa HTML trong code editor WordPress.

Để bắt đầu, mở trang hoặc bài viết mà bạn muốn hiển thị danh sách. Sau đó, nhấp vào biểu tượng ba chấm ở góc trên bên phải và chọn “Code editor”.

Các bước tiếp theo sẽ khác nhau tùy thuộc vào bạn muốn thêm danh sách bullet point hay numbered list.

Cách tạo danh sách bullet point bằng code

Để tạo danh sách bullet point, hãy bắt đầu bằng cách nhập thông tin sau:

<!-- wp:list -->
<ul>

ul là viết tắt của “unordered list”, có nghĩa là danh sách không có bất kỳ số nào và wp:list cho WordPress biết rằng bạn đang tạo khối Danh sách theo cách thủ công.

Tiếp theo, nhấn phím “Return” để chuyển sang một dòng mới và tạo mục danh sách đầu tiên của bạn:

<!-- wp:list -->
<ul>
<!-- wp:list-item -->
<li>Red</li>
<!-- /wp:list-item -->

Ở đây, li là viết tắt của “list item” và Vietnix đang kết thúc dòng bằng /li.

Bạn có thể lặp lại quy trình này để tạo thêm các mục danh sách. Ví dụ:

<!-- wp:list -->
<ul>
<!-- wp:list-item -->
<li>Red</li>
<!-- /wp:list-item -->
 
<!-- wp:list-item -->
<li>Orange</li>
<!-- /wp:list-item -->
 
<!-- wp:list-item -->
<li>Green</li>
<!-- /wp:list-item -->

Khi bạn hoàn thành, hãy đóng khối mã bằng cờ “unordered list” khác:

</ul>
<!-- /wp:list -->

Điều này mang lại cho Vietnix mã danh sách sau:

<!-- wp:list -->
<ul>
<!-- wp:list-item -->
<li>Red</li>
<!-- /wp:list-item -->
 
<!-- wp:list-item -->
<li>Orange</li>
<!-- /wp:list-item -->
 
<!-- wp:list-item -->
<li>Green</li>
<!-- /wp:list-item -->
</ul>
<!-- /wp:list -->

Như bạn có thể thấy trong hình ảnh sau đây, điều này tạo ra một danh sách rất đơn giản, nhưng bạn có thể tùy chỉnh nó bằng cách thêm HTML khác, chẳng hạn như thẻ tiêu đề.

Cách tạo danh sách numbered list bằng code

Để tạo một danh sách numbered list, chỉ cần gõ như sau:

<!-- wp:list {"ordered":true} -->

Sau đó, bạn có thể nhập ol viết tắt của danh sách có thứ tự:

<!-- wp:list {"ordered":true} -->
<ol>

Sau đó, thêm từng mục danh sách bằng cách thực hiện theo quy trình tương tự được mô tả ở trên:

<!-- wp:list {"ordered":true} -->
<ol>
<!-- wp:list-item -->
<li>Red</li>
<!-- /wp:list-item -->

Cuối cùng, đóng danh sách đã sắp xếp bằng thẻ /ol và wp:list.

<!-- wp:list {"ordered":true} -->
<ol>
<!-- wp:list-item -->
<li>Red</li>
<!-- /wp:list-item -->
 
<!-- wp:list-item -->
<li>Orange</li>
<!-- /wp:list-item -->
 
<!-- wp:list-item -->
<li>Green </li>
<!-- /wp:list-item -->
</ol>
<!-- /wp:list -->

Nếu bạn đang chưa biết bắt đầu tối ưu website của mình từ đâu thì đừng lo lắng quá! Bạn có thể đăng ký sử dụng dịch vụ Hosting WordPress của Vietnix để được hỗ trợ từ đội ngũ chuyên gia. Khi đăng ký bất kỳ gói WordPress Hosting nào, đội ngũ chuyên gia Vietnix sẽ tư vấn về cách tối ưu tốc độ, hiệu suất cũng như giải quyết các vấn đề mà website WordPress của bạn đang gặp phải.

Lời kết

Vietnix hy vọng hướng dẫn này đã giúp bạn tìm hiểu cách thêm bullet point và numbered list trong WordPress. Bạn cũng có thể muốn tìm hiểu cách kiếm tiền từ blog trực tuyến hoặc xem lựa chọn chuyên gia của Vietnix về plugin biểu mẫu liên hệ WordPress tốt nhất.