WordPressのfunctions.phpで簡単にショートコードを自作！失敗しない基本と応用テクニック

WordPressを使っていると、「この部分をもっと効率よく呼び出せたらいいのに…」と思う瞬間はありませんか？たとえばボタンや囲み枠、よく使う定型文などを毎回コピペしていると、編集の手間も増えるし、デザインが崩れるリスクも出てきます。そんなときに便利なのが「ショートコード」です。ショートコードを使えば、投稿や固定ページにシンプルなコードを入力するだけで、複雑なレイアウトや機能を呼び出せます。

しかし、いざ「functions.phpにショートコードを追加してみよう」とすると、次のような不安や疑問を持つ方も多いはずです。

どんなコードを書けばいいのか分からない

functions.phpを編集してサイトが壊れたら怖い

ショートコードを入れたのに「そのまま文字列で表示される」

引数を付けて動的に使う方法や、ウィジェットでの呼び出し方が分からない

実はこれらの悩みは、多くのWordPress利用者が最初につまずくポイントです。ですが正しい手順と理解さえあれば、初心者でも安全にショートコードを自作できますし、プラグインに頼らずに軽量で柔軟なサイト運営が可能になります。

この記事では、functions.phpを使ったショートコードの基本から応用、さらにトラブル解決までを一通り解説します。実際に使えるコード例を交えながら解説するので、コピペして試しながら学ぶこともできます。

WordPressのカスタマイズを一歩進めたい方や、プラグインに頼らず軽量なサイト運営を目指したい方にぴったりの内容です。ぜひ読み進めて、自分だけの便利なショートコードを作り、日々のサイト運営をもっと快適にしてみてください。

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

ショートコードとは？WordPressの仕組みと活用メリット

ショートコードとは、WordPress特有の機能で、短い文字列を特定のコンテンツに自動変換する仕組みのことです。例えば、投稿本文に [contact_button] と書くだけで、事前に設定したお問い合わせボタンのHTMLが自動的に表示されます。

これは、WordPressが投稿内容を表示する際に、ショートコードを見つけると事前に登録された処理（PHP関数）を実行し、その結果で置き換えてくれるためです。つまり、複雑なHTMLやPHPコードを覚えなくても、簡単な文字列だけで高度な機能を呼び出せるのがショートコードの最大の特徴です。

プラグインを使わない自作ショートコードのメリット

多くのプラグインでもショートコード機能を提供していますが、functions.phpで自作することには以下のような明確なメリットがあります：

1. サイトの軽量化

プラグインは便利ですが、1つのプラグインで複数の機能を提供するため、使わない機能の分までサイトが重くなってしまいます。自作ショートコードなら、必要な機能だけを最小限のコードで実装できるため、サイトの表示速度向上に貢献します。

2. 保守性とセキュリティの向上

プラグインは開発者によるアップデートが必要ですが、開発が停止したり、脆弱性が発見されたりするリスクがあります。自作ショートコードなら、シンプルなコードのため脆弱性が発生しにくく、自分でメンテナンスできます。

3. 完全に自由なカスタマイズ

プラグインは決められた機能しか使えませんが、自作ならデザインから動作まで100%自分の思い通りにカスタマイズできます。サイトのブランディングに合わせた独自の機能を作り上げることも可能です。

functions.phpでショートコードを自作する手順【基本と注意点】

ショートコードの自作は、正しい手順を踏めば決して難しくありません。ただし、functions.phpはサイト全体に影響する重要なファイルのため、以下の手順を必ず守って作業してください。

事前準備：絶対に忘れてはいけない安全対策

ステップ1：完全バックアップの取得

作業前に、必ずサイト全体のバックアップを取ってください。WordPress管理画面の「ツール」→「エクスポート」でコンテンツをバックアップし、FTPソフトやレンタルサーバーの管理画面で、サイトファイル全体もバックアップしておきましょう。

ステップ2：子テーマの確認・作成

親テーマのfunctions.phpを直接編集すると、テーマアップデート時にすべてのカスタマイズが消えてしまいます。必ず子テーマを作成し、子テーマのfunctions.phpを編集してください。

子テーマがまだない場合は、以下の手順で作成します：

1./wp-content/themes/内に新しいフォルダを作成（例：your-theme-child）

2.そのフォルダ内にstyle.cssを作成し、以下の内容を記述：

/*
Theme Name: Your Theme Child
Description: 子テーマ
Template: your-parent-theme-folder-name
Version: 1.0
*/

@import url("../your-parent-theme-folder-name/style.css");

3.同じフォルダにfunctions.phpを作成（内容は後述）

実際のコード追加手順

ステップ3：functions.phpの編集

WordPress管理画面から「外観」→「テーマエディター」→子テーマの「functions.php」を選択
または、FTPソフトでサーバーに接続し、/wp-content/themes/子テーマ名/functions.phpを開く

ステップ4：安全なコードの記述

functions.phpにコードを追加する際は、以下の点に注意してください：

• ファイルの最後（?>がある場合はその前）にコードを追加
• 既存のコードは絶対に変更しない
• PHP開始タグ<?phpの後にコードを記述
• コードの前後に必ず空行を入れて見やすくする

