【サンプル付き】WordPressでプラグインを使わないショートコードの作り方を解説-中級編

投稿日: 2022年06月23日

更新日: 2022年06月23日

wordpress

この記事のレベル

初心者向け: 3

難易度: 3

WordPressのショートコードとは何？

以前の記事でショートコードとは何か？を解説させていただきました。
まだお読みでない方は是非、以下の記事を読んでから中級編をお読みください。

【サンプル付き】WordPressでプラグインを使わないショートコードの作り方を解説-初級編

WordPressのショートコードとは何？この記事ではWordPressで自作ショートコードの作り方とその使い方を解説しています。 WordPressのショートコードとは、記事や直接PHPファイルに埋め込む事でプログラムが実行して目的の情報を差し込むことが

2022年06月22日

wordpress

中級編では、より実践的なショートコードを実際のソースを交えて解説いたします。

functions.phpを利用しますので、万が一に備えてバックアップを取るなどの対策を行ってください。

コピペで使える！ショートコード

パーマリンクを取得する

以下の関数は、記事の中にパーマリンクを取得できるショートコードです。
記事IDの部分には記事IDを入れてくださいね。

エディッタ

[pagelink id=記事ID]

functions.php

function code_pagelink ( $atts ) {
    extract( shortcode_atts( array(
        'id' => '',
    ), $atts ) );
    return get_permalink( $atts[id] );
}
add_shortcode('pagelink', 'code_pagelink');

広告表示用ショートコード

例として、広告バナーの形式は以下のHTMLとします。
広告用バナーは2種類として、1つのショートコードで表示を切り替えられるものをイメージしています。

広告用バナーのHTML出力イメージ

<!-- 広告1 -->
<div class="ad_banner">
    <a href="URL 1" class="txt_link" target="_blank" rel="noopener noreferrer">
        <img src="画像URL 2" alt="広告画像" width="" height="" loading="lazy">
    </a>
</div>
<!-- 広告2 -->
<div class="ad_banner">
    <a href="URL 2" class="txt_link" target="_blank" rel="noopener noreferrer">
        <img src="画像URL 2" alt="広告画像" width="" height="" loading="lazy">
    </a>
</div>

エディッタ

[ad_banner ad=1]
[ad_banner ad=2]

functions.php

function ad_banner_func($atts)
{
    //広告1のHTMLをセット
    $ad_banner_1 = <<<EOF
    <!-- 広告1 -->
    <div class="ad_banner">
        <a href="URL 1" class="txt_link" target="_blank" rel="noopener noreferrer">
            <img src="画像URL 2" alt="広告画像" width="" height="" loading="lazy">
        </a>
    </div>
EOF;
    //広告2のHTMLをセット
    $ad_banner_2 = <<<EOF
    <!-- 広告2 -->
    <div class="ad_banner">
        <a href="URL 2" class="txt_link" target="_blank" rel="noopener noreferrer">
            <img src="画像URL 2" alt="広告画像" width="" height="" loading="lazy">
        </a>
    </div>
EOF;

    if($atts['ad'] == 1) {
        //ショートコードでad=1を指定した場合
        return $ad_banner_1;
    }elseif($atts['ad'] == 2) {
        //ショートコードでad=2を指定した場合
        return $ad_banner_2;
    }
}
add_shortcode('ad_banner', 'ad_banner_func');

「この記事は〇分で読めます」的な読了時間を表示

様々なブログでよく見かける、「この記事は〇分で読めます」をショートコード化して呼び出せるものをイメージしています。
人それぞれ文字を読むスピードは異なりますが、「1分間に200字」を基準に関数を組立てました。

HTML出力イメージ

<div class="reading_time">
    <p>この記事は<span>〇</span>分で読めます</p>
</div>

エディッタ

[reading_time]

functions.php

function article_reading_time()
{
    $content = get_post_field( 'post_content', get_the_ID() );
    $word_count = str_word_count( strip_tags( $content ) );
    $readingtime = ceil($word_count / 200); // 1分あたりの読む速度を200文字と仮定

    $output = '
';
    $output .= '
この記事は' . $readingtime . '分で読めます
';
    $output .= '
';

    return $output;
}
add_shortcode('reading_time', 'article_reading_time');

記事の目次を表示

こちらも様々なブログでよく見かけますね。
実装方法はjavascript、PHPなどいくつかありますがここはPHPで実装してみましょう。

HTML出力イメージ

<div class="toc">
    <ul>
        <li>
            <a href="#アンカー">h2 見出し</a>
        </li>
        <li>
            <a href="#アンカー">h3 小見出し</a>
        </li>
        <li>
            <a href="#アンカー">h3 小見出し</a>
        </li>
        <li>
            <a href="#アンカー">h2 見出し</a>
        </li>
        <li>
            <a href="#アンカー">h3 小見出し</a>
        </li>
        <li>
            <a href="#アンカー">h2 見出し</a>
        </li>
    </ul>
</div>

エディッタ

[toc]

functions.php

function generate_toc_shortcode()
{
    $post = get_post();
    
    $content = $post->post_content;
    preg_match_all('/(<h2.*?>.*?<\/h2>|<h3.*?>.*?<\/h3>)/i', $content, $matches);

    if (!empty($matches[0])) {
        $toc = '<div class="toc"><ul>';
        foreach ($matches[0] as $match) {
            $tag = strip_tags($match);
            $anchor = sanitize_title($tag);
            $toc .= '<li><a href="#' . $anchor . '">' . $tag . '</a></li>';
        }
        $toc .= '</ul></div>';

        return $toc;
    }

    return '';
}
add_shortcode('toc', 'generate_toc_shortcode');