JINカスタマイズ

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

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

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

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

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

はじめに

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

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

詳しくはコチラ↓

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

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

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

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

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

注意点

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

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

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

  1. では、追加した子テーマのsingle.phpにコードを追加しましょう。
  2. WordPressの編集画面から、「外観」→「テーマエディター」を開きます。
  3. 画面右側の「編集するテーマを選択」で「jin-child」を選択します。
    ※子テーマを使わない方は「JIN」を選択。非推奨
  4. テーマファイルは「個別投稿(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>';
    }
    ?>
    <!--アイキャッチ画像のキャプションの設定-->​

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

<!– –> で囲ってある部分はメモ書きなので、削除しても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>';
}
?>

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

single.php(個別投稿)に上記のコードを入力したら、記事のアイキャッチ画像の下にお好きな文字を入力してみましょう。

  1. WordPressの編集画面を開きます
  2. 「投稿」→「新規追加」を押し、投稿画面を開きます
  3. 「アイキャッチ画像を設定」を開きます
  4. アイキャッチ画像を選択し、画面右側の「キャプション」に表示したい文字を入力します
  5. 画面右下の「アイキャッチ画像を設定」を押します
  6. 記事を作成し、「公開」を押します

記事のアイキャッチ画像の下に文字を入れることができました‼

同じアイキャッチ画像を別のページでも使用する場合、同じキャプションが表示されます。

編集後記

親テーマから子テーマにファイルを追加する作業が若干面倒ですが、ファイルを追加してからカスタマイズすることをオススメします。自己責任でバックアップを取ってから行ってください。

【WordPress】【JIN】スマホのヘッダーの検索バーのアイコンの色を変えるCSSカスタマイズ【WordPress】有料テーマ【JIN】を使っている方向けに、スマホのヘッダーの検索バーのアイコンの色を変えるCSSカスタマイズをご紹介します。...

https://yuki-hirose.com/wordpress-jin-headsearch-icon/

【WordPress】【JIN】「Warning」エラーが表示されてしまった時の対処法【WordPress】有料テーマ【JIN】を使っている方向けに、「Warning」というエラーが表示されてしまった時の対処法について書きました。...

☆クリックで応援お願いします☆

PVアクセスランキング にほんブログ村

ブログランキング・にほんブログ村へ にほんブログ村 スイーツブログ コンビニスイーツへ にほんブログ村 ブログブログ ブログ初心者へ