<?php
// 既存のコードがあれば上に書かれている

// ここに新しいショートコードを追加
function my_custom_shortcode() {
    return '<p>これは自作ショートコードです！</p>';
}
add_shortcode('my_shortcode', 'my_custom_shortcode');
?>

add_shortcode() – Function | Developer.WordPress.org

Adds a new shortcode.

developer.wordpress.org

ステップ5：動作確認

1. ファイルを保存
2. 投稿やページで [my_shortcode] と入力
3. プレビューで正しく表示されるか確認

もしサイトが真っ白になってしまった場合は、すぐにFTPでfunctions.phpから追加したコードを削除してください。

コピペで使える簡単ショートコードテンプレート3選

初心者でもすぐに使える、3つの基本パターンのテンプレートをご紹介します。これらをベースに、自分なりにカスタマイズしてみてください。

パターン1：引数なしのシンプル版

最もシンプルな形のショートコードです。決まった内容を表示するだけの基本形です。

// シンプルなお問い合わせボタンを表示
function simple_contact_button() {
    // この部分の内容は自由に変更可能
    $output = '<div class="contact-btn">';
    $output .= '<a href="/contact/" class="btn btn-primary">お問い合わせはこちら</a>';
    $output .= '</div>';

    return $output;
}
// ショートコード名は変更可能（英数字とアンダースコアのみ）
add_shortcode('contact_btn', 'simple_contact_button');

使用方法： 投稿やページに [contact_btn] と記述

カスタマイズポイント：

• href="/contact/" の部分でリンク先を変更
• class="btn btn-primary" でCSSクラス名を変更
• ボタンのテキストを自由に変更
• add_shortcodeの第1引数でショートコード名を変更

パターン2：引数ありのカスタマイズ版

引数（パラメータ）を受け取って、動的にコンテンツを変更できる応用版です。

// 引数付きボタンショートコード
function custom_button_shortcode($atts) {
    // デフォルト値を設定（この値は変更可能）
    $atts = shortcode_atts(array(
        'url' => '/contact/',           // デフォルトのリンク先
        'text' => 'クリックしてください',      // デフォルトのボタンテキスト
        'color' => 'blue',             // デフォルトの色
        'size' => 'medium'             // デフォルトのサイズ
    ), $atts);

    // HTMLを生成（この部分も自由にカスタマイズ可能）
    $output = '<div class="custom-button">';
    $output .= '<a href="' . esc_url($atts['url']) . '" ';
    $output .= 'class="btn btn-' . esc_attr($atts['color']) . ' btn-' . esc_attr($atts['size']) . '">';
    $output .= esc_html($atts['text']);
    $output .= '</a></div>';

    return $output;
}
add_shortcode('custom_btn', 'custom_button_shortcode');

使用方法：

• 基本：[custom_btn]
• カスタム：[custom_btn url="/shop/" text="商品を見る" color="red" size="large"]

カスタマイズポイント：

• shortcode_atts配列で受け取れる引数とデフォルト値を設定
• 引数名は英数字で自由に設定可能
• esc_url(), esc_attr(), esc_html()でセキュリティ対策済み

パターン3：コンテンツを囲むタイプ

[box]ここにコンテンツ[/box]のように、コンテンツを囲んで装飾するタイプのショートコードです。

// コンテンツを囲むボックスショートコード
function content_box_shortcode($atts, $content = null) {
    // 引数の設定（変更可能）
    $atts = shortcode_atts(array(
        'type' => 'info',              // ボックスのタイプ（info, warning, success等）
        'title' => '',                 // ボックスのタイトル
        'color' => ''                  // カスタムカラー
    ), $atts);

    // コンテンツが空の場合の処理
    if (empty($content)) {
        return '';
    }

    // HTMLの生成（この部分は自由にカスタマイズ可能）
    $output = '<div class="content-box box-' . esc_attr($atts['type']) . '"';

    // カスタムカラーがある場合
    if (!empty($atts['color'])) {
        $output .= ' style="border-color: ' . esc_attr($atts['color']) . ';"';
    }

    $output .= '>';

    // タイトルがある場合
    if (!empty($atts['title'])) {
        $output .= '<h4 class="box-title">' . esc_html($atts['title']) . '</h4>';
    }

    // 囲まれたコンテンツを処理（ショートコードも実行される）
    $output .= '<div class="box-content">' . do_shortcode($content) . '</div>';
    $output .= '</div>';

    return $output;
}
add_shortcode('box', 'content_box_shortcode');

使用方法：

[box type="warning" title="注意事項"]
ここに注意事項を記述します。
**太字**や他のショートコードも使えます。
[/box]

カスタマイズポイント：

• $content = nullで囲まれたコンテンツを受け取り
• do_shortcode($content)で囲まれた内容にあるショートコードも実行
• CSSクラス名を変更してデザインをカスタマイズ
• 引数でさまざまなバリエーションを作成可能

これらのテンプレートを参考に、まずはそのままコピペして動作を確認し、その後で少しずつ自分なりにカスタマイズしてみてください。エラーが出た場合は、元のコードに戻してから1つずつ変更することで、問題箇所を特定しやすくなります。

実用的なショートコードの応用テクニックとトラブル対策

