Hướng dẫn tạo một Child Theme trong WordPress

Bạn đang tìm cách tạo child theme trong WordPress? Khi bạn đã thành thạo những hướng dẫn sử dụng cơ bản về WordPress, bạn có muốn học cách tuỳ chỉnh trang WordPress của mình không?. tôi tin rằng child theme là một điểm khởi đầu tuyệt vời cho bất kỳ ai muốn tùy chỉnh theme WordPress. Trong bài này, tôi sẽ chỉ cho bạn cách tạo child theme trong WordPress.

Tại sao bạn cần tạo Child Theme?

Child theme được xem là cách tốt nhất để tùy chỉnh các theme WordPress . Một child theme thừa hưởng tất cả các tính năng và diện mạo của theme parent. Bạn có thể tùy chỉnh nó mà không ảnh hưởng đến theme parent. Điều này cho phép bạn dễ dàng cập nhật theme phụ huynh mà không phải lo lắng về nguy cơ các thay đổi.

Yêu cầu

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. Nếu bạn giỏi sao chép và dán các code snippet từ các nguồn khác thì điều đó cũng có hiệu quả.

Tôi khuyên bạn nên thực hành trên local host của bạn. Bạn có thể di chuyển một trang WordPress trực tiếp đến local server thử nghiệm hoặc sử dụng nội dung giả để phát triển theme.

Bắt đầu

Bất kỳ theme WordPress nào cũng có thể được sử dụng làm theme parent. Tuy nhiên, có rất nhiều loại theme khác nhau và một số không dễ để thực hiện. Trong hướng dẫn này, tôi sẽ sử dụng Twenty Thirteen, một trong những theme WordPress mặc định.

Tạo child theme đầu tiên của bạn

Đầu tiên bạn cần mở / wp-childtent / themes / trong thư mục cài đặt WordPress và tạo một thư mục mới cho child theme. Bạn được phép đặt tên thư mục là bất cứ thứ gì bạn muốn. Đối với hướng dẫn này tôi sẽ đặt tên là wpbdemo.

Mở trình soạn thảo văn bản như Notepad và dán mã này:

/*
 Theme Name:   WPB Child Theme
 Theme URI:    http://www.dieuhau.com/
 Description:  A Twenty Thirteen child theme 
 Author:       Dieuhau
 Author URI:   http://www.dieuhau.com
 Template:     twentythirteen
 Version:      1.0.0
*/

@import url("../twentythirteen/style.css");

Bây giờ hãy lưu tập tin này dưới định dạng style.css trong thư mục child theme vừa tạo.

Hầu hết những thứ trong tập tin này đều đã nói lên ý nghĩa của chúng. Hãy chú ý đến Template: twentythirteen.

Điều này nói cho WordPress biết rằng theme của chúng ta là một child theme và tên thư mục theme của chúng ta là twentythirdteen. Tên thư mục gốc phân biệt chữ hoa chữ thường. Nếu chúng ta cung cấp WordPress với Template: TwentyThirteen, thì nó sẽ không hoạt động.

Dòng cuối cùng trong code này nhập stylesheet của theme parent vào child theme

Đây là yêu cầu tối thiểu để tạo child theme. Bây giờ hãy vào Appearance » Themes và bạn sẽ thấy WPB Child Theme. Bạn cần nhấp vào nút kích hoạt để bắt đầu sử dụng child theme trên trang web của mình.

Vì chưa thay đổi bất kỳ điều gì trong child theme của mình nên trang web của bạn sẽ sử dụng tất cả các chức năng và giao diện của theme gốc.

Tùy chỉnh child theme

Mỗi theme WordPress có một tập tin style.css trong thư mục chính. Hầu hết chúng là stylesheet chính của theme, nơi chứa tất cả các CSS. Tuy nhiên, một số theme chỉ có thông tin tiêu đề của theme . Các theme như vậy thường có các tệp tin CSS nằm trong một thư mục riêng.

Đối với phần này, bạn cần một chút kiến thức về CSS.

Google Chrome và Firefox có các công cụ kiểm tra tích hợp sẵn. Các công cụ này cho phép bạn xem HTML và CSS đằng sau bất kỳ phần tử nào của trang web.

Nếu muốn xem CSS được sử dụng cho menu điều hướng thì bạn chỉ cần di chuyển chuột đến trình đơn điều hướng và nhấp chuột phải để chọn Inspect element.

