任意のHTMLブロックをショートコードで挿入する方法

この記事では、WordPressに[ショートコード]を追加して、任意のHTMLブロックを記事本文に挿入する方法を解説します。
よく使う広告バナー、定型文、注意ボックスなどをショートコード化すると、管理がとても楽になります。

1 実装のポイント

• functions.php にショートコードの関数を追加
• 記事本文内でショートコード [mybox] のように呼び出せる
• CSSで自由に装飾可能
• JavaScript を組み合わせることも可能

2 functions.php にコードを追加

//-------------------------------------------
// ショートコードで任意のHTMLブロックを挿入する
//-------------------------------------------
function my_html_box_shortcode($atts, $content = null) {
    $atts = shortcode_atts(array(
        'title' => 'お知らせ',
    ), $atts, 'mybox');

    $html  = '<div class="mybox">';
    $html .= '<h3 class="mybox-title">' . esc_html($atts['title']) . '</h3>';
    $html .= '<div class="mybox-content">' . do_shortcode($content) . '</div>';
    $html .= '</div>';

    return $html;
}
add_shortcode('mybox', 'my_html_box_shortcode');

function enqueue_mybox_script() {
    wp_enqueue_script(
        'mybox-toggle',
        get_template_directory_uri() . '/js/mybox.js',
        array('jquery'),
        '1.0',
        true
    );
}
add_action('wp_enqueue_scripts', 'enqueue_mybox_script');
  

3 javascript にコードを追加

ファイル名：mybox.js
保存先：wp-content/themes/your-child-theme/js/mybox.js

jQuery(function($){
  $('.mybox-title').on('click', function(){
    $(this).next('.mybox-content').slideToggle();
  });
});
  

3.1 ディレクトリ構造

記事内で表示する場合：

[mybox title="任意のタイトル"]任意の文章[/mybox]
  

4 汎用CSS

/* -----------------------------
 * ショートコードで任意のHTMLブロックを挿入する
 * ----------------------------- */

/* ブロック全体のスタイル */
.mybox {
    border: 2px solid #69f;         /* 青系の枠線 */
    padding: 15px;                  /* 内側余白 */
    margin: 20px 0;                 /* 上下の余白 */
    border-radius: 6px;             /* 角丸 */
    background: #e1ebff;            /* 薄い青背景 */
}

/* ブロックタイトル部分 */
.mybox-title {
    font-weight: bold;               /* 太字 */
    color: #36f;                     /* 濃い青色 */
    margin: 0 0 10px;                /* 下に余白 */
    cursor: pointer;                 /* ホバー時に手の形カーソル */
}

/* ブロック内容部分 */
.mybox-content {
    font-size: 0.95em;               /* 少し小さめの文字サイズ */
    line-height: 1.6;                /* 行間 */
}
  

5 完成イメージ

（例 Lightning）

6 代用プラグイン

• Shortcoder — ショートコードで任意のHTML/JS/CSSを管理できる
• Reusable Blocks Extended — 再利用ブロックをショートコードで呼び出せる

7 まとめ

ショートコードを活用することで、よく使うパーツを記事内に簡単に呼び出せます。
デザインはCSS、動きはJavaScriptで自由にカスタマイズ可能。
小規模ならfunctions.phpに直接、大規模なら専用プラグイン化するのがオススメです。