Tạo chủ đề con cho giao diện WordPress

Khi xây dựng hoặc chọn một chủ đề, bạn có nhiều tùy chọn để lựa chọn. Ví dụ: chủ đề của bạn có thể có bố cục một hoặc hai cột. Nó có thể chỉ định thiết bị hoặc hành động nào của người dùng làm cho nội dung hiển thị. Nó có thể có các yếu tố thiết kế và kiểu chữ tùy chỉnh . Nó có thể hiển thị nội dung, bao gồm cả hình ảnh và video, ở bất cứ đâu bạn muốn.

Nhưng các chủ đề WordPress không chỉ về bố cục và kiểu chữ. Các chủ đề tốt nhất trông đẹp mắt và làm cho nội dung của bạn hấp dẫn hơn đối với khách truy cập.

Để đảm bảo bạn đang thiết kế cho trải nghiệm người dùng , bạn có thể cần tạo một chủ đề con. Một chủ đề con cho phép bạn sửa đổi giao diện của trang web WordPress mà không cần chỉnh sửa trực tiếp các tệp chủ đề của bạn.

Để hiểu tại sao điều đó lại có giá trị, điều quan trọng trước tiên là phải hiểu mối quan hệ giữa chủ đề chính và chủ đề con.

Chủ đề chính trong WordPress là gì?

Chủ đề chính là một chủ đề hoàn chỉnh. Có nghĩa là, nó bao gồm các tệp mẫu WordPress và nội dung cần thiết để chủ đề hoạt động.

Các tệp index.php và style.css (tương ứng là tệp mẫu chính và tệp kiểu) là các tệp mẫu bắt buộc duy nhất. Tuy nhiên, hầu hết các chủ đề cũng sẽ bao gồm tệp PHP, tệp ngôn ngữ, ảnh, icon, Javascript…

Tất cả các chủ đề được coi là chủ đề chính – ngoại trừ các chủ đề con. Chúng ta hãy xem xét kỹ hơn chủ đề con là gì và những lợi ích mà nó mang lại cho chủ sở hữu trang web WordPress dưới đây.

Chủ đề con trong WordPress là gì?

Chủ đề con là một chủ đề con kế thừa giao diện và các chức năng của chủ đề chính. Khi bạn thực hiện các sửa đổi đối với chủ đề con, chúng sẽ được giữ riêng biệt với các tệp của chủ đề chính.

Lợi ích của việc tạo chủ đề con

Đầu tiên và quan trọng nhất, việc tạo chủ đề con cho phép bạn cập nhật chủ đề chính mà không làm mất các tùy chỉnh của bạn. Nếu không có chủ đề con, bạn phải chỉnh sửa trực tiếp các tệp chủ đề của mình và bất kỳ khi nào bạn cập nhật chủ đề, các tùy chỉnh của bạn sẽ bị mất. Do đó, bạn sẽ phải đối mặt với một lựa chọn bất khả thi: hoặc không cập nhật chủ đề của bạn, đây là một rủi ro bảo mật lớn hoặc mất các tùy chỉnh và thời gian bạn đã đầu tư để tạo ra chúng.

Hai lợi ích khác để tạo và tùy chỉnh chủ đề con có liên quan đến chủ đề đầu tiên. Giữ những sửa đổi này trong một thư mục riêng biệt với chủ đề của bạn giúp chúng dễ dàng sao chép hoặc di chuyển từ trang này sang trang tiếp theo.

Nó cũng cho phép bạn bắt đầu tìm hiểu và bắt tay vào phát triển chủ đề trong một môi trường ít rủi ro. Nếu bạn bắt đầu tùy chỉnh chủ đề con của mình và xảy ra sự cố hoặc bạn không hài lòng, bạn chỉ có thể tắt chủ đề con. Thao tác này sẽ khôi phục chủ đề chính và trang web của bạn như ban đầu.

Tuy nhiên, tạo một chủ đề con không phải lúc nào cũng là lựa chọn tốt nhất. Nếu bạn chủ yếu thêm CSS tùy chỉnh, thì việc tạo một chủ đề con là lý tưởng. Nhưng nếu bạn đang thực hiện các tùy chỉnh sâu rộng đối với chức năng của chủ đề, thì tốt hơn hết bạn nên tạo chủ đề chính hoặc chọn một tùy chọn có chủ đề con hiện có mà sau đó bạn có thể chỉnh sửa ngay lập tức.

