Hướng dẫn cách sử dụng hàm get_template_part trong WordPress

huong-dan-cach-su-dung-ham-get_template_part-trong-wordpress

1. Hàm get_template_part là gì?

Có thể nói, tất cả các file trong theme wordpress đều được gọi là 1 template. Hàm get_template_part cho phép ta gọi bất kì template nào có trong theme. Mục đích chính của hàm này là gọi và hiển thị các đoạn mã HMTL trong website.

2. Cách dùng hàm get_template_part như thế nào?

<?php
get_template_part( string $slug, string $name = null, array $args = array() );
?>

2.1 Từ phiên bản wordpress 5.5

Từ phiên bản wp 5.5 về sau hàm get_template_part có 3 tham số, cụ thể:

<?php 
$args['new_bg'] = 'new-bg'; // Kể từ wp5.5 trở về sau, sẽ có thêm biết $args là array
$args['is_circle'] = 'circle-style';
get_template_part( 'template-parts/content', 'loop', $args );
?>

Giải thích: Để hàm get_template_part trong đoạn code trên có kết quả, bạn cần phải có 1 folder template-parts ngay thư mục gốc của theme như sau:

huong-dan-cach-su-dung-ham-get_template_part-trong-wordpress-2

Tiếp theo file template ở đây được tạo thành bởi dấu gạch ngang (-) như sau “content-loop.php“, bạn có thể xem hình bên dưới sẽ dễ hiểu hơn.

huong-dan-cach-su-dung-ham-get_template_part-trong-wordpress-3

Ví dụ, ta gọi get_template_part tại file theme/index.php như sau:

<?php
if ( have_posts() ) :
    /* Start the Loop */
    while ( have_posts() ) : the_post();
        $args['new_bg'] = 'new-bg'; // Kể từ wp5.5 trở về sau, sẽ có thêm biết $args là array 
        $args['is_circle'] = 'circle-style'; 
        get_template_part( 'template-parts/content', 'loop', $args );
    endwhile;
endif;
?>

Tiếp theo nội dung file: theme/template-parts/content-loop.php như sau:

<?php
$new_bg = $args['new_bg']; // lấy giá trị biến được truyền qua tham số $args của hàm get_template_part
$is_circle = $args['is_circle']; // lấy giá trị biến được truyền qua tham số $args của hàm get_template_part
?>
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    <div class="<?php echo $new_bg?> <?php echo $is_circle?>">
        <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
    </div>
</article>

2.2 Phiên bản wordpress 5.4 trở về trước.

Chú ý từ phiên bản wp5.4 trở về trước ta sẽ không có biến $args nhé.

<?php
get_template_part( 'template-parts/content', 'loop'); 
?>

3. Tại sao phải dùng get_template_part?

Bạn có biết không, khi thiết kế website bằng wordpress bạn cần phải thao tác rất nhiều trên template. Tôi ví dụ cụ thể, trang chủ một website chuẩn phải có 3 phần rõ ràng: Header, Body và Footer. Vì thế trong wordpress bắt buộc ta phải sử dụng template header.php, index.php và footer.php.

Trong Header sẽ tiếp tục chia nhỏ Header thành: header-top, header-main…và header-nav. Nếu bạn chỉ dùng 1 file header.php mà làm tất cả mọi thứ, sẽ gặp chút rắc rối nếu tìm lỗi hoặc chuyển giao cho người phát triển kế thừa.

huong-dan-cach-su-dung-ham-get_template_part-trong-wordpress-4

Đây là một đoạn header.php chưa dùng hàm get_template_part

<!doctype html>
<html class="no-js" <?php language_attributes(); ?>>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="profile" href="http://gmpg.org/xfn/11">
    <?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>
<?php wp_body_open(); ?>
<div id="page" class="site">
    <header id="masthead" class="site-header">
        <div class="top">
            <ul>
                <li><a>Hotline: 0909123456</a></li>
                <li><a>Email: myemail</a></li>
            </ul>
        </div>
        <div class="main">
            <img src="/image/logo.png" alt="logo"/>
            <img src="/image/baner.png" alt="banner"/>
        </div>
        <div class="nav">
            <ul>
                <li><a href="/">Trang chủ</a></li>
                <li><a href="/">Giới thiệu</a></li>
                <li><a href="/">Sản phẩm</a></li>
                <li><a href="/">Tin tức</a></li>
                <li><a href="/">Liên hệ</a></li>
            </ul>
        </div>
    </header><!-- #masthead -->

Từ đoạn code trên ta sẽ tách thành 3 file header, cụ thể như sau:header-top.php, header-main.php, header-nav.php trong đường dẫn: template-parts/header/

huong-dan-cach-su-dung-ham-get_template_part-trong-wordpress-5

3.1 Nội dung file header-top.php:

<div class="top">
  <ul>
    <li><a>Hotline: 0909123456</a></li>
    <li><a>Email: myemail</a></li>
  </ul>
</div>

3.2 Nội dung file header-main.php:

<div class="main"> 
    <img src="/image/logo.png" alt="logo"/> 
    <img src="/image/baner.png" alt="banner"/> 
</div>

3.3 Nội dung file header-top.php:

<div class="nav">
  <ul>
    <li><a href="/">Trang chủ</a></li>
    <li><a href="/">Giới thiệu</a></li>
    <li><a href="/">Sản phẩm</a></li>
    <li><a href="/">Tin tức</a></li>
    <li><a href="/">Liên hệ</a></li>
  </ul>
</div>

3.4 Và sau đây là nội dung file header.php dùng hàm get_template_part

<!doctype html>
<html class="no-js" <?php language_attributes(); ?>>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="profile" href="http://gmpg.org/xfn/11">
    <?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>
<?php wp_body_open(); ?>
<div id="page" class="site">
    <header id="masthead" class="site-header">
        <?php 
        get_template_part( 'template-parts/header/header', 'top', array() );
        get_template_part( 'template-parts/header/header', 'main', array() );
        get_template_part( 'template-parts/header/header', 'nav', array() );
        ?>
    </header><!-- #masthead -->

Rõ ràng khi dùng hàm get_template_part, code chúng ta gọn gàng hơn hẳn và khi lỗi xày ra chúng ta sẽ dễ dàng tìm kiếm hơn, bạn chỉ cần đóng lại bằng dấu // của php.

<?php 
   // get_template_part( 'template-parts/header/header', 'top', array() );
?>

4. Hàm get_template_part định nghĩa ở đâu?

Hàm get_template_part được định nghĩa trong file: code/wp-includes/general-template.php tại dòng 167

huong-dan-cach-su-dung-ham-get_template_part-trong-wordpress-6

5. Mối quan hệ với hàm locate_template?

Nói về mối liên hệ giữa get_template_part và locate_template, ta nhận thấy rõ ràng, get_template_part gọi lại từ hàm locate_template, cụ thể nếu bạn sử dụng như sau:

<?php
get_template_part( 'template-parts/header/header', 'top', array() );
?>

Ta có thể sử dụng bằng hàm locate_template như sau:

<?php 
$templates[] = 'template-parts/header/header-top.php';
locate_template( $templates, true, false, array() );
?>

Như vậy sau khi đọc qua bài viết này, tôi hi vọng sẽ giúp được bạn có một website bằng wordpress với theme chuẩn khi dùng get_template_part trong việc quản lí code của mình nhé!

5/5 - (1 bình chọn)

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *