連載第75回
2014年6月29日
WordPress(15)アイキャッチ画像のカテゴリー毎の使い回し

 前回は「別にアップデートする必要は無かったんじゃないか疑惑」の持ち上がっているOpenSSLの件で横道に逸れましたが、起動を元に戻して今回はWordPress関連の15回目「アイキャッチ画像の使い回し」について。
 使い回し…って意味が伝わらないかも?と思ったのだけれど、ちょっとググってみたら僕と同じような悩みを持ってる人がたくさん居ることが分かりました。どういう事か簡単に説明すると、当ブログで記事毎に配置している丸アイコン(アイキャッチ画像)、これを毎回用意するのがとても面倒くさいのです。つまり、面倒くさい!と思っている人がいっぱい居る。
 見た目にはバラエティに富んでいれば華やかで楽しい感じが演出できるけれど、ブログの記事に合った画像を毎回用意するのは大変な事。この「サーバー引っ越しメモ」なんて、そもそも内容自体が地味なだけに、特にアイキャッチ画像として引き立つようなものは皆無。そこで赤富士の丸アイコンを専用アイキャッチ画像として使い回しているワケです。

「Get Custom Field Values」を使わず実現可能か?

 当ブログでは、以前第66回でも紹介した「Get Custom Field Values」というプラグインを使ってアイキャッチ画像を記事タイトル横にレイアウトしていて、「サーバー引っ越しメモ」の場合、アイコンを指定する際に専用の画像ファイル名をカスタムフィールドに毎回入力しています。数回続けていればファイル名も覚えてしまうし、毎回異なる画像を用意する必要も無いので都合よく、便利でラクチン。
 WordPressのアイキャッチ画像機能でも、記事毎にアイキャッチ画像をメディアライブラリの中から指定してやれば、同様の事が可能ですが、引き続きアイキャッチ画像の使い回しでググっていたら、その代替機能の自動化を試みた記事がありました。

WordPress アイキャッチの登録がない場合は、未登録の画像を表示させる(HAM MEDIA MEMO)

 Get Custom Field Valuesプラグインでは「メインとなる素材が無い場合は、代わりの指定素材を使用する」機能があって、当ブログではアイキャッチ画像を指定しないと、代替の「no image」画像が表示されるという設定にしていたりします(↑)。これがデフォルトのアイキャッチ画像機能でも可能になるのなら応用したい。

カテゴリー毎に専用のアイキャッチ画像を使い回したい

 引っ越し先のブログ日記では、作業が全然進まなかった日でも「今日は全然ダメだった。」という一言メモのようなものを記事として投稿したいと考えています。つまり内容が全くない状態なので、個別に丸アイコンが捻出出来無いのですが、そんな時でも、曲毎(カテゴリー毎)にそれ専用のアイキャッチ画像があれば凄く助かる。パッと見でも、どの曲の記事なのか分かり易いメリットがある。もし記事専用の画像があるのなら、従来通りそれを載せれば記事単体として目立たせられます。そうだ、そうしよう。

 そこで、上で見つけた自動化の仕組みをもう少し拡張して、カテゴリー単位で画像を扱えないか考えてみることにしました。ブログ投稿時の流れとしてはこんな感じをイメージ(↓)。

ブログ投稿時の流れ

  • 新しい曲に取りかかる(新規カテゴリーの追加)
  • その曲の専用アイキャッチ画像を作成。アップロード。
  • 【自動化】新規投稿時、記事のカテゴリーIDを取得し、専用アイキャッチ画像を割り当てる。
  • 個別アイキャッチ画像を用意できるのであれば、それを表示させる。

記事のカテゴリーIDの取得

 順にアイデアの実現行程を追って行きます。上図の3番目の項目「新規投稿時、記事のカテゴリーIDを取得し、専用アイキャッチ画像を割り当てる」の中の、まずは記事のカテゴリーIDの取得から。

 これは以前、第67回でカテゴリー内での記事番号取得を試みた件で簡単に応用できるかな、と考えたのですが…甘かった。やはりスクリプトを記述することの基本を学んでいないことが根本的にダメ。何せ参考書を1冊も読んだことないし、手元にも全く無い。
 そこでGoogle先生に頼っていろいろ参考になりそうなものを探って、次のフォーラムでのやりとりを見つけました。

