Hướng dẫn cách chia cột trong WordPress chuẩn SEO [2025]

Bạn muốn bố cục bài viết trên WordPress trở nên rõ ràng, gọn gàng và chuyên nghiệp hơn? Việc chia cột chính là giải pháp tuyệt vời giúp bạn trình bày nội dung một cách linh hoạt, dễ nhìn và thu hút hơn. Trong bài viết này, Tino sẽ hướng dẫn chi tiết cách chia cột trong WordPress trên cả 2 trình soạn thảo Gutenberg và Classic.

Mục đích của việc chia cột trong WordPress

• Tăng khả năng đọc: Việc giới hạn độ dài dòng văn bản ở mức lý tưởng (45–75 ký tự) sẽ giúp mắt người đọc quét từ trên xuống dưới nhanh hơn, hạn chế tình trạng mỏi mắt hoặc bị lạc dòng khi xuống dòng.
• So sánh trực quan: Sắp xếp các nhóm thông tin tương đồng nằm cạnh nhau (như bảng giá, thông số kỹ thuật) hỗ trợ người đọc dễ dàng đối chiếu trực tiếp mà không cần phải cuộn trang hay lật lại trang trước.
• Phân cấp thông tin: Tạo cột còn giúp tách biệt rõ ràng vai trò của từng khu vực: nội dung chính (trọng tâm) chiếm diện tích lớn, trong khi nội dung phụ (menu, liên kết, quảng cáo) được gom gọn sang bên để tránh gây xao nhãng.
• Tối ưu hóa không gian: Tách nội dung thành các cột giúp tận dụng triệt để chiều ngang của khổ giấy hoặc màn hình rộng (desktop), lấp đầy các “khoảng chết” dư thừa hai bên lề, từ đó hiển thị được nhiều thông tin hữu ích hơn trong cùng một tầm nhìn.
• Tăng tính thẩm mỹ: Cột giúp phá vỡ sự nặng nề, đơn điệu của những khối văn bản dày đặc (“wall of text”), tạo ra các rãnh trắng ngăn cách giúp bố cục tổng thể trở nên thoáng đãng, có nhịp điệu và chuyên nghiệp hơn.

Hướng dẫn cách chia cột trong WordPress

Chia cột trên trình soạn thảo Block Editor (Gutenberg)

Tương tự như tạo bảng, Block Editor cũng cung cấp một khối Columns (Cột) chuyên dụng để chia nội dung thành nhiều cột một cách trực quan.

Các bước thực hiện:

Bước 1: Trong trình soạn thảo bài viết/trang, nhấp vào biểu tượng (+) và tìm kiếm “Columns” (Cột). Chọn khối Columns.

Bạn sẽ được yêu cầu chọn một biến thể (variation) cho bố cục cột, ví dụ: 50/50 (hai cột bằng nhau), 30/70, 70/30 (hai cột không bằng nhau), ba cột bằng nhau, … Bạn cũng có thể chọn số lượng cột tùy ý (từ 1 đến 6).

Bước 2: Sau khi chọn bố cục, các cột trống sẽ xuất hiện. Bên trong mỗi cột, bạn sẽ thấy biểu tượng (+). Nhấp vào đó để thêm bất kỳ khối nội dung nào bạn muốn vào cột đó (văn bản, hình ảnh, nút bấm, ….).

Bước 3: Chọn khối Columns (khối bao ngoài chứa các cột con). Thanh cài đặt bên phải sẽ hiển thị các tùy chọn:

Số lượng cột và tính năng Xếp chồng trên di động (Stack on mobile):

• Bạn có thể thay đổi số lượng cột sau khi đã tạo.
• Mặc định, các cột sẽ tự động xếp chồng lên nhau theo chiều dọc trên màn hình thiết bị di động để dễ đọc hơn. Bạn có thể tắt tùy chọn này nếu muốn giữ nguyên bố cục cột trên mọi kích thước màn hình (không khuyến khích).

Màu sắc (Color settings) và Kích thước (Dimensions):

• Đặt màu nền và màu chữ cho toàn bộ khối Cột.
• Điều chỉnh padding và margin cho khối Cột.

Tùy chỉnh từng cột riêng lẻ:

Bạn cũng có thể chọn từng khối Column (cột con) bên trong khối Columns để tùy chỉnh riêng cho cột đó, ví dụ như đặt chiều rộng cột (theo tỷ lệ phần trăm hoặc pixel), căn chỉnh nội dung theo chiều dọc, đặt màu nền riêng, …

