Ví dụ tự viết theme cho wordpress: Post Format

Ví dụ tự viết theme cho wordpress: Post Format là vấn đề được nhiều lập trình viên quan tâm, bởi những kiến thức trên trường lớp là không đủ, vì vậy bài Ví dụ tự viết theme cho wordpress: Post Format sẽ chia sẻ tới bạn nhiều thông tin hữu ích

Mọi người vẫn hỏi tôi về việc học lập trình nói chung và Wordpress nói riêng có cần năng khiếu hay quá khó để tiếp cận hay không. Thì tôi có thể trả lời rằng, học lập trình cũng như việc bạn học tiếng Anh hay bất kỳ một ngôn ngữ khác, bởi lập trình...là ngôn ngữ của máy tính, để máy tính đọc và máy tính thực hiện theo yêu cầu của mình, bạn thích là học được.


Ở bài trước chúng ta đã code xong file content.php để hiển thị các thông tin về các post type như tiêu đề, nội dung, thông tin,…Nhưng ở phần viết code cho functions.php, chúng ta có khai báo sử dụng tính năng Post Format nhằm mục đích cho các post type hiển thị khác nhau trên từng post format. Do vậy, ở phần này chúng ta sẽ viết code cho các post format mà chúng ta đã khai báo sử dụng.

Bây giờ hãy mở lại file functions.php, tìm tới dòng khai báo post format ta có thế này:

add_theme_support( 'post-formats',
    array(
       'image',
       'video',
       'gallery',
       'quote',
       'link'
    )
 ); 

Điều này có nghĩa là chúng ta có 5 loại post format khác nhau, và chúng ta nên tạo ra 5 file khác nhau là:

  • content-image.php
  • content-video.php
  • content-gallery.php
  • content-quote.php
  • content-link.php

Đây không phải là cấu trúc template của WordPress đâu, vậy tại sao ta phải tạo các file theo tên như vậy? Đó là bởi vì trong file index.php, chúng ta có hàm gọi ra như thế này:

<?php get_template_part( 'content', get_post_format() ); ?> 

Điều này có nghĩa là, nếu post đó không có format thì nó sẽ load file content.php vì mặc định nếu post mà chưa thiết lập post format thì nó sẽ có format tên “Standard”.

Nếu post đó có format, thì nó sẽ load dựa theo tên format thông qua hàm get_post_format() như thế kia, giả dụ post đó mang format là video thì nó sẽ load file content-video.php ra, còn nếu file này chưa tồn tại thì nó sẽ đọc file content.php.

Mục đích thêm Post Format là để chúng ta trang trí cho nó, do vậy chúng ta tạo ra các file như ở trên nhằm mục đích viết lại code hiển thị nội dung phù hợp với từng post format.

Chúng ta bắt đầu nhé?

Viết code cho format content-image.php

Format tên “Image” tức là để chúng ta muốn đánh dấu post này là post chứa hình ảnh, do vậy chúng ta sẽ code làm sao để nó làm nổi bật cái ảnh của post loại này lên.

Trước tiên, bạn hãy copy toàn bộ nội dung file content.php vào content-image.php để chắc chắn file này có cấu trúc giống như content.php để tránh gây lỗi. Từ lúc này chúng ta sẽ làm việc với file content-image.php, hãy nhớ là như vậy.

Bây giờ bạn hãy xóa phần .entry-thumbnail đi vì ta không cần khu vực này:

  <div class="entry-thumbnail">
   <?php hoidapcode_thumbnail( 'thumbnail' ); ?>
</div> 

Sau đó bạn tìm đến dòng này:

<?php hoidapcode_entry_header(); ?> 

Và chèn đoạn sau vào để hiển ảnh thumbnail loại lớn ngay bên trên hàm hoidapcode_entry_header() như thế này:

<?php hoidapcode_thumbnail( 'large' ); ?>
<?php hoidapcode_entry_header(); ?> 