Thao tác này sẽ chia màn hình trình duyệt thành hai phần. Ở phần dưới cùng của màn hình, bạn sẽ thấy HTML và CSS cho trang(Với FireFox sẽ ở dưới màn hình, còn Chrome sẽ ở bên tay phải bạn)

Khi bạn di chuyển chuột trên các dòng HTML khác nhau thì Chrome inspector sẽ làm nổi bật chúng trong cửa sổ phía trên. Như bạn thấy, chúng ta có menu điều hướng được chọn trong ảnh chụp màn hình ở trên.

Nó cũng sẽ cho bạn thấy các quy tắc CSS liên quan đến các yếu tố đánh dấu trong cửa sổ bên phải.

Bạn có thể thử chỉnh sửa CSS ở ngay đó để xem nó trông như thế nào. Hãy thử thay đổi backgroud nền của .navbar thành #e8e5ce.


Bạn sẽ thấy background nền của thanh điều hướng sẽ thay đổi. Nếu thích điều này thì bạn hãy sao chép quy tắc CSS này và dán vào tệp tin style.css của Child Theme .

.navbar {
background-color: #e8e5ce;
}

Lưu các thay đổi đã thực hiện cho tệp style.css và hãy xem trước trang web của bạn.

Lặp lại quá trình này với bất cứ điều gì muốn thay đổi trong stylesheet của theme. Dưới đây là stylesheet hoàn chỉnh mà tôi đã tạo cho child theme. Hãy thử nghiệm và sửa đổi nó.

/*
 Theme Name:   WPB Child Theme
 Theme URI:    http://www.dieuhau.com
 Description:  A Twenty Thirteen child theme 
 Author:       Dieuhau
 Author URI:   http://www.dieuhau.com
 Template:     twentythirteen
 Version:      1.0.0
*/

@import url("../twentythirteen/style.css");

.site-title {
padding: 30px 0 30px;
}

.site-header .home-link {
min-height: 0px;
}

.navbar {
background-color: #e8e5ce;
}

.widget { 
background-color: #e8e5ce;
}
.site-footer {
background-color: #d8cdc1;
} 
.site-footer .sidebar-container { 
background-color:#533F2A
}

Chỉnh sửa các File Template

Mỗi theme WordPress đều có bố cục khác nhau. Hãy nhìn vào bố cục của theme Twenty Thirteen. Bạn có tiêu đề, menu điều hướng, khu nội dung, widget ở footer và ở bên sidbar bên phải.

Mỗi phần này được xử lý bởi các tệp khác nhau trong thư mục twentythirteen. Các tệp này được gọi là các template.

Hầu hết các template này được đặt tên theo khu vực mà chúng được sử dụng . Ví dụ: phần chân trang thường được xử lý bởi tệp footer.php, tiêu đề và phần định hướng được xử lý bởi tệp header.php. Một số khu vực, như khu vực nội dung được xử lý bởi nhiều tệp tin được gọi là template nội dung.

Đầu tiên bạn cần làm là chọn tập tin theme muốn sửa đổi và sao chép nó vào child theme.

Ví dụ: bạn muốn xóa liên kết “powered by WordPress” ở dưới footer và thêm thông báo về bản quyền ở đó thì chỉ cần sao chép tập tin footer.php trong child theme và mở nó trong một trình soạn thảo văn bản như notepad. Tìm ra các dòng bạn muốn loại bỏ và thay thế chúng. Như thế này:

<php
/**
 * The template for displaying the footer
 *
 * Contains footer content and the closing of the #main and #page div elements.
 *
 * @package WordPress
 * @subpackage Twenty_Thirteen
 * @since Twenty Thirteen 1.0
 */
>

		</div><!-- #main -->
		<footer id="colophon" class="site-footer" role="contentinfo">
			<?php get_sidebar( 'main' ); ?>

			<div class="site-info">
				<p>&copy; Copyright <?php echo date(Y); ?> <?php bloginfo('name'); ?> All rights reserved.</p>
				
			</div><!-- .site-info -->
		</footer><!-- #colophon -->
	</div><!-- #page -->

	<?php wp_footer(); >
</body>
</html>

Trong code này, tôi đã thay thế Twenty Thirteen credits với thông báo bản quyền.

