[Lập trình theme WordPress] Code cho Post Format [NEW]



Ở bài trước chúng ta đã code xong file content.php để hiển thị các thông tin về loại bài viết như tiêu đề, nội dung, thông tin,… Nhưng ở phần viết code cho functions.php thì chúng ta có phần khai báo sử dụng. Tính năng Định dạng bài đăng dành cho các loại bài đăng khác nhau được hiển thị trên mỗi định dạng bài đăng. Vì vậy, trong phần này chúng tôi sẽ viết mã cho các định dạng bài đăng mà chúng tôi đã khai báo để sử dụng.

Bây giờ mở lại file functions.php, tìm dòng khai báo định dạng bài viết, chúng ta có:


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

Điều này có nghĩa là chúng ta có 5 định dạng bài đăng khác nhau và chúng ta nên tạo 5 tệp khác nhau:

  • 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 mẫu WordPress, vậy tại sao chúng ta nên tạo các tệp có tên như vậy? Đó là vì trong tệp index.phpchúng ta có một hàm được gọi như thế này:

<?php get_template_part( ‘content’, get_post_format() ); ?>

Điều này có nghĩa là, nếu bài viết không có định dạng, nó sẽ tải tệp content.php vì theo mặc định, nếu bài viết không có định dạng bài đăng, nó sẽ có định dạng có tên là “Chuẩn”.

Nếu bài viết có định dạng, nó sẽ tải dựa trên tên định dạng thông qua. hàm số get_post_format() như vậy, nếu bài viết có định dạng video, nó sẽ tải tệp content-video.php đầu ra, và nếu tệp này không tồn tại, nó sẽ đọc tệp content.php.

Mục đích của việc thêm Post Format là để chúng ta trang trí nên chúng ta tạo các file như trên nhằm mục đích viết lại mã để hiển thị nội dung phù hợp với từng định dạng bài viết.

Hãy bắt đầu?

Viết mã cho định dạng content-image.php

Định dạng có tên là “Hình ảnh” có nghĩa là chúng tôi muốn đánh dấu bài đăng này là bài đăng có chứa hình ảnh, vì vậy chúng tôi sẽ mã hóa cách nó sẽ làm nổi bật hình ảnh của bài đăng này.

Đầu tiên, bạn copy toàn bộ nội dung file content.php vào content-image.php để đảm bảo rằng file này có cấu trúc giống với content.php để tránh bị lỗi. Từ bây giờ chúng ta sẽ làm việc với tệp content-image.php, hãy nhớ điều đó.

Bây giờ xóa .entry-thumbnail đi bởi vì chúng tôi không cần khu vực này:


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

Sau đó, bạn tìm thấy dòng này:

<?php thachpham_entry_header(); ?>

Và chèn phần sau để hiển thị một hình thu nhỏ lớn ngay trên quai hàm thachpham_entry_header() như thế này:


<?php thachpham_thumbnail( ‘large’ ); ?>
<?php thachpham_entry_header(); ?>

Sau đó tìm đoạn văn và bị loại bỏ vì màn hình hiển thị trông cồng kềnh, chúng tôi cần người đọc tập trung vào hình ảnh nhiều nhất có thể.

Tiếp theo, chúng ta sẽ viết mã cho nó để đếm xem có bao nhiêu hình ảnh được đính kèm vào bài đăng này (tệp đính kèm) để nó hiển thị. Bạn tìm thấy đoạn văn này:

<?php thachpham_entry_header(); ?>

Sau đó thêm mã này vào bên 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’, ‘thachpham’), $attachment_number );
?>

Mình cũng xin nói thêm là mã đếm này không phải để đếm xem có bao nhiêu ảnh trong bài đăng mà nó sẽ đếm xem có bao nhiêu ảnh được đính kèm vào bài viết, tức là ảnh bạn vừa tải lên bài đăng này. Nó cũng sẽ không tính các liên kết hình ảnh từ các máy chủ bên ngoài.

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


