Cách hiển thị hình ảnh nổi bật của bài đăng mới nhất cho mỗi bài đăng duy nhất được xuất bản trong năm trong WordPress / Genesis

Trong trang Genesis mà tôi hiện đang phát triển, có một trang “Lưu trữ” có thiết kế như sau:

Tôi có thể chỉ đơn giản là mã hóa các hình ảnh và năm tháng và hoàn thành trang này trong khoảng 15 phút. Nhưng tôi đã quyết định phức tạp hóa mọi thứ cho bản thân và dành nửa ngày để làm cho nó trở nên động, tức là hình ảnh sẽ là hình ảnh nổi bật của bài đăng mới nhất cho mỗi năm ở bên dưới hình ảnh. Vì vậy, điều này có nghĩa là trước tiên chúng ta nên lấy tất cả các năm duy nhất mà các bài đăng đã được xuất bản và trong mỗi năm đó, lấy bài đăng mới nhất và lấy hình ảnh nổi bật của nó.

Có ít nhất ba cách có thể được thực hiện.

Phương pháp 1

Lưu trữ đầu ra của trong một biến sẽ chứa đánh dấu HTML của danh sách không có thứ tự với các năm được liên kết. Sau đó, bùng nổ biến theo thẻ, thay thế s, ngắt dòng, v.v. bằng null, loại bỏ đánh dấu neo xung quanh các năm còn lại để thu được một mảng chứa các số năm. Sau đó, viết một vòng lặp for cho mỗi năm có truy vấn WordPress để mang lại 1 bài đăng mới nhất trong khi chuyển năm đến tham số truy vấn. Trong phần vòng lặp, chúng tôi nhận được hình ảnh và hiển thị nó với năm bên dưới nó.wp_get_archives() </li> <li> year

Phương pháp tiếp cận 2

Tạo một biến trống cho “năm cũ”, viết một truy vấn WordPress lặp lại tất cả các bài đăng trong cơ sở dữ liệu và đối với mỗi bài đăng, lưu trữ năm xuất bản của bài đăng hiện tại trong biến “năm mới”, kiểm tra xem năm mới và năm cũ giống nhau và nếu không thì in hình và năm, thay năm cũ bằng năm mới.

Phương pháp 3

Kiểm tra năm của bài đăng cũ nhất (đầu tiên) được xuất bản theo cách thủ công và viết vòng lặp for lặp lại từ năm đó đến năm hiện tại và hiển thị hình ảnh và năm.

Phương pháp 1

page-archive.php :

add_action( 'genesis_entry_content', 'sb_archive_content' );
/**
 * Add the featured image of latest post for each unique year posts are published in, below existing entry's content.
 */
function sb_archive_content() {
    echo '<div class="yearly-archives"><ul>';

        $args = array(
            'type' => 'yearly',
            'echo' => 0, // return and not echo.
        );

        $archives = wp_get_archives( $args );

        $archives = explode( '</li>', $archives );

        $years = array();

        foreach( $archives as $year ) {
            $year = str_replace( array( '<li>' , "\n" , "\t" , "\s" ), '' , $year );

            $year = preg_replace( array( '"<a href(.*?)>"', '"</a>"' ), array( '', '' ), $year );

            if ( '' != $year ) {
                $years[] = $year;
            }
            else {
                continue;
            }
        }

        foreach( $years as $year ) {
            $args = array(
                'posts_per_page' => '1',
                'no_found_rows' => true,
                'year' => $year,
            );

            $query = new WP_Query( $args );

            if ( $query->have_posts() ) {
                while ( $query->have_posts() ) {
                    echo '<li class="' . $year . '">';

                    $query->the_post();

                    if ( has_post_thumbnail() ) {
                        // store the URL of featured image.
                        $image_url = genesis_get_image( 'format=url&size=circular-image' );
                    } else {
                        // a placeholder.
                        // $image_url = 'http://lorempixel.com/203/203';
                        $image_url = get_stylesheet_directory_uri() . '/images/default-circular-image.png';
                    }

                    // get the alt text of featured image.
                    $thumb_id = get_post_thumbnail_id( get_the_ID() );
                    $alt = get_post_meta( $thumb_id, '_wp_attachment_image_alt', true );

                    // if no alt text is present for featured image, set it to entry title.
                    if ( '' === $alt ) {
                        $alt = the_title_attribute( 'echo=0' );
                    }

                    // display the image.
                    printf( '<figure class="year-image"><a href="%s"><img src="%s" alt="%s" /></a></figure>', get_bloginfo( 'url' ) . '/' . $year, $image_url, $alt );

                    // display the year.
                    printf( '<div class="year"><a href="%s">%s</a></div>', get_bloginfo( 'url' ) . '/' . $year, $year );

                    echo '</li>';
                }
            } else {
                // no posts found
            }

            // Restore original Post Data
            wp_reset_postdata();
        }

    echo '</ul></div>';
}

genesis();

Phương pháp tiếp cận 2

page-archive.php :

add_action( 'genesis_entry_content', 'sb_archive_content' );
/**
 * Add the featured image of latest post for each unique year posts are published in, below existing entry's content.
 */
