Tạo theme child Wordpress đơn giản 2024

Mục Lục

Tạo theme child WordPress với theme child gốc

Tạo theme child WordPress để tùy chỉnh một theme WordPress một cách an toàn và hiệu quả, bạn nên sử dụng Child Theme. Việc sử dụng Child Theme cho phép bạn thay đổi và mở rộng chức năng của theme gốc mà không làm ảnh hưởng đến khả năng cập nhật của nó. Dưới đây là hướng dẫn chi tiết về cách tạo và sử dụng Child Theme trong WordPress.

1. Child Theme là gì?

Child Theme là một theme kế thừa tất cả các tính năng, kiểu dáng và template của một theme khác được gọi là Parent Theme. Bằng cách sử dụng Child Theme, bạn có thể tùy chỉnh và thêm mới các tính năng mà không làm thay đổi trực tiếp đến mã nguồn của Parent Theme. Điều này rất hữu ích vì khi Parent Theme được cập nhật, các tùy chỉnh của bạn sẽ không bị mất.

2. Các bước tạo Child Theme

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

Kết nối đến thư mục cài đặt WordPress của bạn thông qua FTP hoặc trình quản lý file của hosting.
Điều hướng đến thư mục wp-content/themes/.
Tạo một thư mục mới cho Child Theme của bạn. Tên thư mục nên được đặt theo cấu trúc: tên-theme-gốc-child. Ví dụ: nếu Parent Theme của bạn là twentytwentyone, thì thư mục Child Theme có thể là twentytwentyone-child.

Bước 2: Tạo file style.css cho Child Theme

Trong thư mục Child Theme vừa tạo, tạo một file mới tên là style.css.
Mở file style.css và thêm đoạn mã sau:

/*
 Theme Name:   Twenty Twenty One Child
 Theme URI:    http://example.com/twentytwentyone-child/
 Description:  Child theme cho Twenty Twenty One
 Author:       Tên của bạn
 Author URI:   http://example.com
 Template:     twentytwentyone
 Version:      1.0.0
 Text Domain:  twentytwentyone-child
*/

Giải thích các dòng trên:

Theme Name: Tên của Child Theme.
Theme URI: Liên kết đến trang thông tin của theme (tùy chọn).
Description: Mô tả ngắn gọn về theme.
Author: Tên của bạn hoặc công ty.
Author URI: Liên kết đến trang cá nhân hoặc công ty.
Template: Tên thư mục của Parent Theme (quan trọng, phải chính xác).
Version: Phiên bản của Child Theme.
Text Domain: Dùng cho mục đích dịch ngôn ngữ.

Bước 3: Tạo file functions.php cho Child Theme

Trong thư mục Child Theme, tạo một file mới tên là functions.php.
Mở file functions.php và thêm đoạn mã sau để kế thừa style từ Parent Theme:

<?php
function twentytwentyone_child_enqueue_styles() {
    $parent_style = 'twentytwentyone-style'; // Đây là handle của style từ Parent Theme

    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'twentytwentyone-child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( $parent_style ),
        wp_get_theme()->get('Version')
    );
}
add_action( 'wp_enqueue_scripts', 'twentytwentyone_child_enqueue_styles' );
?>

Lưu ý:

Thay thế ‘twentytwentyone-style’ bằng handle style thực tế của Parent Theme bạn đang sử dụng. Thông thường, bạn có thể tìm thấy handle này trong file functions.php của Parent Theme.
Đoạn mã trên đảm bảo rằng stylesheet của Parent Theme được tải trước, sau đó đến stylesheet của Child Theme, cho phép bạn ghi đè các style mặc định.

Bước 4: Kích hoạt Child Theme trong WordPress

Đăng nhập vào bảng điều khiển WordPress của bạn.
Điều hướng đến Giao diện > Giao diện.
Bạn sẽ thấy Child Theme mới tạo xuất hiện trong danh sách. Nhấn vào nút Kích hoạt để sử dụng Child Theme.

Bước 5: Tùy chỉnh Child Theme