外部サイト参考記事
カテゴリーごとにヘッダーの画像を変えたい(WordPress.org 日本語)

 回答者の丁寧なコメントを何度も繰り返し読んで、試行錯誤を続け、ようやく次のことが分かりました。?php〜って、htmlの中にいきなり記述してOKなんですね。そんな初歩的な事を今更学んでいます。でも「解る」って幾つになっても楽しい。

<?php
$cat = get_the_category();  ←index.phpのどこかにコレ等を追記。
$cat_id = $cat[0];        ただし下のコードより上部に記述。
?>

<?php
echo $cat_id->cat_ID;   ←カテゴリーIDを表示させたい任意の場所に追記。
?>

記事毎のカテゴリーID表示:index.php(15−1)

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


<section id="title">
	<a href="<?php the_permalink(); ?>"><img id="ICON" src="<?php echo /* wp_get_attachment_url( get_post_thumbnail_id() ) */post_thumbnail_set (); ?> "></a>
	<h5><?php the_category(','); ?> ― 第<?php echo ps_number_cat( $post->post_type ); ?>回</h5>
	<h2><font color="#00aced"><?php echo $cat_id->cat_ID; ?></font> <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
	<h6><?php echo get_the_date(); ?> 更新</h6>
</section>

 実際の動作を確認するとこうなりました。各記事タイトルの左横に、ブルーでカテゴリーID番号(動作テスト=1、Night Head=2)が表示されています。これで「$cat_id->cat_ID;」を変数として扱う方法が解りました。ちょっと前進。

カテゴリー専用画像の取扱い

 次に上で紹介したHAM MEDIA MEMOさんのメモ「WordPress アイキャッチの登録がない場合は、未登録の画像を表示させる」の記事をじっくり読みます。

 そこで行われているのは、デフォルトのアイキャッチ画像機能を使った画像が無い場合は、指定の箇所の指定の画像を使う、という動作。僕の引っ越し日記の場合、ちょっとばかり応用の必要があって、使い回し用のアイキャッチ画像は一つではなく、カテゴリーの数だけ、しかもそれ専用に紐付けて用意しなければならない。

 カテゴリーIDの取得は出来るようにしたから、その番号を使ってカテゴリー専用アイキャッチ画像と関連付けるには、例えばこんな感じにすればOKなんじゃないか。ちなみに基本的にはpng画像を使うことにします。

 ICON_ID_1.png  ←カテゴリーIDが1番の記事専用のアイキャッチ画像。

 ICON_ID_X.png  ←Xに取得したID番号を代入して汎用します。

 そこでまず仮のアイキャッチ画像を作成してアップロードするのですが、制作日記ではアップロードしたメディアは年月毎にフォルダを分けて保存する設定にします(管理が容易いので)。しかしそれだと今度はURLを指定するのが複雑になってくるので、カテゴリー専用アイキャッチ画像を保存する為の専用フォルダを作って、そこに直接SFTPアップロードするようにします。例えば「img」という専用フォルダを作った場合はこんな感じ。

http://localhost:8888/WordPress/wp-content/uploads/img/ここにアップロード

カテゴリー専用アイキャッチ画像のURLを指定する

 さて、ここでも僕は苦労しました。「記事個別のアイキャッチ画像が無い場合、専用のURLからカテゴリー専用アイキャッチ画像を呼ぶ」のは分かるのですが、そのURLとファイル名の指定の仕方(書式)が全然分からない。頭の中では、次のようにすればOKということは分かります。で、青色の「X」を上で取得できるようになったカテゴリーIDの数値で置き換えたい時の記述ってどうすればいいの?

http://localhost:8888/WordPress/wp-content/uploads/img/ICON_ID_X.png

 そこでまたいろいろ記事を探しました。

外部サイト参考記事
文字列の連結(PHPbook)
4-9 文字列演算子(TRY PHP!)
文字列(PHPマニュアル)

 実は記事をググるところから始めて結構な時間、アーダコーダと試行錯誤したのですが、結果から書いてしまうとこんなにあっけない。下記の書式ルールで、必要なところに応用します。.ドットなのか…。また引用符の「’」と「”」で働きが微妙に違ってくるというのも新鮮でした。

'http://localhost:8888/WordPress/wp-content/uploads/img/ICON_ID_'.x.'.png'
「.」ドットで挟み込むと、変数を「文字」として連結することが出来るのだ ↑

 実際には、上で分かったカテゴリーIDの変数を使い、下記のような記述となります。

php&html

'http://localhost:8888/WordPress/wp-content/uploads/img/ICON_ID_'.$cat_id->cat_ID.'.png'

