WordPressでは、ショートコードという仕組みを使って、投稿や固定ページの本文中に任意のHTMLやPHPの出力を埋め込むことができます。特定の装飾や定型コンテンツ、広告ブロックなどを簡単に挿入したいときに便利です。
この記事では、オリジナルのショートコードを作成し、カスタムHTMLを出力する実装方法を紹介します。
ショートコードの基本構文
ショートコードは以下のような形で、投稿や固定ページの本文中に記述して使います。
[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;
}
まとめ
ショートコードを活用することで、WordPressの記事本文に柔軟なHTMLブロックを挿入することができます。デザインの統一やメンテナンス性の向上にもつながるため、積極的に活用していきましょう。
さらに発展的な使い方として、ショートコードで出力内容を動的に変えたり、条件分岐を取り入れることも可能です。繰り返し使う定型コンテンツがあるなら、ショートコード化を検討してみてください。