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

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

実装のポイント

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

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');
  

javascript にコードを追加

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

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

子テーマのディレクトリ構造

汎用CSS

.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;
}
  

（例 Lightning）

（例 Cocoon）

代用プラグイン

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

まとめ

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