Cách tạo child theme cho theme bất kỳ trong WordPress cập nhật mới nhất 2021

Bài viết này sẽ hướng dẫn bạn cách tạo child theme được cập nhật mới và chính xác nhất 2021 cho bất kỳ theme nào trong WordPress: Astra, Hello Elementor, Storefront, GeneratePress, OceanWP,…

Đừng lo nếu bạn không hiểu gì, Bác Sĩ SEO sẽ hướng dẫn cực kỳ chi tiết. Bạn không cần phải biết code hay làm gì cao siêu mới có thể tạo child theme cho WordPress. Bạn chỉ cần làm theo 3 bước sau.

Bước 1: Đăng nhập vào cPanel hoặc dịch vụ hosting của website để truy cập folder “themes” trong wp-content

Đầu tiên, bạn truy cập vào cPanel hoặc trang web dịch vụ hosting mà bạn đang sử dụng cho trang WordPress. Các dịch vụ hosting phổ biến cho WordPress có thể kể đến như: Hostinger, SiteGround, Bluehost, HostGator, P.A Vietnam, Mắt Bão, DIGISTAR, Nhân Hòa,…

Sau khi đăng nhập vào cPanel hoặc dịch vụ hosting, bạn tìm và truy cập vào phần “File Manager” và tìm folder có tên là “public_html”.

cách tạo child theme wordpress
File Manager trong cPanel
cách tạo child theme wordpress
File Manager trong hPanel Hostinger (dịch vụ hosting mà Bác Sĩ SEO đang sử dụng)
cách tạo child theme wordpress
Folder public_html trong File Manager của cPanel
cách tạo child theme wordpress
Folder public_html trong File Manager của hPanel Hostinger

Trong public_html, bạn sẽ thấy folder “wp-content”. Bạn mở folder đó lên và tiếp tục mở folder “themes”.

cách tạo child theme cho theme bất kỳ trong wordpress
Folder themes trong wp-content của cPanel
cách tạo child theme cho theme bất kỳ trong wordpress
Folder themes trong wp-content của hPanel Hostinger

Trong folder “themes”, bạn sẽ thấy folder của theme chính mà bạn đang sử dụng cho trang WordPress (ví dụ bạn sử dụng theme Flatsome cho web thương mại điện tử thì tên folder theme chính là “flatsome”).

Đây cũng chính là nơi mà bạn sẽ tạo child theme cho trang WordPress của mình.

cách tạo child theme cho theme bất kỳ trong wordpress

Lưu ý: hPanel của Hostinger và cPanel về cơ bản không có nhiều khác biệt nên từ chỗ này trở đi, Bác Sĩ SEO sẽ sử dụng hPanel của Hostinger để làm ví dụ. Các bước thực hiện cũng sẽ giống hệt như đối với cPanel.

Bước 2: Đặt tên, tạo folder cho child theme và tạo các file cần thiết để tạo child theme

Sau khi đã truy cập vào folder themes (nơi chứa theme chính mà bạn đang sử dụng), bạn tạo một folder mới để chứa các file của child theme và đặt tên cho nó.

Khi đặt tên cho folder của child theme, bạn hãy đặt tên theo công thức này:

tên folder child theme = tên folder theme chính + “-child”

Ví dụ

Nếu folder theme chính của bạn là “flatsome”, bạn sẽ đặt tên cho folder của child theme là “flatsome-child”.

Nếu folder theme chính của bạn là “astra”, bạn sẽ đặt tên cho folder của child theme là “astra-child”.

cách tạo child theme wordpress mới nhất 2021
Cách đặt tên cho folder child theme
cách tạo child theme wordpress mới nhất 2021
Folder theme mẹ và folder child theme

Sau khi tạo folder và đặt tên cho folder của child theme, bạn mở folder child theme mà bạn vừa tạo để tiếp tục tạo các file cần thiết cho child theme.

Trong folder của child theme, bạn sẽ tạo 2 file có tên là style.cssfunctions.php và 1 folder có tên là js. Trong bài viết này, bạn chỉ cần copy paste code vào 2 file functions.phpstyle.css mà không cần quan tâm đến folder js.

