Ngay ở phần viết code cho file index.php, chúng ta đã sử dụng hàm get_template_part() của WordPress để load cấu trúc các file content.php và những file content có liên quan. Vậy thì ở trong bài này, chúng ta sẽ bắt đầu viết code cho file này để nó bắt đầu hiển thị nội dung của post/page nha.

Trước tiên trong file content.php, chúng ta viết cấu trúc thẻ HTML và một chút như sau:

 <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>> 	<div class="entry-thumbnail">
	</div> 	<header class="entry-header">
	</header> 	<div class="entry-content">
	</div> </article>

Nghĩa là trong phần đó, chúng ta cho mỗi post hiển thị ra đều nằm trong thẻ <article> với ID là post-$id-của-post cùng với các class tượng trưng cho nó.

Tiếp đó, khu vực .entry-thumbnail mình sẽ dùng để hiển thị ảnh đại diện của post. Phần .entry-header sẽ hiển thị tên post và thông tin của post, phần .entry-content là hiển thị nội dung của post.

Code cho .entry-thumnail

Mục đích của mình là hạn chế viết code trực tiếp nên bây giờ chúng ta sẽ tạo hàm trong functions.php để hiển thị từng phần. Trước tiên là chúng ta sẽ tạo hàm hiển thị ảnh đại diện (thumbnail) như sau:

/**
@ Hàm hiển thị ảnh thumbnail của post.
@ Ảnh thumbnail sẽ không được hiển thị trong trang single
@ Nhưng sẽ hiển thị trong single nếu post đó có format là Image
@ cddos_thumbnail( $size )
**/

if ( ! function_exists( ‘cddos_thumbnail’ ) ) {

function cddos_thumbnail( $size ) {

// Chỉ hiển thumbnail với post không có mật khẩu

if ( ! is_single() &&
has_post_thumbnail() && ! post_password_required() || has_post_format( ‘image’ ) ) : ?>

<figure class=”post-thumbnail”><?php the_post_thumbnail( $size ); ?></figure><?php

endif;

}

}

Mình đã có viết comment chi tiết trong đó rồi đó, bạn chịu khó đọc nhé thay vì mình sẽ giải thích ở đây để nó dài dòng. Nhưng có một điểm mấu chốt về code hiển thị ảnh thumbnail này đó là bạn được quyền tùy chỉnh size ảnh sẽ xuất ra thông qua tham số $size trong hàm.

Và bây giờ chúng ta sẽ chèn cái hàm vừa tạo vào khu vực hiển thị thumbnail và khai báo tên size ảnh cần sử dụng, chúng ta sẽ sử dụng size tên là thumbnail (mặc định của WordPress).

  <div class="entry-thumbnail">

<?php cddos_thumbnail( ‘thumbnail’ ); ?>

</div>

Trong đó, thumbnail là tên của size ảnh được thiết lập trong Settings -> Media. Nếu bạn có thử ra trag chủ xem thì nó sẽ như thế này rồi nè.

Code cho .entry-header

Phần này chúng ta sẽ cho hiển thị tiêu đề của post, và trong mỗi tiêu đề chúng ta chèn một cái link để dẫn vào trang chi tiết của bài đó.

Bây giờ là tiếp tới phần .entry-header, chúng ta sẽ viết một hàm hiển thị cái tiêu đề của post nha. Tiếp tục viết đoạn code sau vào file functions.php:

/**
@ Hàm hiển thị tiêu đề của post trong .entry-header
@ Tiêu đề của post sẽ là nằm trong thẻ <h1> ở trang single
@ Còn ở trang chủ và trang lưu trữ, nó sẽ là thẻ <h2>
 @ cddos_entry_header()
**/

if ( ! function_exists( ‘cddos_entry_header’ ) ) {

function cddos_entry_header() {

if ( is_single() ) : ?>

<h1 class=”entry-title”>

<a href=”<?php the_permalink(); ?>” rel=”bookmark” title=”<?php the_title_attribute(); ?>”>

<?php the_title(); ?>

</a>

</h1>

<?php else : ?>

<h2 class=”entry-title”>

<a href=”<?php the_permalink(); ?>” rel=”bookmark” title=”<?php the_title_attribute(); ?>”>

<?php the_title(); ?>

</a>

</h2><?php

endif;

}

}

Và thêm hàm cddos_entry_header() vào .entry-header nhé.

 	<header class="entry-header"> 		<?php cddos_entry_header(); ?> 	</header>

Kế tiếp nữa là tạo thêm một hàm hiển thị thông tin của post như bài này đăng bởi ai, đăng lúc nào, bla bla…Vẫn là viết vào functions.php nhé.

/**
@ Hàm hiển thị thông tin của post (Post Meta)
@ cddos_entry_meta()
**/

