[Lập trình theme WordPress] Code cho content.php [NEW]



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

Đầu tiên trong tệp content.phpchúng tôi viết cấu trúc thẻ HTML và một chút như thế này:

[html]

[/html]

Đó là, trong phần đó, chúng tôi để mỗi bài đăng hiển thị trong

với ID post- $ id-of-post cùng với các lớp đại diện cho nó.

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

Mã cho .entry-thumnail

Mục tiêu của tôi là hạn chế viết mã trực tiếp, vì vậy bây giờ chúng tôi sẽ tạo hàm trong functions.php để hiển thị từng phần. Đầu tiên, chúng ta sẽ tạo một chức năng 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
@ thachpham_thumbnail( $size )
**/
if ( ! function_exists( ‘thachpham_thumbnail’ ) ) {
function thachpham_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;
}
}

Tôi đã viết một bình luận chi tiết trong đó, vui lòng đọc kỹ thay vì giải thích ở đây cho dài dòng. Nhưng có một điểm chính về mã hiển thị hình thu nhỏ này là bạn có thể tùy chỉnh kích thước của hình ảnh được xuất ra thông qua tham số $size trong chức năng.

Và bây giờ chúng ta sẽ chèn chức năng vừa tạo vào vùng hiển thị thumbnail và khai báo tên kích thước ảnh cần sử dụng, chúng ta sẽ sử dụng kích thước có tên là thumbnail (mặc định của WordPress).


<div class="entry-thumbnail">
<?php thachpham_thumbnail( ‘thumbnail’ ); ?>
</div>

Trong đó, thumbnail là tên của kích thước hình ảnh được đặt trong Cài đặt -> Phương tiện. Nếu bạn cố gắng xem trang chủ, nó sẽ như thế này.

[Lập trình theme WordPress] Code cho content.php [NEW]

Mã cho .entry-header

Ở phần này chúng ta sẽ hiển thị tiêu đề của bài viết, và ở mỗi tiêu đề chúng ta sẽ chèn một liên kết để dẫn đến trang chi tiết của bài viết đó.

Bây giờ là phần tiếp theo .entry-header, chúng ta sẽ viết một hàm hiển thị tiêu đề của bài viết. Tiếp tục viết đoạn mã sau vào tệp 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>
@ thachpham_entry_header()
**/
if ( ! function_exists( ‘thachpham_entry_header’ ) ) {
function thachpham_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 chức năng thachpham_entry_header() đi vào .entry-header Xin vui lòng.

[html]


[/html]

Bước tiếp theo là tạo một hàm hiển thị thông tin của bài viết như bài này do ai đăng, đăng khi nào, bla bla… Vẫn ghi trong functions.php.


/**
@ Hàm hiển thị thông tin của post (Post Meta)
@ thachpham_entry_meta()
**/
if( ! function_exists( ‘thachpham_entry_meta’ ) ) {
function thachpham_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>’, ‘thachpham’),
get_the_author() );

printf( __(‘<span class="date-published"> at %1$s</span>’, ‘thachpham’),
get_the_date() );

printf( __(‘<span class="category"> in %1$s</span>’, ‘thachpham’),
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’, ‘thachpham’),
__(‘One comment’, ‘thachpham’),
__(‘% comments’, ‘thachpham’),
__(‘Read all comments’, ‘thachpham’)
);
echo ‘</span>’;
endif;
echo ‘</div>’;
endif;
}
}

Sau đó thêm chức năng này ngay bên dưới chức năng thachpham_entry_header() như thế này:


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

Bây giờ chúng tôi có một hiển thị meta khá tốt.

laptrinhtheme-finish-postmeta

Tiếp theo là phần .entry-contentchúng ta sẽ viết một hàm hiển thị nội dung bài viết trong file functions.php như sau:


/*
* Thêm chữ Read More vào excerpt
*/
function thachpham_readmore() {
return ‘…<a class="read-more" href="’. get_permalink( get_the_ID() ) . ‘">’ . __(‘Read More’, ‘thachpham’) . ‘</a>’;
}
add_filter( ‘excerpt_more’, ‘thachpham_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)
@ thachpham_entry_content()
**/
if ( ! function_exists( ‘thachpham_entry_content’ ) ) {
function thachpham_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:’, ‘thachpham’),
‘after’ => ‘</p>’,
‘nextpagelink’ => __( ‘Next page’, ‘thachpham’ ),
‘previouspagelink’ => __( ‘Previous page’, ‘thachpham’ )
);
wp_link_pages( $link_pages );
endif;

}
}

Đoạn trên mình đã thêm một đoạn mã ngắn để lọc chức năng hiển thị đoạn trích và thêm một nút tên là Đọc thêm để sau này bạn dịch thành “Đọc thêm” hay gì đó.

