JavaScriptを有効にしてください

【Wordpress】アイキャッチ画像の下にキャプションを表示する

 ·  ☕ 3 分で読めます
Photo by Skitterphoto from Pexels

Photo by Skitterphoto from Pexels

アイキャッチ

はい、上に出てるやつです

アイキャッチに使う画像はpixelsっていうサイトからフリーのものをとってきてるんだけど

使わせてもらう以上「photo by 〜」みたいな文字列を下につけときたいなと

wordpressの投稿作成のページにアイキャッチ画像を設定できるところがあって、そこでキャプションていう属性を指定できる。

んだけど、デフォルトではその文字列は使われる形跡がない。

リンクが切れたら代わりに出る文字列ということなんだろうか…

とにかく、このアイキャッチのキャプションで指定した文字列をアイキャッチ画像の下に表示させるためにはどうしたらいいかということ。

子テーマをつくる

この辺を変えるにはテンプレートをいじらないといけないので、使っているテーマの子テーマというものを作って、それを編集していく。

そうすることで、テーマの一部の変更を別テーマとして管理できる。

また、親テーマがアップデートされた際には、子テーマに自動的に反映される。らしい？

子テーマを作るにはサーバのファイルに手を加える必要があるため、sshなりftpなりでアクセスできること。

自分の場合は、前に書いた記事の通りGCPにサーバーが立ってるので、GCPのgcloudというSDK(コマンドラインから設定やサーバー操作を行えるツール)を使ってssh接続した。

やることとしては以下のとおり

子テーマのディレクトリを作る

(環境によって異なる)/wordpress/htdocs/wp-content/themes/(親テンプレート名)-child/というディレクトリを作る

style.cssをつくる

作った子テンプレのディレクトリにstyle.cssというファイルを作り下のように書き込む

(twentysixteenが親の場合)

 /*
  * Theme Name: twentysixteen-child
  * Description: twentysixteenの子テーマ
  * Template: twentysixteen
  * Version: 1.0.0
  * /

大事なのはTemplateのみ

これは親テンプレートのディレクトリ名でなければならない。

Theme Nameは管理画面に出てくる子テーマの名前

そのほかは適当でもいい

functions.phpをつくる

作った子テンプレのディレクトリにfunctions.phpというファイルを作り下のように書き込む

<?php
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
    wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css' );
    wp_enqueue_style('child-style', get_stylesheet_directory_uri() . '/style.css', array('parent_style' ));
}
?>

これで子テーマの作成は完了

テーマを編集

では作成した子テーマを編集していく

基本的に、編集や追記したい親テーマのファイルを子テーマの同じ位置にコピーし、編集する。

編集するファイル

※ twentysixteenの場合

  • content-single.php
  • functions.php
    今回は新たにcontent-single.phpを編集したいので

---/themes/twentysixteen/template_parts/content-single.php

をコピー

---/themes/twentysixteen-child/template_parts/content-single.php

を作る

functions.phpに自作関数を追記

// functions.php
// 以下のコードを追記
function get_thumbnail_with_caption($size=full){
    $thumb_id = get_post_thumbnail_id();
    $thumb_img = wp_get_attachment_image_src($thumb_id, $size);
    $thumb_src = $thumb_img[0];
    $thumb_alt = get_the_title();

    echo '<div style="padding:10px 0 30px;"><img src="'.$thumb_src.'" alt="'.$thumb_alt.'">';
    if($pt_caption = get_post(get_post_thumbnail_id())->post_excerpt){
        echo '<div class="eyechatch-caption-text" style="color:#555;font-size:.8em;padding:.2em;">'.$pt_caption.'</div>';
    }
    echo '</div>';
}

content-single.phpに追記

content-single.phpは記事単独ページのレイアウトを決めているファイル

ここで、アイキャッチ画像を出力する部分を、先程functions.phpに追記した自作関数で置き換える。

// content-signle.php
〜〜〜
<div class="entry-content">
    <?php
        //これがこのテーマにおけるもともとのアイキャッチ出力関数
        //twentysixteen_post_thumbnail();

        //自作関数
        get_thumbnail_with_caption();
    ?>
    〜〜〜
</div>
〜〜〜

作ったテーマを適用

これで作業は完了したので、wordpressの管理画面から作った子テーマを適用してみよう。

そして記事単体ページに行くと、アイキャッチ画像の下にキャプションが表示されるようになっているはず。

共有

関連記事