if( ! function_exists( ‘cddos_entry_meta’ ) ) {

function cddos_entry_meta() {

if ( ! is_page() ) :

echo ‘<div class=”entry-meta”>’;

// Hiển thị tên tác giả, tên category và ngày tháng đăng bài

printf( __(‘<span class=”author”>Posted by %1$s</span>’, ‘cddos’),

get_the_author() );

printf( __(‘<span class=”date-published”> at %1$s</span>’, ‘cddos’),

get_the_date() );

printf( __(‘<span class=”category”> in %1$s</span>’, ‘cddos’),

get_the_category_list( ‘, ‘ ) );

// Hiển thị số đếm lượt bình luận

if ( comments_open() ) :

echo ‘ <span class=”meta-reply”>’;

comments_popup_link(

__(‘Leave a comment’, ‘cddos’),

__(‘One comment’, ‘cddos’),

__(‘% comments’, ‘cddos’),

__(‘Read all comments’, ‘thac hpham’)

);

echo ‘</span>’;

endif;

echo ‘</div>’;

endif;

}

}

Sau đó chèn thêm hàm này ngay bên dưới hàm cddos_entry_header() như thế này:

 	<header class="entry-header"> 		<?php cddos_entry_header(); ?> 		<?php cddos_entry_meta() ?> 	</header>

Bây giờ ta đã có cái meta hiển thị khá ok rồi nè.

Tiếp đến là phần .entry-content, chúng ta sẽ viết một hàm hiển thị nội dung bài viết vào file functions.php như sau:

/*
 * Thêm chữ Read More vào excerpt
 */

function cddos_readmore() {

return ‘…<a class=”read-more” href=”‘. get_permalink( get_the_ID() ) . ‘”>’ . __(‘Read More’, ‘cddos’) . ‘</a>’;
}

add_filter( ‘excerpt_more’, ‘cddos_readmore’ );
/**
@ Hàm hiển thị nội dung của post type
@ Hàm này sẽ hiển thị đoạn rút gọn của post ngoài trang chủ (the_excerpt)
@ Nhưng nó sẽ hiển thị toàn bộ nội dung của post ở trang single (the_content)
@ cddos_entry_content()
**/

if ( ! function_exists( ‘cddos_entry_content’ ) ) {

function cddos_entry_content() {

if ( ! is_single() ) :

the_excerpt();

else :

the_content();

/*

* Code hiển thị phân trang trong post type

*/

$link_pages = array(

‘before’ => __(‘<p>Page:’, ‘cddos’),

‘after’ => ‘</p>’,

‘nextpagelink’
=> __( ‘Next page’, ‘cddos’ ),

‘previouspagelink’ => __( ‘Previous page’, ‘cddos’ )

);

wp_link_pages( $link_pages );

endif;

}

}

Ở đoạn trên, mình có lồng thêm một đoạn code ngắn để filter lại cái chức năng hiển thị excerpt và thêm vào nó một nút tên là Read More để sau này bạn có thể dịch thành “Đọc thêm” hay cái gì đó.

Ở hàm cddos_entry_content(), mình đặt điều kiện là nếu trang hiện tại trên query không phải là trang single để hiện nội dung chi tiết của post, thì nó sẽ hiển thị đoạn rút gọn. Và khi vào trang single thì nó sẽ sử dụng hàm the_content() để hiển thị toàn bộ nội dung của post, bởi vì chúng ta sẽ sử dụng lại hàm này trong file single.php nên làm vậy cho nó gọn.

Được rồi, bây giờ hãy gọi hàm cddos_entry_content() ra khu vực .entry-content như sau:

 	<div class="entry-content"> 		<?php cddos_entry_content(); ?>

<?php ( is_single() ? cddos_entry_tag() : ” ); ?> </div>

Như bạn thấy mình có gọi thêm một hàm khác nữa tên là cddos_entry_tag() và đặt điều kiện là chỉ hiển thị ở trang single. Đây là hàm mà chút nữa chúng ta sẽ code để nó hiển thị danh sách các tag của post đó ở cuối mỗi bài post.

Bây giờ ta code thêm hàm cddos_entry_tag() như sau:

/**
@ Hàm hiển thị tag của post
@ cddos_entry_tag()
**/

if ( ! function_exists( ‘cddos_entry_tag’ ) ) {

function cddos_entry_tag() {

if ( has_tag() ) :

echo ‘<div class=”entry-tag”>’;

printf( __(‘Tagged in %1$s’, ‘cddos’), get_the_tag_list( ”, ‘, ‘ ) );

echo ‘</div>’;

endif;

}

}

Xong rồi đó. ?

Code cho file content-none.php

File content-none.php này chỉ là hiển thị một thông báo chưa có nội dung thôi, bạn có thể viết đoạn code này vào file đó là xong.

 <div class="no-post"> 	<?php _e('Nothing post found.', 'cddos'); ?> </div>

Toàn bộ code file content.php trong phần này

 <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

<div class=”entry-thumbnail”>
<?php cddos_thumbnail(‘thumbnail’); ?>

</div>

<header class=”entry-header”>
<?php cddos_entry_header(); ?>
<?php cddos_entry_meta() ?>

</header> <div class=”entry-content”>

<?php cddos_entry_content(); ?>

<?php ( is_single() ? cddos_entry_tag() : ” ); ?> </div> </article>

