2026年11月12日

Cách thiết lập theme Blocksy cho WordPress: Companion, header, blog

Giao diện & thiết kế

Đây là phiên bản được bản địa hóa từ bài viết gốc tiếng Nhật. Đọc bài gốc tiếng Nhật

Blocksy là theme WordPress miễn phí với nhiều tính năng. Phần lớn thiết lập được thực hiện trong "Giao diện" (Appearance) → "Tùy biến" (Customize, tức Customizer) vừa làm vừa xem trước, còn header và footer được dựng bằng kéo thả. Bài viết này giải thích theo thứ tự thiết lập: cài đặt theme và plugin bổ trợ "Blocksy Companion", màu sắc và phông chữ cần quyết định đầu tiên, cách dựng header, thiết lập hiển thị danh sách blog và trang bài viết, cho đến việc chuẩn bị child theme.

Nắm cấu trúc của Blocksy

Blocksy gồm 3 phần sau.

Blocksy (bản thân theme): lấy miễn phí từ WordPress.org. Có thiết lập thiết kế trong Customizer và trình dựng header, footer
Blocksy Companion (plugin miễn phí): đảm nhận việc nạp site khởi đầu (dữ liệu demo) và bổ sung các tiện ích mở rộng
Blocksy Pro (trả phí): bổ sung thêm các thành phần header, hiển thị có điều kiện, chức năng bố cục chi tiết hơn, v.v.

Hợp lý nhất là bắt đầu bằng sự kết hợp của theme và Companion, rồi xem xét Pro khi nhận ra các tính năng cần thiết không đủ trong phạm vi miễn phí (cách phân chia tính năng và giá có thể thay đổi, nên hãy kiểm tra trên trang chính thức tại thời điểm tháng 10/2026).

Ngoài ra, Blocksy được làm thiên về classic theme và cũng hỗ trợ block editor. Nơi thao tác khác với các block theme dựng toàn bộ bằng Site Editor ("Giao diện" → "Trình chỉnh sửa" / Editor), nên hãy nhớ "thiết kế tổng thể làm trong Customizer, nội dung bài viết và trang làm trong block editor" để khỏi bối rối.

Cài đặt và cài Companion

Vào "Giao diện" (Appearance) → mục "Giao diện" (Themes) → "Thêm mới" (Add New Theme), tìm "Blocksy", cài đặt rồi kích hoạt
Từ hướng dẫn hiện ra sau khi kích hoạt, hoặc từ bảng điều khiển Blocksy được thêm vào trang quản trị, hãy cài đặt và kích hoạt Blocksy Companion

Với WP-CLI, có thể cài như sau.

wp theme install blocksy --activate
wp plugin install blocksy-companion --activate

Nếu chuyển theme của một site đang có sẵn, hãy sao lưu toàn bộ site trước. Khi đổi theme, các shortcode, widget và vị trí hiển thị menu riêng của theme trước có thể không được giữ lại.

Có nên dùng site khởi đầu không

Khi cài Companion, bạn có thể nạp "site khởi đầu" (starter site) từ bảng điều khiển Blocksy. Các trang đã thiết kế sẵn, thiết lập Customizer và các plugin cần thiết được đưa vào cùng lúc, nên với site mới bạn có thể nhanh chóng hình dung bản hoàn chỉnh.

Tuy nhiên, với site đã có bài viết, tốt nhất là tránh nạp. Các trang tĩnh, hình ảnh và menu demo sẽ được thêm vào, và thiết lập Customizer cũng bị ghi đè, khiến bạn không còn phân biệt được đâu là thiết lập ban đầu. Nếu dùng, tôi khuyên nên dùng ở giai đoạn đầu của site mới, hoặc thử trong môi trường staging rồi chỉ làm theo những thiết lập cần thiết.

Thiết lập tổng thể cần quyết định đầu tiên

Khi mở "Giao diện" → "Tùy biến", các mục thiết lập của Blocksy hiện ra. Tên mục thường đã được dịch sang tiếng Việt, nhưng cách ghi có thể thay đổi tùy phiên bản. Hai thứ cần làm đầu tiên là hai thiết lập tác động lên toàn bộ site sau.

Màu sắc (bảng màu)

Trong thiết lập màu sắc nằm trong thiết lập chung, bạn quyết định bảng màu cơ bản dùng cho site. Trong Blocksy, màu chữ, màu liên kết, màu nút, v.v. được thiết kế để tham chiếu đến các màu trong bảng màu này, nên khi đổi bảng màu, toàn bộ phối màu của site được chuyển cùng lúc.

Nếu chỉ định màu trực tiếp ở từng chỗ, về sau khi muốn đổi phối màu, bạn sẽ phải sửa từng chỗ một. Cách dễ quản lý là quyết định bằng bảng màu và chỉ chỉ định riêng cho những phần nhất định phải dùng màu khác.

Phông chữ (typography)

Trong thiết lập typography, bạn quyết định phông chữ, cỡ chữ và khoảng cách dòng cho nội dung và tiêu đề. Với site tiếng Nhật, điều cần lưu ý là dù chọn phông chữ Latin thì nó cũng không áp dụng cho các ký tự tiếng Nhật. Phần tiếng Nhật được hiển thị bằng phông chữ trên thiết bị của người xem, nên hãy giữ phông chữ nội dung ở mặc định như "phông chữ hệ thống" hoặc chỉ định phông chữ hỗ trợ tiếng Nhật.

Nếu nạp phông chữ tiếng Nhật dưới dạng web font, tệp sẽ lớn và có thể ảnh hưởng đến tốc độ hiển thị. Khi dùng, hãy giảm số độ đậm và kiểm tra ảnh hưởng đến tốc độ bằng PageSpeed Insights, v.v.

