[Bài 5] Tuỳ chỉnh trang chủ WordPress

Ở trang chủ WordPress thông thường nó sẽ load các bài viết mới nhất theo dạng List hoặc Grid. Nhưng để trông đẹp và chuyên nghiệp hơn bạn phải tuỳ chỉnh trang chủ. Hôm nay tiếp tục series lập trình Theme WordPress mình sẽ hướng dẫn bạn tuỳ biến homepage bằng code dễ dàng.

Trước khi tìm hiểu đến phần này bạn hãy xem lại 4 bài viết trước đã:

[Bài 1] Hướng dẫn tự thiết kế Theme WordPress đơn

[Bài 2] Tìm hiểu về file Function.php trong WordPress

[Bài 3] Viết code cho file single.php, page.php

[Bài 4] Hàm get_template_part() trong WordPress

Các bước để tuỳ chỉnh trang chủ bằng code theo ý muốn

Để làm được điều này bạn cần dùng tới hàm get_template_part(). Nó sẽ có chức năng gọi một tập tin khác vào trang chủ.

Công việc cần làm trước tiên cần làm đó là tạo ra 3 file home-module1.phphome-module2.phphome-module3.php trong thư mục template-parts

tuy-chinh-trang-chu-bang-code

Code đầy đủ trong file index.php sẽ là:

<?php get_header();?>
<div class="container-fluid">
<div class="row">
<div id="primary" class="content-area"> 
<main id="main" class="site-main" role="main">
<div class="col-sm-8">
<?php get_template_part( 'template-parts/home', 'module1' ); ?>
<?php get_template_part( 'template-parts/home', 'module2' ); ?>
<?php get_template_part( 'template-parts/home', 'module3' ); ?>

<?php
if ( have_posts() ) :
while ( have_posts() ) : the_post(); ?>
<?php if ( has_post_thumbnail() ) : ?>
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
<?php the_post_thumbnail('smallest'); ?>
</a>
<?php endif; ?>
<h2><a href="<?php the_permalink() ?>"><?php the_title() ?></a></h2>
<?php the_excerpt(); ?>
<?php endwhile;
else :
echo '<p>There are no posts!</p>';
endif;
?>
</div>
</div><!-- #main -->
</div><!-- #primary -->

<div class="col-sm-4">
<?php get_sidebar();?>
</div>
</div>
<?php get_footer();?>

Với code trên nó sẽ load ra 3 module trong template-part ra ngoài.

Hoặc nếu không muốn hiển thị latest post nữa thì code rút gọn chỉ còn như thế này:

<?php get_header();?>
<div class="container-fluid">
<div class="row">

<div class="col-sm-8">
<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">
<?php get_template_part( 'template-parts/home', 'giaodien' ); ?>
<?php get_template_part( 'template-parts/home', 'module1' ); ?>
<?php get_template_part( 'template-parts/home', 'module2' ); ?>
<?php get_template_part( 'template-parts/home', 'module3' ); ?>
</main><!-- #main -->
</div><!-- #primary -->
</div>

<div class="col-sm-4">
<?php get_sidebar();?>
</div>
</div>
<?php get_footer();?>

Sau đó lưu lại ra trang chủ để xem kết quả:

tuy-chinh-trang-chu-bang-code-1

2. Viết code các module

Tạo ra 3 file lần lần là home-module1.php, home-module2.php, home-module3.php tất cả đều nằm trong thư mục template-parts.

Trong ‘category_name’ => ‘wordpress’, bạn sẽ thay thế là ‘seo’, ‘php’ cái này là code hiển thị bài viết theo Categories.

<h2>Thủ thuật WordPress</h2><hr>
<?php
$paged = (get_query_var( 'paged' )) ? get_query_var( 'paged' ) : 1;
$args = array(
'post_type' => 'post',
'post_status' => 'publish',
'category_name' => 'wordpress',
'posts_per_page' => 5,
'paged' => $paged,
);
$arr_posts = new WP_Query( $args );

if ( $arr_posts->have_posts() ) :

while ( $arr_posts->have_posts() ) :
$arr_posts->the_post();
?>
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<?php
if ( has_post_thumbnail() ) :
the_post_thumbnail();
endif;
?>
<header class="entry-header">
<h2><a href="<?php the_permalink() ?>"><?php the_title() ?></a></h2>
</header>
<div class="entry-content">
<?php the_excerpt(); ?>
<a href="<?php the_permalink(); ?>">Read More</a>
</div>
</article>
<?php
endwhile;
endif;
?>

Kết quả như sau:

Tuỳ chỉnh trang chủ WordPress

Trong trường hợp bạn sử dụng Theme có sẵn trong kho theme WordPress cũng có thể làm như trên. Có nghĩa là bạn tạo ra một thư mục template-parts sau đó dùng hàm get_template_part() tại trang homepage để load các file khác ra trang chủ.

Trong trường hợp muốn sử dụng hiển thị bài viết dạng grid post thì bạn sẽ sử dụng code này:

<h2>Thủ thuật WordPress</h2><hr>
<div class="row">
<?php
$paged = (get_query_var( 'paged' )) ? get_query_var( 'paged' ) : 1;
$args = array(
'post_type' => 'post',
'post_status' => 'publish',
'category_name' => 'wordpress',
'posts_per_page' => 5,
'paged' => $paged,
);
$arr_posts = new WP_Query( $args );

if ( $arr_posts->have_posts() ) :

while ( $arr_posts->have_posts() ) :
$arr_posts->the_post();
?>
<article id="post-<?php the_ID(); ?>" div class="col-sm-6">
<div class="post-image">
<?php
if ( has_post_thumbnail() ) :
the_post_thumbnail();
endif;
?>
</div>

<header class="entry-header">
<h2><a href="<?php the_permalink() ?>"><?php the_title() ?></a></h2>
</header>
<div class="entry-content">
<?php the_excerpt(); ?>
<a href="<?php the_permalink(); ?>">Read More</a>
</div>
</article>
<?php
endwhile;
endif;
?>
</div>

Sau đó thêm function trong functions.php để set lại chiều rộng (with) cho thumbnail

function mythem_setup_theme() {
add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 300, 300 );
}
add_action( 'after_setup_theme', 'mythem_setup_theme' );

Kết quả là:

Lập trình theme WordPress

Như vậy là bạn đã tìm hiểu xong cách tuỳ chỉnh trang chủ trong chuỗi series lập trình Theme WordPress rồi đấy. Bài viết tiếp theo mình sẽ hướng dẫn bạn cách thêm bài viết liên quan hãy cùng theo dõi nhé!