WordPressショートコードを使いこなす方法をやさしく解説
はじめに
WordPressを使っていると、よく耳にするのが ショートコード という仕組みではないでしょうか。 特定の文字列を入力するだけで動的なコンテンツや機能を呼び出せるため、便利だと感じている方もいるかもしれません。 一方で、ショートコードの作成や活用方法がわからないまま、何となく使いづらい印象を持っているケースもあるようですね。 そこで、ここではWordPressショートコードの概要から実装例まで、初心者の方でもわかりやすく説明していきます。 プログラミング経験がまったくない皆さんにも理解しやすいよう、できるだけ平易な言葉で具体的に解説してみます。
ショートコードとは何か
WordPressの投稿や固定ページの中に、ある特定の文字列（例えば [gallery] など）を書くだけで、対応するコンテンツを表示させる仕組みのことを指します。
通常であれば、画像をギャラリー表示するためにHTMLやPHPを記述する必要がありますが、ショートコードなら一行の記述で済みます。
仕組み
ショートコードは、WordPressが提供する add_shortcode() という関数で定義することができます。
この関数に「ショートコード名」と、実際の処理を行う「コールバック関数（処理内容）」を登録すると、投稿本文の中で [ショートコード名] と書くだけで処理結果を呼び出す仕組みです。
簡単に言えば、WordPressが本文をレンダリングするときにショートコードを見つけると、その部分をPHPの関数で置き換えてくれるわけですね。
メリット
ショートコードを使うメリットは、コードの管理がしやすくなる点にあります。
従来、特定の処理を行うためにテンプレートファイルを編集したり、HTMLを直接書き込んだりしていた場合は、実装が煩雑になりがちでした。
しかし、ショートコードであれば、WordPressに関数を1つ定義し、投稿や固定ページの本文に [短い文字列] を書くだけで完結します。
結果として、メンテナンス性が高まり、動的なコンテンツの呼び出しが楽になるのです。
ショートコードはWordPressが標準で提供している仕組みなので、特別なプラグインをインストールしなくても利用できます。
基本的な使用例
では、具体的な使い方を見ていきましょう。 まずは、WordPressに最初から用意されているデフォルトのショートコードと、その活用例を把握すると理解しやすいです。
デフォルトで用意されているショートコード一覧
WordPressには、代表的なものとして以下のショートコードが存在します。
いずれも、投稿や固定ページに [gallery] のように記述するだけで機能が有効になります。
- gallery
- audio
- video
- caption
これらを使えば、たとえば [audio] と書くだけで音声ファイルをプレイヤー形式で表示できます。
HTMLの知識がなくても使いやすいので、WordPress初心者でも操作しやすいのではないでしょうか。
投稿や固定ページでの活用例
投稿編集画面で、テキストを普通に入力した後に [gallery ids="1,2,3"] のように記述すると、指定した画像がギャラリー表示されます。
実際の投稿では、画像IDを別途取得して [gallery ids=""] に指定する必要がありますが、慣れてしまえば手軽にスライドショー風のレイアウトを作ることもできますね。
同じ要領で [caption] を使って本文内の画像やテキストにキャプションを付けることも簡単に行えます。
こうした標準ショートコードはカスタマイズ性もある程度備わっているので、まずは一度試してみるとイメージが湧くと思います。
独自ショートコードの作成方法
WordPressが用意しているデフォルトのショートコードだけでは、カバーできない機能を実装したいときがあります。 たとえば、オリジナルのテーブルを動的に生成したり、特定のデータを表示したりするようなケースです。 そんなときは、独自ショートコードを自作してしまいましょう。
functions.php を使った例
テーマの functions.php を編集すれば、簡単なショートコードが作れます。
以下のコードは、 [myshortcode] というショートコードを入力すると、定義した文字列を表示する例です。
// テーマの functions.php に記述する例 add_shortcode('myshortcode', 'myshortcode_function'); function myshortcode_function($atts, $content = null) { return "これはカスタムショートコードの出力例です。"; }
投稿本文の好きな場所に [myshortcode] と書くだけで、ここで定義した文字列が差し込まれます。
このくらいシンプルな仕組みであれば、プログラミング未経験の皆さんでも意外と難しくないはずです。
引数を使った例
ショートコードに引数を持たせると、より柔軟に動きを変えられます。
[myshortcode color="red"] のように書けば色を変えられる、という動きを作りたい場合の例を挙げてみます。
add_shortcode('myshortcode', 'myshortcode_function'); function myshortcode_function($atts, $content = null) { // ショートコードの属性を設定 $atts = shortcode_atts( array( 'color' => 'blue', // デフォルト値をblueに ), $atts ); // 属性を使った処理 $color = $atts['color']; return '<div style="color:'.esc_attr($color).'">ここに独自の表示内容が出力されます</div>'; }
[myshortcode color="red"] と書くと、文字色が赤に変わります。
このように引数を利用できるのがショートコードの便利なところです。
初心者の皆さんは「PHPコードの中で、短い文字列によって好きなデザインを呼び出せるんだな」とイメージしておけばOKでしょう。
プラグインを作成して定義する方法
テーマを切り替えたり、テーマのアップデートを行う可能性がある場合は、独自プラグインとしてショートコードを定義する選択肢もあります。 WordPressのプラグインは、単なるPHPファイルでも作れます。 以下のイメージのように、プラグイン用のフォルダを作り、その中にメインPHPファイルを用意するわけですね。
<?php /** * Plugin Name: My Custom Shortcodes * Description: 独自ショートコードを定義するプラグイン */ add_shortcode('myshortcode', 'myshortcode_function'); function myshortcode_function($atts, $content = null) { return "プラグイン経由で作られたショートコードの出力例です。"; }
このファイルをWordPressのプラグインとして有効化しておけば、テーマとは無関係に使えるショートコードとなります。 社内や複数サイトで使い回す場合は、プラグイン化が便利かもしれません。
ショートコードで注意すべきポイント
ショートコードは便利ですが、いくつか注意点もあります。 特にセキュリティやコード管理の面で気をつけることで、不具合や不正なアクセスを防げます。
セキュリティリスク
ショートコードは、PHPのコードを介して出力内容を生成するため、不適切なコードを書いたり、ユーザーが渡す引数を無加工で出力したりするとセキュリティ上のリスクが高まります。
たとえば、引数としてJavaScriptを埋め込めるような仕組みにしてしまうと、サイト全体がXSS攻撃にさらされることも考えられます。
そのため、引数を使う場合は esc_attr() や esc_html() などのエスケープ処理を徹底することを意識した方がいいですね。
ショートコードを運用する際は、意図しない入力が行われても安全に処理できるよう、エスケープやバリデーションを忘れずに行いましょう。
コード管理
テンプレートの書き換えやCSSの切り替えほどではないにせよ、ショートコードもコードとして扱います。 開発環境や本番環境で管理が分かれていない場合、どこにどんなショートコードが定義されているか把握しづらくなりがちです。 特に、functions.phpで定義したショートコードが増えすぎると、後から修正や確認をするのが大変になるかもしれません。 必要に応じてプラグイン化したり、コードリポジトリで管理したりすることで混乱を防ぎましょう。
実務での活用シーン
ショートコードの活用事例は多岐にわたります。 初心者の皆さんでもイメージしやすいように、いくつか具体的な実務シーンを紹介します。
固定ページ内で動的なコンテンツを表示
例えば、会社案内ページに動的なリストやサポート情報を表示したいときがあります。 この場合、ショートコードを使って「現在のサポート受付状況」をリアルタイムで表示するなども可能です。 ショートコード関数の中でデータベースに問い合わせたり、APIから取得した情報を組み立てたりすれば、更新の手間を大きく減らせます。
商品情報や会員制サイトの機能
ECサイトの一部にWordPressを使っている場合は、ショートコードを活用して在庫情報を表示したり、特定のカテゴリー商品だけをリスト表示したりできます。 また、会員制サイトであれば、「現在ログインしているユーザー名を表示する」「ポイント残高を表示する」といった機能をワンタッチで呼び出す仕組みを実装することも容易です。
記事テンプレートとしての活用
ブログ記事を定型パターンで作りたい場合にもショートコードが役立ちます。
例えば、決まった構成のテーブルや枠組みを使うときに、 [mytemplate] などのショートコードで一発呼び出しするようにしておけば、作業効率が上がりますね。
ショートコードでよくある疑問
初心者の方が「ショートコードに対してどんな疑問を持ちがちか？」を整理しておくと、より安心して使えるでしょう。 ここでは、よくある質問をいくつか取り上げます。
プラグインにショートコードを追加するとテーマ切り替えの際に問題はないか
テーマを切り替えると、 functions.php に書いたコードは使われなくなりますが、プラグイン側にショートコードがあればテーマに依存しません。
それを踏まえると、テーマ切り替えに強い構成を目指すなら、独自プラグインを作る手段が好まれます。
ただし、新しいテーマにもショートコードが大量に定義されている場合は、ショートコード名の重複などに注意する必要があります。
ショートコードが呼び出されないときはどうする
単純な原因としては「名前のスペルミス」や「関数が定義されていないタイミングで呼び出している」といったケースがあります。 テーマやプラグインの読み込み順序によって期待した結果が得られない場合も考えられますね。 こうした不具合に直面したら、一度プラグインの有効化状況やテーマのコード記述場所を確認するといいでしょう。
テンプレートファイルの中でショートコードを使いたい場合はどうする
テンプレートPHPファイル内でショートコードを直接呼び出したい場合は、WordPressの do_shortcode() 関数を使います。
たとえば、 echo do_shortcode('[myshortcode]'); のように書くと、テンプレートファイル内でもショートコードの内容を出力できます。
投稿本文以外の場所でもショートコードを柔軟に利用したいなら、こちらの方法も覚えておくと便利です。
ショートコードの拡張とベストプラクティス
ショートコードを多用するほど、「どのように運用・拡張したらいいのか」という悩みが出てくることがあります。 そこで、運用しやすく拡張性も確保できるいくつかのベストプラクティスを考えてみましょう。
1つの機能ごとにコードをまとめる
ショートコードを作成していると、1つのファイル内に複数のショートコード定義を書く機会が出てきます。
このとき、できれば1つの機能や役割がはっきりしているショートコードごとにコードを分割したほうが見通しが良くなるでしょう。
例えば、プラグイン内で shortcodes フォルダを作り、それぞれのPHPファイルに分けると管理がしやすいです。
バージョン管理ツールを導入する
ショートコードに限らず、WordPressのコードを扱うのであれば、バージョン管理ツール（Gitなど）を使っておくと安心できます。 間違ってショートコード名を変更した場合や、修正した結果表示が壊れてしまった場合にも、以前の状態に戻しやすくなります。 初心者の皆さんでも、最低限のGitコマンドだけ覚えておけばスムーズに履歴管理が可能です。
コードの整合性を保つ
ショートコードが増えるほど、似たような名称のものが紛れ込んで重複してしまったり、別の場所で定義した同名ショートコードに上書きされてしまったりするリスクが高まります。
add_shortcode() で定義する際は、名前が衝突しないように工夫 することもポイントです。
プロジェクト名をつけたり、プレフィックス（接頭辞）をつけたりといった方法がよく使われます。
まとめ
ここまで、WordPressショートコードの仕組みから実務での活用例、そして注意点までを紹介しました。 初心者の皆さんでも理解できそうな範囲で話を進めましたが、あらためてショートコードの要点を振り返ってみます。
ショートコードは、WordPressの投稿や固定ページ内でPHPによる動的処理を呼び出すためのシンプルな仕組みです。 デフォルトで提供されるショートコードも多く、独自に追加することも容易なので、ほんの数行のコードで新機能を実装できます。 活用の幅が広い分、セキュリティリスクやコード管理の複雑化には注意が必要ですが、上手に使うとメンテナンス性が高まり便利です。
もし「簡単に動的なコンテンツを表示したい」「テーマにべったり依存しない仕組みが欲しい」と考えているのであれば、ショートコードは必ず役に立つといえるでしょう。 皆さんのWordPressサイト運営に、少しでも役立つヒントがあれば幸いです。