Cấu trúc theme child wordpress phần 1

Mục Lục

Bạn hãy cho tôi cấu trúc theme child wordpress

Cấu trúc theme child wordpress bao gồm các file và thư mục tối thiểu cần thiết để kế thừa và mở rộng một theme cha (parent theme). Dưới đây là cấu trúc cơ bản của một theme child:

Thư mục theme child:Bạn cần tạo một thư mục riêng biệt cho theme child trong thư mục wp-content/themes/. Thư mục này thường có tên theo dạng parent-theme-name-child.
Bạn cần tạo một thư mục riêng biệt cho theme child trong thư mục wp-content/themes/. Thư mục này thường có tên theo dạng parent-theme-name-child.
File style.css:Đây là file bắt buộc trong theme child để định danh và mô tả theme child. Nội dung của file này phải chứa phần khai báo như sau:
```
/*
Theme Name:   Tên theme child (bắt buộc)
Template:     Tên thư mục của theme cha (bắt buộc)
Author:       Tên tác giả (tùy chọn)
Description:  Mô tả theme child (tùy chọn)
Version:      Phiên bản (tùy chọn)
*/
```
Ngoài phần khai báo này, bạn có thể thêm các custom CSS của mình vào file style.css.
Đây là file bắt buộc trong theme child để định danh và mô tả theme child. Nội dung của file này phải chứa phần khai báo như sau:
Ngoài phần khai báo này, bạn có thể thêm các custom CSS của mình vào file style.css.
File functions.php:File này không bắt buộc nhưng rất quan trọng nếu bạn muốn thêm hoặc thay đổi các chức năng của theme cha. Thông thường, bạn cần enqueue lại file style.css của theme cha bằng cách sử dụng hàm wp_enqueue_style():
File này không bắt buộc nhưng rất quan trọng nếu bạn muốn thêm hoặc thay đổi các chức năng của theme cha. Thông thường, bạn cần enqueue lại file style.css của theme cha bằng cách sử dụng hàm wp_enqueue_style():
Các file template:Bạn có thể sao chép các file template từ theme cha sang theme child và tùy chỉnh chúng. Ví dụ: header.php, footer.php, single.php, page.php, v.v.Lưu ý rằng nếu một file template tồn tại trong theme child, nó sẽ ghi đè phiên bản tương ứng trong theme cha.
Bạn có thể sao chép các file template từ theme cha sang theme child và tùy chỉnh chúng. Ví dụ: header.php, footer.php, single.php, page.php, v.v.
Lưu ý rằng nếu một file template tồn tại trong theme child, nó sẽ ghi đè phiên bản tương ứng trong theme cha.
Các thư mục và file khác:Bạn có thể thêm các thư mục và file khác như assets (chứa hình ảnh, script, style tùy chỉnh), includes (chứa các file PHP bổ trợ), hoặc các template part (template-parts).
Bạn có thể thêm các thư mục và file khác như assets (chứa hình ảnh, script, style tùy chỉnh), includes (chứa các file PHP bổ trợ), hoặc các template part (template-parts).

Thư mục theme child:

Bạn cần tạo một thư mục riêng biệt cho theme child trong thư mục wp-content/themes/. Thư mục này thường có tên theo dạng parent-theme-name-child.

File style.css:

Đây là file bắt buộc trong theme child để định danh và mô tả theme child. Nội dung của file này phải chứa phần khai báo như sau:

/*
Theme Name:   Tên theme child (bắt buộc)
Template:     Tên thư mục của theme cha (bắt buộc)
Author:       Tên tác giả (tùy chọn)
Description:  Mô tả theme child (tùy chọn)
Version:      Phiên bản (tùy chọn)
*/

Ngoài phần khai báo này, bạn có thể thêm các custom CSS của mình vào file style.css.

File functions.php:

File này không bắt buộc nhưng rất quan trọng nếu bạn muốn thêm hoặc thay đổi các chức năng của theme cha. Thông thường, bạn cần enqueue lại file style.css của theme cha bằng cách sử dụng hàm wp_enqueue_style():

