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

Question

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

Comments

[CHERRY]

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

[konoha0708]

書き込みありがとうございます。
「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にどのように記載すればよいのでしょうか。

Answer 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 );
        }
    }
}

サムネイルを表示するタブの部分を作って、サムネイルの表示する際に 作成した関数を呼び出して表示して、CSS でタブを切り替えるのが簡単でしょうか。

呼び出し例： <?php echo my_get_cat_thumbnail_163483( カテゴリーID ,'thumbnail', array( 'class' => 'tab-pickup-photo__img' ) ); ?>

Comments

[konoha0708]

丁寧でわかりやすい回答をいただき、感謝いたします。
初心者で関数を作る部分がわからずに困っていました。
PHPも基礎から勉強して、やりたいことができるよう努力していきたいと思います。
呼び出し例まで記載いただいて、本当に助かりました。ありがとうございました。