WordPress アイキャッチ画像にキャプション(説明)を表示する方法

  • -

    シェア
  • ---

    LINEで送る
  • -

    はてなブックマーク
    ブックマーク
  • -

    pocket
  • -

    rss
他言語サイト
翻訳はみつかりませんでした
wordpress image
イラストACの画像をもとに加工しています。

WordPressは、デフォルトではアイキャッチ画像のキャプションを表示する機能がありません。今回は、たった3行追加してキャプションを表示する方法を解説します。

便利なプラグインもありますが、これぐらいでプラグインを使うのはサイトのパフォーマンス上おすすめしません。

大丈夫です。とてもかんたんです。プログラミングが苦手な人でも大丈夫です。

アイキャッチ画像に著作権のあるものを使いたい時があります。そのとき、クレジット表記をすれば無料で使える場合もあるでしょう。

このように、アイキャッチ画像にキャプションを付けたい時があります。その方法を、順を追って説明します。

著作権者にリンクを貼ることもできます。

キャプションの作成

キャプションは管理画面から記入できます。メニューの『メディア』-> 『ライブラリ』から、アイキャッチ画像に使っている画像をクリックして、画像の詳細設定画面を開きます。

image caption configure

 

キャプションという項目があるので、内容を入力してください。aタグを使ったリンクなど、HTML文にも対応しています。

キャプションの出力

次に、さっき入力した内容を投稿ページのアイキャッチ画像の下に表示します。テンプレートファイルを修正します。

まずは、テーマのルートディレクトリにあるsingle.phpに、次のようなコードがあることを確認してください。

single.php
if ( have_posts() ) :
    while ( have_posts() ) :
    the_post();
    global $post;
.
.
.
    the_post_thumbnail( 'large' );

the_post_thumbnail()がアイキャッチ画像を出力しているところです。これが書かれている場合は、single.phpを次のように変更します。

single.php
<?php
the_post_thumbnail( 'large' );
if( get_post( get_post_thumbnail_id() )->post_excerpt ) {
    echo '<div class="image-caption">' . get_post( get_post_thumbnail_id() )->post_excerpt . '</div>';
}
?>

the_post_shumbnail()の直後に3行追加しました。get_post()->post_excerptに、画像のキャプションの内容が入っていてそれを出力しています。

(キャプションが未入力の場合は、ifの中に入らないので出力されません。)

phpファイルを変更する場合は、バックアップを作ってから作業してください。変更にミスがあると真っ白なページが表示されてしまいます。

また、管理画面で.phpファイルを編集する方法がありますが、ぼくはこの方法は使ってはいけないと考えています。

セキュリティ上問題があり、管理画面に不正ログインされてしまうと、ページのほとんどを、かんたんに改ざんされてしまうからです。

sftpを使って、サーバーにアップロードする方法を推奨します。

CSS追加

表示される文字のデザインを変更します。

CSS
.image-caption {
    font-size: .8em;
    text-align: left;
    color: #ccc;
}

キャプションの文字列ははっきりと表示しなくてもよいので、グレーに変更しました。そして、画像の左下に表示されるようにしています。

CSSはむずかしいことはありません。自分のお好みで変更してください。

ソースコード解説

ここからは、追加した3行のコードと、それにかかわる部分の解説です。ちょっと話が長めになるかもしれませんが、お付き合いいただければと思います。

if ( have_posts() ) : ... endif

投稿ページのクエリ結果があるかどうかを見ています。投稿ページのクエリの結果とは、データベースから取得した投稿ページの情報を持っているか? ということです。

専門的なことを言うと、$wp_queryというグローバル変数に入っています。

single.phpは、投稿ページそのものなので、そのページの内容が入っています。archive.phpなどのアーカイブページなどは、条件に合った記事一覧を表示するので、投稿情報が複数入っています。

have_posts()は、1件でも投稿の内容が入っていればtrue、入っていなければfalseを返します。

if ( have_posts() ) : ... endifは、投稿情報が入っていたらその中の投稿内容を表示する処理を行います。single.phpではtrueを返すので、必ずこの中の処理を行います。

(データベースが壊れるなど、重大なエラーが発生しない限りは)

while ( have_posts() ) : ... endwhile

投稿の件数分、中の処理を実行します。single.phpなら1件なので1回、archive.phpなどの記事一覧を表示する場合はその記事数分処理を行います。

the_post();

the_post()は、while ( have_posts() )の中の処理の一番最初にあることが多いでしょう。これは、いまどの投稿の処理をするのかを決めています。

正確には、すぐ下にあるglobal $post;に、処理対象の投稿情報を入れて、$postの中身を見れば投情報が見れます。

single.phpのように、while ( have_posts() )で1回しか処理しない場合は、意味が無いように思われますが、複数ある場合は、投稿数分繰り返されるので、the_post()によって対象の投稿情報が切り替わります。

get_post_thumbnail_id()

処理対象の投稿のアイキャッチ画像のIDを取得します。while ( have_posts() )の中でしか使えません。

get_post()

()の中で指定したIDに該当する投稿のすべての情報を取得します。指定するIDは投稿ID(post_id)です。

???と思った人もいると思います。キャプション表示で指定したIDは投稿IDではなく、画像IDです。そして、get_post()で取得した情報は投稿情報ではなく画像情報です。

これはどういうことなのでしょうか?

じつは、WordPressのデータベースでは、投稿情報と画像情報は、同じ種類(テーブル)の情報として登録されています。画像情報は、データベース上は1つの投稿ページの情報として管理されています。

だから、画像IDに合う投稿ページの情報を取得すると、画像情報が取得できます。これを使って画像のキャプションの情報を取得しています。

固定ページの情報もデータベース上は同じ種類の情報として登録されています。もちろん、固定ページのアイキャッチ画像の情報も同じです。

テーマによりますが、page.phpの中身を見ると、if ( have_posts() )などのコードが見つかるはずです。

have_posts(), the_post()を使っていないときは?

while ( have_posts() )を使っていないところで処理を行いこともあるでしょう。その場合は、get_post_thumbnail_id()で投稿IDを指定するとできます。

sample
<?php
$post_id = 3;
echo get_the_post_thumbnail( $post_id, 'large' );
if( get_post( get_post_thumbnail_id( $post_id ) )->post_excerpt ) {
    echo '<div class="image-caption">' . get_post( get_post_thumbnail_id( $post_id ) )->post_excerpt . '</div>';
}
?>

the_post_thumbnail()は使えないので、get_the_post_shumbnail()で投稿IDを指定してアイキャッチ画像を出力しています。

get_post_thumbnail_id()でIDを指定しない場合は、while ( have_posts() )の中で、現在の対象の投稿IDを指定したことになります。省略形ですね?

 

WordPressでおすすめの本
post-cta-image

たくさんあるなかで、WordPressの基本が学べる、目的別に学べる本を5冊選びました。

  • WordPressの基本
  • Webサイト作成から運用まで全体的に学ぶ
  • ブログサイトの運営からサイトの収益化を学ぶ
  • サイト作成・運営 + 集客の方法を学ぶ
  • WordPressからPHPプログラミングを学ぶ

の5つです。

この内容をモノにすれば、ほかの本は必要ありません。あとは自分の力で、書籍を使わずに、インターネット上にある情報だけで学んでいけるでしょう。


WordPressの厳選本5選

SNSでも記事を配信しています。
コメントを残す

*

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

この記事を気に入ったらぜひシェアも!!