ワードプレス：タブ切り替えの記事一覧に最新の投稿記事のアイキャッチ画像だけを表示する方法

ワードプレス：ニュースサイトのような、タブ切り替え（カテゴリー）の記事一覧に、そのタブ（カテゴリー）の最新の投稿記事のアイキャッチ画像だけを右側に一つ表示する方法を教えてください。
参考サイト：https://news.mynavi.jp/

今、phpでの記載は下記のようにしていますが、タブに関係なく、最新の投稿で設定したアイキャッチ画像が表示されてしまいます。
「このタブ（カテゴリー）の、最新の投稿のアイキャッチを表示」という命令はどのように記載したらよいのでしょうか。

<ul class="tab-1"> <li><a href="#tab1"><?php echo get_cat_name(192); ?></a></li> <li><a href="#tab2"><?php echo get_cat_name(193); ?></a></li> <li><a href="#tab3"><?php echo get_cat_name(194); ?></a></li> <li><a href="#tab4"><?php echo get_cat_name(195); ?></a></li> <li><a href="#tab5"><?php echo get_cat_name(196); ?></a></li> <li><a href="#tab6"><?php echo get_cat_name(197); ?></a></li> </ul> <div class="tab_content"> <div class="tab_area" id="tab1"> <ul class="tab-item-set"> <?php cat_post_list( 6, 192 ); ?> </ul> </div> <div class="tab_area" id="tab2"> <ul class="tab-item-set"> <?php cat_post_list( 6, 193 ); ?> </ul> </div> <div class="tab_area" id="tab3"> <ul class="tab-item-set"> <?php cat_post_list( 6, 194 ); ?> </ul> </div> <div class="tab_area" id="tab4"> <ul class="tab-item-set"> <?php cat_post_list( 6, 195 ); ?> </ul> </div> <div class="tab_area" id="tab5"> <ul class="tab-item-set"> <?php cat_post_list( 6, 196 ); ?> </ul> </div> <div class="tab_area" id="tab6"> <ul class="tab-item-set"> <?php cat_post_list( 6, 197 ); ?> </ul> </div> <div class="tab__pickup js-pickup"> <div class="tab-pickup-photo"> <div class="tab-pickup-photo__panel js-pickup__photo"> <div class="tab_area-img"> <?php if (has_post_thumbnail()): ?> 　<a class="tab-pickup-photo__link"><?php the_post_thumbnail( 'thumbnail', array( 'class' => 'tab-pickup-photo__img' ) ); ?></a> <?php endif; ?> </div> </div> </div> </div> </div>

CHERRY

2018/12/12 03:31 編集

cat_post_list は、WordPress 標準にはないと思いますが、どのような関数でしょうか？　cat_post_list で、タブ別の投稿を取得しているのであれば、同じ関数の中で、サムネイルも一緒に取得する必要があると思います。

konoha0708

2018/12/12 04:35

書き込みありがとうございます。「cat_post_list」ですが、 https://ateitexe.com/wordpress-category-newpost-tab/ こちらのサイトからコピペさせていただいたもので、 functions.phpには下記のように記載しています。 // カテゴリ別新着 function cat_post_list( $show_num, $cat_id ) { global $post; $args = array( 'posts_per_page' => $show_num, 'cat' => $cat_id ); $myposts = get_posts( $args ); foreach( $myposts as $post ) { setup_postdata($post); ?> <li> <a href="<?php the_permalink(); ?>" class="cate-title"> <?php the_title(); ?></a> </li> <?php } wp_reset_postdata(); } ?> 同じ関数の中で、サムネイルも一緒に取得する必要があると思います。というのは、上記のfunctions.phpにどのように記載すればよいのでしょうか。

行動規範の内容に同意します

回答1件

ベストアンサー

投稿記事は、CSS を使って、タブ表示にしていますが、サムネイルは、タブを作っていないので、最新の１件しか表示されないと思います。

同じように CSS でタブを切り替えるようにして、あらかじめサムネイルを用意しておくのが簡単でしょうか。

たとえば、カテゴリーの最新記事のサムネイルを取得する下記のような関数を作って...

function my_get_cat_thumbnail_163483( $cat_id, $size = 'thumbnail', $attr = array() ) {
    $myposts = get_posts( array( 'posts_per_page' => 1, 'cat' => $cat_id ) );
    foreach ( $myposts as $mypost ) {
        if ( has_post_thumbnail( $mypost->ID ) ) {
            return get_the_post_thumbnail( $mypost->ID, $size, $attr );
        }
    }
}