Child theme là gì

Cách tạo Child Theme để tùy biến giao diện cho WordPress

Child theme cho phép bạn thay đổi các khía cạnh nhỏ của giao diện trang web nhưng vẫn giữ được thiết kế chính và chức năng của theme.

Child theme là gì?

Child theme là một theme (chủ đề) độc lập, nhưng kế thừa toàn bộ giao diện và tính năng của parent theme (chủ đề chính).

Child theme có thể được sử dụng để sửa đổi giao diện trang web mà không làm ảnh hưởng tới parent theme.

Điều này cũng có nghĩa là khi bạn nâng cấp parent theme sẽ không làm mất đi những thay đổi đã được tạo ra trong child theme.

Lợi ích khi sử dụng child theme

Lợi ích khi sử dụng child theme

  • Làm cho các tùy chỉnh của bạn linh hoạt và có thể nhân rộng
  • Giữ tùy chỉnh tách biệt với các chức năng của parent theme
  • Cho phép parent theme cập nhật mà không thay đổi các tùy biến của bạn
  • Cho phép bạn bổ sung những tính năng mới thú vị mà parent theme không có
  • Tiết kiệm thời gian phát triển giao diện bởi bạn không phải viết code từ đầu

Hướng dẫn tạo child theme từ parent theme bất kì

Có 2 cách giúp bạn tạo Child theme:

  1. Tạo child theme thủ công.
  2. Tạo child theme bằng plugin.

Yêu cầu trước khi tạo child theme:

  • Có quyền truy cập vào file manager (được khuyên dùng) hoặc FTP.
  • Một hiểu biết cơ bản về CSS / HTML là bắt buộc để tự thay đổi. Một số kiến thức về PHP chắc chắn sẽ giúp ích.
  • Hãy chắc chắn parent theme đã xuất hiện trong menu Appearance › Themes.
Child theme có thể được sử dụng để sửa đổi giao diện trang web mà không làm ảnh hưởng tới parent theme.

Cách 1: Tạo child theme bằng cách thủ công

Bước 1: Tạo một thư mục child theme

Đầu tiên, tạo một thư mục với tên bất kì cho child theme.

Bạn nên đặt tên cho child theme giống với parent theme và thêm -child vào cuối để dễ dàng phân biệt trong trường hợp trang web của bạn có nhiều theme.

Tạo một thư mục child theme

Ví dụ: Nếu bạn đang tạo child theme của twentyfifteen, thì thư mục sẽ được đặt tên là twentyfifteen-child.

Bước 2: Tạo một tệp đặt tên là style.css

Tệp này nằm trong thư mục mới bạn vừa tạo, chứa tất cả các quy tắc và khai báo CSS kiểm soát giao diện theme của bạn.

Đọc thêm về cách tùy biến CSS trong WordPress

Bạn có thể sử dụng trình soạn thảo văn bản như Notepad hay Notepad++ để mở tệp style.css và thêm nội dung mẫu như sau:

/*
Theme Name: Twenty Fifteen Child
Theme URI: http://example.com/twenty-fifteen-child/
Description: Twenty Fifteen Child Theme
Author: John Doe
Author URI: http://example.com
Template: twentyfifteen
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
Text Domain: twentyfifteenchild
*/

Các thông tin sau là bắt buộc:

• Theme Name – Tên của child theme.
• Template – Tên của thư mục parent theme. Parent theme trong ví dụ trên là Twenty Fifteen, vì vậy Template cần khai báo sẽ là thư mục twentyfifteen. Nếu bạn nhập không đúng tên parent theme nó sẽ không nhận đâu nhé. Tên parent phân biệt chữ hoa và chữ thường. Nếu chúng ta khai báo Template là Twentyfifteen, thì nó sẽ không hoạt động.

Bây giờ bạn có thể tùy chỉnh CSS ngay bên dưới phần thông tin đã khai báo bên trên. Thư mục child theme chỉ yêu cầu duy nhất tệp style.css để có thể hoạt động, nhưng việc bổ sung tệp functions.php là cần thiết để sắp xếp các style một cách chính xác và tùy biến một số đoạn mã theo ý muốn.

Bước 3: Tạo một tệp đặt tên là functions.php

Dán đoạn code phía dưới để nạp CSS từ parent theme:

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

Bước 4: Cài đặt child theme

