#11 – WordPress Single.php – Hiển thị nội dung bài viết

0 7

WordPress cung cấp cho chúng ta 2 template file là single.php và page.php để hiển thị nội dung bài viết và trang đơn. Trong bài học này, chúng ta sẽ tìm hiểu về cách hiển thị nội dung bài viết trong single.php nhé.

Video Hiển thị nội dung bài viết trong single.php

Hướng dẫn chi tiết

Template file single-{post-type}.php

Tạo file single-{post-type}.php nằm trong thư mục chính của theme goclamweb. Đây là file hiển thị nội dung bài viết. post-type ở đây chính là dạng bài viết của các bạn. Mặc định WordPress sẽ tự hiểu 2 template file tương ứng với 2 dạng bài viết cơ bản:

  • single.php: hiển thị nội dung của post/bài viết
  • page.php: hiển thị nội dung trang đơn

Đối với custom post type (những dạng bài viết do bạn tự tạo ra), WordPress sẽ tìm đến file single-{post-type}.php để hiển thị nội dung. Ví dụ, bạn tự tạo 1 post type là music thì template file để hiển thị bài viết chi tiết cho post type music sẽ có dạng single-music.php

Đối với single.php của theme goclamweb

Các bạn copy toàn bộ code trong index.php và dán vào single.php. Sau đó các bạn điều chỉnh lại một chút. Đầu tiên, các bạn đổi class của thẻ section từ blog-area thành blog-details nhé.

Vẫn giữ nguyên vòng lặp, tuy nhiên template part sẽ có sự thay đổi. Các bạn tạo cho mình 1 file content.php nằm trong thư mục partials. Vòng lặp ở file single.php có dạng

if(have_posts(  )):
  while(have_posts(  )):
     the_post(  );
     get_template_part( 'partials/content');
  endwhile;
endif;

Giống như get_template_part ở trang chủ, WordPress sẽ vào thư mục partials, tìm đến file có dạng content-xxx.php. Tuy nhiên, do chúng ta đã bỏ trống xxx nên WordPress sẽ chọn file content.php.

FBI WARNING - dưới đây có QUẢNG CÁO

Bạn MUỐN TĂNG KÍCH THƯỚC ... website, nhanh, rẻ và dễ sử dụng có thể chọn hosting Azdigi nhé.
Link đăng ký: https://my.azdigi.com/aff.php?aff=1612
Nếu các bạn click và đăng ký hosting từ link trên, mình sẽ có một ít tiền để duy trì.

Chúng ta có nội dung bài viết trong file content.php như sau.

<div class="blog-post column-1 mb-50 mr-minus-30">
    <div class="thumb text-center">
        <?php
        the_post_thumbnail( 'single_post_thumbnail', array(
            'alt'	=> get_post_meta( get_post_thumbnail_id(get_the_ID()),
            '_wp_attachment_image_alt', true)
        ) );
        ?>
    </div>
    <div class="blog-content">
        <div class="date-box clearfix mb-25">
            <h4 class="theme-color pull-left no-margin">
                <?php echo get_the_time( 'd' ); ?> <span><?php echo get_the_time( 'M' ); ?></span>
            </h4>
            <div class="name-comment">
                <h2 class="text-capitalize"><?php the_title( ); ?></h2>
                <h5 class="pull-left no-margin"><span class="theme-color">
                    <?php _e('By: ','glw'); ?></span> <?php the_author(); ?>
                </h5>
                <h5 class="pl-45 no-margin">
                   <span class="theme-color"><?php _e('Comment: ','glw'); ?></span> 
                    <?php echo get_comments_number( get_the_ID() ); ?>
                </h5>
            </div>
        </div>
        <!-- categories  -->
        <div class="widget mb-45">
            <div class="widget-title mb-30">
                <h5 class="mb-5"><?php _e('Categories ','glw'); ?></h5>
                <div class="horizontal-line">
                    <hr class="top" />
                    <hr class="bottom" />
                </div>
            </div>
            <div class="category">
                <?php the_category( ' | ' ); ?>
            </div>
        </div>
        <?php 
        the_content(); 
        wp_link_pages();
        ?>
        <!-- post tags  -->
        <div class="widget">
            <div class="widget-title mb-30">
                <h5 class="mb-5"><?php _e('Tags','glw'); ?></h5>
                <div class="horizontal-line">
                    <hr class="top" />
                    <hr class="bottom" />
                </div>
            </div>
            <div class="tags">
                <?php the_tags('',' ',null); ?>
            </div>
        </div>
    </div>

    <!-- author box -->
    <div class="author-box bg-color-3">
        <div class="author-img pull-left">
            <?php echo get_avatar( get_the_author_meta('ID'), 82 ); ?>
        </div>
        <div class="text pt-5">
            <h3 class="text-capitalize no-margin"><?php the_author(); ?></h3>
            <p>
            <?php 
                $user_meta = get_userdata(get_the_author_meta('ID'));
                echo $user_meta->roles[0];
            ?>
            </p>
        </div>
        <p class="pt-30">
        <?php echo nl2br(get_the_author_meta( 'description' )); ?>
        </p>
    </div>
</div>

Phần tác giả, chúng ta sẽ hiển thị một số thông tin như avatar, tên và phân quyền của tác giả trên trang.

<div class="author-box bg-color-3">
    <div class="author-img pull-left">
       <?php echo get_avatar( get_the_author_meta('ID'), 82 ); ?>
    </div>
    <div class="text pt-5">
       <h3 class="text-capitalize no-margin"><?php the_author(); ?></h3>
       <p>
            <?php 
                $user_meta = get_userdata(get_the_author_meta('ID'));
                echo $user_meta->roles[0];
            ?>
        </p>
     </div>
    <p class="pt-30">
        <?php echo nl2br(get_the_author_meta( 'description' )); ?>
    </p>
</div>

Phần bình luận chúng ta tạm thời sử dụng bình luận mặc định của WordPress nhé.

if(comments_open( ) || get_comments_number( )){
    comments_template( );
}

Phần bài viết liên quan tạm thời chưa dùng đến, mình sẽ hướng dẫn ở những bài sau nhé. Ngoài ra, mình có làm thêm 2 phần là hiển thị danh sách chuyên mục và thẻ của bài viết.

Phần chuyên mục mình copy wdiget nằm trong sidebar (template html) để sử dụng lại

<div class="widget mb-45">
    <div class="widget-title mb-30">
        <h5 class="mb-5"><?php _e('Categories ','glw'); ?></h5>
        <div class="horizontal-line">
            <hr class="top" />
            <hr class="bottom" />
        </div>
    </div>
    <div class="category">
        <?php the_category( ' | ' ); ?>
    </div>
</div>

Phần phân trang, chúng ta sẽ đổi từ phân trang danh sách bài viết sang phân trang bên trong bài viết. Đối với phần phân trang này, chúng ta sẽ dùng mặc định của WordPress. Mình cũng cung cấp hàm để custom phần phân trang. Cách làm hoàn toàn tương tự, khác đôi chút và các hàm nhưng về ý tưởng tổng thể thì vẫn giống. Vậy nên mình chỉ để lại code mẫu mà không hướng dẫn chi tiết nhé.

if(!function_exists('glw_page_links')){
	function glw_page_links( )
	{
		global $page;
		echo '<div class="pagination justify-content-center">';
		$args = array (
			'before'            => '<div class="page-links-XXX">',
			'after'             => '</div>',
			'link_before'       => '<span class="text-secondary">',
			'link_after'        => '</span>',
			'next_or_number'    => 'next',
			'separator'         => ' | ',
			'nextpagelink'      => __( 'Next &raquo', 'gola' ),
			'previouspagelink'  => __( '&laquo Previous', 'gola' ),
		);
		wp_link_pages( $args );
		echo '</div>';
	}
}

Tài liệu WordPress

Link tài liệu chính chủ WordPress về các hàm đã dùng trong bài học nếu muốn tìm hiểu sâu hơn

Code hoàn thành của bài học: Google Drive

Nếu có thắc mắc, đặt câu hỏi bằng cách comment bên dưới, qua email, hoặc nhắn tin qua Fanpage Góc làm web.

Đừng quên LikeShare nếu thấy bài viết thú vị.

Liên hệ

Để lại một trả lời

Địa chỉ email của bạn sẽ không được công bố.