WordPressの記事のカテゴリー毎にアイコンを変更する分岐を作成する｜WordPressでビジネスサイトをつくろう【第12回】

前回はカスタムメニューを使用してグローバルナビゲーションの作成方法を紹介しましたが、今回は投稿した記事にカテゴリーによって専用のアイコンなどを設定することができるような条件分岐を行います。

更新情報などを複数のカテゴリーに分けて視覚的にわかりやすくしたり、複数人で投稿するブログなどでカテゴリー毎に色分けや写真を入れたり簡単な記述でいろいろなことができますので是非使ってみましょう。

投稿するカテゴリー毎にアイコンを表示する

ビジネスサイトでの更新情報ページなどを作成する際に、すべてのニュースを更新日毎に追加されていく形になりますが、更新情報の中でもサブカテゴリー的に分類がある際などに更新情報の見出しのテキストだけでは、そのカテゴリーがわかりにくくなりますので、該当するカテゴリー内容に応じてアイコンなどをつけることで視覚的に情報を整理させることなどがあります。

静的にサイトを作成する際は、更新の際にそれぞれの該当するアイコンなどを設定する形になりますが、WordPressでは「カテゴリー」毎に応じて自動的にアイコンなどを設定するように作成することができます。

サンプルサイトの「ニュース」のページで確認してみますと「ニュース」という大分類の中に「INFO」と「SEMINAR」というアイコンが色違いで設定してあります。

サンプルサイトはこちらになります。
http://wordpress-book.webdesignmatome.com/news/

このように、ニュース内容の属性毎に色違いのアイコンを設定することによって、セミナーだけを見たい人はセミナーアイコンを目印にすることができるので探しやすくなります。

また上部のグローバルナビゲーションをマウスオーバーすることによって、プルダウンメニューで「お知らせ」と「セミナー」のメニューになっていて、それぞれをクリックするとその項目だけの更新情報が表示されます。

グローバルナビゲーションの設定方法については前回の記事で紹介しています。

参考：第11回目 WordPressのカスタムメニューを使用してグローバルナビゲーションを作成する｜Wordpressでブログでなくビジネスサイトをつくろう【MdN連載第11回目】

こうすることで「セミナー」のみを表示させるページを作ることができソート機能的に使用することができます。

ナビゲーションから「セミナー」を選択するとセミナーのみに更新情報一覧を見ることができます。

このように一覧ページやそれぞれのページを静的に作成するとなると、それぞれを更新しなければいけないのですが、Wordpressでは簡単に振り分ける事が可能です。

では、実際にニュースのページの投稿とカテゴリー毎にアイコンを表示させてみたいと思います。

TOPページのニュースを表示する

まず「お知らせ」のカテゴリーとしてサンプル記事を投稿して、TOPページに表示させます。

今回のサンプルサイトでのカテゴリーをどのように設定しているかは、以前の記事を参照してください。

参考：はじめてWordPressを使用する際に行う設定をまとめる（カテゴリー・固定ページ編）｜Wordpressでブログでなくビジネスサイトをつくろう【MdN連載第4回目】

今回は「ニュース」の中を分岐させますので、図の赤枠内の3つを使用していきます。

実際のサンプル記事の投稿画面は下記のようになります。

今回TOPページでは定義リスト（dl,dt,dd）を使用してマークアップして、ルールの条件式を使用して下記のように記述します。

コピー用

<?php if(have_posts()): ?>
<dl>
<?php while(have_posts()): the_post(); ?>
<dt><?php the_time('Y/m/d'); ?></dt>
<dd><a href="<?php the_permalink(); ?>"><?php the_title(); ?>
</a><?php the_content(); ?></dd>
<?php endwhile; ?>
</dl>
<?php endif; ?>

記事を表示させるループについては、以前の記事を参照してください。

参考：WordPressで投稿した記事の内容をループ文を使用して表示させる｜Wordpressでブログでなくビジネスサイトをつくろう【MdN連載第10回目】

こちらをCSSで調整して投稿日を左側、右側にタイトルと本文を表示させます。

日付とテキストの間が少し多めに空いていますが、このスペースには後ほどアイコンが表示されるように設定します。

このままですと、投稿した記事全文が表示され、多くのスペースをとってしまい下に表示されている情報を読むのも大変です。

このような場合はTOPページでは更新情報の概要のみを表示することで対応することができますので「抜粋」機能にてTOPページの概要文を表示させるとよいでしょう。