<?php
function my_theme_enqueue_styles() {
    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') );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
?>

Các file template:

Bạn có thể sao chép các file template từ theme cha sang theme child và tùy chỉnh chúng. Ví dụ: header.php, footer.php, single.php, page.php, v.v.
Lưu ý rằng nếu một file template tồn tại trong theme child, nó sẽ ghi đè phiên bản tương ứng trong theme cha.

Các thư mục và file khác:

Bạn có thể thêm các thư mục và file khác như assets (chứa hình ảnh, script, style tùy chỉnh), includes (chứa các file PHP bổ trợ), hoặc các template part (template-parts).

Ví dụ về cấu trúc cơ bản của theme child:

wp-content/
└── themes/
    └── parent-theme/
    └── parent-theme-child/
        ├── style.css
        ├── functions.php
        ├── header.php (tùy chọn)
        ├── footer.php (tùy chọn)
        ├── single.php (tùy chọn)
        └── template-parts/ (tùy chọn)
            └── content.php (tùy chọn)

Với cấu trúc này, bạn có thể dễ dàng tùy chỉnh theme mà không lo ảnh hưởng đến các cập nhật của theme cha.

Cho tôi code functions.php

Dưới đây là ví dụ về nội dung file functions.php cơ bản cho theme child trong WordPress:

<?php
/**
 * Theme Child Functions
 */

// Đảm bảo rằng file style.css của theme cha được tải trước
function my_theme_enqueue_styles() {
    // Tải file style.css của theme cha
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );

    // Tải file style.css của theme child
    wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array('parent-style') );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );

// Bạn có thể thêm các hàm tùy chỉnh khác tại đây

// Ví dụ: Thêm một chức năng tùy chỉnh cho theme child
function my_custom_function() {
    // Nội dung hàm tùy chỉnh của bạn
}
add_action( 'init', 'my_custom_function' );

?>

Giải thích code:

wp_enqueue_style(): Hàm này dùng để đăng ký và enqueue các file CSS. Ở đây, chúng ta đảm bảo rằng style.css của theme cha được tải trước, sau đó mới đến style.css của theme child.
get_template_directory_uri(): Trả về đường dẫn URL của thư mục theme cha.
get_stylesheet_directory_uri(): Trả về đường dẫn URL của thư mục theme child.
array(‘parent-style’): Đảm bảo rằng child-style phụ thuộc vào parent-style, nghĩa là file CSS của theme cha sẽ được tải trước.

wp_enqueue_style(): Hàm này dùng để đăng ký và enqueue các file CSS. Ở đây, chúng ta đảm bảo rằng style.css của theme cha được tải trước, sau đó mới đến style.css của theme child.

get_template_directory_uri(): Trả về đường dẫn URL của thư mục theme cha.

get_stylesheet_directory_uri(): Trả về đường dẫn URL của thư mục theme child.

array(‘parent-style’): Đảm bảo rằng child-style phụ thuộc vào parent-style, nghĩa là file CSS của theme cha sẽ được tải trước.

Bạn có thể thêm các hàm tùy chỉnh khác vào file này để mở rộng hoặc thay đổi chức năng của theme cha theo nhu cầu của bạn.

Cho tôi code header.php

Dưới đây là một ví dụ cơ bản cho file header.php trong theme child của WordPress. File này chủ yếu chứa mã HTML và PHP để hiển thị phần đầu trang, bao gồm các thẻ meta, link tới file CSS và script, và các thành phần như logo, menu điều hướng.

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="profile" href="https://gmpg.org/xfn/11">

    <?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>

    <header id="masthead" class="site-header">
        <div class="site-branding">
            <?php
            // Hiển thị logo tùy chỉnh nếu có, hoặc tên và mô tả trang
            if ( has_custom_logo() ) {
                the_custom_logo();
            } else {
                ?>
                <div class="site-title">
                    <a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a>
                </div>
                <div class="site-description"><?php bloginfo( 'description' ); ?></div>
                <?php
            }
            ?>
        </div><!-- .site-branding -->

        <nav id="site-navigation" class="main-navigation">
            <?php
            // Hiển thị menu chính của trang
            wp_nav_menu( array(
                'theme_location' => 'menu-1',
                'menu_id'        => 'primary-menu',
            ) );
            ?>
        </nav><!-- #site-navigation -->
    </header><!-- #masthead -->

    <div id="content" class="site-content">

Giải thích code:

DOCTYPE và thẻ mở : Bắt đầu file với định dạng DOCTYPE và thẻ HTML, kèm theo thuộc tính ngôn ngữ của trang.
và các thẻ meta: Bao gồm các thẻ meta cơ bản như charset và viewport, cùng với các link profile cần thiết cho WordPress.
wp_head(): Hook này được sử dụng để chèn các script, styles, và metadata khác từ WordPress và các plugin vào phần .
và body_class(): Thẻ bao gồm hàm body_class() để thêm các class CSS động dựa trên ngữ cảnh của trang (ví dụ: trang chủ, single post, category, v.v.).
và site-branding: Đây là phần hiển thị logo hoặc tên và mô tả của trang. the_custom_logo() kiểm tra xem người dùng đã cài đặt logo tùy chỉnh chưa và hiển thị nó nếu có.
wp_nav_menu(): Hàm này được sử dụng để hiển thị menu điều hướng chính. theme_location xác định vị trí của menu trong theme (ví dụ: menu-1 là menu chính).
: Mở một
để chứa nội dung chính của trang, phần này sẽ được đóng trong file footer.php.

