連載第66回
2014年6月14日
WordPress(7)アイキャッチ画像の設定

 前回からの続き。3年前、当ブログ(flipflipflip.com)を組み立てていた時、最も悩んだのが「丸アイコン」の取扱いでした。ブログ記事を書く際、タイトルを記入して、本文を書いて、その本文内に画像を配置するのは全く問題無いのですが「タイトルの横に画像をレイアウトしたい!」そんな場合はどうするの?それが全然分かりませんでした。
 そこでアチコチを調べに調べて、ようやく「Get Custom Field Values」というプラグインで希望の操作が可能になりそうだということを知り導入、無事に丸アイコンをタイトルの左端に置くことが出来ました。使用方法はちょっと分かり難いところがあったのだけれど、ユーザー記事を参考に読んでいたら、いろいろ応用の効くことが分かり、写真ページや映画百本などの細かいエリアの配置&設定で大いに活用しています。

アイキャッチ画像!ナニソレ!?

 過去の成功体験に捕らわれて、引っ越し先でももちろんその「Get Custom Field Values」は活用予定なのですが、当たり前のようにそのプラグインの設定方法などすっかり忘れていて、またググってアチコチ調べていたら、「アイキャッチ画像の使用方法」なるものを紹介している記事に幾つか遭遇。WordPressには「アイキャッチ画像」をレイアウトする機能がデフォルトで存在するらしい…WordPress使い始めて3年、初めて知ったよ。

 そう言えばWordPress レッスンブック 3.x対応にはアイキャッチ画像を利用する場面が無かったので、その機能の存在に全く気付かなかったのだな。で、これを機に「丸アイコン」と勝手に呼んでいたのを、「アイキャッチ画像」と呼ぶことにします。通っぽいです。

 その機能を実現するには、functions.phpにその旨記述するだけ。まずCoda 2で白紙のfunctions.phpを作成し、そこに次のコードを記述。

アイキャッチ画像機能の追加(functions.phpへ追記)

<?php

add_theme_support('post-thumbnails');

?>

 作成したfunctions.phpを、MAMP内のWordPressフォルダにある自分のテーマである「FLFL」フォルダに保存。改めてダッシュボードにログインして新規投稿追加画面を見てみたら「アイキャッチ画像」がポツンと出現していました。

アイキャッチ画像のアップロード手順

 これからはRetina対応のため、アイキャッチ画像も高解像度のものを配置したい。そこで画像素材は200pxの正円を用意し、100pxに凝縮して表示させることにします。
 まず最初にダッシュボードの「設定>メディア」をクリックして、左図のように設定。ここではまだサムネイルは200pxのまま。年月ベースのフォルダ分けもしておくことにします。

 記事投稿画面の下部にある「アイキャッチ画像を設定」を押すと左のようなウィンドウが出現します。

 これは新鮮。最新バージョンのWordPressではこうなってるんですね。

アイキャッチ画像のURLのみを取得したい

 アップロードしたアイキャッチ画像をページに配置するには次のテンプレートタグを任意の場所に記入するのですが、ここで問題が…。

アイキャッチ画像のページへの配置

<?php the_post_thumbnail(array(100,100)); ?>

アイキャッチ画像(200pxの正円素材)を100px正円で表示させたいので、パラメータに「array(100,100)」を追記入。

 実は「the_post_thumbnail」を設置すると、デフォルトで<img>を含めた画像レイアウト用のタグ全体が生成されてしまうのです(↓)。それだと前回設定した<img id=”ICON” src=”ICON_s.png” alt=”ICON_s” >の、「id=”ICON”」を付加できないような…。

html生成後…。

<img width="100" height="100" src="http://localhost:8888/WordPress/wp-content/uploads/2014/05/VPS66_TEST.png" class="attachment-100x100 wp-post-image" alt="VPS66_TEST" />

 僕としてはここで、アップロードしたアイキャッチ画像の「個別URLだけ」を取得したい。それを前回のimgタグ内にある「src=” ”」に入れたいのです。そこでググってみると、こちらの記事がとても参考になりました。要点をまとめてみます。

 まずアイキャッチ画像のURLを取得するのはコチラ。

wp_get_attachment_url();

 そのパラメータとして、個別アイキャッチ画像のIDが必要だから、コチラを記入。

get_post_thumbnail_id()

 実際にページ内で取得したURLを出力する際には echo を使います。全部まとめるとコチラ。

echo wp_get_attachment_url( get_post_thumbnail_id() );

 これらをindex.php内のタイトルエリアに記述してみたものがコチラ(↓)になります。この後、アイキャッチ画像にその記事への個別パーマリンクを貼ることになります。

アイキャッチ画像の配置(7−1)

<section id="post">

<section id="title">
	<img id="ICON" src="<?php echo wp_get_attachment_url( get_post_thumbnail_id() ); ?> " >
	<h5>記事番号</h5>
	<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
	<h6><?php echo get_the_date(); ?>更新</h6>
</section>

<?php the_content(); ?>

</section>

4行目:アイキャッチ画像を配置しています。各パラメータはid=”ICON”のCSSの方で設定。

外部サイト参考記事
アイキャッチ画像のURLを取得して出力する方法(ブログ寄りカスタマイズ系【WPCOS】)

 現状でこのような感じになりました(↓)。ちなみに「Get Custom Field Values」は同じアイコンを使い回すのがとても楽ちんで重宝したんですが(この制作メモシリーズ用の丸アイコンとか)、アイキャッチ画像の場合はどうなんでしょう?投稿記事毎に必ずアイキャッチ画像をアップロードする必要があるとすると、無駄に容量を費やすことになりますね…。これはどう運営すれば良いか、しばらく保留とします。

外部サイト参考記事
サムネール画像において、画像の使い回しが効かない。(WordPress.org日本語フォーラム)

 ところで今回のアイキャッチ画像機能。WordPress 3.9.1ではスムーズに設置出来ましたが、当ブログで使用中のWordPress 3.1.4 でも使用できるのかどうか、functions.phpに追記してみたところ、問題なく投稿記事編集画面に出てきました。過去記事との整合性が取れるかどうか不安なので実際には試していないのですが、もしブログ開設当時にこれを知っていたら「Get Custom Field Values」を使わなかったかもしれません。しかし、今回のアイキャッチ画像機能で満足していたら写真ページや映画百本等で細かいエリア設定を実現する方法に気付けなかったかも知れず…つまりは何事も二度と過去に遡ることは出来無いということで、諸行の結果として今在る現在をポジティブに肯定したいと思います。つづく。

次回は記事番号の表示について研究予定なのですが、ちょっとハードルが高そうです。