引数（パラメータ）を追加して動的コンテンツを表示する方法

基本のショートコードが作成できたら、次は引数を活用してより柔軟で実用的なショートコードを作成してみましょう。引数を使うことで、同じショートコードでも状況に応じて異なる表示を実現できます。

shortcode_atts()関数の基本的な使い方

shortcode_atts()は、ショートコードに渡された引数を安全に処理するWordPress標準の関数です。この関数を使うことで、引数が指定されなかった場合のデフォルト値設定や、予期しない引数の除外ができます。

shortcode_atts() – Function | Developer.WordPress.org

Combines user attributes with known attributes and fill in defaults when needed.

developer.wordpress.org

以下は、ボタンの色やサイズを自由に変更できるショートコードの具体例です：

function dynamic_button_shortcode($atts, $content = null) {
    // デフォルト値の配列を定義
    $defaults = array(
        'url'        => '#',              // リンク先URL
        'color'      => 'blue',           // ボタンの色
        'size'       => 'medium',         // ボタンのサイズ
        'target'     => '_self',          // リンクの開き方
        'icon'       => '',               // アイコン名（オプション）
        'rounded'    => 'false'           // 角丸にするかどうか
    );

    // 渡された引数とデフォルト値をマージ
    $atts = shortcode_atts($defaults, $atts, 'dynamic_btn');

    // ボタンテキストの処理（コンテンツが指定されていない場合のデフォルト）
    $button_text = !empty($content) ? $content : 'クリック';

    // CSSクラスの組み立て
    $css_classes = array('btn', 'btn-' . $atts['color'], 'btn-' . $atts['size']);

    // 角丸設定
    if ($atts['rounded'] === 'true') {
        $css_classes[] = 'btn-rounded';
    }

    // アイコンの処理
    $icon_html = '';
    if (!empty($atts['icon'])) {
        $icon_html = '<i class="icon-' . esc_attr($atts['icon']) . '"></i> ';
    }

    // HTMLの生成
    $output = sprintf(
        '<a href="%s" class="%s" target="%s">%s%s</a>',
        esc_url($atts['url']),
        esc_attr(implode(' ', $css_classes)),
        esc_attr($atts['target']),
        $icon_html,
        esc_html($button_text)
    );

    return $output;
}
add_shortcode('dynamic_btn', 'dynamic_button_shortcode');

使用例：

<!-- 基本的な使用 -->
[dynamic_btn url="/contact/"]お問い合わせ[/dynamic_btn]

<!-- すべての引数を指定 -->
[dynamic_btn url="https://example.com" color="red" size="large" target="_blank" icon="mail" rounded="true"]メールで連絡[/dynamic_btn]

<!-- 一部の引数のみ指定 -->
[dynamic_btn color="green" size="small"]詳細を見る[/dynamic_btn]

複数の引数を効果的に活用する応用例

より実用的な例として、投稿の情報を表示するショートコードを作成してみましょう：

function post_info_shortcode($atts) {
    $atts = shortcode_atts(array(
        'id'           => get_the_ID(),        // 投稿ID（現在の投稿がデフォルト）
        'show_title'   => 'true',              // タイトル表示の有無
        'show_date'    => 'true',              // 日付表示の有無
        'show_author'  => 'false',             // 著者表示の有無
        'show_excerpt' => 'false',             // 抜粋表示の有無
        'date_format'  => 'Y年n月j日',         // 日付フォーマット
        'excerpt_length' => 100                // 抜粋の文字数
    ), $atts, 'post_info');

    // 投稿データを取得
    $post = get_post($atts['id']);
    if (!$post) {
        return '<p>投稿が見つかりませんでした。</p>';
    }

    $output = '<div class="post-info-box">';

    // タイトル表示
    if ($atts['show_title'] === 'true') {
        $output .= '<h3 class="post-title">' . esc_html($post->post_title) . '</h3>';
    }

    // 日付表示
    if ($atts['show_date'] === 'true') {
        $post_date = get_the_date($atts['date_format'], $post->ID);
        $output .= '<p class="post-date">投稿日：' . $post_date . '</p>';
    }

    // 著者表示
    if ($atts['show_author'] === 'true') {
        $author_name = get_the_author_meta('display_name', $post->post_author);
        $output .= '<p class="post-author">著者：' . esc_html($author_name) . '</p>';
    }

    // 抜粋表示
    if ($atts['show_excerpt'] === 'true') {
        $excerpt = wp_trim_words($post->post_content, $atts['excerpt_length'], '...');
        $output .= '<div class="post-excerpt">' . wp_kses_post($excerpt) . '</div>';
    }

    $output .= '</div>';

    return $output;
}
add_shortcode('post_info', 'post_info_shortcode');

使用例：

<!-- 現在の投稿の情報を表示 -->
[post_info show_author="true" show_excerpt="true"]

<!-- 特定の投稿の情報を表示 -->
[post_info id="123" show_date="false" excerpt_length="50"]

投稿・固定ページ・ウィジェットでショートコードを呼び出す方法

作成したショートコードは、WordPress内のさまざまな場所で使用できます。それぞれの呼び出し方法を詳しく見ていきましょう。

ブロックエディタ（Gutenberg）での使用方法

