Hướng dẫn tạo child theme WordPress cho người mới

22 giờ ago, WordPress Themes, 1 Views

Giới thiệu về Child Theme WordPress

WordPress là một nền tảng quản lý nội dung (CMS) mạnh mẽ và linh hoạt, cho phép người dùng tùy biến giao diện và chức năng của trang web một cách dễ dàng. Một trong những cách tốt nhất để tùy biến WordPress mà không làm ảnh hưởng đến theme gốc là sử dụng child theme. Child theme kế thừa tất cả các tính năng và thiết kế của parent theme (theme gốc), đồng thời cho phép bạn ghi đè và thêm các tùy chỉnh của riêng mình.

Tại sao nên sử dụng child theme?

An toàn cho cập nhật: Khi theme gốc nhận được bản cập nhật, các thay đổi bạn thực hiện trong child theme sẽ không bị mất.
Dễ dàng tùy biến: Bạn có thể tùy biến giao diện và chức năng của trang web mà không cần phải chỉnh sửa trực tiếp vào theme gốc.
Quản lý dễ dàng: Các tùy chỉnh được tách biệt khỏi theme gốc, giúp việc quản lý và bảo trì trang web trở nên dễ dàng hơn.

Các bước tạo Child Theme WordPress

Để tạo một child theme, bạn cần thực hiện theo các bước sau:

Bước 1: Tạo thư mục Child Theme

Đầu tiên, bạn cần tạo một thư mục mới cho child theme trong thư mục wp-content/themes/ của WordPress. Tên thư mục nên liên quan đến tên của parent theme, ví dụ: nếu parent theme là “twenty-twenty-three”, bạn có thể đặt tên cho child theme là “twenty-twenty-three-child”.

Bạn có thể sử dụng FTP client (như FileZilla) hoặc trình quản lý tệp của hosting để tạo thư mục này.

Bước 2: Tạo tệp `style.css`

Trong thư mục child theme vừa tạo, bạn cần tạo một tệp style.css. Tệp này là bắt buộc và chứa thông tin về child theme, bao gồm tên, mô tả, tác giả và quan trọng nhất là thông tin về parent theme.

Mở một trình soạn thảo văn bản (như Notepad, Sublime Text, VS Code) và dán đoạn code sau vào tệp style.css:


/*
 Theme Name:   Twenty Twenty-Three Child
 Theme URI:    https://example.com/twenty-twenty-three-child/
 Description:  Twenty Twenty-Three Child Theme
 Author:       Your Name
 Author URI:   https://example.com
 Template:     twentytwentythree
 Version:      1.0.0
*/

/*
    Add your styles here
*/

Giải thích các thuộc tính:

Theme Name: Tên của child theme, hiển thị trong trang quản trị WordPress.
Theme URI: URL của trang web hoặc tài liệu về child theme (tùy chọn).
Description: Mô tả ngắn gọn về child theme.
Author: Tên của tác giả child theme.
Author URI: URL của trang web hoặc tài liệu về tác giả (tùy chọn).
Template: Quan trọng nhất! Đây là tên thư mục của parent theme. Đảm bảo tên này chính xác, nếu không child theme sẽ không hoạt động.
Version: Phiên bản của child theme.

Thay đổi các giá trị (trừ Template) cho phù hợp với thông tin của bạn. Lưu tệp style.css vào thư mục child theme.

Bước 3: Kích hoạt Child Theme

Đăng nhập vào trang quản trị WordPress của bạn và đi đến “Appearance” (Giao diện) -> “Themes” (Chủ đề). Bạn sẽ thấy child theme mới của mình hiển thị ở đó. Kích hoạt child theme này.

Lưu ý rằng sau khi kích hoạt, trang web của bạn có thể trông giống như parent theme. Điều này là do child theme kế thừa tất cả các thiết kế và chức năng của parent theme, nhưng chưa có bất kỳ tùy chỉnh nào.

Bước 4: Thêm các tùy chỉnh

Bây giờ bạn có thể bắt đầu thêm các tùy chỉnh vào child theme của mình. Có hai cách chính để tùy biến child theme:

Sử dụng CSS: Bạn có thể thêm các quy tắc CSS vào tệp style.css của child theme để ghi đè các kiểu mặc định của parent theme.
Sử dụng PHP: Bạn có thể tạo hoặc chỉnh sửa các tệp PHP trong child theme để thêm các chức năng mới hoặc ghi đè các hàm có sẵn trong parent theme.

Tùy biến Child Theme bằng CSS

Ví dụ, nếu bạn muốn thay đổi màu nền của trang web, bạn có thể thêm đoạn code sau vào tệp style.css của child theme:


body {
    background-color: #f0f0f0;
}

Lưu tệp style.css và làm mới trang web của bạn. Bạn sẽ thấy màu nền đã thay đổi.

Bạn có thể sử dụng trình duyệt web của mình (ví dụ: Chrome Developer Tools, Firefox Developer Tools) để kiểm tra các phần tử HTML và CSS trên trang web, từ đó xác định các kiểu cần ghi đè.