Bây giờ bạn có thể bắt đầu tùy chỉnh Child Theme của mình bằng cách:Thêm các style CSS tùy chỉnh vào file style.css.Sao chép và chỉnh sửa các file template từ Parent Theme vào thư mục Child Theme để thay đổi cấu trúc và chức năng.Thêm các hàm PHP tùy chỉnh vào file functions.php.
Thêm các style CSS tùy chỉnh vào file style.css.
Sao chép và chỉnh sửa các file template từ Parent Theme vào thư mục Child Theme để thay đổi cấu trúc và chức năng.
Thêm các hàm PHP tùy chỉnh vào file functions.php.

Thêm các style CSS tùy chỉnh vào file style.css.
Sao chép và chỉnh sửa các file template từ Parent Theme vào thư mục Child Theme để thay đổi cấu trúc và chức năng.
Thêm các hàm PHP tùy chỉnh vào file functions.php.

Ví dụ: Ghi đè file header.php

Sao chép file header.php từ thư mục Parent Theme vào thư mục Child Theme.
Chỉnh sửa file header.php trong Child Theme theo ý muốn. WordPress sẽ tự động sử dụng file này thay vì file trong Parent Theme.

3. Một số lưu ý khi sử dụng Child Theme

Cấu trúc thư mục đúng: Đảm bảo rằng cấu trúc thư mục và tên file trong Child Theme phản ánh chính xác cấu trúc của Parent Theme.
Cập nhật Parent Theme: Bạn có thể cập nhật Parent Theme mà không lo mất các tùy chỉnh đã thực hiện trong Child Theme.
Tương thích: Khi Parent Theme được cập nhật, hãy kiểm tra xem các tùy chỉnh trong Child Theme có còn hoạt động bình thường không. Đôi khi, thay đổi lớn trong Parent Theme có thể ảnh hưởng đến Child Theme.

4. Kết luận

Việc sử dụng Child Theme là một phương pháp tốt để tùy chỉnh WordPress một cách an toàn và linh hoạt. Nó giúp bạn duy trì các thay đổi tùy chỉnh mà không ảnh hưởng đến khả năng cập nhật và bảo mật của trang web.

Nếu bạn có bất kỳ thắc mắc hoặc cần hỗ trợ thêm, đừng ngần ngại hỏi!

Chúc bạn thành công trong việc tùy chỉnh theme WordPress của mình!

Sao đó tôi muốn custom post type và taxonomi

Để tùy chỉnh Custom Post Type và Custom Taxonomy trong WordPress, bạn có thể thực hiện thông qua code hoặc sử dụng plugin hỗ trợ. Dưới đây là cách bạn có thể tự tay tạo và tùy chỉnh các đối tượng này bằng code trong Child Theme của mình.

1. Tạo Custom Post Type (CPT)

Custom Post Type cho phép bạn tạo ra các loại bài viết tùy chỉnh ngoài những loại mặc định như Post và Page. Ví dụ, bạn có thể tạo một loại bài viết mới như Portfolio, Event, Product, v.v.

Bước 1: Thêm mã vào file functions.php của Child Theme

Mở file functions.php trong Child Theme của bạn và thêm đoạn mã sau để tạo một Custom Post Type mới:

function custom_post_type_init() {
    $labels = array(
        'name'               => _x( 'Portfolios', 'post type general name' ),
        'singular_name'      => _x( 'Portfolio', 'post type singular name' ),
        'menu_name'          => _x( 'Portfolios', 'admin menu' ),
        'name_admin_bar'     => _x( 'Portfolio', 'add new on admin bar' ),
        'add_new'            => _x( 'Add New', 'portfolio' ),
        'add_new_item'       => __( 'Add New Portfolio' ),
        'new_item'           => __( 'New Portfolio' ),
        'edit_item'          => __( 'Edit Portfolio' ),
        'view_item'          => __( 'View Portfolio' ),
        'all_items'          => __( 'All Portfolios' ),
        'search_items'       => __( 'Search Portfolios' ),
        'parent_item_colon'  => __( 'Parent Portfolios:' ),
        'not_found'          => __( 'No portfolios found.' ),
        'not_found_in_trash' => __( 'No portfolios found in Trash.' )
    );

    $args = array(
        'labels'             => $labels,
        'public'             => true,
        'publicly_queryable' => true,
        'show_ui'            => true,
        'show_in_menu'       => true,
        'query_var'          => true,
        'rewrite'            => array( 'slug' => 'portfolio' ),
        'capability_type'    => 'post',
        'has_archive'        => true,
        'hierarchical'       => false,
        'menu_position'      => null,
        'supports'           => array( 'title', 'editor', 'author', 'thumbnail', 'excerpt', 'comments' ),
    );

    register_post_type( 'portfolio', $args );
}
add_action( 'init', 'custom_post_type_init' );

