Cách hiển thị các bài đăng phổ biến của WordPress trong các cột

WordPress Popular Posts là một trong những plugin phổ biến nhất để hiển thị các bài đăng phổ biến (dựa trên số lượt xem) trong WordPress.

Hướng dẫn này cung cấp các bước để hiển thị 3 bài đăng phổ biến nhất trong các cột có hình ảnh, tiêu đề và danh mục xuất hiện bên dưới mỗi bài đăng trong khu vực tiện ích “Trang chủ nổi bật” tùy chỉnh bên dưới tiêu đề trên trang chủ trong Genesis.

Lưu ý: Hiện tại plugin không hỗ trợ hiển thị tất cả các danh mục và chỉ hiển thị một danh mục tại thời điểm này. Rõ ràng, hỗ trợ cho nhiều danh mục sẽ có trong phiên bản tiếp theo.

Bước 1

Cài đặt và kích hoạt các bài đăng phổ biến của WordPress.

Bước 2

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

// Register home-popular widget area.
genesis_register_widget_area(
    array(
        'id'          => 'home-popular',
        'name'        => __( 'Home Popular', 'my-theme-text-domain' ),
        'description' => __( 'Place a Popular Posts widget in here.', 'my-theme-text-domain' ),
    )
);

add_action( 'genesis_after_header', 'custom_popular_posts' );
/**
 * Display Popular Posts below the site header on homepage.
 */
function custom_popular_posts() {
    // if we are not on the front page, abort.
    if ( ! is_front_page() ) {
        return;
    }

    // display `home-popular` widget area.
    genesis_widget_area( 'home-popular', array(
        'before'    => '<div class="home-popular widget-area"><div class="wrap">',
        'after'     => '</div></div>',
    ) );
}

Bước 3

Tại Appearance> Widgets, kéo tiện ích Bài đăng phổ biến của WordPress vào khu vực tiện ích Phổ biến Trang chủ và định cấu hình nó.

Đây là Đánh dấu HTML bài đăng tùy chỉnh:

<li><div class="entry-img">{thumb}</div><div class="entry-info">{title}<span class="entry-cats">{category}</span></div></li>

Bước 4

Thêm phần sau vào style.css của chủ đề con và sửa đổi cho phù hợp:

.home-popular {
    padding: 60px 0;
    background-color: #fff;
}

.home-popular .widget-title {
    margin-bottom: 40px;
    font-size: 30px;
}

.popular-posts .wpp-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;

    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.popular-posts .wpp-list > li {
    float: left;
    clear: none;
    width: 31.25%;
    margin-bottom: 0;
    border-radius: 3px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    -webkit-box-shadow: 0 2px 4px 0 rgba(0,0,0,0.2);
    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.2);
}

.entry-img {
    overflow: hidden;
    border-bottom: 4px solid #ffe131;
}

.popular-posts .wpp-thumbnail {
    margin-right: 0;
    -webkit-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}

.entry-img a:hover img {
    -webkit-transform: scale(1.04);
    transform: scale(1.04);
}

.entry-info {
    padding: 12px;
}

.wpp-list a {
    color: #464646;
    text-decoration: none;
}

.wpp-list a:hover {
    color: #000;
}

.wpp-post-title {
    display: block;
    font-size: 16px;
    font-weight: bold;
}

.entry-cats {
    font-size: 13px;
}

@media only screen and (max-width: 860px) {
    .popular-posts .wpp-list {
        flex-direction: column;

        -webkit-box-direction: normal;
        -webkit-box-orient: vertical;
        -ms-flex-direction: column;
    }

    .popular-posts .wpp-list > li {
        width: 100%;
        margin-bottom: 40px;
    }
}