WordPress 5.0以降のデフォルトエディタであるブロックエディタでは、以下の方法でショートコードを使用できます：

方法1：ショートコードブロックを使用

1. 投稿・固定ページ編集画面で「+」ボタンをクリック
2. 「ショートコード」で検索し、ショートコードブロックを選択
3. ブロック内に [your_shortcode] と入力
4. プレビューで動作確認

方法2：段落ブロック内に直接入力

1. 段落ブロックを選択
2. 直接 [your_shortcode] と入力
3. 他のテキストと組み合わせて使用可能

ブロックエディタでの注意点：

• ショートコードは投稿保存時に処理されるため、エディタ上では [shortcode_name] のまま表示されます
• プレビュー機能を使って実際の表示を確認してください
• 複雑なHTMLを含むショートコードは、「HTMLとして編集」モードで確認すると良いでしょう

クラシックエディタでの使用方法

クラシックエディタを使用している場合は、より直感的にショートコードを使用できます：

1. 投稿・固定ページ編集画面で、ショートコードを挿入したい位置にカーソルを置く
2. [your_shortcode] を直接入力
3. 「プレビュー」ボタンで動作確認

クラシックエディタの便利機能：

• ビジュアルエディタとテキストエディタを切り替えながら確認可能
• ショートコードの前後にスペースを入れることで、他のコンテンツと区別しやすくなります

ウィジェットでの使用方法

WordPress 4.9以降、ウィジェット内でもショートコードが自動的に実行されるようになりました：

テキストウィジェットの場合：

1. 「外観」→「ウィジェット」から「テキスト」ウィジェットを配置
2. ウィジェット設定で「ショートコードを自動実行」にチェック
3. テキスト欄に [your_shortcode] を入力

カスタムHTMLウィジェットの場合：

1. 「カスタムHTML」ウィジェットを配置
2. HTML欄に以下のようなコードを入力：

<div class="widget-shortcode">
    [your_shortcode]
</div>

PHPテンプレートファイル内での呼び出し

テーマのテンプレートファイル（header.php, footer.php, single.phpなど）内でショートコードを実行したい場合は、do_shortcode()関数を使用します：

// 基本的な使用方法
<?php echo do_shortcode('[your_shortcode]'); ?>

// 引数付きショートコードの場合
<?php echo do_shortcode('[custom_btn url="/contact/" color="red"]お問い合わせ[/custom_btn]'); ?>

// 変数を使った動的な呼び出し
<?php
$contact_url = get_permalink(get_page_by_path('contact'));
echo do_shortcode('[custom_btn url="' . $contact_url . '"]お問い合わせ[/custom_btn]');
?>

// 条件分岐と組み合わせた使用例
<?php if (is_single()): ?>
    <div class="single-post-buttons">
        <?php echo do_shortcode('[post_info show_author="true"]'); ?>
    </div>
<?php endif; ?>

do_shortcode()使用時の注意点：

• 必ず echo と組み合わせて使用する
• ショートコード文字列内でPHP変数を使う場合は、適切にエスケープ処理を行う
• 複数のショートコードを連続で実行する場合は、それぞれを個別にdo_shortcode()で処理する

条件分岐やカスタムフィールドを使った高度な表示制御

ショートコードの真価は、WordPressの豊富な標準関数と組み合わせることで発揮されます。条件分岐やカスタムフィールドを活用した応用例をご紹介します。

ログインユーザー限定コンテンツの表示

会員制サイトやプレミアムコンテンツに便利な、ログインユーザーのみに表示するショートコードです：

function members_only_shortcode($atts, $content = null) {
    $atts = shortcode_atts(array(
        'role'          => '',                    // 特定の権限のみ（admin, editor等）
        'login_message' => 'ログインが必要です',      // 未ログイン時のメッセージ
        'no_permission' => 'アクセス権限がありません', // 権限不足時のメッセージ
        'redirect'      => ''                     // ログイン後のリダイレクト先
    ), $atts, 'members_only');

    // ログインチェック
    if (!is_user_logged_in()) {
        $login_url = wp_login_url();

        // リダイレクト先が指定されている場合
        if (!empty($atts['redirect'])) {
            $login_url = wp_login_url($atts['redirect']);
        } else {
            $login_url = wp_login_url(get_permalink());
        }

        return '<div class="members-only-message">' .
               '<p>' . esc_html($atts['login_message']) . '</p>' .
               '<p><a href="' . esc_url($login_url) . '">ログインページへ</a></p>' .
               '</div>';
    }

    // 特定の権限チェック
    if (!empty($atts['role']) && !current_user_can($atts['role'])) {
        return '<div class="no-permission-message">' .
               '<p>' . esc_html($atts['no_permission']) . '</p>' .
               '</div>';
    }

    // 権限があるユーザーにはコンテンツを表示
    return '<div class="members-content">' . do_shortcode($content) . '</div>';
}
add_shortcode('members_only', 'members_only_shortcode');

使用例：

[members_only]
この内容はログインユーザーのみ表示されます。
[/members_only]

[members_only role="administrator" login_message="管理者のみアクセス可能です"]
管理者限定の重要な情報
[/members_only]

