Lưới bài đăng hiển thị hình ảnh, tiêu đề và ngày tháng trong Genesis

Trong nhóm Genesis Facebook, một người dùng đã hỏi,

Có một câu hỏi mã hóa về một vòng lặp lưu trữ

Tôi đang sử dụng hướng dẫn này cho archive.php của chủ đề của mình: Customizing the Genesis Grid Loop Content - Bill Erickson Nó thực hiện những gì tôi cần về nguyên tắc, nhưng tôi đang đấu tranh với việc tùy chỉnh nó.

Tôi muốn nó xuất ra hình ảnh, tiêu đề và ngày tháng. Không có đoạn trích. Và tôi muốn các bài viết nằm trong danh sách không có thứ tự để dễ định dạng hơn.

Tôi đã thử làm điều này một mình nhưng không có gì hoạt động (mã tôi thêm về cơ bản bị bỏ qua).

Có ai biết cách thiết lập điều này không? Hay có cách nào tốt hơn để thực hiện giao diện tùy chỉnh cho các trang lưu trữ?

Hướng dẫn này cung cấp các bước để hiển thị hình ảnh nổi bật, tiêu đề mục nhập và ngày xuất bản cho các bài đăng trên kho lưu trữ trong lưới 3 cột trong Genesis.

Chúng ta sẽ sử dụng các lớp cột trong Genesis để sắp xếp các bài viết trong các cột.

Mặc dù hướng dẫn đã được viết cho Genesis Sample, nhưng nó sẽ hoạt động với một vài điều chỉnh trong bất kỳ chủ đề Genesis nào.

Bước 1

Tạo một tệp có tên archive.php trong thư mục chủ đề con có mã sau:

// Force full width content.
add_filter( 'genesis_pre_get_option_site_layout', '__genesis_return_full_width_content' );

/**
 * Display as Columns.
 *
 */
function be_portfolio_post_class( $classes ) {

    if ( is_main_query() ) { // conditional to ensure that column classes do not apply to Featured widgets
        $columns = 3; // Set the number of columns here

        $column_classes = array( '', '', 'one-half', 'one-third', 'one-fourth', 'one-fifth', 'one-sixth' );
        $classes[] = $column_classes[$columns];
        global $wp_query;
        if( 0 == $wp_query->current_post || 0 == $wp_query->current_post % $columns )
            $classes[] = 'first';
    }

    return $classes;
}
add_filter( 'post_class', 'be_portfolio_post_class' );

// Remove all actions from entry hooks.
$hooks = array(
    'genesis_entry_header',
    'genesis_entry_content',
    'genesis_entry_footer',
);

foreach ( $hooks as $hook ) {
    remove_all_actions( $hook );
}

add_action( 'genesis_before_while', 'custom_posts_wrap_open' );
/**
 * Add opening div.posts tag for posts.
 */
function custom_posts_wrap_open() {
    echo '<div class="posts">';
}

add_action( 'genesis_after_endwhile', 'custom_posts_wrap_close' );
/**
 * Add closing div.posts tag for posts.
 */
function custom_posts_wrap_close() {
    echo '</div>';
}

// Entry header.
add_action( 'genesis_entry_header', 'genesis_entry_header_markup_open', 5 );
add_action( 'genesis_entry_header', 'genesis_do_post_image' );
add_action( 'genesis_entry_header', 'genesis_entry_header_markup_close', 15 );

// Entry content.
add_action( 'genesis_entry_content', 'genesis_do_post_title' );
add_action( 'genesis_entry_content', 'genesis_post_info' );

add_filter( 'genesis_post_info', 'custom_post_info' );
/**
 * Customize post info.
 *
 * @param  string $post_info Existing post info
 * @return string            Modified post info
 */
function custom_post_info( $post_info ) {
    $post_info = '[post_date]';

    return $post_info;
}

genesis();

Bước 2

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

.posts .entry {
    padding: 10px;
}

.posts .aligncenter {
    margin-bottom: 0;
}

.posts .entry-title {
    font-size: 26px;
    font-size: 2.6rem;
}

.posts .entry-content {
    padding: 20px;
}

@media only screen and (max-width: 860px) {
    .posts .entry {
        margin-bottom: 40px;
    }
}