Tại chức năng thachpham_entry_content(), Tôi đặt điều kiện là nếu trang hiện tại trên truy vấn không phải là trang duy nhất để hiển thị nội dung chi tiết của bài đăng thì nó sẽ hiển thị đoạn văn đã được rút gọn. Và khi vào trang đơn, nó sẽ sử dụng. hàm số the_content() để hiển thị đầy đủ nội dung của bài viết, vì chúng ta sẽ sử dụng lại hàm này trong file single.php nên nó gọn gàng.

Được rồi, bây giờ chúng ta hãy gọi hàm thachpham_entry_content() đến khu vực .entry-content như sau:


<div class="entry-content">
<?php thachpham_entry_content(); ?>
<?php ( is_single() ? thachpham_entry_tag() : ” ); ?>
</div>

Như bạn có thể thấy, tôi đã gọi một hàm khác có tên là thachpham_entry_tag() và đặt điều kiện để chỉ hiển thị trên một trang. Đây là chức năng mà sau này chúng ta sẽ code để nó hiển thị danh sách các thẻ của bài viết đó ở cuối mỗi bài viết.

Bây giờ chúng tôi viết mã để thêm chức năng thachpham_entry_tag() như sau:


/**
@ Hàm hiển thị tag của post
@ thachpham_entry_tag()
**/
if ( ! function_exists( ‘thachpham_entry_tag’ ) ) {
function thachpham_entry_tag() {
if ( has_tag() ) :
echo ‘<div class="entry-tag">’;
printf( __(‘Tagged in %1$s’, ‘thachpham’), get_the_tag_list( ”, ‘, ‘ ) );
echo ‘</div>’;
endif;
}
}

Xong rôi. : D

Mã cho nội dung tệp-none.php

Tệp content-none.php này chỉ hiển thị một thông báo không có nội dung, bạn có thể viết mã này vào tệp đó là xong.


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

Toàn bộ mã tệp content.php trong phần này


<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<div class="entry-thumbnail">
<?php thachpham_thumbnail(‘thumbnail’); ?>
</div>
<header class="entry-header">
<?php thachpham_entry_header(); ?>
<?php thachpham_entry_meta() ?>
</header>
<div class="entry-content">
<?php thachpham_entry_content(); ?>
<?php ( is_single() ? thachpham_entry_tag() : ” ); ?>
</div>
</article>

Mã bổ sung 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
@ thachpham_thumbnail( $size )
**/
if ( ! function_exists( ‘thachpham_thumbnail’ ) ) {
function thachpham_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>
@ thachpham_entry_header()
**/
if ( ! function_exists( ‘thachpham_entry_header’ ) ) {
function thachpham_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)
@ thachpham_entry_meta()
**/
if( ! function_exists( ‘thachpham_entry_meta’ ) ) {
function thachpham_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>’, ‘thachpham’),
get_the_author() );

printf( __(‘<span class="date-published"> at %1$s</span>’, ‘thachpham’),
get_the_date() );

printf( __(‘<span class="category"> in %1$s</span>’, ‘thachpham’),
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’, ‘thachpham’),
__(‘One comment’, ‘thachpham’),
__(‘% comments’, ‘thachpham’),
__(‘Read all comments’, ‘thachpham’)
);
echo ‘</span>’;
endif;
echo ‘</div>’;
endif;
}
}

/*
* Thêm chữ Read More vào excerpt
*/
function thachpham_readmore() {
return ‘…<a class="read-more" href="’. get_permalink( get_the_ID() ) . ‘">’ . __(‘Read More’, ‘thachpham’) . ‘</a>’;
}
add_filter( ‘excerpt_more’, ‘thachpham_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)
@ thachpham_entry_content()
**/
if ( ! function_exists( ‘thachpham_entry_content’ ) ) {
function thachpham_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:’, ‘thachpham’),
‘after’ => ‘</p>’,
‘nextpagelink’ => __( ‘Next page’, ‘thachpham’ ),
‘previouspagelink’ => __( ‘Previous page’, ‘thachpham’ )
);
wp_link_pages( $link_pages );
endif;

}
}

/**
@ Hàm hiển thị tag của post
@ thachpham_entry_tag()
**/
if ( ! function_exists( ‘thachpham_entry_tag’ ) ) {
function thachpham_entry_tag() {
if ( has_tag() ) :
echo ‘<div class="entry-tag">’;
printf( __(‘Tagged in %1$s’, ‘thachpham’), get_the_tag_list( ”, ‘, ‘ ) );
echo ‘</div>’;
endif;
}
}

Phần kết

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

Tuy nhiên trong bài viết này chúng ta chỉ có thể code nội dung của file content.php, ngoài ra còn một số file nội dung khác chúng ta cần code như content-none.php, content-$ format.php mà các file này. Chúng tôi sẽ tiếp tục trong các bài tiếp theo.

5/5 – (1 phiếu bầu)

Tiếp tục đọc trong bộ truyện