functions.phpにて条件分岐関数を追加

 かなり前進しました。再び参考記事を読んで、次は条件分岐の関数を自分専用にカスタマイズします。まず参考記事作者さんのオリジナルコードは下記のようになっていますので、これをジーーーーーッと見つめる。

 要点としてはまず、has_post_thumbnail() が、アイキャッチ画像の有無の取得。if~else で条件分岐。echo は文字として出力、を意味します。

参考記事のオリジナル・サンプルコード:functions.php(15−2)

<?php

function post_thumbnail_set () {
  if( has_post_thumbnail() ) {
    echo '<p class="thumbnail-wrap">'; the_post_thumbnail(); echo '</p>'; echo "n";
  } else {
    echo '<p class="thumbnail-wrap"><img src="/content/uploads/no-post-thumbnail.png" alt="No Post Thumbnail" /></p>'; echo "n";
  }
}

?>

3行目:関数の宣言。
4行目:has_post_thumbnail() アイキャッチ画像の有無の判定。

 では上のサンプルを元に、順を追ってカスタマイズしていきます。

設定手順

  • 宣言
     まず、自分で分かり易いように post_icon とします。
  • アイキャッチ画像が有る場合
     普通に記事個別アイキャッチ画像が用意されている場合はそのまま出力。これまで採用してきた第66回にて紹介 echo wp_get_attachment_url( get_post_thumbnail_id() ); を記述します。
  • アイキャッチ画像が無い場合
     上で検討した、カテゴリー専用アイキャッチ画像を指定します。記述は次のようになります。
    echo ‘http://localhost:8888/WordPress/wp-content/uploads/img/sarch_’.$cat_id->cat_ID.’.png’
  • 変数も関数の中(アイキャッチ画像が無い場合の方)に含める
     さらに、上ではindex.phpの中に直接記述していた次のスクリプトですが、index.phpの中身がゴチャゴチャしていくのは避けたいので、関数の方に含めることにします。
    $cat = get_the_category(); $cat_id = $cat[0];

 以上を全てまとめてしまったのがコチラ(↓)になります。

条件分岐カスタマイズ後:functions.php(15−4)

<?php

function post_icon () {
  if( has_post_thumbnail() ) {
    echo wp_get_attachment_url( get_post_thumbnail_id() );
  } else {
	  $cat = get_the_category();
	  $cat_id = $cat[0];
    echo 'http://localhost:8888/WordPress/wp-content/uploads/img/ICON_ID_'.$cat_id->cat_ID.'.png';
  }
}

?>

3行目:関数の宣言。
5行目:アイキャッチ画像が有る場合。
7〜9行目:アイキャッチ画像が無い場合は、カテゴリー専用アイキャッチ画像を表示。

外部サイト参考記事
関数の定義と呼び出し(PHPBook)

動作確認

 それでは実際の動作確認ということで、カテゴリーID=1番の「動作テスト」には虫眼鏡のアイコン。カテゴリーID=2番の「Night Head」にはtwitterのアイコンを用意し、それぞれICON_ID_1.png、ICON_ID_2.pngとして「img」フォルダにアップ。

 そしてテストとして、これまで投稿した記事から「番外編」以外のアイキャッチ画像を削除してみました。すると無事、自動的に丸アイコンが置き換わり、カテゴリー毎の専用画像になっているではないか、おお、感動!

 以下、ちゃんと整えた記事タイトルエリア部のhtmlになります。

記事タイトルエリア部:index.php抜粋(15−5)

<section id="title">
	<a href="<?php the_permalink(); ?>"><img id="ICON" src="<?php echo post_icon (); ?> "></a>
	<h5><?php the_category(','); ?> ― 第<?php echo ps_number_cat( $post->post_type ); ?>回</h5>
	<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
	<h6><?php echo get_the_date(); ?> 更新</h6>
</section>

2行目:関数定義した post_icon (); echo してアイキャッチ画像を読み込みます。

ひとまずの下準備完了

 長かった。これでほぼ、引っ越しの下準備は整いました。いくつか課題が残っていますが、それらは実際にサイト公開してから少しずつ修正していくとします。何せ、まだサーバーで実際に動くかどうかの検証が残っているのです。これまでのローカル作業を、サーバーで再び構築するのが…それはそれでまた下準備が色々とあって、とても面倒です。つづく。

 <nav>エリアの項目には何が必要か。
 今度は是非、検索フォームを導入したい。
 タグも導入したい。
 アイキャッチ画像の使い回しについて再考したい。
 <footer>エリアの項目には何が必要か。