DOCTYPE và thẻ mở <html>: Bắt đầu file với định dạng DOCTYPE và thẻ HTML, kèm theo thuộc tính ngôn ngữ của trang.

<head> và các thẻ meta: Bao gồm các thẻ meta cơ bản như charset và viewport, cùng với các link profile cần thiết cho WordPress.

wp_head(): Hook này được sử dụng để chèn các script, styles, và metadata khác từ WordPress và các plugin vào phần <head>.

<body> và body_class(): Thẻ <body> bao gồm hàm body_class() để thêm các class CSS động dựa trên ngữ cảnh của trang (ví dụ: trang chủ, single post, category, v.v.).

<header> và site-branding: Đây là phần hiển thị logo hoặc tên và mô tả của trang. the_custom_logo() kiểm tra xem người dùng đã cài đặt logo tùy chỉnh chưa và hiển thị nó nếu có.

wp_nav_menu(): Hàm này được sử dụng để hiển thị menu điều hướng chính. theme_location xác định vị trí của menu trong theme (ví dụ: menu-1 là menu chính).

<div id=”content”>: Mở một <div> để chứa nội dung chính của trang, phần này sẽ được đóng trong file footer.php.

Bạn có thể tùy chỉnh file header.php này tùy theo nhu cầu của bạn, bao gồm việc thêm hoặc chỉnh sửa các thành phần để phù hợp với giao diện và chức năng của trang web.

Cho tôi code footer.php

Dưới đây là một ví dụ cơ bản cho file footer.php trong theme child của WordPress. File này thường chứa mã HTML và PHP để hiển thị phần cuối trang web, bao gồm các liên kết đến trang, thông tin bản quyền, và lời gọi hàm wp_footer() để đảm bảo rằng các script cần thiết của WordPress và plugin được tải.

    </div><!-- #content -->

    <footer id="colophon" class="site-footer">
        <div class="site-info">
            <?php
            // Hiển thị tên trang và năm hiện tại
            echo '&copy; ' . date('Y') . ' ' . get_bloginfo('name');
            ?>
            <span class="sep"> | </span>
            <?php
            // Hiển thị link đến trang chủ
            printf( esc_html__( 'Proudly powered by %s', 'textdomain' ), '<a href="' . esc_url( __( 'https://wordpress.org/', 'textdomain' ) ) . '">WordPress</a>' );
            ?>
        </div><!-- .site-info -->
    </footer><!-- #colophon -->

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

Giải thích code:

: Đóng thẻ

mở trong header.php, nơi chứa nội dung chính của trang.

: Một khu vực bên trong footer để hiển thị các thông tin bổ sung như tên trang và liên kết.

echo ‘© ‘ . date(‘Y’) . ‘ ‘ . get_bloginfo(‘name’);: Hiển thị thông tin bản quyền với năm hiện tại và tên của trang web.

printf( esc_html__( ‘Proudly powered by %s’, ‘textdomain’ ), ‘WordPress‘ );: Hiển thị thông điệp “Proudly powered by WordPress” với liên kết đến WordPress.org.

wp_footer(): Hook quan trọng cần được gọi trước khi đóng thẻ . Hàm này cho phép WordPress và các plugin thêm mã JavaScript hoặc các script khác vào cuối trang.

: Đóng các thẻ HTML mở trong header.php.

</div><!– #content –>: Đóng thẻ <div> mở trong header.php, nơi chứa nội dung chính của trang.

<footer id=”colophon”>: Phần bắt đầu của footer, thường chứa thông tin bản quyền, các liên kết quan trọng hoặc các thông tin liên lạc.

<div>: Một khu vực bên trong footer để hiển thị các thông tin bổ sung như tên trang và liên kết.

echo ‘© ‘ . date(‘Y’) . ‘ ‘ . get_bloginfo(‘name’);: Hiển thị thông tin bản quyền với năm hiện tại và tên của trang web.

