記事の冒頭にアイキャッチを表示してくれるテーマは多くあります。
でも、アイキャッチの配置場所を記事ごとに変えたい場合はどうすればよいのだろう……
だいぶ調べた結果、ショートコードを使って、記事内に [eyecatch] と書くだけで、好きな場所にアイキャッチ画像を表示できるようになりました。
こんな具合です。
いや普通に投稿の編集画面で表示させたい場所に「メディアを追加」すればいいじゃない。
……はい、それはあとから気付きました(・ε・) でもショートコードの方がスマートです、きっと!
アイキャッチ画像を表示するショートコード
以下の記述を 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 にマージンを指定して体裁を整えているためです。
参考サイト
- ショートコード API – WordPress Codex 日本語版
- テンプレートタグ/the post thumbnail – WordPress Codex 日本語版
- Shortcode API « WordPress Codex
- Function Reference/get the post thumbnail « WordPress Codex
- Insert the Featured Image into the Post Content with Shortcode | TransformationPowerTools | tools for transformation
ショートコードを使えば、他にも いろいろ便利なことができそうですね。
Pingback: WordPressでのアイキャッチ画像