Bây giờ chúng ta đã hiểu lợi ích và các trường hợp sử dụng lý tưởng để tạo và tùy chỉnh chủ đề con, hãy cùng xem qua quy trình bên dưới.

Cách tạo chủ đề con trong WordPress, từng bước

Tạo một chủ đề con trong WordPress chỉ mất một vài bước. Dưới đây chúng tôi sẽ trình bày sâu về từng vấn đề để bạn có thể theo dõi. Bản demo này sẽ sử dụng theme WordPress mặc định Twenty Twenty-One làm ví dụ.

Bước 1: Tạo một thư mục chủ đề con.

Trước tiên, bạn sẽ muốn tạo một thư mục nơi bạn có thể đặt tất cả các tệp mẫu và nội dung của chủ đề con của mình. Để tạo thư mục này, bạn sẽ sử dụng Trình quản lý tệp trong bảng điều khiển của nhà cung cấp dịch vụ lưu trữ WordPress của mình .

Khi bạn đã mở Trình quản lý tệp, hãy nhấp vào thư mục public_html. Sau đó nhấp vào thư mục wp-content.

Tìm thư mục có tên “themes”. Sau đó nhấp vào + Folder từ thanh công cụ ở đầu màn hình.

Đặt tên cho thư mục này bằng cách sử dụng tên của chủ đề con và thêm “-child” vào cuối. Vì vậy, nếu bạn đang tạo một chủ đề con của Twenty Twenty-One, bạn sẽ đặt tên cho thư mục là “twentytwentyone-child”.

Thư mục này sẽ là thư mục cho chủ đề con của bạn.

Bước 2: Tạo biểu định kiểu cho chủ đề con của bạn.

Tiếp theo, bạn sẽ cần tạo tệp biểu định kiểu để chứa tất cả các quy tắc và khai báo CSS cho chủ đề con của bạn. Để làm như vậy, hãy tạo một tệp văn bản mới và đặt tên là “style.css”.

Bạn sẽ phải thêm chú thích tiêu đề bắt buộc ở đầu tệp để biểu định kiểu thực sự hoạt động. Nhận xét này chứa thông tin cơ bản về chủ đề con, bao gồm cả chủ đề con với chủ đề mẹ cụ thể.

Bạn thực sự chỉ cần bao gồm hai thứ: tên chủ đề và mẫu (tức là tên của chủ đề mẹ). Bạn có thể bao gồm các thông tin khác, bao gồm mô tả, tên tác giả, phiên bản và các thẻ. Những chi tiết bổ sung này rất quan trọng nếu bạn định xuất bản hoặc bán chủ đề con của mình.

Dưới đây là ví dụ về nhận xét tiêu đề hoàn chỉnh cho chủ đề con Twenty Twenty-One:

/*
Theme Name: Twenty Twenty-One Child by Cong Minh Vuong
Theme URI: https://www.facebook.com/vuongcongminh
Description: Twenty Twenty-One Child Theme
Author: Cong Minh Vuong
Author URI: https://www.facebook.com/vuongcongminh
Template: twentytwentyone
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: two-column, responsive-layout
Text Domain: twentytwentyonechild
*/ 

Chú ý các dấu gạch chéo và dấu hoa thị. Những điều này biểu thị rằng mã này sẽ được “nhận xét” trong CSS nên WordPress không cố gắng thực thi nó.

Bạn có thể thêm CSS tùy chỉnh sau khi đã sẵn sàng bắt đầu tùy chỉnh chủ đề con của mình. Bây giờ, hãy nhấp vào Lưu để biểu định kiểu này sẽ được lưu trong thư mục chủ đề con của bạn.

Bước 3: Móc style.css của chủ đề chính chính cho chủ đề con.

Bằng cách này, wordpress sẽ load song song 2 file style.css của cả chủ đề chính và chủ đề con (sẽ ưu tiên các thay đổi trong chủ đề con). Nếu bạn cảm thấy không cần thiết hãy bỏ qua bước này.

Để làm như vậy, hãy tạo tệp “functions.php” trong chủ đề con và thêm mã sau:

<?php
add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );
function enqueue_parent_styles() {wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );}
?>