概要を表示するにはWordPressの「抜粋」という機能を利用します。

抜粋画面が投稿画面に表示されていない場合は、投稿記事画面の右上「表示オプション」をクリックしてオプションを表示してください。

そうすると本文スペースの下に抜粋スペースができますので、こちらに概要文を書きます。

このように投稿画面で本文以外のスペースを使うことで呼び出すタグによって表示する内容を変えられますので更新情報の一部分などを表示させる際などに便利な機能です。

それでは、トップページで表示するテキストを本文から抜粋に変更します。

「the_content();」で本文を出力していたと思いますが、ここを抜粋を出力するテンプレートタグ「tthe_excerpt();」に変更します。

コードはようなこのようになります。

コピー用

<?php if(have_posts()): ?>
<dl>
<?php while(have_posts()): the_post(); ?>
<dt><?php the_time('Y/m/d'); ?></dt>
<dd><a href="<?php the_permalink(); ?>"><?php the_title(); ?>
</a><?php the_excerpt();?></dd>
<?php endwhile; ?>
</dl>
<?php  endif; ?>

サイトを確認してみると、このようにタイトルの下に抜粋内に記述したテキストが表示されます。

アイコンを設定する

ここで、更新日とタイトルの間の隙間にアイコンを設定していきますが、まずは自動的にではなく静的に表示させていきます。

今回はアイコンは画像の表示ではなく、背景画像として設定する形にしますので、タイトルと本文を表示するdd要素に「class=”info”」を設定してこちらにCSSで背景のアイコンを設定していきます。

ここでトップページでの表示確認を行います。

テキストは抜粋に入力したテキストが表示され、カテゴリを表すアイコンも付いたので、お知らせの中をカテゴリ分けする際の目印になります。

アイコンが表示されましたが、これはどの内容を投稿されてもこの「INFO」のアイコンが表示されるようになってしまいます。

例えば、「セミナー」のカテゴリーの記事を投稿しても下記のようにすべて「INFO」のアイコンになります。

これでは自動的にアイコンを表示することができませんので、ここでカテゴリーを判別して、投稿されたカテゴリーに応じて分岐する記述を行なっていきます。

記事のカテゴリーによってアイコンを自動的に変更する

お知らせの記事に「INFO」アイコン、セミナーの記事に「SEMINAR」アイコンを表示させるために、カテゴリースラッグを使用して、「お知らせ」アイコンと「セミナー」アイコンをそれぞれ表示させます。

カテゴリーを作成する際に使用した「スラッグ名」はページのURLに使用するのと、条件分岐などの目印などに使用することができます。

今回はお知らせのスラッグには「info」セミナーのスラッグには「seminar」と設定しています。

次にカテゴリー情報を取得してddに設定していた「class=”info”」を動的に変更するように記述します。

コピー用

<?php
$cats = get_the_category();
$cats = $cats&#91;0&#93;;
?>
<dd class="<?php echo $cats->category_nicename;?>">

このようにすると、カテゴリーが「お知らせ」の場合はcategory_nicenameは「info」になり、セミナーの場合は「seminar」が出力されます。

・お知らせの場合は<dd class=”info”>
・セミナーの場合は<dd class=”seminar”>

となりCSSで別の背景画像を指定することによってカテゴリによってアイコンを振り分けることができます。

これでお知らせの記事ならclass「info」を出力し、セミナーの場合はclass「seminar」を出力します。

これで、お知らせの記事には「info」のアイコンがつき、セミナーの記事には「seminar」のアイコンがつきました。

このように投稿のカテゴリーを自動的に取得できるタグを使用することで、運用の手間を省くことができますし、サイト閲覧者にはわかりやすく情報を伝えることができます。

このカテゴリーを取得してスラッグ名を表示させる記述を覚えることで色々な設定ができますので是非ご活用ください。

また今回とりあえたサンプルは、WordPressでビジネスサイトでよく使用する表現をすべてまとめた著書「WordPress 3.x 現場のワークフローで覚えるビジネスサイト制作」のサンプルを使用しています。

本書ではサイト作りのすべてのソースコードをテキストで用意して、迷うことなくWordPressでビジネスサイト作るの工程を学べる内容となっております。

どのようなページを作れるかなどは、こちらにサンプルサイトと本の内容をまとめてありますのでWordPressでのサイト作りに興味を持ちましたら是非こちらもご覧ください。

http://www.html5-memo.com/other/wordpress-book/