Chia cột và tạo bảng trên WordPress Xin chào  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.Các code có trong bài hướng dẫn này được dán (paste) vào giao diện HTML của trình soạn thảo văn bản Cổ điển, không phải dán vào giao diện trực quan (Visual). Nếu các bạn không biết hoặc không hiểu giao diện HTML và giao diện trực quan (Visual) là gì, hãy bấm vào ĐÂY để đọc. 3.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ạ. 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é 5.Một số hình ảnh trong bài viết có chiều 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 940px. 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.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 ở 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 nội dung chi tiết nhé 1. Chia cột trên WordPress Trong phần này, mình sẽ hướng dẫn các bạn cách chia cột trên trình soạn thảo văn bản Cổ điển (Phiên bản 1) và trình soạn thảo văn bản Block-Editor. Nếu các bạn đọc hướng dẫn bằng lời (hoặc kèm theo hình ảnh) mà vẫn chưa hiểu thì cuối mỗi phần sẽ có video minh hoạ để các bạn dễ hình dung hơn 1.1. Chia cột trên trình soạn thảo văn bản Cổ điển (Phiên bản 1) Mình nhớ từng đọc ở đâu đó (hình như là trang hỗ trợ của WordPress) viết rằng không nên chia cột bằng cách dùng code tạo bảng thì phải • Để chia nội dung bài viết thành 2 cột, các bạn hãy dán code sau đây vào vị trí muốn chia cột: <div style="width: 40%; padding: 0 10px 0 0; float: left;">Nội dung cột 1</div> <div style="width: 40%; padding: 0 10px 0 0; float: right;">Nội dung cột 2</div> <div style="clear: both;"></div> • Để chia nội dung bài viết thành 3 cột, các bạn hãy dán code sau đây vào vị trí muốn chia cột: <div style="width: 33.3%; padding: 0 10px 0 0; float: left;">Nội dung cột 1</div> <div style="width: 33.3%; padding: 0 10px 0 0; float: left;">Nội dung cột 2</div> <div style="width: 33.3%; padding: 0 10px 0 0; float: right;">Nội dung cột 3</div> <div style="clear: both;"></div> Trên đây là 2 code chia cột mình lấy từ bài trên trang hỗ trợ của WordPress. Trong các code này, độ rộng của các cột được tính theo đơn vị phần trăm (%). Nếu muốn thay đổi độ rộng của các cột trong code mẫu, các bạn hãy sửa lại giá trị của thuộc tính width trong code. Ví dụ, ở code chia 2 cột, nếu mình sửa độ rộng của cột thứ nhất thành 30% thì code của mình sẽ như sau: <div style="width: 30%; padding: 0 10px 0 0; float: left;">Nội dung cột 1</div> <div style="width: 40%; padding: 0 10px 0 0; float: right;">Nội dung cột 2</div> <div style="clear: both;"></div> 🍇 Kết quả: Nội dung cột 1 Nội dung cột 2 Lưu ý: Các code chia cột dưới đây được mình mặc định với phông chữ Arial, cỡ chữ 16px, màu chữ đen và căn lề hai bên. Nếu các bạn muốn thay đổi các thuộc tính này, hãy đọc bài HTML và một số code HTML cơ bản cho blog WordPress để biết nhé 🍇 Code chia 2 cột 🍇 Bấm vào đây để hiển thị code <div style="font-family: Arial; font-size: 16px; color: black; text-align: justify; line-height: 1.5; word-break: break-word;" |