カスタムフィールドの値を表示するショートコード

WordPressのカスタムフィールド（カスタムメタ）の値を簡単に表示できるショートコードです：

function custom_field_shortcode($atts) {
    $atts = shortcode_atts(array(
        'field'    => '',                    // カスタムフィールド名
        'post_id'  => get_the_ID(),         // 投稿ID（現在の投稿がデフォルト）
        'default'  => '',                    // 値が空の場合のデフォルト表示
        'before'   => '',                    // 値の前に表示するテキスト
        'after'    => '',                    // 値の後に表示するテキスト
        'format'   => 'text'                 // 表示フォーマット（text, url, image, date）
    ), $atts, 'custom_field');

    // フィールド名が指定されていない場合
    if (empty($atts['field'])) {
        return '<span class="error">フィールド名が指定されていません</span>';
    }

    // カスタムフィールドの値を取得
    $field_value = get_post_meta($atts['post_id'], $atts['field'], true);

    // 値が空の場合はデフォルト値を使用
    if (empty($field_value)) {
        if (!empty($atts['default'])) {
            $field_value = $atts['default'];
        } else {
            return ''; // デフォルト値もない場合は何も表示しない
        }
    }

    // フォーマットに応じて出力を調整
    switch ($atts['format']) {
        case 'url':
            $output = '<a href="' . esc_url($field_value) . '" target="_blank">' . esc_html($field_value) . '</a>';
            break;

        case 'image':
            $output = '<img src="' . esc_url($field_value) . '" alt="' . esc_attr($atts['field']) . '" class="custom-field-image">';
            break;

        case 'date':
            // 日付フォーマットの変換（Y-m-d → Y年n月j日）
            $date_obj = DateTime::createFromFormat('Y-m-d', $field_value);
            if ($date_obj) {
                $output = $date_obj->format('Y年n月j日');
            } else {
                $output = esc_html($field_value);
            }
            break;

        default: // text
            $output = esc_html($field_value);
            break;
    }

    // 前後のテキストを追加
    return $atts['before'] . $output . $atts['after'];
}
add_shortcode('custom_field', 'custom_field_shortcode');

使用例：

<!-- 基本的な使用 -->
[custom_field field="price"]

<!-- 前後にテキストを追加 -->
[custom_field field="price" before="価格：" after="円（税込）"]

<!-- URLとして表示 -->
[custom_field field="official_site" format="url"]

<!-- 日付フォーマットで表示 -->
[custom_field field="event_date" format="date" before="開催日："]

<!-- デフォルト値付き -->
[custom_field field="subtitle" default="サブタイトルなし"]

投稿タイプや投稿ステータスに応じた条件分岐

より高度な条件分岐を使ったショートコードの例です：

function conditional_content_shortcode($atts, $content = null) {
    $atts = shortcode_atts(array(
        'post_type'    => '',              // 特定の投稿タイプでのみ表示
        'category'     => '',              // 特定のカテゴリーでのみ表示
        'tag'          => '',              // 特定のタグでのみ表示
        'page_template' => '',             // 特定のページテンプレートでのみ表示
        'user_role'    => '',              // 特定のユーザー権限でのみ表示
        'device'       => ''               // 特定のデバイスでのみ表示（mobile, tablet, desktop）
    ), $atts, 'conditional');

    // 投稿タイプの条件チェック
    if (!empty($atts['post_type']) && !is_singular($atts['post_type'])) {
        return '';
    }

    // カテゴリーの条件チェック
    if (!empty($atts['category']) && !has_category($atts['category'])) {
        return '';
    }

    // タグの条件チェック
    if (!empty($atts['tag']) && !has_tag($atts['tag'])) {
        return '';
    }

    // ページテンプレートの条件チェック
    if (!empty($atts['page_template']) && !is_page_template($atts['page_template'])) {
        return '';
    }

    // ユーザー権限の条件チェック
    if (!empty($atts['user_role']) && !current_user_can($atts['user_role'])) {
        return '';
    }

    // デバイス判定（簡易版）
    if (!empty($atts['device'])) {
        $user_agent = $_SERVER['HTTP_USER_AGENT'];
        $is_mobile = preg_match('/(iPhone|Android.*Mobile)/i', $user_agent);
        $is_tablet = preg_match('/(iPad|Android(?!.*Mobile))/i', $user_agent);

        if ($atts['device'] === 'mobile' && !$is_mobile) return '';
        if ($atts['device'] === 'tablet' && !$is_tablet) return '';
        if ($atts['device'] === 'desktop' && ($is_mobile || $is_tablet)) return '';
    }

    // すべての条件をクリアした場合のみコンテンツを表示
    return '<div class="conditional-content">' . do_shortcode($content) . '</div>';
}
add_shortcode('conditional', 'conditional_content_shortcode');

使用例：

[conditional post_type="product"]
この内容は商品ページでのみ表示されます。
[/conditional]

[conditional category="news" user_role="subscriber"]
ニュースカテゴリーの登録ユーザー向け内容
[/conditional]

[conditional device="mobile"]
スマートフォンでのみ表示される内容
[/conditional]

これらの応用テクニックを組み合わせることで、非常に柔軟で強力なショートコードを作成できます。最初は簡単なものから始めて、徐々に複雑な条件分岐や機能を追加していくことをお勧めします。

