アイキャッチを挿入するWordPressショートコード
アイキャッチ画像を挿入するWordPressショートコードをつくってみました。
使用しているテーマによっては自動的にアイキャッチ画像を記事一覧に表示してくれますが、Luxeritasテーマを「記事一覧の表示方法＝記事全文表示（moreタグまで）」の設定で使っている場合、アイキャッチは表示されず、記事本文の「続きを読む」までがそのまま記事一覧に表示されます。
なので、「記事全文表示（moreタグまで）」の設定でアイキャッチ的な画像を貼りたい場合は、手動で記事の頭に画像を貼ってリンクを設定する必要があります。
それを毎回行うのは大変なので、ショートコードにしてみました。
ショートコードの使い方と仕様
まず、投稿記事にアイキャッチ画像を設定してください。アイキャッチ画像は、「投稿の編集画面」の設定欄で設定できます。
続いて、アイキャッチを入れたいところに [eye] と入力してください。これで終わりです。
アイキャッチ画像が設定されていれば、その画像を挿入します。また、記事一覧で表示されている場合は、記事本文（続きを読む）のリンクも設定していますので、閲覧者はアイキャッチ画像をクリックしても続きが読めます。
アイキャッチが設定されていない場合は、特に何も表示しません。（HTMLのコメントとして、アイキャッチ画像が設定されていない旨を残します）
ショートコードの登録
[eye]ショートコードを使うには、function.phpなどにショートコードを登録する必要があります。
Luxeritasテーマを使っている人は、設定画面から登録できます。それ以外のテーマを使っている人はfunction.phpに記載すれば登録できます。
Luxeritasテーマのショートコードとして登録する場合
WordPressのダッシュボードから、Luxeritas → ショートコードを登録 を開きます。
ショートコードのインポートボタンで、こちらのjsonファイルをインポートすれば登録できます。
もしくは、新規追加で下記のように登録してもOKです。
- ラベル：任意
- ショートコード：eye（もしくは任意で設定）
- Contents：下記のコード
- PHPコード：チェックを入れる
//リンク付きアイキャッチ画像を挿入するWordPressショートコード：eye
//https://astherier.com/blog/2020/08/wordpress-shortcode-insert-eyecatch-image/
// Copyright (c) 2020 astherier
// This software is released under the MIT License.
// http://opensource.org/licenses/mit-license.php
$imgUrl=get_the_post_thumbnail_url();
$a1='';
$a2='';
if( ! is_single( ) ){
$a1='<a href="'.get_permalink().'">';
$a2='</a>';
}
if($imgUrl){
$contents= '<!-- eye shortcode --> <div class="wp-block-image"><figure class="aligncenter size-large is-resized">'.$a1.'<img src="'.$imgUrl.'" alt="'.get_the_title().'" style="max-height:400px;" />'.$a2.'</figure></div>';
}else{
//アイキャッチ画像未設定の場合は、何も表示しない
$contents= '<!-- eye shortcode: eye catch image is not set -->';
}
function.phpに登録する場合
Luxeritas以外のテーマを使っている方は、function.phpに記載して登録します。
WordPressのダッシュボードから、 外観 → テーマエディター を開き、右のテーマファイル欄からfunction.phpを選択します。
function.phpの末尾に、次のコードをコピペして保存すれば準備完了です。
//リンク付きアイキャッチ画像を挿入するWordPressショートコードeye
//https://astherier.com/blog/2020/08/wordpress-shortcode-insert-eyecatch-image/
// Copyright (c) 2020 astherier
// This software is released under the MIT License.
// http://opensource.org/licenses/mit-license.php
function insert_eye_catch_link(){
$imgUrl=get_the_post_thumbnail_url();
$a1='';
$a2='';
if( ! is_single( ) ){
$a1='<a href="'.get_permalink().'">';
$a2='</a>';
}
if($imgUrl){
$contents= '<!-- eye shortcode --> <div class="wp-block-image"><figure class="aligncenter size-large is-resized">'.$a1.'<img src="'.$imgUrl.'" alt="'.get_the_title().'" style="max-height:400px;" />'.$a2.'</figure></div>';
}else{
//アイキャッチ画像未設定の場合は、何も表示しない
$contents= '<!-- eye shortcode: eye catch image is not set -->';
}
return $contents;
}
add_shortcode('eye', 'insert_eye_catch_link');ぜひご利用ください。