Rồi tìm đoạn <?php hoidapcode_entry_meta(); ?> và xóa đi vì hiển thị trông có vẻ rườm rà, chúng ta cần độc giả tập trung tối đa vào hình ảnh cơ mà.

Kế tiếp là chúng ta sẽ viết code cho nó đếm có bao nhiêu ảnh được đính kèm vào post này (attachment) để nó hiển thị ra luôn. Bạn tìm tới đoạn này:

<?php hoidapcode_entry_header(); ?> 

Sau đó viết thêm code này vào dưới.

 <?php
/*
* Đếm số lượng attachment có trong post
*/
   $attachments = get_children( array( 'post_parent'=>$post->ID ) );
   $attachment_number = count($attachments);
   printf( __('This image post contains %1$s photos', 'hoidapcode'), $attachment_number );
?> 

Mình cũng xin nói là code đếm này không phải để đếm có bao nhiêu tấm ảnh trong post, mà nó sẽ đếm có bao nhiêu tấm ảnh được đính kèm trong post, tức là các tấm ảnh bạn mới upload lên vào post này. Nó cũng sẽ không đếm các link ảnh từ host ngoài.

Xong rồi, chúng ta có toàn bộ code file content-image.php như sau:

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
        <header class="entry-header">
                <?php hoidapcode_thumbnail( 'large' ); ?>
                <?php hoidapcode_entry_header(); ?>
                <?php
                        /*
                         * Đếm số lượng attachment có trong post
                         */
                        $attachments = get_children( array( 'post_parent'=>$post->ID ) );
                        $attachment_number = count($attachments);
                        printf( __('This image post contains %1$s photos', 'hoidapcode'), $attachment_number );
                ?>
        </header>
        <div class="entry-content">
                <?php hoidapcode_entry_content(); ?>
                <?php
                        if ( is_single() ) :
                                hoidapcode_entry_tag();
                        endif;
                ?>
        </div>
</article> 

Hãy tạo một post nào đó, đăng vài tấm ảnh lên, viết mấy dòng chữ vào, thiết lập Featured Image rồi ta có kết quả giống như thế này:

Ví dụ tự viết theme cho wordpress: Post Format

Viết code cho format “video”

Ở loại format này, chúng ta sẽ muốn nó hiển thị một cái video ra ngoài trang chủ, còn khi vào xem nội dung chi tiết thì nó sẽ hiển thị toàn bộ nội dung như bình thường.

Trước tiên bạn cũng nên copy toàn bộ code trong file content.php sang content-video.php như cái format image vậy. Bây giờ bạn tìm đến đoạn này:

  <div class="entry-thumbnail">
   <?php hoidapcode_thumbnail( 'thumbnail' ); ?>
</div> 

Ở đây chúng ta không muốn nó hiển thị thumbnail nữa nên hãy xóa đi.

Sau đó tìm đoạn:

<?php hoidapcode_entry_content(); ?>   

Thay thành

<?php the_content(); ?> 

Tức là chúng ta không có cho nó hiển thị nội dung rút gọn nữa mà sẽ hiển thị toàn bộ nội dung vì các video được chèn vào post bằng oEmbed sẽ không hiển thị ở nội dung rút gọn.

Tìm và xóa luôn đoạn này để nó gọn hơn:

<?php hoidapcode_entry_meta() ?> 

Toàn bộ nội dung code file content-video.php còn thế này:

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
        <header class="entry-header">
                <?php hoidapcode_entry_header(); ?>
        </header>
        <div class="entry-content">
                <?php the_content(); ?>
                <?php
                        if ( is_single() ) :
                                hoidapcode_entry_tag();
                        endif;
                ?>
        </div>
</article> 

Bây giờ bạn hãy tạo một post, dán cái link video từ Youtube vào thì sẽ có kết quả thế này:

Ví dụ tự viết theme cho wordpress: Post Format

Đơn giản vậy thôi, mục đích là cho các bạn hiểu cách hoạt động mà. ????

Viết code cho format “Link”

