wordpress アイキャッチキャプション表示する方法

この記事のタイトルは先ほどまで私がググっていた検索キーワードです。

昨日から始めた、アイキャッチ画像を記事に載せるかどうか。
載せるなら、そのアイキャッチ画像の著作権表示(キャプション)をどうやって載せるか。
私が今使っているWordPressのテーマ「 Twenty Twelve 」では、どこを編集すればいいのか。

それらを調べていました。

最終的に参考にさせていただいたサイトが、今日のタイトルキーワードでググった中から見つけた下記の2つのサイトです。

WordPress アイキャッチ画像を使う上での注意点いろいろ（キャプション、RSS 関係） | Simple Living *
~~http://shirose.jp/2013/02/post-thumbnail-caption-rss/~~
＊2018年11月15日リンク切れ確認

アイキャッチ画像のサイズと位置のカスタマイズ
http://affiliate150.com/change-eye-catch-position

今までは、WordPressのプラグインで変更するということはやっていたのですが、今回は初めてWordPress内部のファイルを変更するということをしました。

変更するファイルはWordPressのダッシュボードでいうと
外観＞テーマの編集＞content.phpとstyle.cssです。

私は、テーマにTwenty Twelveを使っていますが、プラグイン One-Click Child Theme を使い、子テーマを作り、その子テーマの方に変更を加えました。

One-Click Child Theme – WordPress Plugins
https://ja.wordpress.org/plugins/one-click-child-theme/

content.phpの変更箇所は次の通りです。

			<?php if ( ! post_password_required() && ! is_attachment() ) :
				the_post_thumbnail();
			endif; ?>

この記載を次のように変更し、アイキャッチ画像に付いているキャプションを表示するようにします。

			<?php if ( ! post_password_required() && ! is_attachment() ) :
				the_post_thumbnail();
				echo '<div class="post-thumbnail-caption">' . get_post( get_post_thumbnail_id() )->post_excerpt . '</div>';
			endif; ?>

次に、このままだと記事のタイトルの上にアイキャッチ画像があるので、その位置を本文の前に変更します。

具体的には

		<?php else : ?>

			<?php if ( ! post_password_required() && ! is_attachment() ) :
				the_post_thumbnail();
				echo '<div class="post-thumbnail-caption">' . get_post( get_post_thumbnail_id() )->post_excerpt . '</div>';
			endif; ?>

		<div class="entry-content">

このように、

<div class="entry-content">

の前に先ほどの部分を移動しました。

これでアイキャッチ画像がタイトルの下、そして本文の上に表示されるようになり、キャプションもアイキャッチ画像の下に表示されるようになりました。
ただ、このままだとキャプションと本文の行の隙間がなくて窮屈です。

そこで、スタイルシート (style.css)に次の行を追加しました。

.entry-content{margin-top:30px;}

変更前の記事のイメージと変更後のイメージです。

私的には満足のいく結果が出ました。
また、この記事を書くにあたっては、ソースコードというWordPressの内部ファイルを表示する必要があったのですが、それをWordPressの記事に直接書いても、表示されないんですね。

そのために、またプラグインを入れました。
Crayon Syntax Highlighterというプラグインです。

Crayon Syntax Highlighter – WordPress Plugins
https://wordpress.org/plugins/crayon-syntax-highlighter/

このプラグインの設定はまだ初期設定のままですが、こちらもいろいろ調べて、他の記事を作成する際に活用したいと思います。

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル