Trang chủ WordpressWordpress Development [Lập trình theme WordPress] Code cho content.php

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

bởi Thạch Phạm
23 bình luận 5872 views

https://www.youtube.com/watch?v=x6JMqLL312Q

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
  @ 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;
    }
  }

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 thachpham_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è.

laptrinhtheme-finish-thumbnail

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>
  @ 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 hàm thachpham_entry_header() vào .entry-header nhé.

	<header class="entry-header">
		<?php thachpham_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)
  @ 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 đó chèn thêm hàm này ngay bên dưới hàm thachpham_entry_header() như thế này:

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

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

laptrinhtheme-finish-postmeta

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 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 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 thachpham_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 thachpham_entry_content() ra 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 thấy mình có gọi thêm một hàm khác nữa tên là thachpham_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 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 đó. 😀

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.', 'thachpham'); ?>
</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 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>

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
@ 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;
  }
}

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.

23 bình luận

Có thể bạn quan tâm

0 0 vote
Article Rating
guest
23 Comments
mới nhất
cũ nhất đánh giá nhiều
Inline Feedbacks
View all comments
trackback

[…] + expand source […]

Linh Pham

A Thạch ơi, cho em hỏi, làm thế nào để thêm thẻ meta cho từng trang/bài được a?

Em cảm ơn ạ

Manh

Bạn ơi bản wordpress 4.7.3 trên Chrome mình có gặp lỗi khi upload ảnh Click File Selects thì không thấy có phản ứng gì.
Các trình duyệt khác hoạt động bình thường. Mình chưa cài plugins hay theme nào tất cả đều là default của wordpress khả năng là lỗi từ core
Bạn có hướng khắc phục lỗi này không?

Thanh Lân

Mình làm theo hướng dẫn mà nó báo lỗi này Call to undefined function tl01_entry_header() các pro giúp với

Phu

Anh ơi sao em copy file inex.php vào single.php mà nó không hiện thị Post vậy anh? Cám ơn anh đã đọc và trả lời giúp em!

Ninhplus

printf( __(‘ in %1$s’, ‘thachpham’),

cho em hỏi cái thachpham này nghĩa là sao ạ

Thien Y

Anh cho em hỏi “function_exists” là gì ak hihi

Hoang Loc

Anh ơi cho em hỏi là sao em làm phần “Read More…” những cái khác thì nó hiện có 6 chữ thôi nhưng có 1 cái nó hiển thị tới 9 chữ nên nó bị chạy hàng. Anh có thể hướng dẫn cho em được không? ID ), 'single-post-thumbnail' );?&gt; &lt;a href=&quot;"&gt;&lt;img width=&quot;40&quot; height=&quot;40&quot; src=&quot;"&gt; </a> <p> &lt;a href=&quot;"&gt;Read More</a></p> Anh kiểm xem chỗ nào sai vậy anh?

Hoang Loc

<div class="services-2"> <div class="icon"> <?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'single-post-thumbnail' );?> <?php $imglink=get_post_permalink();?> <a href="<?php echo $imglink; ?>"><img width="40" height="40" src="<?php echo $image[0]; ?>"> </a></div> <div class="text"> <h5 class="upper"><?php echo the_title(); ?></h5> <p> <?php the_excerpt(); ?> <?php $prolink=get_post_permalink();?> <a href="<?php echo $prolink; ?>">Read More</a></p> </div> </div>

Bánh Đa

Anh Thạc cho em hỏi sao cái debug nó lại bay ra đè hết lên màn hình vậy ạ
có hình đây Ânh ơi.

Bánh Đa

em viết sai hơi bị nhiều Anh thông cảm.

Bánh Đa

anh cho em hỏi sao cái debug nó lại bay đè lên luôn cái màn hình vậy ạ
có hình đây ạ

Long

Hi.
bạn có thể hướng dẫn hiển thì category trên page thay vì post không ( mỗi category cho hiện 5 post, và mỗi post có có thumnail và trích đoạn trong post.)

Khanh

Anh cho em hỏi tại sao em làm đúng theo hướng dẫn mà cái thumnail không hiện ra

Khanh

Thiết lập media trong chỗ setting phải không ạ, em làm rồi.
em làm theo hướng dẫn của anh. Chỉ thay cái thachpham thành khanh98, em thay thế vậy mong anh thông cảm nhé!
đây là link pastebin: pastebin.com/embed_js/GzgWTiqF
Có cái ảnh chụp màn hình đây ạ:comment image

le van binh

sua dc chua
to cung ko hien thi dc anh

Khanh

Anh tìm được nguyên nhân chưa ạ ?

sonnguyen

Anh ơi cho em hỏi đặt mật khẩu cho post thế nào ạ?

23
0
Would love your thoughts, please comment.x
()
x