★☆★　VPSなら【ConoHa】で決まり！　★☆★

トラブル解決！ショートコードが表示されない・動かない時の対処法

ショートコードを作成・使用していると、「思った通りに動かない」「そのまま表示されてしまう」といったトラブルに遭遇することがあります。このセクションでは、よくある問題とその解決策を具体的に解説します。

「そのまま表示される」原因と解決策

ショートコードが [shortcode_name] のまま画面に表示されてしまう場合、いくつかの原因が考えられます。以下の順序で確認していきましょう。

原因1：全角文字の混入

最も多い原因がこれです。ショートコードは必ず半角の角括弧[ ]を使用する必要があります。

<!-- ❌ 間違い：全角の角括弧 -->
［contact_btn］

<!-- ❌ 間違い：左だけ全角 -->
［contact_btn]

<!-- ✅ 正しい：半角の角括弧 -->
[contact_btn]

解決方法：

1. ショートコードを一度削除
2. 半角英数字モードに切り替え
3. キーボードの [ ] キーで角括弧を入力し直す

確認のコツ：

• コピー&ペーストではなく、直接キーボードで入力する
• 日本語入力（ひらがな・カタカナモード）がOFFになっているか確認
• 特に、他のサイトからコピーしたショートコードは全角混入の可能性が高い

原因2：ショートコード名のスペルミス

登録したショートコード名と、実際に使用するショートコード名が一致していない場合があります。

// functions.phpで登録した名前
add_shortcode('contact_button', 'my_contact_function');

// ❌ 間違った使用方法
[contact_btn]  // 'button' が 'btn' になっている

// ✅ 正しい使用方法
[contact_button]

解決方法：

1. functions.phpでadd_shortcode()の第1引数を確認
2. 実際に投稿で使用している名前と照合
3. アンダースコア（_）とハイフン（-）の間違いも確認

原因3：ショートコードが正しく登録されていない

functions.phpにコードを書いても、正しく登録されていない場合があります。

よくある間違い：

// ❌ add_shortcode()の呼び出しを忘れている
function my_shortcode_function() {
    return 'Hello World!';
}
// add_shortcode()がない

// ❌ 関数名とショートコード名の対応ミス
function my_function() {
    return 'Hello World!';
}
add_shortcode('my_shortcode', 'wrong_function_name'); // 存在しない関数名

// ✅ 正しい書き方
function my_shortcode_function() {
    return 'Hello World!';
}
add_shortcode('my_shortcode', 'my_shortcode_function');

解決方法：

• 関数名が正しく定義されているか確認
• add_shortcode()が正しく呼び出されているか確認
• 関数名のスペルミスがないか確認

原因4：エディタの設定問題

使用しているエディタによって、ショートコードの処理が無効になっている場合があります。

ブロックエディタ（Gutenberg）の場合：

• 「段落」ブロック内にショートコードを入力していることを確認
• または「ショートコード」専用ブロックを使用
• 「HTMLとして編集」モードではショートコードは実行されない

クラシックエディタの場合：

• 「ビジュアル」モードと「テキスト」モード、どちらでもショートコードは動作します
• ただし、HTMLタグ内にショートコードを書いている場合は動作しない可能性があります

<!-- ❌ HTMLタグの属性内では動作しない -->
<div class="[my_shortcode]">content</div>

<!-- ✅ HTMLタグの外では正常に動作 -->
<div class="my-class">[my_shortcode]</div>

原因5：キャッシュプラグインの影響

キャッシュプラグインを使用している場合、古いキャッシュが表示されている可能性があります。

解決方法：

1. 使用中のキャッシュプラグインの管理画面を開く
2. 「キャッシュを削除」や「キャッシュクリア」を実行
3. ブラウザの強制再読み込み（Ctrl+F5 または Cmd+R）を実行

主要キャッシュプラグインでの削除方法：

• WP Rocket: 管理バーの「WP Rocket」→「Clear cache」
• W3 Total Cache: 「Performance」→「Dashboard」→「empty all caches」
• WP Super Cache: 「設定」→「WP Super Cache」→「Delete Cache」

エラーでサイトが真っ白に？正しいデバッグ方法

ショートコード作成時に最も恐れられるのが、サイトが真っ白になってしまう現象です。これはPHPエラーが発生した際に起こりますが、冷静に対処すれば必ず復旧できます。

緊急対応：まずはサイトを復旧させる

ステップ1：FTPでの緊急復旧

1. FTPソフトで自分のサーバーにアクセス
2. /wp-content/themes/使用中のテーマ名/functions.phpを開く
3. 最後に追加したショートコードのコードをすべて削除
4. ファイルを保存してサイトにアクセス

ステップ2：バックアップからの復旧

FTPが使えない場合や、どの部分が問題か分からない場合：

1. レンタルサーバーの管理画面にログイン
2. ファイルマネージャー機能を使用
3. 事前に取得したバックアップファイルでfunctions.phpを上書き

ステップ3：テーマの一時変更

上記の方法でも復旧しない場合：

