コピペで簡単!アイキャッチ画像を表示するショートコード【ワードプレス】

コピペで簡単!アイキャッチ画像を表示するショートコード【ワードプレス】
2018年8月22日2019年1月23日

ワードプレスにはデフォルトのgalleryというショートコードがあり、アイキャッチ画像の表示ができない事はありません。ですが、元々メディアファイルをギャラリー展示するショートコードなので、単純にアイキャッチ画像を表示したいケースには不向きです。リンク設定しても画像ファイルや添付ファイルページにリンクしちゃいますしね。

という事で、今回はシンプルにアイキャッチ画像を表示するショートコードや、他の記事へのリンク付きアイキャッチ画像を表示するショートコードを作成してみます。

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

まずはシンプルなコードです。ショートコードを記述した箇所に、そのページのアイキャッチ画像が表示されます。

functions.phpに記述するコード

記述場所はファイルの最後で良いでしょう。しかし最終行に、?> と記述された行がある場合は、これを消してはいけません。この行の前に貼り付けます。

使い方

記事中のアイキャッチを表示したい場所に、以下のように書きます。

実際に表示した例

シンプルに、このページのアイキャッチ画像が表示されています。

コピペで簡単!アイキャッチ画像を表示するショートコード【ワードプレス】

リンク付きアイキャッチ画像を表示するショートコード

他のページのアイキャッチ画像を表示したい場合は、リンクを付けないと意味が無い場合もありますね。

上のシンプルなショートコードに、投稿IDを指定する機能とリンクを付ける機能をプラスしたコードです。

functions.phpに記述するコード

こちらも記述場所はファイルの最後で良いでしょう。しかし最終行に、?> と記述された行がある場合は、これを消してはいけません。この行の前に貼り付けます。

使い方

ショートコード名の「ec2」の後に、半角スペースで区切って投稿IDを記述します。IDを記述しなければ、現在のページのアイキャッチ画像となります。

実際に表示した例

このブログの投稿ID3197のページのアイキャッチ画像が、その記事ページへのリンク付きで表示されています。

the_title_attributeの使い方と引数を入れたら動かない時のメモ【ワードプレス】

【おまけ】サイズ変更機能付きショートコード

コードのカスタマイズができる方なら、上までのコードをいじってお好みの形に変更できると思います。これは「PHP?CSS?そんなん知らん!」という方向けの、おまけコードです。

上でご紹介したリンク付きアイキャッチ画像を表示するショートコードに、「見た目上の画像の表示サイズ」と「使用する元画像サイズ」の変更機能を付けたショートコードです。

functions.phpに記述するコード

こちらも記述場所はファイルの最後でOKです。最終行に、?> と記述された行がある場合は、この行の前に貼り付けます。

引数なしで使用

あまり用途は無いかもしれませんが、記述した投稿ページのアイキャッチ画像(リンク付き)を表示します。

表示例

コピペで簡単!アイキャッチ画像を表示するショートコード【ワードプレス】

id(投稿ID)

投稿ID3118の記事のアイキャッチ画像(リンク付き)を表示する場合は、以下のように書きます。

ワードプレスの記事前後に自動でグーグルアドセンス広告ユニットを挿入する方法

size(使用する元画像サイズ)

使用する元画像のサイズを指定します。ワードプレスのデフォルトの画像サイズキーワード(thumbnail・medium・large・full)と、カスタマイズしている場合は追加した画像サイズのキーワードが使用できます。配列を使ったピクセル指定は使用できません。

指定なしの場合はアップロードしたアイキャッチ画像の原寸(full)です。

上のショートコードと同じ投稿IDを指定していますが、sizeをデフォルトのfullからmediumに変更しています。使用する元画像のサイズが小さくなってしまったため、PCなどの大きな画面でご覧の方なら、画像が粗くなってしまっているのがわかると思います。

ワードプレスの記事前後に自動でグーグルアドセンス広告ユニットを挿入する方法

w(表示サイズ)

実際に表示する際の「幅」を、指定できます。CSSで使用できる、ピクセル指定・表示エリアに対するパーセント指定などが使用できます。元画像の縦横比を保ちますので、高さは設定した幅に合わせて変更されます。

デフォルトの指定はありません。この場合、使用する元画像サイズ(sizeで指定可)に、テーマのCSSなどが適用されたサイズで表示されます。当ブログでは100%幅で表示されますが、これはサイトによって異なります。こういったテーマ独自のCSS指定を上書きしてサイズを指定します。

w=’80%’と指定

80%の例です。閲覧するデバイスによって大きさが変わります。基本的に記事コンテンツエリア(親要素)の80%の幅になり、高さはそれに合わせて変化します。

ワードプレスの記事前後に自動でグーグルアドセンス広告ユニットを挿入する方法

w=’180px’と指定

さらに180pxで指定した例。ピクセルで指定した場合、どのようなデバイスで見ても固定の幅となります。元画像は上と同じくmediumサイズを使用していますが、表示サイズが小さくなったので粗くならなくなりました。

ワードプレスの記事前後に自動でグーグルアドセンス広告ユニットを挿入する方法

その他の細かいCSS指定をしたい場合

”w”パラメータを使用して、表示サイズを変更すると、CSSがインラインで書き込まれます。これが嫌な方や、もっと細かい指定をする場合は、デフォルトで付けてあるクラスを使用して下さい。

リンクのaタグに「ec-link」、アイキャッチ画像のimgタグに「ec-thumbnail」とクラスが付けてあります。

最後に

書き終わってみると、”おまけ”と思って書き出したコードが、メインコンテンツ並みのボリュームになってしまいました…。

以上、アイキャッチ画像を表示するショートコードでした。

One Reply to “コピペで簡単!アイキャッチ画像を表示するショートコード【ワードプレス】”

Comments are closed for this post.

関連のある記事

ショートコードで記事タイトルの表示位置を移動する【ワードプレス】

ショートコードで記事タイトルの表示位置を移動する【ワードプレス】

記事を読む


目次へ
Generic selectors
Exact matches only
Search in title
Search in content
Search in posts
Search in pages