WordPressのアイキャッチ画像(featured image)にキャプションを付ける

今日は久々にBlogを触る時間と体力と気力がそろったので全く更新が続くか無いこのサイトのテーマを更新することにしました(いつも見た目から入ります)。

そこでネックになったのがWordpressの標準機能であるアイキャッチ画像(featured image)のキャプションを今回使用するテーマで表示できないという問題です。プラグインを導入することで解決できたのでその方法をメモしておきます。

今回はまず新しくShort Newsというテーマを導入しました。こちらは普通にWordpressのテーマから検索して導入したテーマですので、詳しくは割愛します。

今回ネックになったのはサイトをちょっとかっこよく見せるヘッダーに使う画像のキャプション(画像のタイトル・コメントみたいな表示)です。

サイトで使う画像は昔から著作権フリー素材をよく使っています。このとき、自分もCreative Commonsライセンスなどで素材を提供していたことがあったので、できるだけ出典については明示したいと考えています。画像の出典を明示することがわざわざフリーでコンテンツを提供してくださっているクリエイターさんへの礼儀だと思いますし、またこれによって同じような素材を探している方にどこでそのソースが見つかるか示すヒントにもなると考えているからです。

さて、能書きが長くなりましたが、何をしたかったかと何をしたかを残しておきます。

WPのアイキャッチ画像機能とは

WPのアイキャッチ画像機能 はブログポストの冒頭に画像を表示してくれる機能です。恐らくこれはブログをやっている方には説明不要ですね。

アイキャッチ画像のキャプションの設定

恐らく多くの方にこちらの設定方法は説明不要かと思いますが、一応触れておきます。

アイキャッチ画像の設定はブログページの設定部分、カテゴリなどを選択する右側のパネルの下の方に表示されます。ここで画像を設定(アップロード)する際に右側にキャプション欄が表示されます。今回はここに設定した文字をページに表示したいと思っています。

今回の問題

例えば、(英語記事で恐縮ですが)Things you should know before Typhoon Hagibis reaches Tokyoという記事の場合、デフォルトでは上記のようにキャプションを設定したにもかかわらず下記の様に表示されてしまいました。

もしかするとテーマの設定等によっては普通に表示されるのではないかとも思いますが、自分の環境では上手く表示されませんでした。

画像が表示されない

一番上に出てきたプラグインを適用(失敗・・・)

昔であればこの段階でCSSなどをいじろうと思ったところですが(というかブランクが大きすぎてまず開いてしまいました。。。)、今はプラグインで大概の問題は迂回できますよね。

というわけでプラグインを「featured image caption」というキーワードで検索してみました。そこで一番人気がありそうなのがFeatured Image Captionというプラグインでしたのでこちらを入れてみました。

結果としては非常に設定画面でいろいろいじれて、非常に使いやすそうなプラグインではあったのですが、私の環境では何も表示されず・・・。今回は諦めました。

評価も高かったので恐らくテーマとの相性とかの問題と思いますので、良ければこちらも試してみてください。(上手くいった方、こちらのプラグインの名誉のためにも是非コメント欄に一言頂ければと思います)

別のプラグインを試す(こちらは成功)

仕方ないので仕切り直しで別のプラグインを試すことにしました。2つめに導入したのはFSM Custom Featured Image Captionというプラグインです。

https://wordpress.org/plugins/fsm-custom-featured-image-caption/

ちょっと更新が滞っていたり、導入数が先のプラグインの半分くらいだったりと何かと気にはなったのですが、結果としてこちらが僕のサイトでは上手く機能しました。

でもセンタリングは嫌・・・

プライグインを有効化した結果が下記になるのですが、デフォルトの設定ではキャプションが真ん中に表示されてしまうようで、個人的には本文と同化してしまってなんとなく嫌です。そこでさくっとCSSを触ることにしました。

以下はサイトの表示を壊す可能性があるので自己責任で御願いします。

CSSというデザインを設定するコードを触ります。以下から簡単に触ることが出来ます。

(すいません、自分は英語環境なので画像は英語です。。日本語では下記のはずです)
WPメニュー> 外観(Appearance) > テーマエディター(Theme Editor)

画像では「設定」を触っているようにも見えますがこちらは関係ありません、上の説明通り遷移してください

テーマエディターが開いたら何やらコードが書かれている部分を選択した状態で検索ショートカットを開きます。

  • Mac:リンゴキー と Fキー
  • Windows:Ctrlキー と Fキー

すると検索窓が下のように開きますのでwp-caption-textで検索します。

自分の場合はこの結果が3125行目に表示されましたが、その少し下にあるtext-alignと書かれている部分に注目します。これが文字を真ん中に表示しているコードです。

自分の場合はキャプションを右に寄せたかったので、「center」の部分を「right」に書き換えます。もし左に寄せたい方はこれを「left」に書き換えてください。細かい点ですがこの文字以外は触らないでください。設定の左側の半角スペースと、設定の右側の「;」も重要ですので消さないように注意です。

「right」に書き換えました

最後にページの下の方にある更新ボタンをクリックすれば設定完了です。

これで希望通り右下にキャプションが表示されました。

まとめ

というわけで以下、簡単なまとめになります。

Leave a Reply