1. WordPress管理画面にアクセスできる場合：「外観」→「テーマ」で別のテーマに変更
2. 管理画面にアクセスできない場合：FTPで/wp-content/themes/フォルダ名を一時的に変更

PHPエラーログの確認方法

サイトが復旧したら、何が原因だったかを調べることが重要です。

方法1：レンタルサーバーの管理画面で確認

多くのレンタルサーバーでは、管理画面でPHPエラーログを確認できます：

• さくらのレンタルサーバー: サーバコントロールパネル→「ログ」→「エラーログ」
• エックスサーバー: サーバーパネル→「PHP」→「エラーログ」
• ロリポップ: ユーザー専用ページ→「ログ」→「エラーログ」

方法2：FTPでエラーログファイルを確認

1. FTPでサイトのルートディレクトリにアクセス
2. error_logファイルまたはlogsフォルダ内のエラーログを確認
3. ファイルをダウンロードしてテキストエディタで開く

エラーログの読み方例：

[20-Aug-2025 10:30:15 UTC] PHP Fatal error: Call to undefined function my_wrong_function() in /home/user/public_html/wp-content/themes/your-theme/functions.php on line 25

この場合：

• my_wrong_function()という存在しない関数を呼び出している
• functions.phpの25行目でエラー発生
• 「Fatal error」は致命的エラーで、サイトが停止する

段階的デバッグの具体的手順

エラーの原因を特定するための、安全で効率的なデバッグ方法です。

ステップ1：コードの段階的復元

// 1. まず最小限のコードから始める
function test_shortcode() {
    return 'テスト成功';
}
add_shortcode('test', 'test_shortcode');

// 2. 動作確認後、少しずつ機能を追加
function test_shortcode() {
    $output = 'テスト成功';
    return $output;
}
add_shortcode('test', 'test_shortcode');

// 3. さらに引数処理を追加
function test_shortcode($atts) {
    $atts = shortcode_atts(array(
        'text' => 'デフォルトテキスト'
    ), $atts);

    return $atts['text'];
}
add_shortcode('test', 'test_shortcode');

ステップ2：一時的なデバッグ出力

function debug_shortcode($atts) {
    // デバッグ用の出力（本番では削除する）
    $debug_info = '<pre>Debug Info: ' . print_r($atts, true) . '</pre>';

    $atts = shortcode_atts(array(
        'text' => 'デフォルト'
    ), $atts);

    $output = $debug_info; // デバッグ情報を表示
    $output .= '<p>' . $atts['text'] . '</p>';

    return $output;
}
add_shortcode('debug_test', 'debug_shortcode');

ステップ3：WordPress標準関数の動作確認

function wp_function_test() {
    $output = '<div>';

    // 各関数が正しく動作するかテスト
    $output .= '<p>現在のURL: ' . get_permalink() . '</p>';
    $output .= '<p>投稿ID: ' . get_the_ID() . '</p>';
    $output .= '<p>ログイン状況: ' . (is_user_logged_in() ? 'ログイン中' : '未ログイン') . '</p>';

    $output .= '</div>';
    return $output;
}
add_shortcode('wp_test', 'wp_function_test');

よくあるPHPエラーと対処法

1. Parse error（構文エラー）

Parse error: syntax error, unexpected '}' in functions.php on line 15

原因： セミコロン;の忘れ、括弧{}の対応ミス
対処： エラー行周辺の構文を確認

2. Fatal error: Call to undefined function

Fatal error: Call to undefined function non_existent_function()

原因： 存在しない関数を呼び出している
対処： 関数名のスペルを確認、必要なプラグインが有効になっているか確認

3. Warning: Cannot modify header information

Warning: Cannot modify header information - headers already sent

原因： PHP開始タグ<?phpの前に余計な空白や改行がある
対処： functions.phpの先頭に余計な文字がないか確認

ショートコードを子テーマで管理する重要性

ショートコードの管理において、子テーマの使用は絶対に欠かせません。その理由と正しい管理方法を詳しく解説します。

親テーマ直接編集のリスク

親テーマのfunctions.phpを直接編集することの危険性を具体的に説明します。

リスク1：テーマアップデートでコードが消失

// 親テーマのfunctions.phpに追加したコード
function my_custom_shortcode() {
    return '重要なカスタムコード';
}
add_shortcode('important', 'my_custom_shortcode');

// テーマアップデート後...
// 上記のコードは完全に削除され、復旧不可能

多くのWordPressテーマは定期的にアップデートされます。セキュリティ修正や新機能追加のたびに、親テーマのファイルは完全に上書きされるため、カスタマイズしたコードはすべて失われます。

リスク2：サイト機能の突然の停止

• ショートコードを使用している投稿・ページで [shortcode_name] がそのまま表示される
• ユーザーに「サイトが壊れている」という印象を与える
• 多数のページで使用している場合、修正作業が膨大になる

リスク3：復旧作業の困難さ

• バックアップがない場合、一からコードを書き直す必要がある
• 複雑なショートコードほど、復旧に時間がかかる
• 本番サイトでの作業になるため、さらにリスクが高い

子テーマの正しい作成手順

ステップ1：子テーマフォルダの作成

FTPまたはレンタルサーバーのファイルマネージャーで、以下の場所に新しいフォルダを作成：

