第12回 WordPressの記事のカテゴリー毎にアイコンを変更する分岐を作成する
前回はカスタムメニューを使用してグローバルナビゲーションの作成方法を紹介しましたが、今回は投稿した記事にカテゴリーによって専用のアイコンなどを設定することができるような条件分岐を行います。更新情報などを複数のカテゴリーに分けて視覚的にわかりやすくしたり、複数人で投稿するブログなどでカテゴリー毎に色分けや写真を入れたり簡単な記述でいろいろなことができますので是非使ってみましょう。
解説：（有）ムーニーワークス ハヤシユタカ
解説：（有）ムーニーワークス ハヤシユタカ
●投稿するカテゴリー毎にアイコンを表示する
ビジネスサイトでの更新情報ページなどを作成する際に、すべてのニュースを更新日毎に追加されていく形になりますが、更新情報の中でもサブカテゴリー的に分類がある際などに更新情報の見出しのテキストだけでは、そのカテゴリーがわかりにくくなりますので、該当するカテゴリー内容に応じてアイコンなどをつけることで視覚的に情報を整理させることなどがあります。
静的にサイトを作成する際は、更新の際にそれぞれの該当するアイコンなどを設定する形になりますが、WordPressでは「カテゴリー」毎に応じて自動的にアイコンなどを設定するように作成することができます。
サンプルサイトの「ニュース」のページで確認してみますと「ニュース」という大分類の中に「INFO」と「SEMINAR」というアイコンが色違いで設定してあります。
静的にサイトを作成する際は、更新の際にそれぞれの該当するアイコンなどを設定する形になりますが、WordPressでは「カテゴリー」毎に応じて自動的にアイコンなどを設定するように作成することができます。
サンプルサイトの「ニュース」のページで確認してみますと「ニュース」という大分類の中に「INFO」と「SEMINAR」というアイコンが色違いで設定してあります。
投稿したカテゴリー内容に応じて自動的に設定 （▲クリックして拡大）
サンプルサイトはこちらになります。
URL:http://wordpress-book.webdesignmatome.com/news/
このように、ニュース内容の属性毎に色違いのアイコンを設定することによって、セミナーだけを見たい人はセミナーアイコンを目印にすることができるので探しやすくなります。また上部のグローバルナビゲーションをマウスオーバーすることによって、プルダウンメニューで「お知らせ」と「セミナー」のメニューになっていて、それぞれをクリックするとその項目だけの更新情報が表示されます。
グローバルナビゲーションの設定方法については前回の記事で紹介しています。
※参考：第11回目『WordPressのカスタムメニューを使用してグローバルナビゲーションを作成する』
こうすることで「セミナー」のみを表示させるページを作ることができソート機能的に使用することができます。
URL:http://wordpress-book.webdesignmatome.com/news/
このように、ニュース内容の属性毎に色違いのアイコンを設定することによって、セミナーだけを見たい人はセミナーアイコンを目印にすることができるので探しやすくなります。また上部のグローバルナビゲーションをマウスオーバーすることによって、プルダウンメニューで「お知らせ」と「セミナー」のメニューになっていて、それぞれをクリックするとその項目だけの更新情報が表示されます。
グローバルナビゲーションの設定方法については前回の記事で紹介しています。
※参考：第11回目『WordPressのカスタムメニューを使用してグローバルナビゲーションを作成する』
こうすることで「セミナー」のみを表示させるページを作ることができソート機能的に使用することができます。
ナビゲーションからそれぞれのニュースを選択
（▲クリックして拡大）
選択したカテゴリーのみを表示 （▲クリックして拡大）
このように一覧ページやそれぞれのページを静的に作成するとなると、それぞれを更新しなければいけないのですが、Wordpressでは簡単に振り分ける事が可能です。
では実際にニュースのページの投稿とカテゴリー毎にアイコンを表示させてみたいと思います。
では実際にニュースのページの投稿とカテゴリー毎にアイコンを表示させてみたいと思います。
●TOPページのニュースを表示する
まず「お知らせ」のカテゴリーとしてサンプル記事を投稿して、TOPページに表示させます。今回のサンプルサイトでのカテゴリーをどのように設定しているかは、以前の記事を参照してください。
※参考：第4回目『WordPressでサイト構築前に行う設定をまとめる（カテゴリー・固定ページ編）』
今回は「ニュース」の中を分岐させますので、図の赤枠内の3つを使用していきます。
※参考：第4回目『WordPressでサイト構築前に行う設定をまとめる（カテゴリー・固定ページ編）』
今回は「ニュース」の中を分岐させますので、図の赤枠内の3つを使用していきます。
サンプルサイトのカテゴリー設定（▲クリックして拡大）
サンプル投稿 （▲クリックして拡大）
実際のサンプル記事の投稿画面は右上のようになります。
今回TOPページでは定義リスト（dl,dt,dd）を使用してマークアップして、ルールの条件式を使用して下記のように記述します。
今回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;?＞ |
記事を表示させるループについては、以前の記事を参照してください。
※参考：第10回目『WordPressで投稿した記事の内容をループ文を使用して表示させる』
こちらをCSSで調整して投稿日を左側、右側にタイトルと本文を表示させます。日付とテキストの間が少し多めに空いていますが、このスペースには後ほどアイコンが表示されるように設定します。
※参考：第10回目『WordPressで投稿した記事の内容をループ文を使用して表示させる』
こちらをCSSで調整して投稿日を左側、右側にタイトルと本文を表示させます。日付とテキストの間が少し多めに空いていますが、このスペースには後ほどアイコンが表示されるように設定します。
（▲クリックして拡大）
このままですと投稿した記事全文が表示され、多くのスペースをとってしまい下に表示されている情報を読むのも大変です。このような場合はTOPページでは更新情報の概要のみを表示することで対応することができますので「抜粋」機能にてTOPページの概要文を表示させるとよいでしょう。
概要を表示するにはWordPressの「抜粋」という機能を利用します。抜粋画面が投稿画面に表示されていない場合は、投稿記事画面の右上「表示オプション」をクリックしてオプションを表示してください。
（▲クリックして拡大）
そうすると本文スペースの下に抜粋スペースができますので、こちらに概要文を書きます。
このように投稿画面で本文以外のスペースを使うことで呼び出すタグによって表示する内容を変えられますので更新情報の一部分などを表示させる際などに便利な機能です。
このように投稿画面で本文以外のスペースを使うことで呼び出すタグによって表示する内容を変えられますので更新情報の一部分などを表示させる際などに便利な機能です。
（▲クリックして拡大）
それでは、トップページで表示するテキストを本文から抜粋に変更します。
「the_content();」で本文を出力していたと思いますが、ここを抜粋を出力するテンプレートタグ「the_excerpt();」に変更します。
「the_content();」で本文を出力していたと思いますが、ここを抜粋を出力するテンプレートタグ「the_excerpt();」に変更します。
（▲クリックして拡大）
コードはようなこのようになります。
TOPページにニュースを表示させる表示（更新日とタイトルと抜粋）
（▲クリックして拡大）
| ○コピー用 ＜?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で背景のアイコンを設定していきます。
今回はアイコンは画像の表示ではなく、背景画像として設定する形にしますので、タイトルと本文を表示するdd要素に「class="info"」を設定してこちらにCSSで背景のアイコンを設定していきます。
（▲クリックして拡大）
ここでトップページでの表示確認を行います。
テキストは抜粋に入力したテキストが表示され、カテゴリを表すアイコンも付いたので、
お知らせの中をカテゴリ分けする際の目印になります。
テキストは抜粋に入力したテキストが表示され、カテゴリを表すアイコンも付いたので、
お知らせの中をカテゴリ分けする際の目印になります。
（▲クリックして拡大）
アイコンが表示されましたが、これはどの内容を投稿されてもこの「INFO」のアイコンが表示されるようになってしまいます。
例えば、「セミナー」のカテゴリーの記事を投稿しても下記のようにすべて「INFO」のアイコンになります。
例えば、「セミナー」のカテゴリーの記事を投稿しても下記のようにすべて「INFO」のアイコンになります。
（▲クリックして拡大）
これでは自動的にアイコンを表示することができませんので、ここでカテゴリーを判別して、投稿されたカテゴリーに応じて分岐する記述を行なっていきます。
●記事のカテゴリーによってアイコンを自動的に変更する
お知らせの記事に「INFO」アイコン、セミナーの記事に「SEMINAR」アイコンを表示させるために、カテゴリースラッグを使用して、「お知らせ」アイコンと「セミナー」アイコンをそれぞれ表示させます。
カテゴリーを作成する際に使用した「スラッグ名」はページのURLに使用するのと、条件分岐などの目印などに使用することができます。今回はお知らせのスラッグには「info」セミナーのスラッグには「seminar」と設定しています。
次にカテゴリー情報を取得してddに設定していた「class="info"」を動的に変更するように記述します。
カテゴリーを作成する際に使用した「スラッグ名」はページのURLに使用するのと、条件分岐などの目印などに使用することができます。今回はお知らせのスラッグには「info」セミナーのスラッグには「seminar」と設定しています。
次にカテゴリー情報を取得してddに設定していた「class="info"」を動的に変更するように記述します。
（▲クリックして拡大）
| ○コピー用 ＜?php $cats = get_the_category(); $cats = $cats[Θ]; ?＞ ＜dd class=＜?php echo $cats-＞category_nicename;?＞ |
このようにすると、カテゴリーが「お知らせ」の場合はcategory_nicenameは「info」になり、セミナーの場合は「seminar」が出力されます。
・お知らせの場合は＜dd class="info"＞となり、
・セミナーの場合は＜dd class="seminar"＞となりCSSで別の背景画像を指定することによってカテゴリによってアイコンを振り分けることができます。
これでお知らせの記事ならclass「info」を出力し、セミナーの場合はclass「seminar」を出力します。
・お知らせの場合は＜dd class="info"＞となり、
・セミナーの場合は＜dd class="seminar"＞となりCSSで別の背景画像を指定することによってカテゴリによってアイコンを振り分けることができます。
これでお知らせの記事ならclass「info」を出力し、セミナーの場合はclass「seminar」を出力します。
アイコン表示のアイコンCSS （▲クリックして拡大）
これで、お知らせの記事には「info」のアイコンがつき、セミナーの記事には「seminar」のアイコンがつきました。
（▲クリックして拡大）
このように投稿のカテゴリーを自動的に取得できるタグを使用することで、運用の手間を省くことができますし、サイト閲覧者にはわかりやすく情報を伝えることができます。
このカテゴリーを取得してスラッグ名を表示させる記述を覚えることで色々な設定ができますので是非ご活用ください。
また今回とりあえたサンプルは、WordPressでビジネスサイトでよく使用する表現をすべてまとめた著書「WordPress 3.x 現場のワークフローで覚えるビジネスサイト制作」のサンプルを使用しています。本書ではサイト作りのすべてのソースコードを用意して迷うことなくWordPressでビジネスサイト作るの工程を学べる内容となっております。
どのようなページを作れるかなどは、こちらにサンプルサイトと本の内容をまとめてありますので、WordPressでのサイト作りに興味を持ちましたら是非こちらもご覧ください。
URL:http://www.html5-memo.com/other/wordpress-book/
今回は以上になります。
このカテゴリーを取得してスラッグ名を表示させる記述を覚えることで色々な設定ができますので是非ご活用ください。
また今回とりあえたサンプルは、WordPressでビジネスサイトでよく使用する表現をすべてまとめた著書「WordPress 3.x 現場のワークフローで覚えるビジネスサイト制作」のサンプルを使用しています。本書ではサイト作りのすべてのソースコードを用意して迷うことなくWordPressでビジネスサイト作るの工程を学べる内容となっております。
どのようなページを作れるかなどは、こちらにサンプルサイトと本の内容をまとめてありますので、WordPressでのサイト作りに興味を持ちましたら是非こちらもご覧ください。
URL:http://www.html5-memo.com/other/wordpress-book/
今回は以上になります。
次回は、WordPressで特定部分の表示件数を制御するquery_postsの使用法について解説していきたいと思います。
●本連載で使用しているサンプルサイトをゼロから作成できる書籍
本書では、(X)HTML+CSSでサイトをつくることはできるものの、「ゼロからのWordPressサイト構築は未経験」、「PHPなどのプログラムはあまりわからない」という方のために、WordPressでビジネスサイトを構築する手法をステップ・バイ・ステップ形式で解説しています。作成するサンプルサイトには、ニュースページ、製品情報ページ、会社概要ページ、お問い合せフォームといったクライアントワークに欠かせない要素が盛り込まれています。
サンプルデータと掲載コードもダウンロードできるので、PHP言語に不慣れな方でも順を追ってステップを進めていけば、WordPressのしくみからテンプレートタグの使い方、カスタム投稿タイプ、固定ページなど、WordPressサイトの制作に必要な知識と技術を身につけられます。
サンプルデータと掲載コードもダウンロードできるので、PHP言語に不慣れな方でも順を追ってステップを進めていけば、WordPressのしくみからテンプレートタグの使い方、カスタム投稿タイプ、固定ページなど、WordPressサイトの制作に必要な知識と技術を身につけられます。
Profile
【林 豊】 1999年よりデジタルハリウッドでWEBコースの講師を担当、2001年に有限会社ムーニーワークス（http://www.moonyworks.com/）を立ち上げWEBの企画・制作、セミナー講師やWEB運用の企業研修なども行っている。
●HTML5でサイトをつくろう：http://www.html5-memo.com/
●Webデザインクリップ：http://webdesignmatome.com/
●jQurey mobileでサイトをつくろうjQuery Mobile：http://jquerymobile-memo.co/
【著書・共著】
●WordPress 3.x 現場のワークフローで覚えるビジ?ネスサイト制作 (2012/9/20)
●WebデザイナーのためのHTML5入門 (2012/08)
●ポケット詳解 jQuery Mobile辞典 (2012/05)
●すべての人に知っておいてほしい HTML5 & CSS3 の基本原則(2012/10/20)
●すべての人に知っておいてほしい スタイルシートデザインの基本原則(2012/5/25)
【林 豊】 1999年よりデジタルハリウッドでWEBコースの講師を担当、2001年に有限会社ムーニーワークス（http://www.moonyworks.com/）を立ち上げWEBの企画・制作、セミナー講師やWEB運用の企業研修なども行っている。
●HTML5でサイトをつくろう：http://www.html5-memo.com/
●Webデザインクリップ：http://webdesignmatome.com/
●jQurey mobileでサイトをつくろうjQuery Mobile：http://jquerymobile-memo.co/
【著書・共著】
●WordPress 3.x 現場のワークフローで覚えるビジ?ネスサイト制作 (2012/9/20)
●WebデザイナーのためのHTML5入門 (2012/08)
●ポケット詳解 jQuery Mobile辞典 (2012/05)
●すべての人に知っておいてほしい HTML5 & CSS3 の基本原則(2012/10/20)
●すべての人に知っておいてほしい スタイルシートデザインの基本原則(2012/5/25)
