Cách Vẽ Ô Trong WordPress: Hướng Dẫn Chi Tiết Từ Cơ Bản Đến Nâng Cao

Lời mở đầu

WordPress hiện là một trong những nền tảng quản lý nội dung (CMS) phổ biến nhất trên thế giới, không chỉ vì tính linh hoạt mà còn vì cộng đồng hỗ trợ mạnh mẽ. Khi xây dựng một website, việc tạo ra các “ô” (hay còn gọi là block, column, grid) giúp bố trí nội dung một cách trực quan, chuyên nghiệp và tối ưu trải nghiệm người dùng. Bài viết này sẽ hướng dẫn bạn cách vẽ ô trong WordPress một cách chi tiết, từ những kiến thức cơ bản dành cho người mới bắt đầu, tới các kỹ thuật nâng cao cho các nhà phát triển web.

Lưu ý: Bài viết được chia thành nhiều phần, mỗi phần tập trung vào một khía cạnh quan trọng. Đọc kỹ từng mục để nắm vững quy trình và áp dụng vào dự án thực tế của bạn.

1. Hiểu về “Ô” trong WordPress

1.1. Ô (Block) là gì?

Trong WordPress, “ô” (tiếng Anh: block) là một khối nội dung độc lập, cho phép bạn chèn, sắp xếp và tùy chỉnh các thành phần như đoạn văn, hình ảnh, video, bảng, hay thậm chí là mã HTML/CSS. Hệ thống khối (Block Editor) được giới thiệu lần đầu trong WordPress 5.0 (còn gọi là Gutenberg) và đã thay thế trình soạn thảo cổ điển (Classic Editor).

1.2. Các loại ô phổ biến

Loại ô	Mô tả	Khi nào dùng
Paragraph	Đoạn văn bản	Nội dung chính, mô tả
Image	Hình ảnh	Trình bày hình ảnh minh hoạ
Columns	Cột (đa cột)	Khi cần bố trí nội dung song song
Group	Nhóm các ô	Đóng gói nhiều ô thành một khối
Cover	Hình nền + nội dung	Header, banner
HTML Custom	Mã HTML tùy chỉnh	Khi cần tính năng đặc biệt
Reusable Block	Ô tái sử dụng	Các phần lặp lại trên nhiều trang

1.3. Lợi ích của việc sử dụng ô

• Tính linh hoạt: Dễ dàng kéo thả, thay đổi vị trí.
• Tối ưu SEO: Mỗi ô có thể chứa thẻ heading, meta dữ liệu riêng.
• Tái sử dụng: Tạo ô tái sử dụng (Reusable Block) để giảm công sức.
• Thân thiện với thiết bị di động: Các theme hiện đại tự động điều chỉnh layout.

2. Chuẩn bị môi trường làm việc

Có thể bạn quan tâm: Cách Vẽ Ô Trong Pdf: Hướng Dẫn Chi Tiết Từ Cơ Bản Đến Nâng Cao

2.1. Cài đặt WordPress

1. Mua domain và hosting (ví dụ: Namecheap, SiteGround, Bluehost).
2. Cài đặt WordPress: Sử dụng cài đặt một cú nhấp (One-Click Install) từ bảng điều khiển hosting.
3. Đăng nhập vào Dashboard: yourdomain.com/wp-admin.

2.2. Lựa chọn theme hỗ trợ block

• Twenty Twenty‑Three (theme mặc định mới nhất, tối ưu Gutenberg).
• Astra, GeneratePress, OceanWP: Nhẹ, tùy biến cao.
• Kadence, Blocksy: Tích hợp nhiều block mẫu sẵn.

Khuyến nghị: Đối với người mới, hãy bắt đầu với theme mặc định để tránh xung đột.

2.3. Cài đặt plugin hỗ trợ block

Plugin	Chức năng
Kadence Blocks	Thêm nhiều loại block (row, column, accordion, tabs).
Stackable – Gutenberg Blocks	Block thiết kế hiện đại, responsive.
Advanced Custom Fields (ACF)	Tạo block tùy chỉnh bằng PHP.
Elementor (đối với người muốn builder kéo thả mạnh mẽ)	Tạo layout phức tạp, hỗ trợ grid.
WPBakery Page Builder	Thay thế Gutenberg (nếu cần).

Cài đặt: Dashboard → Plugins → Add New → Tìm kiếm → Install → Activate.

3. Cách vẽ ô cơ bản bằng Block Editor

3.1. Tạo một trang mới

1. Vào Pages → Add New.
2. Đặt tiêu đề (ví dụ: “Trang Demo Ô”).
3. Bắt đầu sử dụng Block Editor.

3.2. Thêm block “Columns”

