【WordPress】【JIN】記事のアイキャッチ画像の下に文字を入れる方法

yukiblogxxx 2019-10-20-日

こんにちは😀広瀬ユキです。

今回は、記事のアイキャッチ画像の下に文字を入れる方法をご紹介します。

デフォルト（初期設定）では、記事のアイキャッチ画像の下に文字を入れることができませんが、single.phpを編集することで、文字を入れることが可能です。引用元や参照先、一言コメントを書きたいときに使えるカスタマイズです。

WordPress有料テーマ【JIN】を使っている方向けの記事です。
single.phpを編集します。コードを間違えるとテーマが真っ白になる場合があります。バックアップを取ってから自己責任で行ってください。

はじめに
single.phpにコードを追加する
記事のアイキャッチ画像の下に文字を入れる方法
編集後記

はじめに

アイキャッチ画像って何？

まず、アイキャッチ画像とは「記事の最上部に表示される画像のこと」です。

詳しくはコチラ↓

【Wordpress】【JIN】カテゴリーのアイキャッチ画像を設定する方法【Wordpress】有料テーマ【JIN】カテゴリーのアイキャッチ画像を設定する方法を書きました。アイキャッチ画像が表示されないときの対処法もご紹介します。...

このカスタマイズをする前に

今回のカスタマイズでは、テーマエディターの個別投稿（single.php）を編集します。その前に、親テーマから子テーマにファイルを追加することをオススメします。親テーマで編集を間違えてしまうと、Webサイトが真っ白になってしまう恐れがあるので、子テーマを編集しましょう。

親テーマから子テーマにファイルを追加する手順は、下記の記事を参考にしながら、個別投稿（single.php）を子テーマに追加して下さい↓

【WordPress】親テーマから子テーマにファイルを追加する方法【JIN】【Xserver】親テーマから子テーマにファイルを追加する方法について書きました。サーバーからWordPressにファイルをアップロードする方法としてもご覧いただけます。...

注意点

このカスタマイズは、single.phpを編集します。コードを間違えるとテーマが真っ白になる場合があります。バックアップを取ってから自己責任で行ってください。
また、親テーマにあるsingle.phpを直接編集しても良いですが、親テーマが更新された場合に、このカスタマイズがデフォルト（初期設定）に戻ってしまうので、子テーマを編集することをオススメします。
親テーマのsingle.phpが更新された場合は、新たに子テーマにインストールし、このカスタマイズを再度行ってください。

JINの更新情報はコチラ

WordPressテーマ「JIN」のアップデート情報

single.phpにコードを追加する

親テーマから子テーマにsingle.php（個別投稿）を追加できましたか？🙂

では、追加した子テーマのsingle.phpにコードを追加しましょう。
WordPressの編集画面から、「外観」→「テーマエディター」を開きます。
画面右側の「編集するテーマを選択」で「jin-child」を選択します。
※子テーマを使わない方は「JIN」を選択。非推奨
テーマファイルは「個別投稿（single.php）」を開きます。
「個別投稿（single.php）」の42行目（<div class=”cps-post-thumb” itemscope itemtype=”http://schema.org/ImageObject”>の後ろ）に下記のコードを追加します。分かりやすいように、改行してもOKです。
```

<?php if(has_post_thumbnail()){ echo '<div class="eyecatch-caption">'; the_post_thumbnail( 'large_size' );
if($pt_caption = get_post(get_post_thumbnail_id())->post_excerpt) { //キャプションがあれば出力
echo '<div class="eyecatch-caption-text" style="font-size:.8em; padding:.2em; text-align:center;" >'.$pt_caption.'</div>'; // text-align:centerは中央寄せ
}
echo '</div>';
}
?>

```
最後に、画面下部の「ファイルを更新」をクリックします。

<!–　–>　で囲ってある部分はメモ書きなので、削除してもOKです。
【メモ書きなしver.】

<?php if(has_post_thumbnail()){ echo '<div class="eyecatch-caption">'; the_post_thumbnail( 'large_size' );
if($pt_caption = get_post(get_post_thumbnail_id())->post_excerpt) {
echo '<div class="eyecatch-caption-text"style="font-size:.8em; padding:.2em; text-align:center;" >'.$pt_caption.'</div>';
}
echo '</div>';
}
?>