WordPress 記事内の任意の場所にアイキャッチ画像を表示する方法

July 21, 2014

記事の冒頭にアイキャッチを表示してくれるテーマは多くあります。
でも、アイキャッチの配置場所を記事ごとに変えたい場合はどうすればよいのだろう……

だいぶ調べた結果、ショートコードを使って、記事内に [eyecatch] と書くだけで、好きな場所にアイキャッチ画像を表示できるようになりました。

Image

こんな具合です。

いや普通に投稿の編集画面で表示させたい場所に「メディアを追加」すればいいじゃない。
……はい、それはあとから気付きました(・ε・) でもショートコードの方がスマートです、きっと!

アイキャッチ画像を表示するショートコード

以下の記述を functions.php の最後に追加するだけです。

add_shortcode('eyecatch','insert_eyecatch_into_content');

function insert_eyecatch_into_content( $atts ) {
	extract( shortcode_atts( array(
		'size' => 'large', // default size choose in 'thumbnail', 'medium', 'large', 'full'
		'align' => 'center' // default alignment choose in 'left', 'right', 'center', 'none'
		), $atts ) );
	global $post;
	if( !get_post_thumbnail_id( $post->ID ) ) return false; //no post thumbnail found

	$eyecatch = get_the_post_thumbnail( $post->ID, $size, 'class=align' . $align );
	return '<div class="eyecatch">' . $eyecatch . '</div>';
}

functions.php は、管理画面の[外観]-[テーマ編集]を開いて「テーマのための関数」をクリックすると編集できます。

使い方

[eyecatch]

何も指定しない場合は、さきほどのコード内で指定しているデフォルトのサイズと位置になります。

サイズや位置を調整したい場合の例は以下です。

[eyecatch size=medium align=left]

プチ解説

コードの最終行で、アイキャッチ画像を囲む div 要素を指定していますが、これは必須ではありません。
筆者のサイトではスタイルシートで div.eyecatch にマージンを指定して体裁を整えているためです。

参考サイト

ショートコードを使えば、他にも いろいろ便利なことができそうですね。

One thought on “WordPress 記事内の任意の場所にアイキャッチ画像を表示する方法

  1. Pingback: WordPressでのアイキャッチ画像

コメントを残す

メールアドレスが公開されることはありません。