【WordPress】投稿本文内にショートコードでカスタムHTMLを挿入する方法

WordPressでは、ショートコードという仕組みを使って、投稿や固定ページの本文中に任意のHTMLやPHPの出力を埋め込むことができます。特定の装飾や定型コンテンツ、広告ブロックなどを簡単に挿入したいときに便利です。

この記事では、オリジナルのショートコードを作成し、カスタムHTMLを出力する実装方法を紹介します。

ショートコードの基本構文
functions.php にショートコードを登録する
出力されるHTMLの例
ショートコードに属性を追加して動的化する
CSSでデザインを整える
まとめ

ショートコードの基本構文

ショートコードは以下のような形で、投稿や固定ページの本文中に記述して使います。

[my_shortcode]

これがPHPで定義された内容に変換されて、HTMLとしてレンダリングされます。

functions.php にショートコードを登録する

カスタムショートコードは、テーマの functions.php に以下のように記述して定義します。

// カスタムHTMLを挿入するショートコード
function my_custom_box_shortcode() {
  ob_start();
  ?>
  <div class="custom-box">
    <h2>おすすめ情報</h2>
    <p>こちらはショートコードで挿入されたコンテンツです。</p>
    <a href="https://example.com" class="button">詳しく見る</a>
  </div>
  <?php
  return ob_get_clean();
}
add_shortcode('my_shortcode', 'my_custom_box_shortcode');

上記を設定すると、本文中に [my_shortcode] と書くだけで、指定したHTMLが出力されます。

出力されるHTMLの例

ショートコードが出力するHTMLは以下のようになります。

<div class="custom-box">
  <h2>おすすめ情報</h2>
  <p>こちらはショートコードで挿入されたコンテンツです。</p>
  <a href="https://example.com" class="button">詳しく見る</a>
</div>

このようにして、簡単に複数記事へ共通のHTMLブロックを埋め込むことができます。

ショートコードに属性を追加して動的化する

以下のように属性付きでショートコードを使用すると、より柔軟な表示が可能になります。

[my_shortcode title="お知らせ" url="https://example.com"]

このような属性に対応するように関数を修正します。

function my_custom_box_shortcode($atts) {
  $atts = shortcode_atts(array(
    'title' => 'おすすめ情報',
    'url' => '#',
  ), $atts);

  ob_start();
  ?>
  <div class="custom-box">
    <h2><?php echo esc_html($atts['title']); ?></h2>
    <p>こちらはショートコードで挿入されたコンテンツです。</p>
    <a href="<?php echo esc_url($atts['url']); ?>" class="button">詳しく見る</a>
  </div>
  <?php
  return ob_get_clean();
}
add_shortcode('my_shortcode', 'my_custom_box_shortcode');

こうすることで、同じショートコードでも記事ごとに内容を変えられるようになります。

CSSでデザインを整える

挿入されたHTMLにクラスを指定しておけば、テーマのCSSでデザインを整えることもできます。以下はシンプルなボックス装飾の例です。

.custom-box {
  background: #f4f4f4;
  border-left: 5px solid #0073aa;
  padding: 20px;
  margin: 20px 0;
}

.custom-box .button {
  display: inline-block;
  background: #0073aa;
  color: #fff;
  padding: 8px 16px;
  text-decoration: none;
  border-radius: 4px;
}