function sb_archive_content() {
    echo '<div class="yearly-archives"><ul>';

    $args = array(
        'nopaging'               => true,
        'posts_per_page'         => '-1',
    );

    $query = new WP_Query( $args );

    $year_old = ''; // assign $year_old to nothing to start

    if ( $query->have_posts() ) {
        while ( $query->have_posts() ) {
            $query->the_post();

            $year_new = get_the_time( 'Y' ); // get $year_new in Year format

            if ( $year_old != $year_new ) { // run the check on $year_old and $year_new, and output accordingly.
                echo '<li class="' . $year_new . '">';

                if ( has_post_thumbnail() ) {
                    // get the URL of featured image.
                    $image_url = genesis_get_image( 'format=url&size=circular-image' );
                } else {
                    // a placeholder.
                    // $image_url = 'http://lorempixel.com/203/203';
                    $image_url = get_stylesheet_directory_uri() . '/images/default-circular-image.png';
                }

                // get the alt text of featured image.
                $thumb_id = get_post_thumbnail_id( get_the_ID() );
                $alt = get_post_meta( $thumb_id, '_wp_attachment_image_alt', true );

                // if no alt text is present for featured image, set it to entry title.
                if ( '' === $alt ) {
                    $alt = the_title_attribute( 'echo=0' );
                }

                // display the image.
                printf( '<figure class="year-image"><a href="%s"><img src="%s" alt="%s" /></a></figure>', get_bloginfo( 'url' ) . '/' . $year, $image_url, $alt );

                // display the year.
                printf( '<div class="year"><a href="%s">%s</a></div>', get_bloginfo( 'url' ) . '/' . $year_new, $year_new );

                echo '</li>';

            }

            $year_old = $year_new; // update $year_old.
        }
    } else {
        // no posts found.
    }

    // Restore original Post Data.
    wp_reset_postdata();

    echo '</ul></div>';
}

genesis();

Phương pháp 3

page-archive.php :

add_action( 'genesis_entry_content', 'sb_archive_content' );
/**
 * Add the featured image of latest post for each unique year posts are published in, below existing entry's content.
 */
function sb_archive_content() {
    echo '<div class="yearly-archives"><ul>';

    $currentyear = date( 'Y' );

    $years = range( $currentyear, 2015 ); // change 2015 to the year first post was published in.

    foreach( $years as $year ) {
            $args = array(
                'posts_per_page' => '1',
                'no_found_rows' => true,
                'year' => $year,
            );

            $query = new WP_Query( $args );

            if ( $query->have_posts() ) {
                while ( $query->have_posts() ) {
                    echo '<li class="' . $year . '">';

                    $query->the_post();

                    if ( has_post_thumbnail() ) {
                        // store the URL of featured image.
                        $image_url = genesis_get_image( 'format=url&size=circular-image' );
                    } else {
                        // a placeholder.
                        // $image_url = 'http://lorempixel.com/203/203';
                        $image_url = get_stylesheet_directory_uri() . '/images/default-circular-image.png';
                    }

                    // get the alt text of featured image.
                    $thumb_id = get_post_thumbnail_id( get_the_ID() );
                    $alt = get_post_meta( $thumb_id, '_wp_attachment_image_alt', true );

                    // if no alt text is present for featured image, set it to entry title.
                    if ( '' === $alt ) {
                        $alt = the_title_attribute( 'echo=0' );
                    }

                    // display the image.
                    printf( '<figure class="year-image"><a href="%s"><img src="%s" alt="%s" /></a></figure>', get_bloginfo( 'url' ) . '/' . $year, $image_url, $alt );

                    // display the year.
                    printf( '<div class="year"><a href="%s">%s</a></div>', get_bloginfo( 'url' ) . '/' . $year, $year );

                    echo '</li>';
                }
            } else {
                // no posts found
            }

            // Restore original Post Data
            wp_reset_postdata();
        }

    echo '</ul></div>';
}

genesis();

CSS mẫu:

.page-archive .content .entry {
    padding-bottom: 20px;
}

.page-archive .entry-content ul > li {
    list-style-type: none;
}

.yearly-archives {
    margin: 40px 0;
}

.yearly-archives ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 0;
    margin-left: 0;

    -ms-flex-pack: distribute;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    justify-content: space-around;
}

.yearly-archives li {
    width: 33.33333333%;
    text-align: center;
}

.yearly-archives li:last-child {
    margin-right: auto;
}

.year-image img {
    width: 203px;
    border: 3px solid #ffe131;
    border-radius: 50%;
    vertical-align: top;
    -webkit-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}

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

.year {
    margin-top: 10px;
}

.year a {
    color: #464646;
    font-size: 18px;
}

.year a:hover {
    color: #c3251d;
}

@media only screen and (max-width: 1200px) {
    .yearly-archives ul {
        flex-direction: column;

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

    .yearly-archives li {
        margin-bottom: 40px;
    }

    .yearly-archives li:last-child {
        margin-bottom: 0;
    }
}