Tạo child theme wordpress

09/05/2021 07:58 5934

Tạo child theme wordpress: là công việc mà chúng ta cần làm khi đi tùy biến thêm chức năng cho theme hiện tại, việc tạo child theme sẽ tránh được việc khi khách hàng update theme mà họ mua thì code tùy biến của chúng ta sẽ không bị mất và một điều tuyệt vời nữa là chúng ta sẽ kế thừa tất cả các chức năng của parent theme. Việc tùy biến child theme là một chủ đề bao la rộng lớn trong khuôn khổ của bài viết này tôi chỉ muốn đưa ra code tạo child theme ( anh chị cứ xem là một theme chưa có tùy biến gì cả)

Table of Contents

1. Các file cần thiết phải tạo

Một child theme chưa có tùy biến chức năng gì cả thì tối thiểu sẽ có 2 file: đó là style.css và functions.php

Anh chĩ sẽ tạo một folder trong thư mục wp-content/themes, tên folder thì anh chị đặt gì cũng được. Trong trường hợp ví dụ của mình là “prowordpresshost” và nó sẽ như thế này wp-content/themes/prowordpresshost

2. Code của 2 file style.css và functions.php

2.1 file style.css

/*
 Theme Name:   ProWordpressHost
 Theme URI:    https://prowordpresshost.com/
 Description:  ProWordpressHost
 Author:       TungNguyen
 Author URI:   https://prowordpresshost.com/
 Template:     astra
 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:  prowordpresshost
*/

Theme Name: ProWordpressHost

Theme URI: https://prowordpresshost.com/

Description: ProWordpressHost

Author: TungNguyen

Author URI: https://prowordpresshost.com/

Template: astra

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: prowordpresshost

Anh chỉ chỉ cần chú ý đến Template: astra đây là folder parent theme, trong trường hợp của mình là astra, còn mấy thông tin khác anh chị thích điền kiểu gì cũng được

2.2 File functions.php

<?php
if(!class_exists("ProWordpressHost")){
	class ProWordpressHost{
		function __construct(){
			add_action( 'wp_enqueue_scripts', array($this,'enqueue_styles_js') );
		}
		function enqueue_styles_js(){
			//enqueue child style.css and parent style.css
			$theme = wp_get_theme();
			wp_enqueue_style('prowordpresshost-style', get_stylesheet_directory_uri() . '/style.css', 
				array('astra-theme-css'),  
				$theme->parent()->get('Version')
			);
		}
		
	}
	new ProWordpressHost();
}

<?php

if(!class_exists("ProWordpressHost")){

class ProWordpressHost{

function __construct(){

add_action( 'wp_enqueue_scripts', array($this,'enqueue_styles_js') );

}

function enqueue_styles_js(){

//enqueue child style.css and parent style.css

$theme = wp_get_theme();

wp_enqueue_style('prowordpresshost-style', get_stylesheet_directory_uri() . '/style.css',

array('astra-theme-css'),

$theme->parent()->get('Version')

);

}

new ProWordpressHost();

}

code trên chỉ là include 2 file css một của parent theme và một của child theme mà thôi và được tổ chức theo kiểu class để dễ quản lý code

Các bài viết khác có thể hữu ích với bạn

Rồi đó chỉ cần copy và sửa lại theo thông tin của anh chị mà thôi

5/5 (2 Đánh giá)

Gửi Phản Hồi

0 Bình Luận

có thể bạn cần xem:

Khắc phục lỗi không update được wordpress trên centos 7 nginx [ 02/04/2023 04:41 ]
Disable animation trong revolution slider [ 20/09/2022 08:07 ]
Cách tạo button printer một element bằng javascript [ 19/09/2022 12:56 ]
Phân trang paginate cho wp_query wordpress [ 18/09/2022 14:17 ]
Function ghi vào file debug wordpress write log [ 16/09/2022 02:24 ]
Code sử dụng vue js, quasar, axios, sweetalert2 trong tác vụ quản lý danh sách [ 19/07/2022 10:26 ]
Hướng dẫn lấy botToken và chatId của bot telegram [ 13/06/2022 13:54 ]
Tạo thanh bar bottom mobile trong theme wordpress [ 07/06/2022 10:00 ]
Fix acf not save iframe [ 23/04/2022 07:44 ]
Rewrite lại url cho page template wordpress [ 21/04/2022 02:11 ]

Tạo child theme wordpress

1. Các file cần thiết phải tạo

2. Code của 2 file style.css và functions.php

2.1 file style.css

2.2 File functions.php

có thể bạn cần xem:

Đăng ký nhận bài viết mới

Hướng dẫn thiết kế theme

Thiết kế theme wordpress phần 8

Thiết kế theme wordpress phần 7

Thiết kế theme wordpress phần 6

Thiết kế theme wordpress phần 5

Thiết kế theme wordpress-phần 4

Các functions thường dùng

Function xử lý upload to media wordpress

Function get ip address

Thay thế file_get_contents

Code tích hợp acf vào theme và plugin

Một số function thường dùng khi làm theme wordpress (some functions popular for work do theme worpdress)