/wp-content/themes/your-parent-theme-child/

フォルダ名の付け方のポイント：

• 親テーマ名にchildを付ける
• 例：twentytwentyfour→twentytwentyfour-child
• 英数字とハイフンのみ使用（日本語不可）

ステップ2：style.cssの作成

子テーマフォルダ内にstyle.cssを作成し、以下の内容を記述：

/*
Theme Name: Your Parent Theme Child
Description: 親テーマ「Your Parent Theme」の子テーマ
Template: your-parent-theme-folder-name
Version: 1.0.0
*/

/* この下に独自のCSSを記述 */

重要な注意点：

• Template:の値は、親テーマのフォルダ名を正確に記述
• Theme Name:は管理画面で表示される名前（自由に設定可能）

ステップ3：functions.phpの作成

子テーマフォルダ内にfunctions.phpを作成：

<?php
// 子テーマのfunctions.php

// 親テーマのスタイルシートを読み込み
function child_theme_enqueue_styles() {
    wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css');
    wp_enqueue_style('child-style', get_stylesheet_directory_uri() . '/style.css', array('parent-style'));
}
add_action('wp_enqueue_scripts', 'child_theme_enqueue_styles');

// ここから下にカスタムショートコードを追加
function child_theme_custom_shortcode() {
    return '<p>子テーマで作成したショートコードです</p>';
}
add_shortcode('child_shortcode', 'child_theme_custom_shortcode');
?>

子テーマでのショートコード管理のベストプラクティス

1. 命名規則の統一

// プレフィックスを使用して名前の衝突を避ける
function mytheme_contact_button() {
    return '<button>お問い合わせ</button>';
}
add_shortcode('mytheme_contact', 'mytheme_contact_button');

function mytheme_price_display($atts) {
    // 価格表示のロジック
}
add_shortcode('mytheme_price', 'mytheme_price_display');

2. コメントによる管理

<?php
/*
===========================================
カスタムショートコード集
作成日：2025-01-15
最終更新：2025-08-01
===========================================
*/

/*
-------------------------------------------
お問い合わせボタン
使用方法: [contact_btn]
作成日: 2025-01-15
-------------------------------------------
*/
function mytheme_contact_button() {
    return '<a href="/contact/" class="contact-btn">お問い合わせ</a>';
}
add_shortcode('contact_btn', 'mytheme_contact_button');

/*
-------------------------------------------
価格表示
使用方法: [price amount="1000" tax="true"]
作成日: 2025-01-20
更新履歴: 2025-01-25 税込表示オプション追加
-------------------------------------------
*/
function mytheme_price_display($atts) {
    // 価格表示のコード
}
add_shortcode('price', 'mytheme_price_display');
?>

3. 機能別ファイル分割（上級者向け）

大量のショートコードを管理する場合は、ファイルを分割することも可能です：

// 子テーマのfunctions.php
<?php
// スタイルシート読み込み
function child_theme_enqueue_styles() {
    wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css');
    wp_enqueue_style('child-style', get_stylesheet_directory_uri() . '/style.css', array('parent-style'));
}
add_action('wp_enqueue_scripts', 'child_theme_enqueue_styles');

// カスタムショートコードファイルを読み込み
require_once get_stylesheet_directory() . '/includes/shortcodes.php';
?>

// /includes/shortcodes.php
<?php
// ショートコード専用ファイル

function mytheme_contact_button() {
    return '<a href="/contact/" class="contact-btn">お問い合わせ</a>';
}
add_shortcode('contact_btn', 'mytheme_contact_button');

// その他のショートコードをここに記述
?>

4. バックアップとバージョン管理

• 子テーマフォルダ全体を定期的にバックアップ
• functions.phpの変更前には必ずコピーを作成
• 重要な変更の際はコメントで変更履歴を記録

/*
変更履歴:
2025-01-15: 初回作成
2025-02-20: 価格表示ショートコード追加
2025-02-25: 税込表示オプション追加
2025-03-10: セキュリティ向上のためエスケープ処理追加
*/

子テーマを使用することで、テーマアップデートの心配をすることなく、安心してショートコードのカスタマイズを続けることができます。初期設定は少し手間ですが、長期的な運用を考えると必要不可欠な作業です。

よくある質問（FAQ）

まとめ

この記事では、WordPressのfunctions.phpを使ったショートコードの自作方法について、基本から応用まで詳しく解説してきました。プラグインに頼らずオリジナルのショートコードを作成することで、サイトの軽量化と独自性の向上を実現できることがお分かりいただけたと思います。

ショートコードは一見難しそうに感じるかもしれませんが、基本的な仕組みを理解し、安全な手順を踏めば、誰でも確実に作成できる機能です。まずは簡単なテンプレートをコピペして動作確認を行い、そこから少しずつカスタマイズを加えていくことで、確実にスキルアップしていけるでしょう。

ショートコードは、WordPressサイトをより魅力的で機能的にするための強力なツールです。この記事で紹介したテクニックを活用することで、訪問者にとって価値のあるコンテンツを効率的に提供できるようになります。また、SEOの観点からも、適切に構造化されたHTMLを出力するショートコードは、検索エンジンからの評価向上に貢献します。