printf( esc_html__( ‘Proudly powered by %s’, ‘textdomain’ ), ‘<a href=”‘ . esc_url( __( ‘https://wordpress.org/’, ‘textdomain’ ) ) . ‘”>WordPress</a>’ );: Hiển thị thông điệp “Proudly powered by WordPress” với liên kết đến WordPress.org.

wp_footer(): Hook quan trọng cần được gọi trước khi đóng thẻ </body>. Hàm này cho phép WordPress và các plugin thêm mã JavaScript hoặc các script khác vào cuối trang.

</body></html>: Đóng các thẻ HTML mở trong header.php.

Bạn có thể tùy chỉnh file footer.php này để thêm các nội dung hoặc chức năng bổ sung theo yêu cầu của bạn, chẳng hạn như hiển thị các menu liên kết, icon mạng xã hội, hoặc bất kỳ thông tin nào khác bạn muốn xuất hiện ở phần cuối của trang web.

Cho tôi code single.php

Dưới đây là ví dụ về file single.php, dùng để hiển thị nội dung chi tiết của một bài viết (post) đơn lẻ trong WordPress. File này thường bao gồm các thành phần như tiêu đề bài viết, nội dung bài viết, metadata (tác giả, ngày đăng), và phần bình luận.

<?php
get_header(); // Gọi header.php
?>

<div id="primary" class="content-area">
    <main id="main" class="site-main">

    <?php
    while ( have_posts() ) :
        the_post(); // Lấy dữ liệu của bài viết hiện tại
    ?>

        <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
            <header class="entry-header">
                <?php the_title( '<h1 class="entry-title">', '</h1>' ); // Hiển thị tiêu đề bài viết ?>
            </header><!-- .entry-header -->

            <div class="entry-meta">
                <?php
                // Hiển thị metadata của bài viết: ngày đăng và tác giả
                echo '<span class="posted-on">' . get_the_date() . '</span>';
                echo '<span class="byline"> by ' . get_the_author() . '</span>';
                ?>
            </div><!-- .entry-meta -->

            <div class="entry-content">
                <?php
                the_content(); // Hiển thị nội dung của bài viết

                wp_link_pages( array(
                    'before' => '<div class="page-links">' . __( 'Pages:', 'textdomain' ),
                    'after'  => '</div>',
                ) );
                ?>
            </div><!-- .entry-content -->

            <footer class="entry-footer">
                <?php
                // Hiển thị các thông tin khác như category và tag
                echo '<span class="cat-links">' . __( 'Posted in', 'textdomain' ) . ' ' . get_the_category_list( ', ' ) . '</span>';
                echo '<span class="tags-links">' . get_the_tag_list( '', ', ' ) . '</span>';
                ?>
            </footer><!-- .entry-footer -->
        </article><!-- #post-<?php the_ID(); ?> -->

        <?php
        // Nếu có bình luận, hiển thị phần bình luận
        if ( comments_open() || get_comments_number() ) :
            comments_template();
        endif;

        // Hiển thị link đến bài viết trước và bài viết tiếp theo
        the_post_navigation( array(
            'prev_text' => '<span class="nav-subtitle">' . __( 'Previous:', 'textdomain' ) . '</span> <span class="nav-title">%title</span>',
            'next_text' => '<span class="nav-subtitle">' . __( 'Next:', 'textdomain' ) . '</span> <span class="nav-title">%title</span>',
        ) );

    endwhile; // Kết thúc vòng lặp
    ?>

    </main><!-- #main -->
</div><!-- #primary -->

<?php
get_sidebar(); // Gọi sidebar.php nếu có
get_footer(); // Gọi footer.php
?>

Giải thích code:

get_header(): Gọi file header.php để hiển thị phần đầu trang.
have_posts() và the_post(): Đây là vòng lặp WordPress (WordPress Loop). have_posts() kiểm tra xem có bài viết nào không, và the_post() chuẩn bị dữ liệu cho bài viết đó.
: Mã HTML dùng để chứa nội dung của bài viết. Mỗi bài viết được xác định bằng ID riêng và class CSS riêng, hỗ trợ styling.
the_title(): Hiển thị tiêu đề của bài viết trong thẻ
.
get_the_date() và get_the_author(): Hiển thị ngày đăng và tên tác giả của bài viết.
the_content(): Hiển thị nội dung của bài viết.
wp_link_pages(): Hiển thị phân trang nếu bài viết được chia thành nhiều trang.
get_the_category_list() và get_the_tag_list(): Hiển thị danh sách các category và tag liên quan đến bài viết.
comments_template(): Gọi file comments.php để hiển thị và quản lý phần bình luận.
the_post_navigation(): Hiển thị điều hướng giữa bài viết trước và bài viết tiếp theo.
get_sidebar(): Gọi file sidebar.php để hiển thị sidebar (nếu có).
get_footer(): Gọi file footer.php để hiển thị phần cuối trang.

get_header(): Gọi file header.php để hiển thị phần đầu trang.

have_posts() và the_post(): Đây là vòng lặp WordPress (WordPress Loop). have_posts() kiểm tra xem có bài viết nào không, và the_post() chuẩn bị dữ liệu cho bài viết đó.

<article>: Mã HTML dùng để chứa nội dung của bài viết. Mỗi bài viết được xác định bằng ID riêng và class CSS riêng, hỗ trợ styling.

the_title(): Hiển thị tiêu đề của bài viết trong thẻ <h1>.

get_the_date() và get_the_author(): Hiển thị ngày đăng và tên tác giả của bài viết.

the_content(): Hiển thị nội dung của bài viết.

wp_link_pages(): Hiển thị phân trang nếu bài viết được chia thành nhiều trang.

get_the_category_list() và get_the_tag_list(): Hiển thị danh sách các category và tag liên quan đến bài viết.

comments_template(): Gọi file comments.php để hiển thị và quản lý phần bình luận.

the_post_navigation(): Hiển thị điều hướng giữa bài viết trước và bài viết tiếp theo.

get_sidebar(): Gọi file sidebar.php để hiển thị sidebar (nếu có).

get_footer(): Gọi file footer.php để hiển thị phần cuối trang.

File single.php này có thể được tùy chỉnh thêm để phù hợp với giao diện và yêu cầu cụ thể của bạn, như thêm các widget, custom fields, hoặc thay đổi bố cục hiển thị.

Cho tôi code content.php

Dưới đây là ví dụ về file content.php, thường được sử dụng trong WordPress để hiển thị nội dung của một bài viết hoặc một trang trong các template như single.php, page.php, hoặc trong các vòng lặp (loop) khác. File này thường chứa mã HTML và PHP để định dạng cách bài viết được hiển thị, bao gồm tiêu đề, metadata, hình ảnh nổi bật (featured image), và nội dung chính.

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    <header class="entry-header">
        <?php
        if ( is_singular() ) {
            the_title( '<h1>', '</h1>' ); // Hiển thị tiêu đề bài viết khi đang xem bài viết đơn lẻ
        } else {
            the_title( '<h2><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h2>' ); // Hiển thị tiêu đề bài viết với liên kết khi đang xem danh sách bài viết
        }
        ?>

        <?php if ( has_post_thumbnail() ) : ?>
            <div class="post-thumbnail">
                <a href="<?php the_permalink(); ?>">
                    <?php the_post_thumbnail(); // Hiển thị hình ảnh nổi bật (featured image) với liên kết tới bài viết ?>
                </a>
            </div><!-- .post-thumbnail -->
        <?php endif; ?>

        <div class="entry-meta">
            <?php
            // Hiển thị metadata của bài viết: ngày đăng và tác giả
            echo '<span class="posted-on">' . get_the_date() . '</span>';
            echo '<span class="byline"> by ' . get_the_author() . '</span>';
            ?>
        </div><!-- .entry-meta -->
    </header><!-- .entry-header -->

    <div class="entry-content">
        <?php
        if ( is_singular() ) {
            the_content(); // Hiển thị toàn bộ nội dung bài viết khi đang xem bài viết đơn lẻ

            wp_link_pages( array(
                'before' => '<div>' . __( 'Pages:', 'textdomain' ),
                'after'  => '</div>',
            ) );
        } else {
            the_excerpt(); // Hiển thị đoạn trích (excerpt) của bài viết khi đang xem danh sách bài viết
        }
        ?>
    </div><!-- .entry-content -->

    <footer class="entry-footer">
        <?php
        // Hiển thị category và tag liên quan đến bài viết
        echo '<span class="cat-links">' . __( 'Posted in', 'textdomain' ) . ' ' . get_the_category_list( ', ' ) . '</span>';
        echo '<span class="tags-links">' . get_the_tag_list( '', ', ' ) . '</span>';

        // Hiển thị liên kết để chỉnh sửa bài viết nếu người dùng có quyền chỉnh sửa
        edit_post_link(
            sprintf(
                __( 'Edit <span class="screen-reader-text">%s</span>', 'textdomain' ),
                get_the_title()
            ),
            '<span class="edit-link">',
            '</span>'
        );
        ?>
    </footer><!-- .entry-footer -->
</article><!-- #post-<?php the_ID(); ?> -->