Chia cột trên trình soạn thảo cổ điển (Classic Editor)

Trong Classic Editor, không có tính năng tích hợp sẵn để tạo cột trực quan như Block Editor. Bạn sẽ cần sử dụng mã HTML và CSS.

Cách 1: Sử dụng mã HTML (Dùng div và float)

Phương pháp này sử dụng các thẻ <div> và thuộc tính CSS float để định vị các cột. Bạn cần dán mã này vào tab Văn bản (Text) của trình soạn thảo.

Ví dụ chia thành 2 cột bằng nhau (lưu ý cần có khoảng cách giữa các cột):

<div style="width: 48%; float: left; margin-right: 4%;">

<!-- Nội dung cột 1 ở đây -->

<p>Đây là nội dung của cột thứ nhất.</p>

</div>

<div style="width: 48%; float: right;">

<!-- Nội dung cột 2 ở đây -->

<p>Đây là nội dung của cột thứ hai.</p>

</div>

<div style="clear: both;"></div> <!-- Thẻ này rất quan trọng để các nội dung sau không bị ảnh hưởng bởi float -->

Ví dụ chia thành 3 cột bằng nhau:

<div style="width: 30%; float: left; margin-right: 5%;">

<!-- Nội dung cột 1 -->

<p>Cột 1.</p>

</div>

<div style="width: 30%; float: left; margin-right: 5%;">

<!-- Nội dung cột 2 -->

<p>Cột 2.</p>

</div>

<div style="width: 30%; float: right;">

<!-- Nội dung cột 3 -->

<p>Cột 3.</p>

</div>

<div style="clear: both;"></div>

Lưu ý:

• Tổng giá trị width và margin-right (hoặc margin-left) của các cột không được vượt quá 100%.
• Thẻ <div style=”clear: both;”></div> là cần thiết để “dọn dẹp” hiệu ứng float, đảm bảo các phần tử phía sau không bị trôi lên cùng hàng với các cột.
• Cách này có thể không hiển thị tốt trên thiết bị di động và cần thêm CSS tùy chỉnh (media queries) để làm cho nó đáp ứng (responsive).

Cách 2: Sử dụng mã HTML (Dùng Bảng – Không khuyến khích)

Một số người dùng sử dụng bảng HTML để tạo bố cục cột. Mặc dù có thể thực hiện được, nhưng đây không phải là cách làm đúng chuẩn về ngữ nghĩa HTML và không được khuyến khích. Bảng nên được dùng để hiển thị dữ liệu dạng bảng, không phải để tạo bố cục.

<table style="width: 100%; border: 0;">

<tbody>

<tr>

<td style="width: 50%; vertical-align: top; padding-right: 10px;">

<!-- Nội dung cột 1 -->

</td>

<td style="width: 50%; vertical-align: top; padding-left: 10px;">

<!-- Nội dung cột 2 -->

</td>

</tr>

</tbody>

</table>

Cách 3: Sử dụng Column Shortcodes

Bước 1: Tìm và cài đặt plugin Column Shortcodes trong kho plugin WordPress.

Bước 2: Sau khi kích hoạt, bạn có thể tạo bài đăng mới hoặc chỉnh sửa bài đăng cũ với trình chỉnh sửa cổ điển. Tại đây, bạn chỉ cần nhấp vào nút ‘[ ]’ trên thanh công cụ.

Plugin sẽ hiển thị cho bạn danh sách các Shortcode cho cột bài đăng trên viết.

Bước 3: Bạn có thể chọn bất kỳ bố cục nào bạn muốn thêm vào bài viết. Ngoài ra còn có các tùy chọn để chỉnh sửa khoảng đệm cột.

Sau đó, bạn có thể nhập nội dung của mình vào giữa các Shortcode.

Bước 4: Tiếp theo, bạn có thể nhấp vào biểu tượng ‘[ ]’ một lần nữa để thêm Shortcode cho một cột khác.

Hãy thêm Shortcode ‘one half (last)’ để hiển thị hai cột cạnh nhau. Từ đây, bạn chỉ cần thêm nội dung của mình vào cột còn lại.

Kết luận

Như vậy, chỉ với vài thao tác đơn giản, bạn đã có thể chia cột trong WordPress để trình bày nội dung hấp dẫn và chuyên nghiệp hơn. Việc sử dụng cột không chỉ giúp cải thiện giao diện mà còn tăng khả năng đọc, giữ chân người dùng lâu hơn trên trang – yếu tố rất quan trọng trong SEO. Chúc bạn thành công!

Những câu hỏi thường gặp