Hướng dẫn content php wordpress - nội dung php wordpress

Ngay ở phần viết code cho file index.php, chúng ta đã sử dụng hàm

1 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:content.php, chúng ta viết cấu trúc thẻ HTML và một chút như sau:

[html]

>

[/html]

[/html]

Nghĩa là trong phần đó, chúng ta cho mỗi post hiển thị ra đều nằm trong thẻ 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

2 mình sẽ dùng để hiển thị ảnh đại diện của post. Phần

3 sẽ hiển thị tên post và thông tin của post, phần

4 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: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’ ) ) : ?>

        

      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ố

5 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).

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

3, 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ẻ 
 ở trang single

  @ Còn ở trang chủ và trang lưu trữ, nó sẽ là thẻ 


  @ thachpham_entry_header()

  **/

  if ( ! function_exists( ‘thachpham_entry_header’ ) ) {

    function thachpham_entry_header() {

      if ( is_single() ) : ?>
        


          

            

          

        


      

        


          

            

          

        
      endif;

    }

  }

Và thêm hàm

7 vào

3 nhé.

[html] [/html]

[/html]

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 ‘
’;
          // Hiển thị tên tác giả, tên category và ngày tháng đăng bài

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

            get_the_author() );
          printf( __(‘ at %1$s’, ‘thachpham’),

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

            get_the_category_list( ‘, ‘ ) );
          // Hiển thị số đếm lượt bình luận

          if ( comments_open() ) :

            echo ‘ ’;

              comments_popup_link(

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

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

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

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

               );

            echo ‘’;

          endif;

        echo ‘
’;

      endif;

    }

  }

Sau đó chèn thêm hàm này ngay bên dưới hàm

7 như thế này:

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

Tiếp đến là phần

4, 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 ‘…’ . __(‘Read More’, ‘thachpham’) . ‘’;

  }

  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’ => __(‘
Page:’, ‘thachpham’),

          ‘after’ => ‘
’,

          ‘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

  /**

  @ Hàm hiển thị tiêu đề của post trong .entry-header

  @ Tiêu đề của post sẽ là nằm trong thẻ 
 ở trang single

  @ Còn ở trang chủ và trang lưu trữ, nó sẽ là thẻ 


  @ thachpham_entry_header()

  **/

  if ( ! function_exists( ‘thachpham_entry_header’ ) ) {

    function thachpham_entry_header() {

      if ( is_single() ) : ?>
        


          

            

          

        


      

        


          

            

          

        
      endif;

    }

  }

1, 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

  /**

  @ Hàm hiển thị tiêu đề của post trong .entry-header

  @ Tiêu đề của post sẽ là nằm trong thẻ 
 ở trang single

  @ Còn ở trang chủ và trang lưu trữ, nó sẽ là thẻ 


  @ thachpham_entry_header()

  **/

  if ( ! function_exists( ‘thachpham_entry_header’ ) ) {

    function thachpham_entry_header() {

      if ( is_single() ) : ?>
        


          

            

          

        


      

        


          

            

          

        
      endif;

    }

  }

2 để 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

  /**

  @ Hàm hiển thị tiêu đề của post trong .entry-header

  @ Tiêu đề của post sẽ là nằm trong thẻ 
 ở trang single

  @ Còn ở trang chủ và trang lưu trữ, nó sẽ là thẻ 


  @ thachpham_entry_header()

  **/

  if ( ! function_exists( ‘thachpham_entry_header’ ) ) {

    function thachpham_entry_header() {

      if ( is_single() ) : ?>
        


          

            

          

        


      

        


          

            

          

        
      endif;

    }

  }

1 ra khu vực

4 như sau:

Như bạn thấy mình có gọi thêm một hàm khác nữa tên là

  /**

  @ Hàm hiển thị tiêu đề của post trong .entry-header

  @ Tiêu đề của post sẽ là nằm trong thẻ 
 ở trang single

  @ Còn ở trang chủ và trang lưu trữ, nó sẽ là thẻ 


  @ thachpham_entry_header()

  **/

  if ( ! function_exists( ‘thachpham_entry_header’ ) ) {

    function thachpham_entry_header() {

      if ( is_single() ) : ?>
        


          

            

          

        


      

        


          

            

          

        
      endif;

    }

  }

5 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

  /**

  @ Hàm hiển thị tiêu đề của post trong .entry-header

  @ Tiêu đề của post sẽ là nằm trong thẻ 
 ở trang single

  @ Còn ở trang chủ và trang lưu trữ, nó sẽ là thẻ 


  @ thachpham_entry_header()

  **/

  if ( ! function_exists( ‘thachpham_entry_header’ ) ) {

    function thachpham_entry_header() {

      if ( is_single() ) : ?>
        


          

            

          

        


      

        


          

            

          

        
      endif;

    }

  }

5 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 ‘
’;

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

        echo ‘
’;

      endif;

    }

  }

Xong rồi đó. :D

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.

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

>

        


 			

        


        


 			

 			

        


		


		        

		        

		

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

0

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.

Thạch Phạm

Bé Thạch 18 tuổi, hiện công tác tại AZDIGI với vị trí giữ xe và viết thuê tại ThachPham.Com. Sở thích nghiên cứu về website, DevOps, SysAdmin và xăm mình nữa. Phương châm sống của bé là "No Pain, No Gain".

Hiện tại blog tạm đóng bình luận vì mình cần tập trung thời gian vào cập nhật bài viết. Bình luận sẽ mở ra cho đến khi mình sẵn sàng.