通常のテンプレートではカテゴリーページは簡素な文字列になっています。
少しでも見栄えを気にするサイトはカテゴリーなどのアーカイブページには画像を使いたいですよね。
なので今回は特定のカテゴリーページのみ見出しを画像にする方法をご紹介します。
※今回の内容は前回投稿した記事とかなり似ているので、気になる方は昨日の記事もご覧ください。
広告
アーカイブページにカテゴリーの判定を加える
通常のテーマでは、カテゴリーの一覧はarchive.phpを使用して一覧を表示しています。
この archive.phpに「○○のカテゴリーの場合のみ画像を見出しにする」という条件分岐を追加します。
ちなみに、設定前のアーカイブページは下記のようになっています。
こういった個所は画像にして見栄えを良くしたいですよね！
ということで、今回はWordPressのカテゴリーのみ公式のロゴに変更してみましょう。
カテゴリーの判定にはis_category関数を使います。
参考： 関数リファレンス/is category – WordPress Codex 日本語版
<?php if(is_category(4)): ?> <!-- 特定のカテゴリーの場合 --> <?php else: ?> <!-- 特定のカテゴリー以外の場合 --> <?php endif; ?>
is_category関数のパラメータとして指定している’$category’の箇所にはカテゴリーIDやカテゴリーの名前が指定できますが、カテゴリーの名前は変更することがあるのでカテゴリーIDを指定しましょう。
私が使っているテーマであれば、下記のような感じになります。
<section id="primary" class="content-archive content-area">
<main id="main" class="site-main" role="main">
<?php if ( have_posts() ) : ?>
<header class="page-header">
<?php if(is_category(4)): ?>
<h1 class="archive-title"><img alt="カテゴリー：<?php echo get_cat_name(4); ?>" title="カテゴリー：<?php echo get_cat_name(4); ?>" src="<?php echo wp_upload_dir()['baseurl']; ?>/2019/12/WordPress-logotype-standard.png"></h1>
<?php else: ?>
<?php the_archive_title( '<h1 class="archive-title">', '</h1>' ); ?>
<?php endif; ?>
<?php the_archive_description( '<div class="archive-description">', '</div>' ); ?>
</header><!-- .page-header -->
<div id="post-wrapper" class="post-wrapper clearfix">
<?php while ( have_posts() ) : the_post();
get_template_part( 'template-parts/content' );
endwhile; ?>
</div>
<?php maxwell_pagination(); ?>
<?php
else :
get_template_part( 'template-parts/content', 'none' );
endif; ?>
</main><!-- #main -->
</section><!-- #primary -->
5行目のis_category 関数に’4’を指定していますが、指定している番号がカテゴリーIDになります。
カテゴリーIDはWordPressのカテゴリーの編集画面のURLから取得できます。
archive.phpの記載が正しいと、下記のような表示になります。
しっかりとカテゴリーの内容で分岐して表示されるようになりました。
テンプレとは少し違った表示になるので、ちょっと凝ったサイトっぽく見えるようになるので是非試してみてください。