コピペで簡単！アイキャッチ画像を表示するショートコード【ワードプレス】
ワードプレスにはデフォルトのgalleryというショートコードがあり、アイキャッチ画像の表示ができない事はありません。ですが、元々メディアファイルをギャラリー展示するショートコードなので、単純にアイキャッチ画像を表示したいケースには不向きです。リンク設定しても画像ファイルや添付ファイルページにリンクしちゃいますしね。
という事で、今回はシンプルにアイキャッチ画像を表示するショートコードや、他の記事へのリンク付きアイキャッチ画像を表示するショートコードを作成してみます。
～ 目次 ～
シンプルなアイキャッチ画像を表示するショートコード
まずはシンプルなコードです。ショートコードを記述した箇所に、そのページのアイキャッチ画像が表示されます。
functions.phpに記述するコード
記述場所はファイルの最後で良いでしょう。しかし最終行に、?> と記述された行がある場合は、これを消してはいけません。この行の前に貼り付けます。
|
1 2 3 4 |
function show_post_thumbnail(){ return get_the_post_thumbnail(); } add_shortcode('ec','show_post_thumbnail'); |
使い方
記事中のアイキャッチを表示したい場所に、以下のように書きます。
|
1 |
[ec] |
実際に表示した例
シンプルに、このページのアイキャッチ画像が表示されています。
リンク付きアイキャッチ画像を表示するショートコード
他のページのアイキャッチ画像を表示したい場合は、リンクを付けないと意味が無い場合もありますね。
上のシンプルなショートコードに、投稿IDを指定する機能とリンクを付ける機能をプラスしたコードです。
functions.phpに記述するコード
こちらも記述場所はファイルの最後で良いでしょう。しかし最終行に、?> と記述された行がある場合は、これを消してはいけません。この行の前に貼り付けます。
|
1 2 3 4 5 6 7 8 |
function show_post_thumbnail_with_link($attr){ if(!has_post_thumbnail($attr[0])){ return; }else{ return '<a href="'.get_permalink($attr[0]).'" title="'.the_title_attribute(array('post'=>$attr[0],'echo'=>false)).'">'.get_the_post_thumbnail($attr[0]).'</a>'; } } add_shortcode('ec2','show_post_thumbnail_with_link'); |
使い方
ショートコード名の「ec2」の後に、半角スペースで区切って投稿IDを記述します。IDを記述しなければ、現在のページのアイキャッチ画像となります。
|
1 |
[ec2 3197] |
実際に表示した例
このブログの投稿ID3197のページのアイキャッチ画像が、その記事ページへのリンク付きで表示されています。
【おまけ】サイズ変更機能付きショートコード
コードのカスタマイズができる方なら、上までのコードをいじってお好みの形に変更できると思います。これは「PHP？CSS？そんなん知らん！」という方向けの、おまけコードです。
上でご紹介したリンク付きアイキャッチ画像を表示するショートコードに、「見た目上の画像の表示サイズ」と「使用する元画像サイズ」の変更機能を付けたショートコードです。
functions.phpに記述するコード
こちらも記述場所はファイルの最後でOKです。最終行に、?> と記述された行がある場合は、この行の前に貼り付けます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
function show_custom_thumbnail_with_link($atts){ global $post; $atts=shortcode_atts(array('id'=>$post->ID,'size'=>'full','w'=>''),$atts,'add_thumbnail'); if(!has_post_thumbnail($atts['id'])){ return; }else{ $addAttr=array('class'=>'ec-thumbnail'); if($atts['w']){ $addAttr['style']='width:'.$atts['w'].';height:auto;'; } return '<a class="ec-link" href="'.get_permalink($atts['id']).'" title="'.the_title_attribute(array('post'=>$atts['id'],'echo'=>false)).'">'.get_the_post_thumbnail($atts['id'],$atts['size'],$addAttr).'</a>'; } } add_shortcode('ec3','show_custom_thumbnail_with_link'); |
引数なしで使用
あまり用途は無いかもしれませんが、記述した投稿ページのアイキャッチ画像（リンク付き）を表示します。
|
1 |
[ec3] |
表示例
id（投稿ID）
投稿ID3118の記事のアイキャッチ画像（リンク付き）を表示する場合は、以下のように書きます。
|
1 |
[ec3 id=3118] |
size（使用する元画像サイズ）
使用する元画像のサイズを指定します。ワードプレスのデフォルトの画像サイズキーワード（thumbnail・medium・large・full）と、カスタマイズしている場合は追加した画像サイズのキーワードが使用できます。配列を使ったピクセル指定は使用できません。
指定なしの場合はアップロードしたアイキャッチ画像の原寸（full）です。
|
1 |
[ec3 id=3118 size='medium'] |
上のショートコードと同じ投稿IDを指定していますが、sizeをデフォルトのfullからmediumに変更しています。使用する元画像のサイズが小さくなってしまったため、PCなどの大きな画面でご覧の方なら、画像が粗くなってしまっているのがわかると思います。
w（表示サイズ）
実際に表示する際の「幅」を、指定できます。CSSで使用できる、ピクセル指定・表示エリアに対するパーセント指定などが使用できます。元画像の縦横比を保ちますので、高さは設定した幅に合わせて変更されます。
デフォルトの指定はありません。この場合、使用する元画像サイズ（sizeで指定可）に、テーマのCSSなどが適用されたサイズで表示されます。当ブログでは100%幅で表示されますが、これはサイトによって異なります。こういったテーマ独自のCSS指定を上書きしてサイズを指定します。
w=’80%’と指定
|
1 |
[ec3 id=3118 size='medium' w='80%'] |
80%の例です。閲覧するデバイスによって大きさが変わります。基本的に記事コンテンツエリア（親要素）の80%の幅になり、高さはそれに合わせて変化します。
w=’180px’と指定
|
1 |
[ec3 id=3118 size='medium' w='180px'] |
さらに180pxで指定した例。ピクセルで指定した場合、どのようなデバイスで見ても固定の幅となります。元画像は上と同じくmediumサイズを使用していますが、表示サイズが小さくなったので粗くならなくなりました。
その他の細かいCSS指定をしたい場合
”w”パラメータを使用して、表示サイズを変更すると、CSSがインラインで書き込まれます。これが嫌な方や、もっと細かい指定をする場合は、デフォルトで付けてあるクラスを使用して下さい。
リンクのaタグに「ec-link」、アイキャッチ画像のimgタグに「ec-thumbnail」とクラスが付けてあります。
最後に
書き終わってみると、”おまけ”と思って書き出したコードが、メインコンテンツ並みのボリュームになってしまいました…。
以上、アイキャッチ画像を表示するショートコードでした。
[…] コピペで簡単！アイキャッチ画像を表示するショートコード【ワードプレス】 […]