Giải thích các tham số:

name: Tên hiển thị của CPT trên giao diện quản trị.
singular_name: Tên dạng số ít.
menu_name: Tên hiển thị trong menu quản trị.
add_new, edit_item, view_item: Các nhãn tương ứng với các thao tác trong quản trị.
public, show_ui, has_archive: Các thiết lập liên quan đến hiển thị và khả năng truy cập của CPT.
supports: Các tính năng mà CPT này hỗ trợ, như tiêu đề (title), trình soạn thảo (editor), ảnh đại diện (thumbnail), v.v.
rewrite: Định nghĩa slug URL cho CPT.

Bước 2: Lưu lại và kiểm tra

Sau khi thêm đoạn mã trên, lưu file functions.php. Đăng nhập vào bảng điều khiển WordPress của bạn và bạn sẽ thấy một mục mới tên là “Portfolios” trong menu quản trị. Bạn có thể bắt đầu tạo bài viết cho loại nội dung này.

2. Tạo Custom Taxonomy

Custom Taxonomy là cách để bạn tổ chức và phân loại nội dung một cách linh hoạt hơn so với các taxonomy mặc định như Category và Tag.

Bước 1: Thêm mã vào file functions.php của Child Theme

Tiếp tục mở file functions.php và thêm đoạn mã sau để tạo một Custom Taxonomy mới:

function create_custom_taxonomy() {
    $labels = array(
        'name'              => _x( 'Genres', 'taxonomy general name' ),
        'singular_name'     => _x( 'Genre', 'taxonomy singular name' ),
        'search_items'      => __( 'Search Genres' ),
        'all_items'         => __( 'All Genres' ),
        'parent_item'       => __( 'Parent Genre' ),
        'parent_item_colon' => __( 'Parent Genre:' ),
        'edit_item'         => __( 'Edit Genre' ),
        'update_item'       => __( 'Update Genre' ),
        'add_new_item'      => __( 'Add New Genre' ),
        'new_item_name'     => __( 'New Genre Name' ),
        'menu_name'         => __( 'Genres' ),
    );

    $args = array(
        'hierarchical'      => true,
        'labels'            => $labels,
        'show_ui'           => true,
        'show_admin_column' => true,
        'query_var'         => true,
        'rewrite'           => array( 'slug' => 'genre' ),
    );

    register_taxonomy( 'genre', array( 'portfolio' ), $args );
}
add_action( 'init', 'create_custom_taxonomy' );

Giải thích các tham số:

name: Tên hiển thị của taxonomy.
singular_name: Tên dạng số ít của taxonomy.
hierarchical: Nếu đặt là true, taxonomy này sẽ hoạt động giống như Category với cấu trúc cha-con; nếu là false, nó sẽ hoạt động giống Tag.
rewrite: Định nghĩa slug URL cho taxonomy.
register_taxonomy( ‘genre’, array( ‘portfolio’ ), $args ): Đoạn này đăng ký taxonomy genre và gán nó cho Custom Post Type portfolio.

Bước 2: Lưu lại và kiểm tra

Sau khi lưu lại file functions.php, quay lại bảng điều khiển WordPress và mở bất kỳ bài viết nào thuộc loại Portfolio. Bạn sẽ thấy một mục mới trong giao diện chỉnh sửa bài viết cho phép bạn gán Genre cho bài viết đó.

3. Hiển thị Custom Post Type và Custom Taxonomy trên giao diện website

Để hiển thị các Custom Post Type và Custom Taxonomy trên giao diện người dùng, bạn có thể tùy chỉnh file template trong Child Theme:

