【実例】WordPressのショートコードの作り方|functions.phpで申込ボタンを使い回す方法とプラグイン2つを比較

本記事はアフィリエイトリンクを含みます。
【実例】WordPressのショートコードの作り方

WordPressの利用者の中には、次の疑問を持つ方は多いと思います。

  • ショートコードは聞いたことがあるが、自分で作る方法が分からない
  • functions.phpに書くのとプラグインを使うのと、どちらがいいか迷う

上位の解説記事は基本の書き方までが中心で、引数で出し分ける実用例や、テーマを乗り換えたときに何が起きるかまでは、あまり触れていません。

本記事では、子テーマのfunctions.phpにサーバー各社の申込ボタンを出し分けるショートコードを自作し、実際に運用している筆者が、2026年10月13日時点のWordPress公式リファレンスとプラグインの公式ページをもとに、ショートコードの使い方と作り方を解説します。テーマ移行で起きたトラブルや、プラグイン2つの比較まで紹介するので、ぜひ参考にしてみてください。

テーマやプラグインでWordPressに何ができるのかは、次の記事で全体像をまとめています。

あわせて読みたい
【調査記事・体験談】WordPressでできること・できないことを徹底解説!比較表と口コミも紹介 WordPressでできること5つ・できないこと4つを、W3TechsとITreviewの2026年8月時点のデータと、5サイト以上を運営する筆者の失敗談をもとに解説。Wix・ジンドゥーとの比較表つき。
目次

WordPressのショートコードとは

ショートコードは、記事に短い文字列を書くだけで、登録した処理の結果を表示できる仕組みです。基本として次の2つを解説します。

  • [ ]で囲んだ文字列を、登録した処理の結果に置き換える仕組み
  • ショートコードを書く場所はショートコードブロックが確実

[ ]で囲んだ文字列を、登録した処理の結果に置き換える仕組み

ショートコードは、半角の角括弧で囲んだ文字列を、表示するときに登録済みの処理の結果へ置き換える機能です。ショートコードを登録する関数add_shortcodeは、WordPress 2.5.0で導入された標準の仕組みで、テーマやプラグインに依存しません。

WordPressには最初から[gallery]や[caption]、[audio]、[video]などが用意されていますが、ブロックエディターでは専用ブロックがあるため、使う機会は減っています。

いま活躍するのは、テーマやプラグイン、自分で作った独自のショートコードです。書き方には、[付けたい名前]だけで完結するものと、[付けたい名前]〜[/付けたい名前]で文章を囲むものの2種類があります。

ショートコードを書く場所はショートコードブロックが確実

ブロックエディターでショートコードを使うなら、「ショートコード」ブロックを追加して、その中に書くのがおすすめです。段落ブロックの文中に書いても動くことが多いものの、前後に余計な段落タグが付いて、レイアウトが崩れる場合があるためです。

当ブログでも、申込ボタンのショートコードはすべてショートコードブロックで入れています。例えば次のボタンはショートコードを利用して配置しています。

ウィジェットでも、ショートコードブロックを置けば同じように呼び出せます。なお、属性の名前は小文字に変換されてから処理されるため、属性名は最初から小文字で書いておくと混乱しません。

functions.phpでショートコードを自作する手順

ここからは、筆者が実際に運用している方法をもとに、ショートコードの作り方を解説します。次の4つを解説します。

  • 子テーマのfunctions.phpに書き、親テーマには書かない
  • 基本の書き方はadd_shortcodeとreturn
  • 引数で出し分けて、申込ボタンを1つの関数で使い回す
  • 自作ショートコードで実際に起きたトラブル

子テーマのfunctions.phpに書き、親テーマには書かない

自作のショートコードは、有効化している子テーマのfunctions.phpに書くのが基本です。親テーマに直接書くと、テーマの更新でファイルが上書きされ、コードが消えてしまいます。注意したいのは、子テーマを用意したつもりで有効化していないケースです。

筆者は過去に家電紹介系のブログを利用していた際に、子テーマ(SWELL CHILD)が停止したまま親テーマのSWELLが有効になっていました。

外観のテーマ画面で、有効になっているのが子テーマかを先に確かめてください。編集の前には、functions.phpのバックアップも取っておきましょう。記述ミスがあると、サイト全体が表示されなくなることがあります。

基本の書き方はadd_shortcodeとreturn

もっとも簡単なショートコードは、次の数行で作れます。関数で表示したい内容を作り、add_shortcodeで名前と関数を結び付けるだけです。

// 子テーマの functions.php に追記
function techmap_hello_shortcode() {
    return '<p>ここに表示したい文章</p>';
}
add_shortcode( 'hello', 'techmap_hello_shortcode' );