1. Nhấn dấu + (Add Block) ở vị trí muốn chèn.
2. Gõ “Columns” → Chọn block Columns.
3. Chọn bố cục: 2 cột, 3 cột, hoặc tùy chỉnh tỉ lệ (50/50, 33/67,…).

3.3. Đặt nội dung vào từng cột

• Cột 1: Thêm block Image, tải ảnh lên, đặt alt text.
• Cột 2: Thêm block Paragraph, nhập nội dung mô tả.
• Cột 3 (nếu có): Thêm block Button, cấu hình link và màu sắc.

3.4. Tùy chỉnh giao diện của ô

Có thể bạn quan tâm: Cách Vẽ Ô Trong Adobe Photoshop Cs6: Hướng Dẫn Chi Tiết Từ Cơ Bản Đến Nâng Cao

• Chọn block Columns → Bảng Block Settings bên phải.
• Layout → Width: Full width, Wide width, hoặc Align left/right.
• Spacing → Padding & Margin: Thêm khoảng cách trong/ngoài.
• Background Color: Chọn màu nền cho toàn bộ cột hoặc từng cột.
• Border: Thêm viền, radius.

3.5. Lưu và xem trước

• Click Preview → Chọn thiết bị (Desktop, Tablet, Mobile) để kiểm tra responsive.
• Nếu hài lòng, Publish.

Mẹo: Sử dụng Group Block để gộp nhiều block lại, giúp di chuyển toàn bộ phần nội dung một cách nhanh chóng.

4. Sử dụng các plugin tạo ô nâng cao

4.1. Kadence Blocks – Row Layout

1. Thêm block “Row Layout” (được cung cấp bởi Kadence).
2. Cấu hình Row Layout:
3. Columns: Thêm, xóa, sắp xếp.
4. Column Width: Tùy chỉnh tỉ lệ (ví dụ: 40% / 60%).
5. Vertical Alignment: Top, Middle, Bottom.
6. Thêm nội dung vào mỗi cột: Hình ảnh, heading, text, button, icon list.
7. Style Settings:
8. Background: Màu, gradient, ảnh nền.
9. Padding & Margin: Đặt giá trị pixel hoặc %.
10. Border: Độ dày, màu, radius.
11. Advanced Settings:
12. Custom CSS Class: Thêm class để tùy chỉnh bằng CSS.
13. Responsive Controls: Ẩn/hiện trên thiết bị cụ thể.

4.2. Stackable – Gutenberg Blocks

1. Thêm block “Columns” từ Stackable.
2. Chọn Layout: 2‑col, 3‑col, 4‑col, hay custom.
3. Style Options:
4. Overlay: Thêm overlay màu lên hình nền.
5. Hover Effects: Hiệu ứng khi di chuột.
6. Animation: Fade, slide, bounce.
7. Responsive Settings: Đặt số cột hiển thị trên mobile (thường chuyển thành 1 cột).

4.3. Tạo ô tái sử dụng (Reusable Block)

1. Sau khi tạo xong một block (hoặc nhóm block), chọn More options (⋮) → Add to Reusable blocks.
2. Đặt tên (ví dụ: “Banner Promo”).
3. Khi cần chèn lại, chọn Reusable → Chọn “Banner Promo”.
4. Cập nhật: Khi sửa nội dung của reusable block, mọi trang sử dụng sẽ tự động cập nhật.

5. Tùy chỉnh ô bằng CSS riêng

5.1. Thêm Custom CSS trong Customizer

1. Dashboard → Appearance → Customize → Additional CSS.
2. Viết CSS cho class hoặc id đã tạo.

/ Ví dụ: Tô nền và bo viền cho ô có class .my-custom-box /
.my-custom-box { background-color: #f9f9f9; border: 2px solid #e0e0e0; border-radius: 8px; padding: 20px; margin-bottom: 30px;
} / Responsive: Thu hẹp padding trên mobile /
@media (max-width: 768px) { .my-custom-box { padding: 15px; }
}

5.2. Sử dụng block “Custom HTML” để nhúng CSS nội tuyến

Có thể bạn quan tâm: Cách Vẽ Ô Trong Coreldraw: Hướng Dẫn Chi Tiết Từ Cơ Bản Đến Nâng Cao

<div class="custom-box" style="background:#fff;border:1px solid #ddd;padding:20px;"> <h3>Tiêu đề ô</h3> <p>Nội dung ô được viết ở đây.</p>
</div>

Lưu ý: Tránh lạm dụng CSS nội tuyến; nên dùng file CSS riêng để dễ bảo trì.

5.3. Tạo CSS cho Grid Layout bằng Flexbox

Nếu muốn tạo layout đa cột phức tạp, có thể dùng Flexbox:

.flex-grid { display: flex; flex-wrap: wrap; gap: 20px; / Khoảng cách giữa các ô /
}
.flex-grid > .grid-item { flex: 1 1 calc(33.333% - 20px); / 3 cột / background: #fafafa; padding: 20px; border: 1px solid #eee;
} / Mobile: 1 cột /
@media (max-width: 600px) { .flex-grid > .grid-item { flex-basis: 100%; }
}

Sau đó trong WordPress, dùng Custom HTML để tạo cấu trúc:

<div class="flex-grid"> <div class="grid-item">Nội dung 1</div> <div class="grid-item">Nội dung 2</div> <div class="grid-item">Nội dung 3</div>
</div>

6. Tạo ô bằng Advanced Custom Fields (ACF) – Dành cho nhà phát triển

6.1. Cài đặt ACF Pro

1. Mua bản Pro (để có tính năng Flexible Content & Repeater).
2. Cài đặt và kích hoạt.

6.2. Tạo Field Group “Ô Nội Dung”

• Location: Post Type = Page (hoặc Custom Post Type).
• Fields:
• Layout Type (Select): 1‑col, 2‑col, 3‑col.
• Column Content (Repeater):
  • Heading (Text)
  • Text (Wysiwyg Editor)
  • Image (Image)
  • Button Text (Text)
  • Button Link (URL)

6.3. Hiển thị trong template (PHP)

<?php if( have_rows('column_content') ): ?> <div class="acf-grid <?php echo get_field('layout_type'); ?>"> <?php while( have_rows('column_content') ): the_row(); ?> <div class="grid-item"> <?php if( $heading = get_sub_field('heading') ): ?> <h3><?php echo esc_html($heading); ?></h3> <?php endif; ?> <?php if( $image = get_sub_field('image') ): ?> <img src="<?php echo esc_url($image'url'); ?>" alt="<?php echo esc_attr($image'alt'); ?>"> <?php endif; ?> <?php if( $text = get_sub_field('text') ): ?> <div class="text"><?php echo $text; // WYSIWYG already escaped ?></div> <?php endif; ?> <?php if( $btn = get_sub_field('button_text') ): ?> <a href="<?php echo esc_url(get_sub_field('button_link')); ?>" class="btn"> <?php echo esc_html($btn); ?> </a> <?php endif; ?> </div> <?php endwhile; ?> </div>
<?php endif; ?>

6.4. CSS cho ACF Grid

.acf-grid { display: flex; flex-wrap: wrap; gap: 30px;
}
.acf-grid.one-col .grid-item { flex-basis: 100%; }
.acf-grid.two-col .grid-item { flex-basis: calc(50% - 30px); }
.acf-grid.three-col .grid-item { flex-basis: calc(33.333% - 30px); } @media (max-width: 768px) { .acf-grid .grid-item { flex-basis: 100%; }
}

Kết quả: Bạn có thể tạo ô nội dung tùy chỉnh cho từng trang mà không cần chỉnh sửa trực tiếp trong editor, rất thích hợp cho dự án lớn.

7. Tối ưu hoá ô cho tốc độ tải trang

Có thể bạn quan tâm: Cách Vẽ Ô Cho Powerpoint: Hướng Dẫn Chi Tiết Từ Cơ Bản Đến Nâng Cao

7.1. Hình ảnh

• Sử dụng định dạng WebP: Nén tốt hơn JPEG/PNG.
• Lazy Load: WordPress 5.5+ đã tích hợp sẵn, nhưng kiểm tra lại trong Settings → Media.
• Kích thước hợp lý: Đừng tải ảnh lớn hơn kích thước hiển thị.

7.2. CSS & JavaScript

• Combine & Minify: Sử dụng plugin như Autoptimize hoặc WP Rocket.
• Critical CSS: Đưa CSS quan trọng vào head để tránh render‑blocking.
• Defer JS: Đặt thuộc tính defer cho script không cần thiết ngay khi tải trang.

7.3. Caching

• Page Caching: WP Super Cache, W3 Total Cache.
• Object Caching: Redis hoặc Memcached (đối với hosting hỗ trợ).

7.4. Kiểm tra tốc độ

• Google PageSpeed Insights, GTmetrix, Pingdom.
• Đảm bảo LCP (Largest Contentful Paint) dưới 2.5s, CLS (Cumulative Layout Shift) < 0.1.

8. Kiểm tra tính tương thích và responsive

8.1. Kiểm tra trên các thiết bị

• Chrome DevTools → Toggle device toolbar.
• BrowserStack hoặc Sauce Labs: Kiểm tra trên iOS, Android, Windows, macOS.