Dựng header

Khi mở mục header trong Customizer, trình dựng header (header builder) hiện ở phía dưới màn hình. Header được chia thành các hàng trên, giữa và dưới, và bạn kéo các thành phần như logo (tiêu đề site), menu, tìm kiếm, nút vào vị trí trái, giữa, phải của từng hàng.

Chỗ dễ vấp là header cho máy tính và cho điện thoại được thiết lập riêng. Khi chuyển hiển thị của trình dựng sang điện thoại, một bố cục khác sẽ hiện ra. Trên điện thoại, cấu trúc cơ bản là đặt menu bên trong "off-canvas" mở ra từ biểu tượng hamburger (trigger). Nếu chỉ thiết lập cho máy tính rồi xuất bản, có thể xảy ra tình trạng menu không hiện trên điện thoại, nên hãy kiểm tra ở cả hai chế độ hiển thị.

Khi nhấp vào một thành phần, thiết lập của thành phần đó (cỡ chữ, màu, khoảng cách, v.v.) hiện ở bên trái. Bản thân các mục hiển thị trong menu được tạo trong "Giao diện" → "Menu" (Menus) và gán cho thành phần menu của header.

Footer cũng được dựng bằng trình dựng footer theo cùng cách. Khi muốn đổi vị trí vùng widget hoặc dòng bản quyền, hãy chỉnh sửa từ mục footer.

Hiển thị danh sách blog và trang bài viết

Customizer có sẵn các mục thiết lập theo từng loại trang như danh sách bài viết (blog), bài viết riêng lẻ và trang tĩnh.

Danh sách bài viết: cách sắp xếp dạng thẻ hoặc dạng danh sách, số cột mỗi hàng, tỷ lệ ảnh đại diện (Featured image), độ dài đoạn trích, thông tin bài viết hiển thị (ngày đăng, chuyên mục, v.v.)
Bài viết riêng lẻ: độ rộng vùng nội dung, có hay không và vị trí của thanh bên, cách hiển thị phần tiêu đề, hiển thị bài viết liên quan và thông tin tác giả
Trang tĩnh: giống bài viết riêng lẻ, thiết lập độ rộng và có hay không thanh bên

Thứ ảnh hưởng lớn đến độ dễ đọc của trang bài viết là chiều rộng nội dung. Với văn bản tiếng Nhật dài, nếu một dòng quá dài thì khó đọc, nên khi không dùng thanh bên, hãy đặt chiều rộng nội dung hẹp hơn và kiểm tra xem chữ có quá nhỏ trên điện thoại không.

Khi muốn đổi bố cục chỉ cho một bài viết, bạn có thể chỉ định như bỏ thanh bên chỉ cho bài đó, từ thiết lập Blocksy hiện ở thanh bên của màn hình soạn bài.

Chuẩn bị child theme

Nếu sửa trực tiếp tệp của theme, thay đổi sẽ mất khi theme được cập nhật. Nếu chỉ thêm một ít CSS thì "CSS bổ sung" (Additional CSS) trong Customizer là đủ. Khi cần tùy biến PHP hoặc ghi đè template, hãy tạo child theme.

Trang chính thức của Blocksy có phát hành khuôn mẫu child theme. Khi tự tạo, hãy đặt style.css sau vào wp-content/themes/blocksy-child/,

/*
Theme Name: Blocksy Child
Template: blocksy
*/

rồi nạp style của child theme bằng functions.php trong cùng thư mục.

<?php
add_action( 'wp_enqueue_scripts', function () {
	wp_enqueue_style(
		'blocksy-child-style',
		get_stylesheet_uri(),
		array(),
		wp_get_theme()->get( 'Version' )
	);
}, 20 );

Khi chuyển sang child theme, thiết lập Customizer được lưu tách biệt với theme cha, nên đôi khi nội dung bạn đã thiết lập ở theme cha trông như biến mất. Nếu đã cài Companion, thiết lập Customizer có thể chuyển sang bằng chức năng xuất / nhập, nên xuất ra trước khi chuyển sang child theme sẽ tránh được việc làm lại.

Cập nhật và lưu ý khi vận hành

Blocksy và Companion được cập nhật thường xuyên. Trước khi cập nhật hãy sao lưu, và sau khi cập nhật hãy kiểm tra lần lượt header, trang bài viết và hiển thị trên điện thoại. Nếu hiển thị bị vỡ, hãy xóa cache của plugin cache hoặc CDN rồi kiểm tra lại. Khi dùng plugin tăng tốc có gộp và nén CSS, CSS cũ có thể còn lại và khiến giao diện trông bị vỡ.

Tổng kết

Hãy bắt đầu dùng Blocksy bằng sự kết hợp của theme và Blocksy Companion, và chỉ xem xét Pro sau khi biết tính năng nào còn thiếu
Hãy dùng site khởi đầu cho site mới hoặc môi trường staging; với site đang có, cần chú ý việc thiết lập bị ghi đè
Quyết định tổng thể bằng bảng màu cho màu sắc và typography cho chữ. Lưu ý rằng phông chữ Latin không có tác dụng với tiếng Nhật
Trình dựng header cho máy tính và điện thoại là riêng biệt. Hãy kiểm tra cả hai chế độ hiển thị, và dùng child theme nếu đụng đến PHP

Có câu hỏi về WordPress? Đơn vị xuất bản trang này ở Nhật Bản và trả lời bằng tiếng Nhật. Liên hệ (tiếng Nhật)