Folder js là nơi bạn sẽ thêm các script bằng ngôn ngữ lập trình javascript vào nhưng không phải bây giờ. Nếu trong tương lai, bạn muốn thêm một số tính năng như tạo nút trở về đầu trang cho WordPress không cần plugin thì chắc chắn bạn sẽ cần đến folder js. Bây giờ bạn chỉ tạo nó trước và tạm thời để trống.

cách tạo child theme wordpress
Tạo 2 file style.css, functions.php và folder js trong folder child theme

Tất cả những gì bạn cần làm tiếp theo là copy paste và thực hiện một số chỉnh sửa nhỏ để tạo child theme cho theme mà bạn đang sử dụng.

Bạn copy những dòng code dưới đây và paste vào vào file style.css.

/*
 Theme Name:   #tên child theme#
 Theme URI:    #url website của theme chính#
 Description:  Default #tên theme chính" Child Theme
 Author:       #tên của bạn"
 Author URI:   #url website của bạn#
 Template:     #tên folder của theme chính"
 Version:      0.1
*/

Sau đó, bạn cần phải chỉnh sửa tất cả những dòng code ở giữa hai dấu thăng (bao gồm luôn cả hai dấu thăng).

Để dễ hiểu thì đây là ví dụ cho cách chỉnh sửa những dòng code trên để tạo child theme cho theme bất kỳ trong WordPress.

Ví dụ, để tạo child theme cho theme Astra thì bạn sửa như thế này.

/*
 Theme Name:   Astra Child
 Theme URI:    https://wpastra.com/
 Description:  Default Astra Child Theme
 Author:       Bác Sĩ SEO
 Author URI:   https://bacsiseo.com/
 Template:     astra
 Version:      0.1
*/

Ví dụ để tạo child theme cho theme Twenty Twenty-One thì bạn sửa như thế này (Twenty Twenty-One là theme mặc định mới nhất của WordPress năm 2021)

/*
 Theme Name:   Twenty Twenty-one Child Theme
 Theme URI:    https://wordpress.org/themes/twentytwentyone/
 Description:  Default Twenty Twenty-one Child Theme
 Author:       Bác Sĩ SEO
 Author URI:   https://bacsiseo.com/
 Template:     twentytwentyone
 Version:      0.1
*/

Trong những dòng code phía trên, có hai vị trí quan trọng nhất mà bạn cần phải chỉnh sửa là Theme NameTemplate.

Theme Name phải là tên child theme duy nhất, không trùng lặp.

Template thì bắt buộc bạn phải điền tên của folder theme chính vào, như 2 ví dụ phía trên (astra và twentytwentyone).

cách tạo child theme wordpress mới nhất 2021
Thêm code vào style.css của child theme

Sau khi thêm và save lại file style.css, bạn tiếp tục copy những dòng code dưới đây và paste vào file functions.php. Bạn chỉ cần copy paste và save lại, không cần chỉnh sửa gì thêm.

<?php
add_action( 'wp_enqueue_scripts', 'bss_enqueue_styles' );
function bss_enqueue_styles() {
   wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
}
thêm code enqueue script style.css vào file functions.php child theme

Như vậy là bạn đã hoàn thành bước 2, bạn hãy nhớ save tất cả lại. Bước cuối cùng chỉ đơn giản là đăng nhập vào WordPress và kích hoạt child theme mà bạn vừa tạo là xong.

Bước 3: Kích hoạt child theme trong WordPress

Bạn hãy đăng nhập vào trang admin của WordPress và truy cập vào mục Giao diện.

Nếu bạn đã làm chính xác theo 2 bước trên, child theme của bạn sẽ hiện ra ở mục “Giao diện”. Đây là ví dụ cho child theme của theme Twenty Twenty-One.

cách tạo child theme wordpress

Bây giờ bạn chỉ cần rê chuột vào child theme và bấm nút “Kích hoạt” là xong.

cách tạo child theme wordpress

Như vậy là bạn đã biết cách tạo child theme cho theme bất kỳ trong WordPress, được cập nhật mới nhất và chính xác nhất 2021.

Tiếp theo, bạn có thể:

Viết một bình luận