Cách cài đặt child theme không khác gì với việc cài đặt các theme thông thường. Bạn có thể sao chép thư mục vào trang web bằng FTP hoặc nén toàn bộ thư mục child theme (trong ví dụ trên là twentyfifteen-child), rồi đăng nhập vào trang quản trị WordPress, click vào menu Appearance › Themes › Add New rồi tải file nén lên để cài đặt.

Bước 5: Kích hoạt child theme và sử dụng

Bây giờ hãy vào menu Appearance › Themes và bạn sẽ thấy theme Twenty Fifteen Child. Bạn cần nhấp vào nút Active (Kích hoạt) để bắt đầu sử dụng child theme trên trang web của mình.

Kích hoạt child theme và sử dụng

Cách 2: Tạo child theme bằng plugin

Nếu bạn không muốn làm cách trên, thì vẫn còn một giải pháp khác đó là sử dụng plugin.

Có khá nhiều free plugin như: One-Click Child Theme, Child Theme Configurator, Child Theme Creator by Orbisius…

Trong bài này tôi sẽ sử dụng: Child Theme Configurator.

Bước 1: Cài đặt và kích hoạt plugin Child Theme Configurator.

Cài đặt plugin Child Theme Configurator

Bước 2: Vào menu Tool › Child Theme.

Tại mục Select an action, chọn CREATE a new Child Theme để tạo child theme mới. Tiếp đến, bạn chọn parent theme trong danh sách tại mục Select a Parent Theme, sau đó ấn nút Analyze.

Tạo child theme với plugin Child Theme Configurator

Bước 3: Sau khi plugin tiến hành phân tích parent theme, bạn nên giữ nguyên các tùy chọn (trong trường hợp bạn không biết phải làm gì) và ấn nút Create New Child Theme.

Cuối cùng, quay lại menu Apperance › Themes và kích hoạt child theme là xong.

Hướng dẫn tùy biến giao diện trang web với child theme

Thêm các tệp mẫu (template)

Trừ tệp functions.php, bất kỳ tệp nào bạn thêm vào child theme của mình sẽ ghi đè lên cùng một tệp trong parent theme.

Trong hầu hết các trường hợp, tốt nhất là tạo một bản sao của các tệp mẫu mà bạn muốn thay đổi từ parent theme, sau đó thực hiện các sửa đổi đối với các tệp đã sao chép. Ví dụ: Nếu bạn muốn thay đổi mã của tệp header.php của parent theme, bạn sẽ sao chép tệp vào thư mục child theme của mình và tùy chỉnh ở đó.

Bạn cũng có thể đưa các tệp vào child theme không có trong parent theme. Giả sử, bạn muốn tạo một mẫu cụ thể hơn mẫu được tìm thấy trong parent theme như trang chẳng hạn, lúc này tệp page-3.php sẽ tải cho một trang có ID là 3.

Xem trang Phân cấp mẫu để biết thêm thông tin về cách WordPress xác định mẫu nào sẽ sử dụng.

Sử dụng functions.php

Không giống như style.css, tệp functions.php của một child theme không ghi đè lên phần tử gốc của nó. Thay vào đó, nó được tải cùng với functions.php của parent theme (mặc định theo thứ tự, tệp functions.php của child theme sẽ được tải trước).

bất kì tính năng nào bạn thêm vào tệp functions.php sẽ không bị thay đổi khi cập nhật parent theme

Theo cách đó, bất kì tính năng nào bạn thêm vào tệp functions.php sẽ không bị thay đổi khi cập nhật parent theme.

Cấu trúc của tệp functions.php rất đơn giản: Một thẻ PHP mở ở trên cùng và bên dưới nó là các bit PHP của bạn. Trong đó bạn có thể đặt các chức năng tùy thích. Ví dụ dưới đây cho thấy một tệp functions.php cơ bản thực hiện một việc đơn giản: Thêm liên kết favicon vào phần tử đầu của các trang HTML.

<?php // Opening PHP tag - nothing should be before this, not even whitespace
 
// Custom Function to Include
function my_favicon_link() {
    echo <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />' . "\n";
}
add_action( 'wp_head', 'my_favicon_link' );

Để biết thêm thông tin về những gì cần đưa vào tệp functions.php của child theme, hãy đọc qua trang Chức năng của theme.

Hy vọng bài viết sẽ giúp bạn có cái nhìn tổng quan về child theme và những bước cơ bản để tùy biến giao diện cho trang web.

Hãy thử ngay và đặt câu hỏi tại đây nếu bạn cần trợ giúp!

Leave a Comment

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 *