Tùy biến Child Theme bằng PHP

Để tùy biến child theme bằng PHP, bạn cần tạo hoặc chỉnh sửa các tệp PHP trong thư mục child theme. Một tệp quan trọng thường được sử dụng là functions.php.

Tệp `functions.php`

Tệp functions.php trong child theme được sử dụng để thêm các chức năng tùy chỉnh, chẳng hạn như:

Thêm các hàm PHP mới.
Ghi đè các hàm có sẵn trong parent theme.
Thêm các đoạn code vào các hook của WordPress (ví dụ: wp_enqueue_scripts để thêm CSS và JavaScript).

Quan trọng: Khi tạo tệp functions.php, hãy đảm bảo bạn không thêm thẻ mở <?php vào cuối tệp. Điều này có thể gây ra lỗi.

Ví dụ: Thêm CSS và JavaScript

Để thêm CSS và JavaScript vào child theme, bạn có thể sử dụng hook wp_enqueue_scripts trong tệp functions.php. Ví dụ:

Tạo tệp functions.php trong thư mục child theme và dán đoạn code sau vào:


<?php
function my_child_theme_enqueue_styles() {

    $parent_style = 'parent-style'; // This is 'twentyseventeen-style' for the Twenty Seventeen theme.

    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( $parent_style ),
        wp_get_theme()->get('Version')
    );

    // Add custom script
    wp_enqueue_script( 'my-child-script', get_stylesheet_directory_uri() . '/js/custom.js', array( 'jquery' ), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_child_theme_enqueue_styles' );

Giải thích:

my_child_theme_enqueue_styles(): Hàm này chứa code để thêm CSS và JavaScript.
wp_enqueue_style(): Hàm này dùng để thêm CSS. Chúng ta thêm CSS của parent theme trước, sau đó thêm CSS của child theme.
wp_enqueue_script(): Hàm này dùng để thêm JavaScript. Trong ví dụ này, chúng ta thêm tệp custom.js (bạn cần tạo tệp này trong thư mục js của child theme).
add_action( 'wp_enqueue_scripts', 'my_child_theme_enqueue_styles' ): Dòng này kết nối hàm my_child_theme_enqueue_styles() với hook wp_enqueue_scripts, đảm bảo rằng code sẽ được thực thi khi WordPress tải CSS và JavaScript.

Trong ví dụ trên, bạn cần tạo một thư mục js trong thư mục child theme và tạo tệp custom.js bên trong thư mục đó. Bạn có thể thêm các đoạn code JavaScript tùy chỉnh vào tệp custom.js.

Ghi đè các Template Files

Một trong những tính năng mạnh mẽ của child theme là khả năng ghi đè các template files (tệp mẫu) của parent theme. Điều này cho phép bạn tùy biến cấu trúc và nội dung của các trang web một cách chi tiết.

Để ghi đè một template file, bạn cần sao chép tệp đó từ parent theme vào child theme, giữ nguyên cấu trúc thư mục. Sau đó, bạn có thể chỉnh sửa tệp đã sao chép để thay đổi giao diện và chức năng.

Ví dụ, nếu bạn muốn chỉnh sửa template file single.php (để hiển thị bài viết đơn), bạn cần:

Sao chép tệp single.php từ thư mục của parent theme vào thư mục của child theme.
Chỉnh sửa tệp single.php trong thư mục child theme theo ý muốn.

Khi WordPress tìm kiếm một template file, nó sẽ ưu tiên tìm trong child theme trước. Nếu tìm thấy tệp đó, nó sẽ sử dụng tệp từ child theme. Nếu không tìm thấy, nó sẽ sử dụng tệp từ parent theme.

Lưu ý quan trọng

Luôn kiểm tra các thay đổi: Sau khi thực hiện bất kỳ thay đổi nào trong child theme, hãy kiểm tra kỹ trang web của bạn để đảm bảo rằng các thay đổi hoạt động đúng và không gây ra lỗi.
Sao lưu trang web: Trước khi thực hiện bất kỳ thay đổi lớn nào, hãy sao lưu trang web của bạn để có thể khôi phục lại nếu có sự cố xảy ra.
Tìm hiểu về hooks của WordPress: Hooks (actions và filters) là một công cụ mạnh mẽ để tùy biến WordPress. Tìm hiểu về cách sử dụng hooks để thêm chức năng và tùy chỉnh trang web của bạn một cách linh hoạt.

Kết luận

Tạo và sử dụng child theme là một cách tuyệt vời để tùy biến WordPress một cách an toàn và hiệu quả. Bằng cách sử dụng child theme, bạn có thể thoải mái thử nghiệm và tùy chỉnh giao diện và chức năng của trang web mà không lo làm ảnh hưởng đến theme gốc. Hy vọng hướng dẫn này đã giúp bạn hiểu rõ hơn về child theme và cách tạo một child theme cho riêng mình.

admin

#ezw_tco-2 .ez-toc-widget-container ul.ez-toc-list li.active::before { background-color: #ededed; } aa