<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<header class="entry-header">
<?php thachpham_thumbnail( ‘large’ ); ?>
<?php thachpham_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’, ‘thachpham’), $attachment_number );
?>
</header>
<div class="entry-content">
<?php thachpham_entry_content(); ?>
<?php
if ( is_single() ) :
thachpham_entry_tag();
endif;
?>
</div>
</article>

Hãy tạo một bài đăng, đăng một số hình ảnh, viết một số văn bản, đặt Hình ảnh nổi bật và chúng ta có kết quả như sau:

[Lập trình theme WordPress] Code cho Post Format [NEW]

Viết mã cho định dạng “video”

Ở dạng định dạng này, chúng ta sẽ muốn nó hiển thị video trên trang chủ, và khi xem nội dung chi tiết, 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 sao chép tất cả mã trong tệp content.php content-video.php như định dạng hình ảnh. Bây giờ bạn tìm thấy đoạn này:


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

Ở đây chúng tôi không muốn nó hiển thị hình thu nhỏ nữa nên hãy xóa nó đi.

Sau đó tìm đoạn văn:


<?php thachpham_entry_content(); ?>

Thay đổi thành

<?php the_content(); ?>

Tức là chúng ta không có 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 chèn vào bài bằng oEmbed sẽ không hiển thị trong nội dung rút gọn.

Tìm và xóa đoạn văn này để làm cho nó gọn gàng hơn:

<?php thachpham_entry_meta() ?>

Toàn bộ nội dung của tệp mã content-video.php như sau:


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

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

laptrinhtheme-finish-videoformat

Đơn giản vậy thôi, mục đích là để bạn hiểu được cách thức hoạt động của nó. : D

Viết mã cho định dạng “Liên kết”

Định dạng này được sử dụng để đăng một bài đăng để giới thiệu một liên kết nhất định. Nếu bạn muốn xem các ví dụ sử dụng thì hãy truy cập trang web http://digwp.combạn sẽ thấy tác giả sử dụng các định dạng liên kết rất đẹp để giới thiệu các liên kết tốt.

Giống như hai định dạng khác, bạn sao chép toàn bộ mã trong content.php sang trọng content-link.php.

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

<?php thachpham_entry_header(); ?>

Thay thế cho cái 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 thachpham_entry_meta(); ?>

Sau đó tìm:

<?php thachpham_entry_content(); ?>

Đã chỉnh sửa thành:


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

Xong, bây giờ chúng ta hãy tạo một bài mới, không có nội dung nhưng quan trọng nhất là phải có hai trường: format_link_description (mô tả của liên kết) vàformat_link_url (địa chỉ liên kết để trỏ đến). Nếu bạn không thấy phần Trường tùy chỉnh, hãy nhấp vào Tùy chọn màn hình (phía trên bên phải) -> đánh dấu vào Trường tùy chỉnh.

laptrinhtheme-formatlink-field

Tìm hiểu thêm: Hướng dẫn về trường tùy chỉnh trong WordPress.

Được rồi, bây giờ chúng ta có một kết quả như sau:

laptrinhtheme-finish-formatlink

Định dạng Trích dẫn và Thư viện

Vì 2 định dạng post này mà mình chưa tìm được ý tưởng nào hay và cũng không thấy ai sử dụng nên … đừng tạo mà chỉ sử dụng file content.php mặc định. Tôi lười: D.

Phần kết

Kết thúc bài viết này, chúng ta đã hoàn thành việc mã hóa các trang Định dạng bài viết cần thiết để nó hiển thị tốt hơn và đẹp hơn. Nhưng bạn có nhận thấy rằng khi bạn nhấp vào để xem chi tiết, đó là một trang trống không?

Đúng vậy, nó không hiển thị gì khi vào trang chi tiết vì nội dung single.php chưa có gì cả. Vì vậy ở bước tiếp theo, chúng ta sẽ tiến hành viết mã để nó hiển thị trang nội dung.

Đánh giá nội dung này

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