Các code thêm vào functions.php trong phần này:

  /** @ Hàm hiển thị ảnh thumbnail của post. @ Ảnh thumbnail sẽ không được hiển thị trong trang single @ Nhưng sẽ hiển thị trong single nếu post đó có format là Image @ cddos_thumbnail( $size ) **/
 if ( ! function_exists( 'cddos_thumbnail' ) ) {

function cddos_thumbnail( $size ) {

// Chỉ hiển thumbnail với post không có mật khẩu
if ( ! is_single() &&
has_post_thumbnail() && ! post_password_required() || has_post_format( ‘image’ ) ) : ?>

<figure class=”post-thumbnail”><?php the_post_thumbnail( $size ); ?></figure><?php
endif;
}
}
/** @ Hàm hiển thị tiêu đề của post trong .entry-header @ Tiêu đề của post sẽ là nằm trong thẻ <h1> ở trang single @ Còn ở trang chủ và trang lưu trữ, nó sẽ là thẻ <h2> @ cddos_entry_header() **/
if ( ! function_exists( ‘cddos_entry_header’ ) ) {

function cddos_entry_header() {

if ( is_single() ) : ?>

<h1 class=”entry-title”>

<a href=”<?php the_permalink(); ?>” rel=”bookmark” title=”<?php the_title_attribute(); ?>”>

<?php the_title(); ?>

</a>

</h1>

<?php else : ?>

<h2 class=”entry-title”>

<a href=”<?php the_permalink(); ?>” rel=”bookmark” title=”<?php the_title_attribute(); ?>”>

<?php the_title(); ?>

</a>

</h2><?php

endif;
}
}
/** @ Hàm hiển thị thông tin của post (Post Meta) @ cddos_entry_meta() **/
if( ! function_exists( ‘cddos_entry_meta’ ) ) {

function cddos_entry_meta() {

if ( ! is_page() ) :

echo ‘<div class=”entry-meta”>’;

// Hiển thị tên tác giả, tên category và ngày tháng đăng bài

printf( __(‘<span class=”author”>Posted by %1$s</span>’, ‘cddos’),

get_the_author() );

printf( __(‘<span class=”date-published”> at %1$s</span>’, ‘cddos’),

get_the_date() );

printf( __(‘<span class=”category”> in %1$s</span>’, ‘cddos’),

get_the_category_list( ‘, ‘ ) );

// Hiển thị số đếm lượt bình luận

if ( c omments_open() ) :

echo ‘ <span class=”meta-reply”>’;

comments_popup_link(

__(‘Leave a comment’, ‘cddos’),

__(‘One comment’, ‘cddos’),

__(‘% comments’, ‘cddos’),

__(‘Read all comments’, ‘cddos’)

);

echo ‘</span>’;

endif;

echo ‘</div>’;

endif;
}
}
/* * Thêm chữ Read More vào excerpt */
function cddos_readmore() {

return ‘…<a class=”read-more” href=”‘. get_permalink( get_the_ID() ) . ‘”>’ . __(‘Read More’, ‘cddos’) . ‘</a>’;
}
add_filter( ‘excerpt_more’, ‘cddos_readmore’ );
/**
@ Hàm hiển thị nội dung của post type
@ Hàm này sẽ hiển thị đoạn rút gọn của post ngoài trang chủ (the_excerpt)
@ Nhưng nó sẽ hiển thị toàn bộ nội dung của post ở trang single (the_content)
@ cddos_entry_content()
**/

if ( ! function_exists( ‘cddos_entry_content’ ) ) {

function cddos_entry_content() {

if ( ! is_single() ) :

the_excerpt();

else :

the_content();

/*

* Code hiển thị phân trang trong post type

*/

$link_pages = array(

‘before’ => __(‘<p>Page:’, ‘cddos’),

‘after’ => ‘</p>’,

‘nextpagelink’
=> __( ‘Next page’, ‘cddos’ ),

‘previouspagelink’ => __( ‘Previous page’, ‘cddos’ )

);

wp_link_pages( $link_pages );

endif;

}

}

/** @ Hàm hiển thị tag của post @ cddos_entry_tag() **/
if ( ! function_exists( ‘cddos_entry_tag’ ) ) {

function cddos_entry_tag() {

if ( has_tag() ) :

echo ‘<div class=”entry-tag”>’;

printf( __(‘Tagged in %1$s’, ‘cddos’), get_the_tag_list( ”, ‘, ‘ ) );

echo ‘</div>’;

endif;
}
}

Lời kết

Trong bài này chúng ta đã viết khá nhiều code vào file functions.php để tạo ra các hàm hiển thị từng phần nội dung trong file content.php, cũng nhờ vậy mà file content.php của chúng ta bây giờ rất gọn gàng và dễ quản lý nó đúng không nào?

Tuy nhiên trong bài này chúng ta chỉ mới có thể code nội dung file content.php thôi, mà còn một số file content khác chúng ta cần phải code như content-none.php, content-$format.php mà các file này chúng ta sẽ tiếp tục làm ở bài sau.