新規一覧で表示されるアイキャッチ画像をカテゴリー別に自動表示したい

Question

###前提

現在wordpressのテーマ「J STORK」を利用しています。

初心者のため自分でコードを作成したり、
設置する場所がわからないのでご教授いただきたいと思います。

###実現したいこと

新規一覧に表示される「アイチャッチ画像」を
カテゴリー別に違う画像を自動表示されるように設定したい。

自分なりにコードを変更して追記してみましたが
表示に変わりありませんでした。

私の記事は全国で開催されるレースの予定を紹介するものなので
カテゴリーは地域別として
画像を変えたいと考えています。

追記：記事にアイキャッチが登録されている場合は記事に登録されているほうの画像を優先に表示したいです。

###追記、変更したいページのコード

テーマJStorkで新規一覧の画像の指示をしているコードはこちらです。

ファイル場所：parts_archive_card.php

<div class="post-list-card cf">

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

<article <?php post_class('post-list cf animated fadeIn'); ?> role="article">
<a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>">

<?php
$cat = get_the_category();
$cat = $cat[0];
?>

<?php if ( has_post_thumbnail()) : ?>
<figure class="eyecatch">
<?php the_post_thumbnail('home-thum'); ?>
<span class="cat-name cat-id-<?php echo $cat->cat_ID;?>"><?php echo $cat->name; ?></span>
</figure>
<?php else: ?>
<figure class="eyecatch noimg">
<img src="<?php echo get_theme_file_uri('/library/images/noimg.png'); ?>">
<span class="cat-name cat-id-<?php echo $cat->cat_ID;?>"><?php echo $cat->name; ?></span>
</figure>
<?php endif; ?>

<section class="entry-content cf">
<h1 class="h2 entry-title"><?php the_title(); ?></h1>

<p class="byline entry-meta vcard">
<span class="date gf updated"><?php the_time('Y.m.d'); ?></span>
<span class="writer name author"><span class="fn"><?php the_author(); ?></span></span>
</p>

<div class="description"><?php the_excerpt(); ?></div>

</section>
</a>
</article>

<?php endwhile; ?>


<?php elseif(is_search()): ?>
<article id="post-not-found" class="hentry cf">
<header class="article-header">
<h1>記事が見つかりませんでした。</h1>
</header>

<section class="entry-content">

<p>お探しのキーワードで記事が見つかりませんでした。別のキーワードで再度お探しいただくか、カテゴリ一覧からお探し下さい。</p>

<div class="search">
<h2>キーワード検索</h2>
<?php get_search_form(); ?>
</div>


<div class="cat-list cf">
<h2>カテゴリーから探す</h2>
<ul>
<?php $args = array(
'title_li' => '',
); ?>
<?php wp_list_categories($args); ?>
</ul>
</div>

</section>

</article>

<?php else : ?>

<article id="post-not-found" class="hentry cf">
<header class="article-header">
<h1>まだ投稿がありません！</h1>
</header>
<section class="entry-content">
<p>表示する記事がまだありません。</p>
</section>
</article>

<?php endif; ?>
</div>

追記してみたコード

カテゴリー別に違う画像を表示する方法を検索していたところ、
説明してくれている方がいたので参考に使用させてもらいました。
参考URL：http://ruh.sunnyday.jp/archives/507

説明のコードはこちら

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<?php if (has_post_thumbnail()): ?>
    <?php the_post_thumbnail( array(横幅,高さ) ); ?> //アイキャッチ指定時の画像
    <?php elseif(in_category('カテゴリ1のスラッグ')): ?><img src="カテゴリ1用アイキャッチ画像" />
    <?php elseif(in_category('カテゴリ2のスラッグ')): ?><img src="カテゴリ2用アイキャッチ画像" />
    <?php elseif(in_category('カテゴリ3のスラッグ')): ?><img src="カテゴリ3用アイキャッチ画像" />
    <?php else: ?><img src="カテゴリ「未設定」用アイキャッチ画像" /><?php endif; ?>
     