ポイントは、内容をechoで出力せず、returnで返すことです。WordPressの公式リファレンスでも、ショートコードの関数は何も出力せず、置き換える文字列を返すべきだと明記されています。

echoで出力すると、ボタンが記事の先頭に飛び出すといった想定外の表示になります。また、関数名はほかのテーマやプラグインと重なるとエラーになるため、サイト名などの接頭辞を付けておくと安全です。

引数で出し分けて、申込ボタンを1つの関数で使い回す

ショートコードは引数を受け取れるので、1つの関数で複数のボタンを出し分けられます。次は、サービス名でリンク先を切り替える例です。

function techmap_cta_shortcode( $atts ) {
    $atts = shortcode_atts( array(
        'service' => 'xserver',
        'label'   => '公式サイトを見る',
    ), $atts, 'cta' );
    $urls = array(
        'xserver' => 'https://example.com/xserver',
        'conoha'  => 'https://example.com/conoha',
    );
    if ( ! isset( $urls[ $atts['service'] ] ) ) {
        return '';
    }
    return '<a class="cta-btn" href="' . esc_url( $urls[ $atts['service'] ] ) . '" rel="nofollow sponsored noopener" target="_blank">' . esc_html( $atts['label'] ) . '</a>';
}
add_shortcode( 'cta', 'techmap_cta_shortcode' );

記事には[cta service="conoha"]のように書きます。当ブログでは、この考え方でエックスサーバー・ConoHa WING・さくらなどの申込ボタンを、サービスごとのショートコードで出し分けています。

ボタンに入れているリンクは、A8.netなどのASPで広告主と提携して発行したものです。ASPごとの違いや選び方は、アフィリエイトASPおすすめ6社の比較で解説しています。

リンク先や文言を変えたいときは、functions.phpを1か所直すだけで全記事に反映されます。次のボタンも、記事には[xserver]と1行書いているだけです。

リンクの文字列やボタンのHTMLを関数の中で組み立てるときは、esc_urlやesc_htmlで値を安全な形に整えておくと、想定外の文字が入っても表示が壊れにくくなります。

自作ショートコードで実際に起きたトラブル

自作は自由度が高い反面、問題も自分で見つける必要があります。当ブログでは、A8.netの成果計測用のインプレッションタグが、1ページに9〜14回も出力されていることに気づきました。

同じページで何度呼ばれても、計測タグはstatic変数で初回だけ出すようにするのが対処法です。また、CocoonからSWELLへ移行したときは、ショートコードの関数が使っていた補助関数を写し漏らしたためボタンがエラーに。装飾もCocoon側のCSSに頼っていたため消えました。ショートコードは、関数とCSSをセットで管理するのがおすすめです。

ショートコード以外に、CocoonからSWELLへの移行で崩れた箇所と確認手順は、次の記事でまとめています。

あわせて読みたい
【体験談】CocoonからSWELLへの移行手順|2テーマの違いの比較とブログを乗り換えて分かった崩れる箇所... CocoonからSWELLへ2つのブログを移行した筆者が、乗り換えサポートプラグインの注意点、装飾・GA4・サイトマップ・PR表記など移行で崩れる箇所、切り替え直後の確認ポイントを2026年10月時点の公式情報で解説します。

【比較表】functions.php・Code Snippets・Shortcoderの共通機能と違い

自作の方法は、子テーマのfunctions.phpに書く以外に、プラグインで登録する方法もあります。代表的な2つと比較しました。

比較項目子テーマのfunctions.phpCode SnippetsShortcoder
費用無料無料(CSS・JavaScriptの管理は有料のPro版)無料
登録するものPHPの関数PHPのコードHTML・CSS・JavaScript
PHPの知識必要必要不要
記事での呼び出し方[名前][名前](コード内で登録)[sc name="名前"]
テーマを変えたとき子テーマごと使えなくなるそのまま残るそのまま残る
有効インストール数―100万以上10万以上
必要なWordPressのバージョン―5.5以上4.9.0以上
ショートコードブロックで使える◯◯◯
引数で出し分けられる◯◯◯

※2026年10月13日時点のWordPress.orgのプラグインページの情報

3つともショートコードブロックで呼び出せて、引数での出し分けにも対応しています。大きな違いは、PHPを書くかどうかと、テーマを変えたときに残るかどうかの2点です。

Code SnippetsとShortcoderの口コミ・評判

WordPress.orgの公式プラグインページに投稿された、星5の口コミを紹介します。英語の口コミは原文のまま引用し、内容を日本語でまとめました。次の2つを解説します。

  • Code Snippetsの口コミ・評判
  • Shortcoderの口コミ・評判

Code Snippetsの口コミ・評判

Great

Used for many years without any problems. Thumbs up!

引用元:WordPress.org

