3 cách thêm đường kẻ ngang trong WordPress

Giới thiệu về Đường Kẻ Ngang trong WordPress

Đường kẻ ngang, hay còn gọi là horizontal rule (<hr>), là một yếu tố HTML đơn giản nhưng hiệu quả, thường được sử dụng để chia tách trực quan các phần nội dung trên một trang web. Trong WordPress, bạn có thể sử dụng đường kẻ ngang để phân chia các đoạn văn bản, tách biệt các phần khác nhau của một bài viết hoặc trang, hoặc đơn giản là tạo ra một điểm nhấn trực quan. Việc sử dụng đường kẻ ngang một cách khéo léo có thể cải thiện đáng kể khả năng đọc và tính thẩm mỹ của trang web.

Bài viết này sẽ hướng dẫn bạn 3 cách đơn giản để thêm đường kẻ ngang vào trang web WordPress của bạn, từ cách sử dụng trình soạn thảo trực quan (Gutenberg) đến chỉnh sửa trực tiếp mã HTML và sử dụng plugin hỗ trợ.

Cách 1: Sử dụng Khối “Separator” trong Trình Soạn Thảo Gutenberg

Gutenberg là trình soạn thảo mặc định của WordPress từ phiên bản 5.0 trở đi. Nó cung cấp một giao diện trực quan, giúp bạn dễ dàng thêm và sắp xếp các thành phần nội dung khác nhau, bao gồm cả đường kẻ ngang. Cách sử dụng khối “Separator” rất đơn giản:

1. Mở bài viết hoặc trang mà bạn muốn thêm đường kẻ ngang trong trình soạn thảo Gutenberg.
2. Nhấp vào biểu tượng dấu cộng (+) để thêm một khối mới.
3. Tìm kiếm khối “Separator” bằng cách gõ “separator” vào ô tìm kiếm.
4. Chọn khối “Separator”. Một đường kẻ ngang sẽ xuất hiện ở vị trí bạn đã chọn.

Bạn có thể tùy chỉnh kiểu dáng của đường kẻ ngang này trong thanh công cụ bên phải. Các tùy chọn có thể bao gồm:

• Kiểu dáng: Bạn có thể chọn giữa kiểu dáng mặc định (đường kẻ đơn giản) và kiểu dáng “Wide Line” (đường kẻ rộng hơn).
• Màu sắc: Một số giao diện cho phép bạn thay đổi màu sắc của đường kẻ ngang.
• Chiều rộng: Trong một số trường hợp, bạn có thể điều chỉnh chiều rộng của đường kẻ ngang.

Đây là cách đơn giản và nhanh chóng nhất để thêm đường kẻ ngang, đặc biệt phù hợp với những người không quen thuộc với mã HTML.

Cách 2: Chèn Đường Kẻ Ngang bằng Mã HTML

Nếu bạn muốn kiểm soát nhiều hơn về kiểu dáng của đường kẻ ngang hoặc muốn thêm nó vào những vị trí mà khối “Separator” không cho phép, bạn có thể sử dụng mã HTML trực tiếp. Thẻ HTML để tạo đường kẻ ngang là <hr>.

1. Mở bài viết hoặc trang mà bạn muốn thêm đường kẻ ngang trong trình soạn thảo WordPress.
2. Chuyển sang chế độ soạn thảo “Code Editor” hoặc “HTML Editor”. Thường có một tab hoặc nút chuyển đổi ở góc trên bên phải của trình soạn thảo.
3. Tìm vị trí mà bạn muốn chèn đường kẻ ngang.
4. Thêm thẻ <hr> vào vị trí đó. Ví dụ:

<p>Đây là đoạn văn bản phía trên đường kẻ ngang.</p>
<hr>
<p>Đây là đoạn văn bản phía dưới đường kẻ ngang.</p>

Để tùy chỉnh kiểu dáng của đường kẻ ngang, bạn có thể sử dụng CSS. Ví dụ:

<hr style="border: 1px solid #ccc; width: 50%;">

Trong ví dụ trên, chúng ta đã sử dụng thuộc tính style để:

• Đặt độ dày của đường kẻ là 1 pixel (border: 1px).
• Đặt kiểu đường kẻ là liền nét (solid).
• Đặt màu của đường kẻ là màu xám nhạt (#ccc).
• Đặt chiều rộng của đường kẻ là 50% chiều rộng của vùng chứa (width: 50%).

Bạn có thể thêm các thuộc tính CSS khác để tùy chỉnh đường kẻ ngang theo ý muốn.

Cách 3: Sử dụng Plugin để Thêm Đường Kẻ Ngang Tùy Chỉnh

Nếu bạn muốn có nhiều tùy chọn tùy chỉnh hơn cho đường kẻ ngang hoặc muốn thêm đường kẻ ngang vào nhiều vị trí trên trang web một cách dễ dàng, bạn có thể sử dụng plugin WordPress. Có rất nhiều plugin miễn phí và trả phí có thể giúp bạn thực hiện việc này.

Dưới đây là một số plugin phổ biến:

• Horizontal Line – HR: Plugin đơn giản cho phép bạn chèn đường kẻ ngang bằng shortcode.
• Advanced Editor Tools (previously TinyMCE Advanced): Plugin này cung cấp các tùy chọn chỉnh sửa văn bản nâng cao, bao gồm khả năng tùy chỉnh đường kẻ ngang.
• Elementor (nếu bạn sử dụng Elementor Page Builder): Elementor có một widget “Divider” cho phép bạn tạo và tùy chỉnh đường kẻ ngang một cách dễ dàng.

Cách sử dụng plugin thường như sau:

1. Cài đặt và kích hoạt plugin bạn đã chọn.
2. Tìm kiếm các tùy chọn hoặc cài đặt của plugin trong bảng điều khiển WordPress.
3. Làm theo hướng dẫn của plugin để thêm và tùy chỉnh đường kẻ ngang. Thông thường, bạn sẽ sử dụng shortcode, widget hoặc các tùy chọn trong trình soạn thảo để chèn đường kẻ ngang.

Việc sử dụng plugin có thể giúp bạn tiết kiệm thời gian và công sức, đặc biệt nếu bạn cần tạo nhiều đường kẻ ngang tùy chỉnh trên trang web của mình.

Lời Khuyên và Lưu Ý Khi Sử Dụng Đường Kẻ Ngang

Mặc dù đường kẻ ngang là một yếu tố đơn giản, nhưng việc sử dụng chúng một cách hiệu quả có thể tạo ra sự khác biệt lớn. Dưới đây là một số lời khuyên và lưu ý:

• Sử dụng một cách tiết kiệm: Đừng lạm dụng đường kẻ ngang. Quá nhiều đường kẻ ngang có thể làm cho trang web của bạn trông rối rắm và khó đọc.
• Đảm bảo tính nhất quán: Sử dụng cùng một kiểu dáng đường kẻ ngang trên toàn bộ trang web của bạn để tạo ra một giao diện thống nhất.
• Xem xét mục đích: Sử dụng đường kẻ ngang một cách có ý thức để phân chia nội dung một cách rõ ràng và hiệu quả.
• Kiểm tra trên các thiết bị khác nhau: Đảm bảo rằng đường kẻ ngang của bạn hiển thị tốt trên cả máy tính để bàn và thiết bị di động.

Hy vọng rằng bài viết này đã cung cấp cho bạn những kiến thức cần thiết để thêm đường kẻ ngang vào trang web WordPress của bạn một cách dễ dàng và hiệu quả. Chúc bạn thành công!