Cách hiển thị Bài đăng từ một Danh mục trong các cột bằng cách sử dụng Mã ngắn bài viết hiển thị

Bài viết hiển thị Shortcode là một plugin tuyệt vời của Bill Erickson bằng cách sử dụng nó mà chúng tôi có thể tìm nạp và hiển thị các mục nhập từ cơ sở dữ liệu WP một cách dễ dàng khi viết các truy vấn thủ công.

Trong bài viết này, tôi chỉ ra cách sử dụng Mã ngắn của Bài đăng hiển thị để hiển thị Hình ảnh nổi bật và tiêu đề được liên kết của 12 Bài đăng từ một danh mục “Nổi bật” cụ thể trong 3 cột.

Bước 1

Cài đặt và kích hoạt Mã ngắn bài viết hiển thị.

Bước 2

Thêm phần sau vào functions.php của chủ đề con :

// Register a custom image size for Featured Category images
add_image_size( 'featured-cat-image', 300, 200, true );

/**
 * Add Column Classes to Display Posts Shortcodes
 * @author Bill Erickson
 * @link http://www.billerickson.net/code/add-column-classes-to-display-posts-shortcode
 *
 * Usage: [display-posts columns="2"]
 *
 * @param array $classes
 * @param object $post
 * @param object $query
 * @return array $classes
 */
function be_display_post_class( $classes, $post, $listing, $atts ) {
	if( !isset( $atts['columns'] ) )
		return $classes;

	$columns = array( '', '', 'one-half', 'one-third', 'one-fourth', 'one-fifth', 'one-sixth' );
	$classes[] = $columns[$atts['columns']];
	if( 0 == $listing->current_post || 0 == $listing->current_post % $atts['columns'] )
		$classes[] = 'first';
	return $classes;
}
add_filter( 'display_posts_shortcode_post_class', 'be_display_post_class', 10, 4 );

Đặt kích thước hình thu nhỏ mong muốn của bạn trong dòng 2 ở trên.

Bước 3

Tạo lại hình thu nhỏ của hình ảnh nổi bật.

Bước 4

Thêm mã ngắn này vào bất cứ nơi nào bạn muốn lưới bài đăng danh mục của mình:

[display-posts category="featured" posts_per_page="12" wrapper="div" wrapper_class="featured-posts-grid" image_size="featured-cat-image" columns="3"]

Thay thế “đặc trưng” bằng slug danh mục của bạn.

Bước 5

Thêm phần sau vào style.css của chủ đề con :

.featured-posts-grid .listing-item {
	margin-bottom: 40px;
}

.listing-item img {
	vertical-align: top;
}

.featured-posts-grid .listing-item a.image {
	display: block;
}