今回は、ワードプレス（WordPress）で独自のショートコードを作成する方法を紹介します。
定型文やバナー、CTAなど、何度も使い回すコンテンツがある場合に非常に便利な機能です。
当記事では、ショートコードの基本的な仕組みから、functions.phpを使った自作方法、実用的なサンプルコードまで、初心者の方にもわかるように解説します。
参考にしていただけると幸いです。
ショートコードとは？
ショートコードとは、投稿や固定ページの本文中に [ショートコード名] と記述するだけで、あらかじめ登録しておいたPHPの処理結果やHTMLを表示できる機能です。
[contact-form-7 id=”123″ title=”お問い合わせ”]
のようなショートコードが生成されます。
このショートコードを記事の中に貼り付けるだけで、お問い合わせフォームが表示されます。
ワードプレスでは、記事の本文中に直接PHPコードを書くことはできません。
しかし、ショートコードを使えば、あらかじめfunctions.phpに登録しておいたPHPの処理を、記事中から呼び出すことが可能になります。
ショートコードの活用例
- 記事の末尾に挿入する定型文やCTA（行動喚起）
- 広告バナーやアフィリエイトリンク
- 著者プロフィールボックス
- 現在の年（「©2025」のような著作権表示）
- 特定の投稿一覧（新着記事や人気記事）
- 装飾ボックスやボタン
他にも、様々な場面でショートコードを活用することができます。
ショートコードの2つのタイプ
ショートコードには「自己完結型」と「囲み型」の2つのタイプがあります。
タグ1つだけで完結する形。
書くだけで登録済みの内容が出力される。
定型文やバナーの表示に向いている。
開始タグと終了タグでコンテンツを囲む形。
囲んだ内容を加工して出力できる。
装飾ボックスや強調表示に向いている。
さらに、どちらのタイプでも 属性（パラメータ） を追加して動作を変えることができます。
例：[my_shortcode color=”blue” size=”large”]
ショートコードを自作する難易度
「自分でショートコードを作るのは難しそう…」と感じる方もいるかもしれません。
実際の難易度は、作りたいショートコードの種類によって異なります。
- 簡単：定型文を出力するだけのショートコード（コピペで作れる）
- 簡単：現在の年を表示するショートコード（数行のコード）
- 普通：属性付きで表示を切り替えるショートコード（shortcode_atts の理解が必要）
- 普通：囲み型で装飾ボックスを作るショートコード（HTML・CSSの知識も必要）
- やや難：WP_Queryで記事一覧を取得するショートコード（PHPの基礎知識が必要）
最もシンプルなショートコードは、functions.phpにたった3行のコードを追加するだけで作れます。
PHPに詳しくなくても、当記事のサンプルコードをコピペするところから始められるので、ぜひ挑戦してみてください。
ショートコードの作り方
ショートコードは、テーマのfunctions.phpにコードを記述して作成します。
※もし子テーマを作成されている場合は、そちらにコードを記述すようにしましょう。
- functions.phpを編集する前に必ずバックアップを取ってください
- 親テーマではなく子テーマのfunctions.phpに記述してください
- 管理画面の「外観」→「テーマファイルエディター」から編集できます
基本構文：add_shortcode()
ショートコードの作成には、ワードプレスの関数add_shortcode()を使います。
具体的には、次のように使用します。
add_shortcode( ‘ショートコード名’, ‘コールバック関数名’ );
- 第1引数（ショートコード名）：記事中に書くタグの名前。小文字英数字とアンダースコアのみ推奨。
- 第2引数（コールバック関数名）：ショートコードが呼ばれたときに実行する関数。
コールバック関数では、HTMLを echo するのではなく、「return」で文字列を返す必要があります。
「echo」を使うと、ショートコードの出力位置がずれてしまいます。
作り方①：定型文を出力する（自己完結型・最もシンプル）
まずは最もシンプルな、定型文を出力するだけのショートコードです。
function my_cta_shortcode() {
return ‘<div class=”my-cta” style=”background:#f0f8ff; padding:20px; border:2px solid #4169e1; border-radius:8px; margin:20px 0;”><p>この記事が役に立ったらシェアお願いします！</p></div>’;
}
add_shortcode( ‘my_cta’, ‘my_cta_shortcode’ );
↓
[my_cta]
これだけで、CTAボックスが公開ページに表示されます。
作り方②：現在の年を表示する
フッターの著作権表示などで「©2025」のように毎年更新が必要な部分を、自動化するショートコードです。
function my_current_year() {
return date( ‘Y’ );
}
add_shortcode( ‘year’, ‘my_current_year’ );
↓
© [year] サイト名
→ 「©2026 サイト名」のように表示されます。年が変わっても自動で更新されるので便利です。
作り方③：属性（パラメータ）付きのショートコード
属性を使うと、同じショートコードでも呼び出すたびに異なる内容を表示できます。
function my_button_shortcode( $atts ) {
$atts = shortcode_atts( array(
‘url’ => ‘#’,
‘text’ => ‘詳しくはこちら’,
‘color’ => ‘#4169e1’,
), $atts );
return ‘<a href=”‘ . esc_url( $atts[‘url’] ) . ‘” style=”display:inline-block; background:’ . esc_attr( $atts[‘color’] ) . ‘; color:#fff; padding:12px 24px; border-radius:6px; text-decoration:none;”>’ . esc_html( $atts[‘text’] ) . ‘</a>’;
}
add_shortcode( ‘my_button’, ‘my_button_shortcode’ );
↓
[my_button url=”https://example.com” text=”公式サイトへ” color=”#e74c3c”]
→ これで赤いボタンが表示されます。また、属性を省略するとデフォルト値が使われます。
ユーザーが属性を省略した場合にデフォルト値が使われるので、必ずセットで覚えておきましょう。
また、ユーザーが入力する値は esc_url() や esc_html()、esc_attr() でエスケープ処理を行い、セキュリティを確保してください。
作り方④：囲み型ショートコード
開始タグと終了タグでコンテンツを囲み、そのコンテンツを加工して出力するタイプです。
function my_highlight_shortcode( $atts, $content = null ) {
$atts = shortcode_atts( array(
‘color’ => ‘#fff3cd’,
), $atts );
return ‘<span style=”background:’ . esc_attr( $atts[‘color’] ) . ‘; padding:2px 6px;”>’ . esc_html( $content ) . ‘</span>’;
}
add_shortcode( ‘highlight’, ‘my_highlight_shortcode’ );
↓
[highlight]ここがハイライトされます[/highlight]
[highlight color=”#d4edda”]緑のハイライト[/highlight]
囲み型のコールバック関数では、第2引数の$contentに囲まれたテキストが渡されます。
また、$contentのデフォルト値を「null」にしておく（$content = null）のが作法になります。
作り方⑤：記事一覧を出力するショートコード（応用）
WP_Queryを使って、特定カテゴリーの記事一覧を表示するショートコードです。
function my_post_list_shortcode( $atts ) {
$atts = shortcode_atts( array(
‘category’ => ”,
‘count’ => 5,
), $atts );
$args = array(
‘post_type’ => ‘post’,
‘posts_per_page’ => intval( $atts[‘count’] ),
‘post_status’ => ‘publish’,
);
if ( ! empty( $atts[‘category’] ) ) {
$args[‘category_name’] = $atts[‘category’];
}
$query = new WP_Query( $args );
$output = ”;
if ( $query->have_posts() ) {
$output .= ‘<ul class=”my-post-list”>’;
while ( $query->have_posts() ) {
$query->the_post();
$output .= ‘<li><a href=”‘ . get_permalink() . ‘”>’ . get_the_title() . ‘</a></li>’;
}
$output .= ‘</ul>’;
wp_reset_postdata();
}
return $output;
}
add_shortcode( ‘post_list’, ‘my_post_list_shortcode’ );
↓
[post_list category=”news” count=”3″]
→ 「news」カテゴリーの最新3件のタイトルリンクが表示されます。
WP_Queryを使うショートコードでは、ループ終了後に wp_reset_postdata() を忘れずに呼び出してください。
また、HTMLを「echo」ではなく変数に格納して「return」するのがポイントです。
テンプレートファイルからショートコードを呼び出す方法
ショートコードは記事の中だけでなく、テンプレートファイル（PHPファイル）からも呼び出すことができます。
<?php echo do_shortcode( ‘[my_cta]’ ); ?>
do_shortcode() は、文字列中のショートコードを実行して結果を返す関数です。
header.phpやsidebar.phpなどのテンプレートファイルに定型のCTAを入れたい場合に非常に便利です。
PHPが苦手な方向け：プラグインでショートコードを作成する
PHPの編集に不安がある方は、プラグインを使ってショートコードを作成する方法もあります。
Shortcoder
functions.phpを編集する必要がなく、管理画面上でショートコード名と出力内容を入力するだけで作成できます。
定型文やバナーなど、シンプルなHTMLの挿入に向いています。
Post Snippets
属性の設定にも対応しているため、functions.phpを編集せずに属性付きのショートコードを作成したい場合に便利なプラグインです。
ショートコード作成時の注意点
ショートコードを作成するにあたって注意すべきポイントも、一覧でまとめておきます。
- 「echo」ではなく「return」を使う：コールバック関数の中で「echo」でを使うと、ショートコードの出力位置がページの先頭にずれてしまいます。必ず「return」で値を返してください。
- ショートコード名のルール：小文字の英数字とアンダースコアのみ推奨。ダッシュ（-）は避けた方が安全です。大文字やスペースは使用できません。
- 既存のショートコード名と重複させない：プラグインやテーマが登録しているショートコード名と同じ名前を付けると上書きされてしまいます。独自のプレフィックス（my_ など）を付けて区別しましょう。
- エスケープ処理を忘れない：ユーザーが入力した属性値は、esc_html()、esc_url()、esc_attr()などでエスケープし、セキュリティを確保してください。
- ショートコードの削除に注意：ショートコードの登録を削除（functions.phpからコードを削除）すると、記事中に[my_shortcode]というタグがそのまま文字として表示されてしまいます。
ショートコードを作成する際には、これらの点も意識して作業を行いましょう。
ブロックエディタでショートコードを設定する方法
ブロックエディタ（Gutenberg）では、「ショートコード」ブロックが用意されています。
このブロックを使えば、従来のショートコードをそのままブロックエディタで利用できます。
投稿編集画面で「+」ボタンをクリック→「ショートコード」ブロックを選択→ショートコードを入力、という手順で使えます。
このような感じですね。
↓
↓
なお、ワードプレスの公式では、新規開発にはショートコードよりもカスタムブロックが推奨されています。
ただし、カスタムブロックの作成にはReactやJavaScriptの知識が必要なため、シンプルな機能であればショートコードで十分です。
最後に
今回は、ワードプレスで独自のショートコードを作成する方法を紹介しました。
最もシンプルなショートコードはfunctions.phpにたった3行のコードで作成でき、属性や囲み型にも対応させることで柔軟な表示が可能になります。
もしPHPに不安がある方は、ShortcoderやPost Snippetsなどのプラグインを使用することもできます。
プラグインを使用することで、管理画面からショートコードを作成できます。
当記事のサンプルコードを参考に、ぜひ独自のショートコード作成に挑戦してみてください。
コメント