Tạo file template mới hoặc sửa đổi file template hiện có (như archive-portfolio.php, single-portfolio.php).
Sử dụng các hàm như wp_query, get_posts, hoặc get_terms để truy xuất và hiển thị các bài viết và taxonomy tùy chỉnh.

Nếu bạn cần thêm thông tin về cách tùy chỉnh giao diện hiển thị cho CPT và Taxonomy, hoặc gặp bất kỳ khó khăn nào, đừng ngần ngại hỏi thêm!

Hiển thị danh sách post type lên trang chủ

Để hiển thị danh sách bài viết từ một Custom Post Type (CPT) lên trang chủ của WordPress, bạn cần chỉnh sửa file template của trang chủ. Dưới đây là các bước thực hiện:

1. Xác định file template của trang chủ

File template mặc định của trang chủ trong WordPress thường là index.php, home.php, hoặc front-page.php. Bạn có thể tạo hoặc chỉnh sửa file này trong Child Theme của bạn.

2. Sử dụng WP_Query để truy vấn và hiển thị bài viết từ Custom Post Type

Bạn sẽ sử dụng lớp WP_Query để truy vấn các bài viết từ Custom Post Type và hiển thị chúng. Dưới đây là một ví dụ cơ bản:

Bước 1: Mở file front-page.php hoặc index.php

Nếu bạn đã có file front-page.php hoặc index.php trong Child Theme, hãy mở nó.
Nếu chưa có, hãy tạo một file mới với tên front-page.php trong thư mục Child Theme.

Bước 2: Thêm mã truy vấn và hiển thị bài viết từ CPT

Thêm đoạn mã sau vào vị trí mà bạn muốn hiển thị danh sách bài viết trên trang chủ:

<?php
// Truy vấn bài viết từ Custom Post Type
$args = array(
    'post_type' => 'portfolio', // Thay 'portfolio' bằng tên CPT của bạn
    'posts_per_page' => 10, // Số lượng bài viết muốn hiển thị
);

$custom_query = new WP_Query( $args );

if ( $custom_query->have_posts() ) : ?>
    <div class="custom-post-list">
        <?php while ( $custom_query->have_posts() ) : $custom_query->the_post(); ?>
            <div class="custom-post-item">
                <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                <?php if ( has_post_thumbnail() ) : ?>
                    <div class="post-thumbnail">
                        <a href="<?php the_permalink(); ?>">
                            <?php the_post_thumbnail(); ?>
                        </a>
                    </div>
                <?php endif; ?>
                <div class="post-excerpt">
                    <?php the_excerpt(); ?>
                </div>
            </div>
        <?php endwhile; ?>
    </div>
    <?php
    // Phân trang nếu cần
    the_posts_pagination();
else : ?>
    <p>Không có bài viết nào được tìm thấy.</p>
<?php endif; ?>

<?php
// Khôi phục lại truy vấn gốc
wp_reset_postdata();
?>

Giải thích mã:

‘post_type’ => ‘portfolio’: Thay ‘portfolio’ bằng tên Custom Post Type của bạn.
‘posts_per_page’ => 10: Số lượng bài viết muốn hiển thị.
WP_Query: Lớp này được sử dụng để tạo truy vấn tùy chỉnh. Kết quả sẽ được lặp qua để hiển thị tiêu đề, hình thu nhỏ, và đoạn trích của bài viết.
the_posts_pagination(): Hàm này thêm phân trang nếu có nhiều bài viết.

Bước 3: Lưu file và kiểm tra

Sau khi lưu file front-page.php hoặc index.php, truy cập trang chủ của website để kiểm tra xem danh sách bài viết từ Custom Post Type đã được hiển thị hay chưa.

3. Tùy chỉnh thêm về giao diện hiển thị

Bạn có thể tùy chỉnh thêm về giao diện hiển thị danh sách bài viết bằng cách:

Thêm CSS tùy chỉnh trong file style.css của Child Theme.
Sử dụng các hàm WordPress khác để tùy chỉnh nội dung hiển thị, như get_the_date(), get_the_author(), v.v.

Nếu bạn cần trợ giúp thêm về việc tùy chỉnh giao diện hoặc gặp vấn đề nào, hãy cho mình biết!