はじめに
フリー素材の画像サイトからダウンロードしたものであるなら、引用元を表示させる必要はありません。
ですが、フリー素材ではない画像を引用する場合は引用元を表示させるルールになっているみたいです。
一応、引用元を表示させるクレジット表記（著作権情報）の機能を持ったワードプレスのテーマに、Simplicity（シンプリシティ）、Affinger4 Pro（アフィンガー4・プロ）、STORK（ストーク）、Cocoon(コクーン）などがありますが（ジタカセより）、私が現在使用しているTHE THOR(ザトール）にはクレジット表記の機能はついていません。
見ての通り、私はブログ初心者ですが、試行錯誤の末、アイキャッチ画像にキャプションを表示させることができましたので、その方法をご紹介します。
ワードプレスのテーマでTHE THOR(ザトール）を使用していない方でも以下の紹介する方法で表示させることができると思いますので、ぜひ参考にしてみてください。
方法
step1
まずはじめに、「親テーマ」のフォルダの中に入っている「single.php」をFTPソフト（私は「File Zilla」を使用しています。）で自分のパソコン（ローカル）に転送します。
転送するだけで、親テーマの中の「single.php」は削除しないようにしてください。
step2
テキストエディタ（私は「sublime text3」を使用しています）を用いて、「single.php」を開きます。
修正する前の「single.php」は必ずバックアップを取ることをお忘れにならないようにしてください。
step3
次に、どの場所にキャプションを表示させる命令を書き足すかを決定します。PHPについて知識のある方はstep３は飛ばして頂いても大丈夫です。
以下のPHPをコピーをしてテキストエディタで開いた、「single.php」に書き足すのですが、書き足す場所が重要になります。
<?php if(has_post_thumbnail()): /* アイキャッチ画像 */ ?>
<?php the_post_thumbnail( array(1000, 667) ); if(get_post(get_post_thumbnail_id())->post_excerpt) {
echo '<span class="img_caption">' . get_post(get_post_thumbnail_id())->post_excerpt . '</span>'; } ?>
<?php else: ?>
<img src="<?php echo get_template_directory_uri(); ?>/img/dummy.jpg" alt="イメージ画像" />
<?php endif; ?>ソースコードは以下のサイトより転載しています。
プログラムは上から下に処理されるため、アイキャッチ画像の下にソースコードを追記しなければいけません。
PHP初心者が追記する場所を特定するためには試行錯誤が必要になってきます。
以下のように「single.php」のはじめの方にソースコードを張り付けます。保存して、親テーマではなく子テーマのフォルダにアップロードします。
子テーマのフォルダは親テーマの内容を上書き保存されるような仕組みなっています。
子テーマにアップロードした後に、サイトの表示を確認します。
「single.php」のはじめの方にソースコードを張り付けたため、サイトの上の方にアイキャッチ画像が表示される形になっています。
次はこの位置に先ほどのソースコードを張り付けて、再び子テーマにアップロードして、サイトを表示しました。
アイキャッチ画像の上にテストのアイキャッチ画像が表示されるようになりました。
キャプションをアイキャッチ画像の下に表示させたいのでやり直します。
次にこの位置に先ほどのソースコードを張り付け、再び子テーマにアップロードして、サイトを表示しました。そうすると、無事アイキャッチ画像の下にテストのアイキャッチ画像を表示させることができました。
これでキャプションの挿入場所を特定することができました。
step4
最近のワードプレスのテーマのほとんどはブログ記事にアイキャッチ画像が表示されるようになっていると思います。
なので、打ち込みたいソースコードの内容はアイキャッチ画像を表示させる命令ではなく、アイキャッチ画像が出力される状態にキャプションの表示を追加することです。
そのソースコードは以下になります。
<?php has_post_thumbnail();
echo '<figcaption class="wp-caption-text">' . get_post( get_post_thumbnail_id() )->post_excerpt . '</figcaption>'; ?>「the_post_thumbnail」を「has_post_thumbnail」に変更したりしてソースコードを作ってみました。
このソースコードを先ほどの適切な場所に張り付ければ、キャプションが表示されます。
ご覧の通り、キャプションの表示には成功しましたが、空白ができました。
この部分を修正していきたいと思います。
step5
ワードプレスのテーマでザトール使用している方は以下のようにキャプションが表示されたはずです。
アイキャッチ画像の真下にキャプションを表示させたいのに空白が発生しました。
「margin-top:-60px；」のようにマイナス（－）表記を入れると空白が埋まりました。CSSの知識がないため、理由はわかりませんが「padding」ではマイナス（－）表記で使用することができませんでした。
CSSを使ったカスマイズ方法は以下の記事はご覧ください。
私は以下のソースコードを「style-user.css」に書き込んで、子テーマにアップロードしました。
ちなにみ、キャプションの文章はワードプレスの管理画面からメディアの中にある写真に付与する情報、キャプションに記述するとアイキャッチ画像の投稿写真でもキャプションが表示されるようになります。
最後に子テーマに編集したPHPファイルを入れていましたが、テーマを更新した際にバグが発生しました。
このような記事を書いておきながら、キャプションを写真の中に挿入してしまえば、このような難しいことをしなくて済みますので、そちらをオススメします。