WordPressの教科書2で情報サイトを作ります
この記事は、「WordPressの教科書2」という書籍で作るテーマを前提に書いております。
しかし、functions.phpの関数の定義や、cssの記述の方法は、どのテーマでも共通ですので、どのようなテーマをお使いの場合でも、転用可能であると考えられます。
さて、WordPressの教科書2ですが、この書籍はとても秀作で、クオリティの高いサイトを誰でも作ることができます。初めてWordPressでサイトを作るという方にとっては、若干敷居が高いかもしれませんが、本文を良く読み、書かれた内容をそのまま実行することで、スマホに対応したハイクオリティなサイトが作れます。
しかし、この本は「カスタマイズ」に関してはさほど言及されておりません。型にはまった、定型的なサイトは作ることができますが、ちょっとカスタマイズさせようと思ったら一苦労です。
本文にcssに関する記述がほとんどないため、
「どこをどういじったらこの部分の色やサイズを変更させることができる」
「この部分はどういった仕組みで表示されている」
といったことがほとんど分かりません。自分で調べるしかないと言うことですね。
ちなみに、cssの適用を調べる場合、ブラウザの機能を使うと便利です。Google Chromeの場合、調べたい場所を右クリックし、「要素の検証」をクリックするとcssがどのように適用されているのかを簡単に調べることができます。Firefoxの場合、Firebugというアドオンをインストールすることで、要素を調査することができます。
ちなみに、本文中でもFirebugのインストール方法は紹介されています。スマホサイトをカスタマイズする場合、Firefoxで「User Agent Switcher」というアドオンとFirebugを併用することでスムーズに作業することができます。
さて、前置きが長くなってしまいましたが、この記事の目的は、
「ある個別記事や、あるカテゴリーのアーカイブページを表示したときに、個別にグローバルナビゲーションのハイライトを設定したり、個別のヘッダー画像を表示させる方法」
を備忘録的に記述することです。
書籍を字面通りに進めても、アフィリエイトサイトなどの情報サイトとはかけ離れたビジネステイストの強いものが出来上がるだけです。一旦は書籍通りに進めてサンプルサイトを作ることをオススメしますが、そこからは自分流にカスタマイズさせていかなければなりません。
その際の参考になればと思い、今回の記事執筆を決意致しました。
参考記事→WordPressをカスタマイズするなら絶対覚えておきたい条件分岐やカスタム投稿タイプなどいろいろ
カテゴリーの親子関係を利用して表示を変更させる
今後の話しを分かりやすくするために、架空の設定をします。
今回作るサイト→スマホでガンガン稼ごう！
固定ページ名→スマートフォンを使った稼ぎ方
固定ページスラッグ→method
親カテゴリー名→スマートフォンを使った稼ぎ方
親カテゴリースラッグ→method
親カテゴリーID→10
子カテゴリー→ポイントサイト
記事タイトル→こんなに稼げたのか！私のポイントサイト黙示録
このような設定のもと、話を進めていきます。ちなみに親カテゴリー、子カテゴリー、記事は、他にもたくさんあるとお考え下さい。
固定ページに親カテゴリーを関連させて作っています
アフィリエイトサイトでは、親カテゴリーと固定ページを紐付けるというテクニックは盛んに行われています。
親カテゴリーには属する記事も多く、情報が集約することから、目次ページやカテゴリートップとして使われるためです。
そのカテゴリーについて詳細に説明したり、デザインをカテゴリーごとに変えたりすることもできることから、固定ページを親カテゴリーに関連づけて制作する方法は人気です。
functions.phpに関数を追加
カテゴリーや固定ページを作ったら、個別記事のカテゴリーの親カテゴリーの情報を取得する関数をfunctions.phpに定義します。functions.phpをいじる時は、事前にmiなどのテキストエディタ（UTF-8が使えるもの）にコピーをとっておく習慣を付けておくことをオススメ致します。functions.phpはとてもデリケートなファイルで、ちょっとしたミスでサイトや管理画面が表示されなくなってしまいます。そのような事態を未然に防ぐためにも、バックアップをとっておくことを強くオススメします。
では、親カテゴリーの情報を取得するための新しい関数を定義しましょう。
下記のコードをfunctions.phpに追加記入します。
// 親カテゴリーの情報を取得する関数の登録
function in_category_family( $parent ) {
if ( empty($parent) )
return false;
if ( in_category($parent) )
return true;
$parent = get_category($parent);
foreach ( (get_the_category()) as $child ) {
$child = get_category($child->cat_ID);
if ( cat_is_ancestor_of($parent, $child) )
return true;
}
return false;
}
こうすることで、「in_category_family」という文字列を使うだけで親カテゴリー情報を呼び出すことができる便利な機能が具備された事になります。
参考記事→WordPressのカテゴリのテンプレートで、属する親カテゴリに合わせて、子カテゴリの内容を切り替える関数
ナビゲーションバーを変更してみる
さて、上記の関数を利用し、ナビゲーションバーのハイライトを設定してみましょう。冒頭で紹介した書籍は、ナビゲーションバーのハイライトの記述はあるにはありますが、カスタム投稿を表示したときにハイライトさせる方法や、個別の固定ページを表示したときにハイライトさせる方法しかなく、カテゴリーごとや記事ごとにハイライトさせる方法についての言及はありません。
そこで、上記の設定に即し、個別記事「こんなに稼げたのか！私のポイントサイト黙示録」を表示したときに「スマートフォンを使った稼ぎ方」という部分をハイライトさせるようにfunctions.phpに記述します（ナビゲーションバーに「スマートフォンを使った稼ぎ方」という項目があると仮定しています）。
下記のコードをfunctions.phpに追加記入します。
wp_nav_menuにcurrentのクラス属性を追加します。
function net10man_current_nav($css, $item) {
if (is_search()) {
return $css;
}
if ($item->title == 'スマートフォンを使った稼ぎ方') {
if (function_exists('in_category_family') && in_category_family('10') ){
$css[] = 'current-page-ancestor';
}
}
return $css;
}
「スマートフォンを使った稼ぎ方」の所は、紐付けたい固定ページのタイトル及びカテゴリー名と一致させることが重要です。一字一句、間違いの内容に記述しないと、正しく動作しません。
また、「in_category_family(’10’)」の「10」の部分には、親カテゴリーのIDを記述します。つまり、IDが10のカテゴリーに含まれる記事を表示したときに、ナビゲーションバーの「スマートフォンを使った稼ぎ方」という部分がハイライトされるようになると言うことです。
header.phpに追加記入
フィルターフックですので、フックポイントをheader.phpに記述します（この部分、書籍の受け売りなので、すべてのテーマに適用することができるのかは定かではありません…すいません）。
下記のコードをheader.phpに追加記入します。
<?php
add_filter('nav_menu_css_class', 'net10man_current_nav', 10, 2);
グローバルナビゲーションに関する記述
remove_filter('nav_menu_css_class', 'net10man_current_nav');
?>
「グローバルナビゲーションに関する記述」という部分は、お使いのテーマの内容に依存しますので、適宜置き換えて下さい。
cssに追加記入
書籍の中で、グローバルナビゲーションの一番左の部分はcssの記述が足りないため、上記の定義を一番左の要素にも適用させるため補足する必要があります（グローバルナビゲーションの一番左に「スマートフォンを使った稼ぎ方」という要素があると仮定しています）。
css変更前
#header #global_nav > ul > li.menu-item-slug-method.current-menu-item > a {
background-position: 0 0;
}
css変更後
#header #global_nav > ul > li.menu-item-slug-method.current-menu-item > a,
#header #global_nav > ul > li.menu-item-slug-method.current-page-ancestor > a {
background-position: 0 0;
「method」の部分は親カテゴリー及び固定ページのスラッグです。
マウスオーバーしたときに画像が切り替わるよう指定しているのですが、それには特定の画像を事前にアップロードしておく必要があります。WordPressの教科書2で制作するサイトは、954×88ピクセルの細長い画像を使用しています。マウスオーバーやハイライトがオフ場合は下半分が表示され、オンの場合は上半分が表示されると言う仕組みです。
よくわからない方は、下記のブログを参考にしてみて下さい。マウスオーバーの際に画像を切り替える方法が良くわかると思います。
参考記事→簡単に実装できる、ボタン画像のマウスオーバーイベント 10+
補足：カスタム投稿ではなく通常の投稿を設定することもできる
WordPressの教科書2では、PCのグローバルナビゲーションには、カスタム投稿または固定ページしかありません。
しかし、通常の投稿が表示されているときにナビゲーションバーをハイライトさせるように設定することもできます。
下記のコードをfunctions.phpに追加記入します。
// wp_nav_menuにcurrentのクラス属性を追加します。
function net10man_current_nav($css, $item) {
if ($item->title == 'ブログ一覧') {
if (get_post_type() == 'post') {
$css[] = 'current-page-ancestor';
}
}
return $css;
}
「if (get_post_type() == ‘post’)」というところで投稿タイプ「投稿」という通常の投稿を設定します。これまでと同様、cssには「current-page-ancestor」という要素を指定しておく必要があります（この辺の解説を書籍でも少ししておいて欲しいものです）。
ヘッダー（アイキャッチ）画像を変更してみる
グローバルナビゲーションのハイライトと連動して、各カテゴリーのヘッダー画像も変更させてみましょう。先ほど定義したfunctions.phpのin_category_familyという関数を流用します。
下記のコードをfunctions.phpに追加記入します。
// カテゴリーイメージで使用するファイル名を出力します。
function net10man_category_image() {
global $post;
$cat_img = 'def';
if (is_page()) {
if (in_array($post->post_name, array('method'))) {
$cat_img = $post->post_name;
} else {
$anc = array_pop(get_post_ancestors($post));
if ($anc) {
$anc = get_page($anc);
if (in_array($anc->post_name, array('method'))) {
$cat_img = $anc->post_name;
}
}
}
}
if (function_exists('in_category_family') && in_category_family('10') ){
$cat_img = 'method';
}
$cat_img = 'img_cat_' . $cat_img . '.png';
return $cat_img;
}
こうすることで、テーマファイルにスラッグ名を付けた画像ファイルをアップロードするだけで、該当ページに割り当てられた画像を表示させることができるようになります。この場合、カテゴリーIDが10の親カテゴリーを持つ個別記事が表示された場合、「img_cat_method.png」と名付けられた画像ファイルがヘッダー画像に表示されるようになります。
header.phpに追加記入
画像をトップページ以外の上部に表示させるため、上記の関数を利用した形式で記述します。
下記のコードをheader.phpに追加記入します。
<?php
if (!is_front_page()) :
?>
<div class="original_header_image">
<img src="<?php bloginfo('template_url'); ?>/images/<?php echo net10man_category_image(); ?>">
</div><!-- .original_header_image end -->
<?php
endif;
?>
画像のアップロード
上記のheader.phpへの記述の場合、テーマファイル直下の「images」というフォルダに「img_cat_method.png」と名付けられた画像ファイルをアップロードすれば表示されるようになります。WordPressの管理画面、メディアの追加部分の画像ではありませんので、ご注意下さい。
ちなみに上記の場合ですと、「img_cat_def.png」という名前の画像をアップロードしておけば、それがデフォルトとなり、個別に割り当てられた画像がない場合に表示される代替画像にすることができます。
参考記事
本文中でもご紹介致しましたが、今回の記事を書くにあたり、また、当サイト管理人が制作サイトをカスタマイズするにあたり、下記のブログ様には大変お世話になりました。深く感謝申し上げます。