<h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
<?php the_content(); ?>
<?php endwhile; ?>

###追記してみたコード

画像のみ変更したかったので

<?php if (has_post_thumbnail()): ?>
    <?php the_post_thumbnail( array(横幅,高さ) ); ?> //アイキャッチ指定時の画像
    <?php elseif(in_category('カテゴリ1のスラッグ')): ?><img src="カテゴリ1用アイキャッチ画像" />

画像をカテゴリー別に指示するコードと思われる
ところのみを使用してみました。

変更後のコード

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

<article <?php post_class('post-list cf animated fadeIn'); ?> role="article">
<a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>">

<?php
$cat = get_the_category();
$cat = $cat[0];
?>


<figure class="eyecatch">

//カテゴリー別のアイキャッチ参考コード：http://ruh.sunnyday.jp/archives/507
memo重複しているためオリジナルの
<?php if ( has_post_thumbnail()) : ?>とを一行消した。
//

<?php if (has_post_thumbnail()): ?>
    
    <?php elseif(in_category('hokkaido')): ?><img src="https://runbike.net/wp-content/uploads/2018/04/b92efca0590affe217ee7b6eae80a176-e1524543926325.jpg" />
      <?php else: ?><img src="カテゴリ「未設定」用アイキャッチ画像" /><?php endif; ?>
     
//ここまで//


<?php the_post_thumbnail('home-thum'); ?>
<span class="cat-name cat-id-<?php echo $cat->cat_ID;?>"><?php echo $cat->name; ?></span>
</figure>

<?php else: ?>
<figure class="eyecatch noimg">
<img src="<?php echo get_theme_file_uri('/library/images/noimg.png'); ?>">
<span class="cat-name cat-id-<?php echo $cat->cat_ID;?>"><?php echo $cat->name; ?></span>
</figure>
<?php endif; ?>

###結果

試しに北海道のカテゴリーで表示を試みてみましたが
変わりなく、オリジナルで設定されている、
「noimg.png」の画像が表示されていました。

コード内の「figure class」あたりで変更、追記が
必要なのかなとは想像しているのですが
どうしたらいいのかは、わかりません。

記事はカスタム投稿タイプで作成したものばかりなので
そこも原因なのかなと推測しています。

最後に

質問もうまく伝えられているか自信がありませんが
どうか、このコードでわかる方回答をどうぞよろしくお願いいたします。

Comments

[tabuu]

質問のタグがHTTPSになっているのでWordPressとしておいてください。

仕様ですが、
記事にアイキャッチが登録されている場合も、カテゴリの画像に差し替えたいということでしょうか？
それとも、カテゴリの画像と記事のアイキャッチ画像と両方表示されたいのでしょうか？

あと、変更後のコードに以下のコードが2回あるのでコピペミスかと思います。
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

[sweeetlife.]

修正依頼をありがとうございます。

タグ、変更後のコード削除の修正を完了いたしました。
また、仕様について
「記事にアイキャッチが登録されている場合は記事のアイチャッチ画像を優先に表示したい。」
です。

Answer 1

変更後のコードがコメント入っていたりインデント揃っていなかったりで判りづらいのですが
以下のような内容で大丈夫だと思います。
ただしthe_post_thumbnailで出力されるタグと同等のタグをカテゴリ画像にも付ける必要があります。
in_category('hokkaido')でひっかかるかは未検証です。

<figure class="eyecatch">
    <?php if (has_post_thumbnail()): ?>
        <?php the_post_thumbnail('home-thum'); ?>
    <?php elseif(in_category('hokkaido')): ?>
        <img src="https://runbike.net/wp-content/uploads/2018/04/b92efca0590affe217ee7b6eae80a176-e1524543926325.jpg" />
    <?php else: ?>
        <img src="カテゴリ「未設定」用アイキャッチ画像" />
    <?php endif; ?>
    <span class="cat-name cat-id-<?php echo $cat->cat_ID;?>"><?php echo $cat->name; ?></span>
</figure>