ショートコードとは？

[shortcode post_id=“221” title=“かけちまる”]こんな感じのコードを見たことありますかね？

ショートコードとは、functions.phpにあらかじめ処理を書いておきます。
例えば、記事情報を最新5件取得するみたいな。

その処理を
[shortcode post_id=“221” title=“かけちまる”]
こんな感じのコードを記述することで呼び出すことができるのです。

ここまでの説明は、ショートコードを自作した時の説明です。

プラグインも色々あるみたいなので自作する気のない人は試してみるといいかもです。

ショートコードを自作する方法

ここから具体的にショートコードを自作する方法を解説します。
ここで紹介するコードは、雛形的なものなのでこの雛形を活用して好きな処理を実装してみてください。

編集するファイルは、
/wp-content/themes/テーマ名/functions.php
を編集していきます。

PHP
コピー
// sampleという名前の関数を定義
function sample() {
  // sample関数が呼び出されたら「ショートコード表示成功！」を返す
  return 'ショートコード表示成功！';
}
// [sample_shortcode]の記述があるところにsample関数の処理結果を返す
add_shortcode('sample_shortcode', 'sample');

上記のコードをfunctions.phpの最後にコピペすれば良いでしょう。
基本的なショートコードの自作はこれだけで完了です。

それで以下のショートコードを投稿記事や固定ページに記述してみてください。
ページを更新してみて、記述した箇所に「ショートコード表示成功！」と表示されれば成功です。
[sample_shortcode]

最新5件の記事情報を取得するショートコードを自作する方法

ここでは実用的なショートコードを自作する方法を解説します。

やっている処理を簡単に説明すると、

• ・最新5件の記事情報を取得する
• ・while文で取得した記事情報を1件ずつまわす
• ・$five_posts変数にhtmlタグを代入していく
• ・returnで$five_posts変数の値を返す

というふうなことをしています。

投稿記事や固定ページに以下のショートコードを記述することでその場所に最新5件の記事が表示できます。
[get_five_post_shortcode]

CSSは好きなように設定してください。
$five_posts変数に代入するHTMLをアレンジすることで記事情報の表示表現を変えることができます。

PHP
コピー
function get_five_post() {
    $wp_query = new WP_Query();

    $my_posts = array(
        'post_type' => 'post',
        'posts_per_page'=> '5',
    );
    $wp_query->query($my_posts);

    if( $wp_query->have_posts() ){
        while( $wp_query->have_posts() ){ 
            $wp_query->the_post();

            $five_posts .= '<a class="five_posts_link" href="' . get_the_permalink() . '">'. get_the_date() .'　'. get_the_title() . '</a>';

        } 
    }
    wp_reset_postdata();

    return $five_posts;
}
add_shortcode('get_five_post_shortcode', 'get_five_post');