8.2. Kiểm tra tính năng truy cập (Accessibility)

• Lighthouse → Audits → Accessibility.
• Đảm bảo:
• Mô tả alt cho hình ảnh.
• Độ tương phản màu đủ.
• Các nút có aria-label nếu cần.

8.3. Kiểm tra cross‑browser

• Chrome, Firefox, Safari, Edge.
• Kiểm tra phiên bản cũ (IE11 nếu cần hỗ trợ doanh nghiệp).

9. Thực hành: Tạo một “Ô Dịch Vụ” hoàn chỉnh

9.1. Mô tả yêu cầu

• 3 cột (dịch vụ A, B, C).
• Mỗi cột gồm: Icon, Tiêu đề, Mô tả ngắn, Nút “Xem chi tiết”.
• Nền màu nhẹ, hover effect làm nổi bật.

9.2. Các bước thực hiện (sử dụng Kadence Blocks)

1. Thêm block “Row Layout” → Chọn 3 cột, tỉ lệ 1/3 mỗi cột.
2. Cấu hình Row Layout:
3. Background: #f8f9fa.
4. Padding: 40px trên, 20px dưới.
5. Cột 1:
6. Thêm block “Icon” → Chọn icon “cog”.
7. Thêm block “Heading” → “Dịch vụ A”.
8. Thêm block “Paragraph” → Mô tả ngắn (khoảng 30‑40 từ).
9. Thêm block “Button” → Text “Xem chi tiết”, Link #service-a.
10. Style: Button màu #0073aa, hover #005177.
11. Lặp lại cho cột 2, 3 (icon khác, nội dung khác).
12. Thêm Custom CSS (để tạo hiệu ứng shadow khi hover):

.kadence-row .kadence-column { transition: transform .3s ease, box-shadow .3s ease;
}
.kadence-row .kadence-column:hover { transform: translateY(-5px); box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}

1. Kiểm tra responsive: Đảm bảo trên mobile mỗi cột chiếm 100% chiều rộng, khoảng cách đủ.

2. Lưu và Publish.

9.3. Kết quả

• Trang hiển thị 3 ô dịch vụ đẹp, đồng nhất, responsive, tối ưu SEO (heading H3, alt cho icon).

10. Các lỗi thường gặp và cách khắc phục

Lỗi	Nguyên nhân	Cách khắc phục
Ô không hiển thị đúng chiều rộng	CSS theme ghi đè, hoặc không có class alignfull	Thêm class alignfull hoặc alignwide vào block, hoặc sử dụng Custom CSS để ghi đè.
Hình ảnh bị vỡ	Kích thước ảnh quá lớn/nhỏ, hoặc không có srcset	Tối ưu lại ảnh, bật tính năng “Responsive Images” trong Settings → Media.
Nút không hoạt động trên mobile	Z‑index hoặc overlay phủ lên	Kiểm tra CSS, bỏ pointer-events:none nếu có.
Block không cho phép thêm CSS	Theme hoặc plugin chặn editor	Vô hiệu hoá plugin “Disable Gutenberg”, hoặc chuyển sang “Code Editor”.
Reusable Block không cập nhật	Cache plugin	Xóa cache, hoặc tắt cache tạm thời.

11. Tổng kết

Việc vẽ ô trong WordPress không chỉ giúp bạn tạo ra những bố cục trang web hấp dẫn mà còn nâng cao trải nghiệm người dùng và tối ưu SEO. Từ việc sử dụng Block Editor cơ bản, đến các plugin mạnh mẽ như Kadence Blocks, Stackable, cho tới việc lập trình tùy chỉnh bằng ACF và CSS, bạn có thể đáp ứng mọi nhu cầu thiết kế, dù là đơn giản hay phức tạp.

Những điểm quan trọng cần ghi nhớ:

1. Lựa chọn theme và plugin phù hợp để tránh xung đột.
2. Sử dụng reusable blocks để tiết kiệm thời gian và duy trì nhất quán.
3. Tối ưu hình ảnh và tài nguyên để tăng tốc độ tải trang.
4. Kiểm tra responsive và accessibility để đảm bảo mọi người dùng đều có trải nghiệm tốt.
5. Luôn sao lưu trước khi thực hiện thay đổi lớn (có thể dùng plugin UpdraftPlus).

Hy vọng bài viết đã cung cấp cho bạn một hướng dẫn toàn diện, chi tiết và thực tiễn về cách vẽ ô trong WordPress. Hãy bắt tay vào thực hành, tùy chỉnh và tạo nên những trang web đẹp mắt, chuyên nghiệp ngay hôm nay!

Chúc bạn thành công và luôn sáng tạo trong hành trình xây dựng website WordPress của mình!