Hướng dẫn tạo Wordpress child theme
child theme là gì?
Child Theme là một theme con được tạo ra và được kế thừa toàn bộ các đặc điểm, chức năng của theme cha (Parent Theme)
Tại sao cần sử dụng child theme?
Theme là giao diện website, khi sử dụng 1 theme chúng ta đều phải tùy biến lại các thông tin như logo, màu sắc, bố cục, giao diện,v.v… rất nhiều thứ, cùng một theme mỗi người lại có một cách tùy biến nó khác nhau.
Mặt khác theme luôn được nhà phát triển cập nhật tính năng, sửa lỗi,.. Và khi chúng ta cập nhật thì dữ liệu sẽ bị ghi đè do đó những chỉnh sửa về giao diện bố cục, màu sắc,… sẽ bị mất đi, giao diện trở về mặc định, dẫn đến chúng ta lại phải đi tùy biến lại website của mình.
Để khắc phục vấn đề này chúng ta sẽ sử dụng child theme, nhờ có child theme mà mỗi khi chúng ta cập nhật theme cha sẽ không bị ảnh hưởng tới giao diện mà chúng ta đã tùy biến.
Hướng dẫn tạo child theme wordpress
Có nhiều cách khác nhau để tạo child theme cho website wordpress, các bạn có thể tham khảo các tự tạo child theme ở đây nếu có kiến thức về html, php, css,…. Còn ở đây mình sẽ hướng dẫn tạo child theme một cách đơn giản, không cần hiểu biết nhiều về kiến thức lập trình website
xem hướng dẫn tạo child theme tại trang chủ wordpress https://developer.wordpress.org/themes/advanced-topics/child-themes/
Cách 1: Sử dụng child theme được cung cấp sẵn
cách này nhanh chóng và đơn giản nhất, tuy nhiên không phải theme nào cũng có.
Thông thường với một theme sẽ có một child theme được cung cấp sẵn trên github
Các bạn vào hosting hoặc server của mình, vào thư mục theme
ví dụ mình đang dùng theme Point (public_html/wp-content/themes/point)
tìm file readme.txt và mở nó lên tìm dòng nào có child theme, nếu theme đó có hỗ trợ theme đã tạo sẵn thì các bạn sẽ thấy đường link để tải về child theme như hình dưới
Với theme point mình đang sử dụng thì không có sẵn
giờ các bạn chỉ cần truy cập đường link trên download child theme về và upload lên thư mục theme trên hosting và xả nén ra.
Lưu ý sau khi xả nén các bạn nên đổi tên thư mục thành your_theme-child để dễ quản lý (ví dụ Point-child)
Cách 2: sử dụng plugin
Nếu như theme của các bạn chưa được hỗ trợ tạo sẵn thì các bạn có thể sử dụng plugin để tạo theme, các bạn có thể sử dụng một trong các plugin sau:
Child Theme Generator
link download: https://wordpress.org/plugins/child-theme-generator/
Child Theme Configurator
link download: https://vi.wordpress.org/plugins/child-theme-configurator/
các bạn cài đặt và làm theo hướng dẫn để tạo child theme
Cách 3: Tự tạo child theme
Nếu các bạn thích vọc, tìm hiểu thì có thể tự tạo child theme cho mình.
Cách cũ là chúng tạo tạo thư mục child theme và tạo thêm 1 file style.css là được. Tuy nhiên theo khuyến cáo của wordpress chúng ta không nên sử dụng cách này nữa
In the past, the common method was to import the parent theme stylesheet using
@import; this is no longer the recommended practice, as it increases the amount of time it takes style sheets to load. Plus it is possible for the parent stylesheet to get included twice.
Hiểu thế này: với cách sử dụng @import, thì sẽ làm tăng thời gian tải các stylesheet, và có nguy cơ tải lại 2 lần. Vậy nên các bạn sử dụng phương pháp mới
Vào hosting, thư mục theme, tạo một thư mục child theme ( ví dụ của mình point-child)
Vào thư mục child theme vừa tạo, tạo một file style.css có nội dung như dưới đây
/*
Theme Name: your-theme Child
Theme URI: www.dvcntt.net
Description: point Child Theme
Author: NK
Author URI: www.dvcntt.net
Template: point
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: anhit.info
*/
Tiếp theo các bạn cần tạo thêm file functions.php
<?php add_action( 'wp_enqueue_scripts', 'your-theme_enqueue_styles' ); function your-theme_enqueue_styles() { $parent_style = 'parent-style'; 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') ); }
Ok vậy là xong
Kích hoạt child theme
Sau khi đã tạo xong child theme, các bạn vào trang quản trị wordpress
vào Appearance > Themes
Các bạn sẽ nhìn thấy child theme vừa được tạo, nhấn Active để kích hoạt child theme, sau khi kích hoạt các bạn tiến hành tùy biến lại website của mình
Để tùy biến giao diện chỉnh sửa stylesheet các bạn cứ thêm nội dung vào style.css trong child theme, lưu ý nếu các bạn muốn tùy chỉnh sửa code ở header hoặc footer thì copy nó vào child theme và chỉnh sửa nó.