「何年も問題なく使っている」という、長期利用の安定性を評価する声です。Code Snippetsは有効インストール数が100万以上あり、2026年10月時点でバージョン4.0.0まで更新が続いています。長く使う前提のコードを預ける先として、更新が続いている点は安心と言えるでしょう。

Code Snippets is just amazing

Code Snippets has been the way to customize the stubborn theme of my website. Thank you Code Snippets!

引用元:WordPress.org

「手ごわいテーマをカスタマイズする手段になった」という声です。テーマのファイルに手を入れずにコードを足せるため、子テーマを用意していないサイトや、テーマを今後乗り換える予定のサイトでも使えます。ショートコード以外のPHPのカスタマイズもまとめて管理できます。

An Absolute MUST HAVE PLUGIN

I love this, it is super easy to use and an absolute godsend for adding custom php to WP Sites

引用元:WordPress.org

「独自のPHPを追加するのにとても使いやすい」という声です。公式ページでも、functions.phpに直接コードを書く手間をなくすプラグインとして紹介されています。functions.phpを直接開くのが不安な人にとって、PHPの置き場所を管理画面に移せるのが最大のメリットです。

Shortcoderの口コミ・評判

Simple, Perfect

This plugin is epic and should be part of WP natively 🙂Shortcodes can easily be found and edited from the dashboard. No issues on latest version of WP.

引用元:WordPress.org

「WordPressに標準で入っていてほしい」「管理画面で探して編集しやすい」という声です。ショートコードが増えると、どこに何を書いたか分からなくなりがちですが、Shortcoderなら登録したショートコードを管理画面の一覧で確認・編集できるため、数が増えても管理しやすくなります。

Great, easy to setup.

Great to add featured image on any place in the post

引用元:WordPress.org

「記事の好きな場所にアイキャッチ画像を入れられる」という声です。Shortcoderは、名前を付けてHTMLを貼るだけでショートコードになり、記事には[sc name="名前"]と書くだけで呼び出せます。PHPを書かずに済むため、記述ミスでサイト全体が止まる心配がありません。

Useful tool

This tool make it possible to use shortcodes in any pages and texts.

引用元:WordPress.org

「どのページや文章でもショートコードを使えるようになる」という声です。アフィリエイトのタグや定型の注意書きのように、同じHTMLを何十記事にも貼るなら、Shortcoderに登録して1か所で管理すると、リンク先が変わったときも1回の修正で済みます。

結局、Code SnippetsとShortcoderはどっちがおすすめか

ブログでボタンや定型文を使い回したい方に向けて、2つのプラグインのどちらを選ぶべきか結論づけます。次の2つを解説します。

  • 結論|タグや定型文を使い回すならShortcoderがおすすめ
  • 具体例|筆者が子テーマのPHPで作って苦労した点

結論|タグや定型文を使い回すならShortcoderがおすすめ

結論として、アフィリエイトのタグや定型文を使い回したいブログ運営者には、Code SnippetsよりShortcoderがおすすめです。理由は3つあります。1つ目は、HTMLを貼るだけでショートコードになり、PHPの知識がいらないことです。

2つ目は、PHPを書かないので、記述ミスでサイト全体が表示されなくなる心配がないことです。3つ目は、プラグインに登録するため、テーマを乗り換えてもショートコードがそのまま残ることです。

一方で、条件によって表示を変えたり、計測タグを1回だけ出したりとPHPで処理を書きたい場合は、Code Snippetsか子テーマのfunctions.phpを選ぶのが向いています。

具体例|筆者が子テーマのPHPで作って苦労した点

当ブログは、プラグインをできるだけ増やしたくないという方針から、申込ボタンを子テーマのfunctions.phpで自作しています。ただ、CocoonからSWELLへ移行したときは、ショートコードの関数と補助関数をすべて新しい子テーマに写し、ボタンのCSSもSWELL向けに書き直す必要がありました。

もしHTMLの使い回しだけが目的だったなら、テーマの外にあるプラグインに登録しておけば、移植作業はかなり減らせたはずです。PHPを書く必要がない方は、まずShortcoderで始めるのがおすすめです。

まとめ|ショートコードは「どこに置くか」まで決めてから作ろう

ショートコードは、同じボタンや定型文を何度も使うブログほど効果が大きい機能です。最後に、本記事のポイントをまとめます。

  • 自作するなら、有効化している子テーマのfunctions.phpに書き、親テーマには書かない
  • 関数は内容をechoせずreturnで返し、関数名には接頭辞を付ける
  • 引数を使えば、1つの関数で複数のボタンを出し分けられる
  • タグや定型文の使い回しならShortcoder、PHPで処理を書くならCode Snippetsか子テーマ

ショートコードを作る前に、テーマを乗り換えても残る場所に置くかどうかを決めておくと、あとで困りません。まずは使い回したいボタンや文章を1つ選んで、試してみてください。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

目次