Cái format này được dùng để đăng một post cho việc giới thiệu một liên kết nào đó. Nếu bạn muốn xem ví dụ sử dụng thì hãy vào website http://digwp.com, bạn sẽ thấy tác giả sử dụng các format link rất hay để giới thiệu các liên kết hay.

Cũng như 2 format kia, bạn copy toàn bộ code trong content.php sang content-link.php.

Bây giờ bạn tìm đoạn này:

<?php hoidapcode_entry_header(); ?> 

Thay thành thế này:

<?php
        /*
         * Lưu custom field vào biến
         */
        $link = get_post_meta( $post->ID, 'format_link_url', true );
        $link_description = get_post_meta( $post->ID, 'format_link_description', true );
 
        /*
         * Hiển thị tiêu đề có link trỏ tới link gắn trong custom field
         */
        if ( is_single() ) {
                printf( '<h1 class="entry-title"><a href="%1$s" target="blank">%2$s</a></h1>',
                        $link,
                        get_the_title()
                );
        } else {
                printf( '<h2 class="entry-title"><a href="%1$s" target="blank">%2$s</a></h2>',
                        $link,
                        get_the_title()
                );
        }
?> 

Tiếp tục tìm và xóa:

<?php hoidapcode_entry_meta(); ?> 

Rồi tìm:

<?php hoidapcode_entry_content(); ?> 

Sửa thành:

<?php
        printf( '<a href="%1$s" target="blank">%2$s</a>',
                $link,
                $link_description
        );
?> 

Xong rồi, bây giờ bạn hãy tạo một post mới, không cần có nội dung nhưng quan trọng nhất là phải có hai cái field là format_link_description (mô tả của link) vàformat_link_url (địa chỉ link cần trỏ tới). Nếu không thấy phần Custom Field thì ấn vào Screen Options (phía trên tay phải) -> đánh dấu vào Custom Field.

Ví dụ tự viết theme cho wordpress: Post Format

Tham khảo thêm: Hướng dẫn Custom Field trong WordPress.

Okay, bây giờ ta có kết quả như thế này:

Ví dụ tự viết theme cho wordpress: Post Format

Format Quote và Gallery

Do hai cái post format này mình chưa tìm ra ý tưởng nào hay, và thấy cũng ít ai dùng nên….khỏi tạo luôn, đẻ nó sử dụng file content.php mặc định cũng được. Lười rồi :D.

Lời kết

Kết thúc bài này, chúng ta đã tiến hành code xong cho các trang Post Format cần thiết để nó hiển thị tốt hơn và đẹp hơn. Nhưng bạn có thấy là khi click vào để xem chi tiết, nó ra trang trắng hay không?

Đúng vậy, nó không hiển thị gì cả khi vào trang chi tiết là bởi vì nội dung single.php chưa có gì cả. Do vậy ở bước kế tiếp, chúng ta sẽ tiến hành code cho nó để nó hiển thị ra trang nội dung nhé.

Hy vọng với bài viết về Ví dụ tự viết theme cho wordpress: Post Format đã giải đáp giúp bạn phần nào về kiến thức lập trình Wordpress. Như tôi đã nói, ngôn ngữ lập trình không quan trọng bằng tư duy giải thuật, tư duy logic để giải quyết vấn đề.

Với những năm trước đây, lập trình viên là một cái nghề khó và kén chọn người học, đồng nghĩa với việc thu nhập hàng tháng của các lập trình viên luôn cao. Còn những năm gần đây, thì lập trình là môn học phổ thông, và ai cũng nên học một ngôn ngữ lập trình nào đó.

Nếu bạn còn bất kỳ câu hỏi nào trong việc học lập trình online, hãy gửi yêu cầu cho tôi qua email hoidapcode.com@gmail.com hoặc để lại comment bên dưới, tôi sẽ giải đáp trong vòng 24 giờ!

Blog hoidapcode.com là blog được tổng hợp tự động các bài học, thông tin về lập trình trên mạng internet. Nếu bạn có ý kiến hoặc đóng góp về bài viết này, hãy liên hệ với tôi!