Khắc phục sự cố rất dễ dàng hơn khi tạo child theme. Ví dụ: nếu bạn vô tình xóa nội dung yêu cầu theme gốc, thì chỉ cần xóa tệp khỏi child theme của và bắt đầu lại.

Thêm chức năng mới cho child theme

Bạn sẽ thấy nhiều hướng dẫn WordPress yêu cầu bạn sao chép và dán code snippet trong file functions.php của theme. Đọc bài 28 Mẹo Vô Cùng Hữu Dụng Cho Tệp Tin Functions WordPress để học cách sử dụng file này nếu bạn chưa biết

Thêm code snippet vào tệp functions.php của theme parent nghĩa là những thay đổi của bạn sẽ bị ghi đè lên bất cứ khi nào có bản cập nhật mới cho theme gốc. Đây là lý do tại sao bạn nên sử dụng child theme và thêm tất cả code snippet tùy chỉnh vào tệp functions.php của child theme.

Hãy tạo tệp mới trong thư mục của child theme và đặt tên là functions.php. Trong ví dụ này chúng ta sẽ thêm một code snippet nhỏ để thay đổi hình ảnh tiêu đề mặc định thành hình ảnh của chúng ta.

tôi đã tạo ra một hình ảnh tiêu đề và hình thu nhỏ bằng cách chỉnh sửa hình ảnh tiêu đề mặc định của Twenty Thirteen. Tiếp theo, tôi tải nó lên child theme trong / images / headers / folder.

Sau đó chúng ta cần ra lệnh cho WordPress sử dụng hình ảnh này làm hình ảnh tiêu đề mặc định cho theme của chúng ta. Chúng ta có thể làm điều đó bằng cách thêm code snippet này vào tệp functions.php của child theme :

<php
function wpbdemo_custom_header_setup() { 

	add_theme_support( 'custom-header', array( 'default-image' => '%s/images/headers/circle-wpb.png' ) );

	register_default_headers( array(
	    'caramel' => array(
	        'url'           => '%2$s/images/headers/circle-wpb.png',
	        'thumbnail_url' => '%2$s/images/headers/circle-wpb-thumbnail.png',
	        'description'   => __( 'Caramel', 'Caramel header', 'twentythirteen' )
	    ),
	) );

} 
add_action( 'after_setup_theme', 'wpbdemo_custom_header_setup' );
>

Bây giờ nếu truy cập vào Appearance »Header, bạn sẽ nhìn thấy ảnh tôi thêm làm ảnh mặc định.

Bạn có thể thêm bất kỳ code snippet tùy chỉnh nào mà mình cần trong tệp functions.php của child theme.

Xử lý sự cố

Là người mới làm quen với WordPress, bạn sẽ phải mắc sai lầm khi làm việc với child theme đầu tiên. Chỉ cần đừng bỏ cuộc quá nhanh. Hãy xem danh sách các lỗi thường gặp trong WordPress để tìm cách sửa chúng.

Lỗi phổ biến nhất mà bạn sẽ thấy là lỗi cú pháp, lỗi này thường xảy ra khi bạn bỏ quên thứ gì đó trong code. Đây là hướng dẫn nhanh giải thích cách làm thế nào sửa lỗi Syntax Error trong WordPress

Kết quả cuối cùng


tôi hy vọng bài viết này đã giúp bạn hiểu cách tạo ra một child theme WordPress. Hãy nhớ rằng có rất nhiều hỗ trợ sẵn có cho những người cần nó.

Nếu thích bài viết này, hãy đăng ký các hướng dẫn bằng kênh YouTube cho WordPress của tôi. Bạn hãy tìm thấy tôi trên Facebook.

Về tác giả

Duy Anh

Chào các bạn,

Mình là coder, đang sống và làm việc ở Mỹ. Mình thích viết lách nên muốn dành khoảng thời gian trống để chia sẻ các thủ thuật giúp các bạn xây dựng được trang web riêng của mình. Bạn nào cần xây dựng blog, web thì cứ ới, rảnh là mình giúp, tất cả FREE nhé!

Ý kiến cá nhân của bạn

bộ công cụ Wordpress hữu ích dành cho mọi website

Bộ công cụ hữu ích dành cho mọi website Wordpress

Bao gồm theme & plugin tốt nhất và được sử dụng nhiều nhất!

Xin vui lòng kiểm tra email để xác thực tài khoản!