Bước 4: Kích hoạt chủ đề con.

Bạn hãy vào mục chủ đề của WordPress, chọn chủ đề con và nhấn kích hoạt.

Chủ đề con WordPress không hoạt động

Chủ đề con của bạn không hoạt động? Dưới đây là một số điều cần kiểm tra.

1. Kiểm tra kỹ tệp functions.php của bạn.

Đảm bảo bạn đã xếp sẵn bảng định kiểu của chủ đề con trong tệp functions.php của mình. Nếu bạn chưa xếp nó, chủ đề con của bạn sẽ không tải. Trang web của bạn sẽ vẫn ở chủ đề chính, vì vậy nó sẽ trông ổn; vấn đề là những thay đổi bạn thực hiện đối với chủ đề con sẽ không xuất hiện trên giao diện người dùng. Tham khảo bước 3 ở trên để thêm mã xếp hàng vào tệp PHP của bạn.

2. Đảm bảo bạn đã đặt tên trang tính là “style.css.”

Kiểm tra để đảm bảo rằng bạn đã đặt tên trang tính CSS của mình là “style.css”, không phải “stylesheet.css”. Vì “style.css” là quy ước đặt tên tiêu chuẩn của WordPress, việc sử dụng tên tệp đó sẽ cho phép tệp functions.php của bạn tự động biết rằng đó là biểu định kiểu của bạn. Nếu bạn đặt tên cho biểu định kiểu của mình là bất kỳ thứ gì khác, tệp functions.php sẽ không thể truy xuất và hiển thị nó cho người dùng cuối.

3. Xóa bộ nhớ cache của bạn.

Hãy thử xóa bộ nhớ cache WordPress của bạn – trình duyệt của bạn có thể đang hiển thị cho bạn phiên bản cũ hơn của trang web của bạn. Ngoài ra, hãy mở trang web của bạn trong cửa sổ ẩn danh để xem các thay đổi đã xuất bản của bạn. Nếu bạn đã cài đặt plugin bộ nhớ cache để cải thiện tốc độ trang web của mình, hãy hủy kích hoạt plugin đó trong khi bạn đang làm việc trên chủ đề con của mình.

4. Thêm! Quan trọng vào mã CSS của bạn.

Nếu chủ đề mẹ vẫn đang ghi đè mã CSS của chủ đề con của bạn, hãy thêm! Important vào các phần tử mà bạn đã thay đổi. Điều này sẽ buộc ghi đè lên bất cứ thứ gì được viết trên CSS sheet của chủ đề mẹ. Bạn sẽ thêm !Important ngay trước dấu chấm phẩy, như sau:

p { background-color: gray !important; }

Quy tắc! Important có thể được sử dụng cho ID , lớp CSS và các phần tử HTML tiêu chuẩn như đoạn văn, bảng, tiêu đề, v.v.

5. Liên hệ với bộ phận hỗ trợ chủ đề của bạn hoặc kiểm tra diễn đàn chủ đề.

Nếu bạn đã thực hiện tất cả các bước này mà CSS vẫn không tải, đã đến lúc liên hệ với nhóm hỗ trợ chủ đề của bạn hoặc kiểm tra diễn đàn của chủ đề trên WordPress.org. Mặc dù đây phải là phương sách cuối cùng của bạn, nhưng nó có lợi là cung cấp cho bạn câu trả lời cụ thể cho chủ đề của bạn. Nhà phát triển chủ đề WordPress của bạn có thể đã sử dụng mã tùy chỉnh hoặc triển khai hệ thống đặt tên khác cho các tệp chủ đề.

Đề xuất cho bạn

Về tác giả: Vương Công Minh

Nếu bạn đang cần Hosting Wordpress nhanh và mạnh. Tôi khuyến nghị bạn tham khảo Bnix.vn - Nhà cung cấp Hosting/VPS/Server Chuyên Nghiệp Hàng Đầu Việt Nam. Đây là nhà cung cấp đang cung cấp hạ tầng để vận hành ICare24H. Bạn có thể trực tiếp trải nghiệm tốc độ Hosting trên trang web Icare24H và đừng quên dùng mã giảm giá ICARE24H để được giảm giá lên đến 49% cho tất cả các dịch vụ nhé.

1 Comment

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *