徹底解説！WordPressでショートコードを自作する方法（サンプルコード付き）
みなさんこんにちは！エンジニアの高澤です！
今回はWordPressでショートコードを自作する方法について解説していきたいと思います。
ショートコードはWordPressの代表的な機能のうちの一つといっても過言ではなく、エンジニアでない方のサイトの管理運用を手助けしてくれる非常に優れた機能です。
また、エンジニアによる開発においても扱ったり自作しなければいけない場面など多々あるかと思いますので、よろしければぜひ当記事をお役立ていただき、ショートコード習得の一つの材料にしていただけましたら幸いです。
ショートコードとは
ショートコード（Shortcode）とは、PHPで実装されたシステム処理や画像などの特定の機能やコンテンツを、「[sample_shortcode]」のようなブラケット（括弧）の記号で呼び出すための仕組みです。
[sample_shortcode]WordPressの投稿管理画面のコンテンツエディタ（本文エディタ）に埋め込んだり、PHPテンプレートファイルにdo_shortcode()関数でショートコードを呼び出したりして使用します。（※後ほど詳しくご説明いたします）
通常、WordPressのコンテンツエディタで記事やページを作成する際、ビジュアルエディタやテキストエディタを介して文章やコードを入力します。
しかし、ショートコードを使うことで、特定の機能やコンテンツを簡単に挿入できます。
例えば、YouTubeの動画を埋め込むためのショートコードは以下のように記述します。
[youtube]動画のURL[/youtube] このようなショートコードをWordPressの投稿やページに挿入することで、動画が表示されるようになります。
ショートコードは、プラグインやテーマによって提供されることが一般的です。WordPressの開発者は、独自の機能やコンテンツをショートコードとして実装することで、ユーザーが柔軟かつ簡単にそれらの機能を利用できるようにします。
ショートコードのメリット
ここではショートコードのメリットについて解説いたします。
ショートコードのメリットは以下の内容になります。
- 再利用性が高い
- 一括修正ができたりなど更新が簡単
- エンジニアでなくても簡単に扱える
それぞれ解説していきます。
再利用性が高い
ショートコードのまず最大のメリットとしては「再利用性が高い」といったことがいえるかと思います。
ショートコードは一度定義して実装したら何回でも流用して使い回すことが可能です。
一括修正ができたりなど更新が簡単
ショートコードは特性として、一つのショートコードをサイト内の多くの箇所で利用されることが多いですが、ショートコードは実装元のコードを修正すれば利用されたすべての箇所にあるショートコードの内容が修正されます。
例えば、100件以上ある記事ページに設置したショートコードのバナー画像の画像を差し替えた場合、その100件以上のバナー画像が一括変更されます。
この点で更新が非常に簡単で管理運用の効率化につながります。
エンジニアでなくても簡単に扱える
ショートコードは「[sample_shortcode]」のようなブラケット（括弧）の記号なので、エンジニアでない方でもわかりやすく簡単に扱えるかと思います。
ショートコードのコンテンツを追加したり削除したりする際も、投稿管理画面のコンテンツエディタにショートコードを挿入したり削除したりするだけで済むので、操作も簡単に行えます。
ショートコードを自作するメリット
ショートコード自体のメリットに次に、ショートコードを「自作」することのメリットを解説しておきたいと思います。
ショートコードを自作できることのメリットは以下になります。
- プラグイン開発でショートコード機能を実装できる
- WordPressでの記事投稿など管理運用が効率化できる
- 高度な自作システムを非エンジニアでも簡単に扱えるように実装できる
まだまだ自作のメリットはあるかと思いますが、筆者がWordPress構築において頻繁にショートコードの実装の機会が多々あったことは事実です。
これらのメリットをしっかり把握した上で、ショートコードを実装しましょう。
ショートコードの種類
ショートコードにはいくつか種類がありますので、ここで解説させていただきます。
- 単独型ショートコード
- 包み込み型ショートコード
それぞれ解説させていただきます。
単独型ショートコード
単独型ショートコードとは、以下のように単一のタグとして使用され、属性や入れ子構造を持たないショートコードのことをいいます。
[sample_shortcode]一番基本的でシンプルなショートコードで、コンテンツエディタやdo_shortcode()関数などで呼び出すことでPHPのシステム処理や画像バナーなどを出力することが可能です。
バナー画像やCSSでレイアウトされたテキストなど何かしらの要素をシンプルに呼び出すときに適しています。
ショートコードの属性
また、ショートコードのカスタマイズを行えば以下のように単独型ショートコードに属性を付与することができます。
[shortcode attribute1="value1" attribute2="value2"]上記のように、ショートコードの名前の後にスペースを開け、属性とその値を「属性="値"」の形式で記述します。
これにより、ショートコードの動作や表示を細かく制御することができます。
包み込み型ショートコード
包み込み型ショートコードとは、以下のように開始タグと終了タグで囲まれたコンテンツを持つショートコードのことをいいます。
[shortcode]サンプルテキストサンプルテキスト[/shortcode]開始タグと終了タグの間に文字などの特定のコンテンツを挿入し、ショートコードの処理が実装されている裏側の処理によって挿入したデータを加工して出力します。
テキストデータなど何かしらの要素をPHPなどによって処理して加工した上で呼び出すときに適しています。
ショートコードの実装方法
それでは早速ショートコードの実装方法について解説していきたいと思います。
単独型ショートコードの実装
まずは基本の単独型ショートコードを実装していきます。
以下のコードをfunctions.phpにコピー＆ペーストしてください。
<?php
// ショートコード関数の定義
function my_custom_shortcode_function() {
return 'これはカスタムショートコードのテストです。';
}
// ショートコードを登録
add_shortcode('my_shortcode', 'my_custom_shortcode_function');上記のコードをペーストして保存し、管理画面ページを更新したら以下のショートコードが利用可能となります。
[my_shortcode]実装が完了したら表示させるところまで確認してみましょう。
以下のようの投稿編集管理画面のエディタから実装したショートコードを設定して保存しましょう。
出力されるショートコードは下図のようなイメージです。
上図のように「これはカスタムショートコードのテストです。」という文字がリターンされてページ上に表示されているのが確認できるかと思います。
これで基本の単独型ショートコードを実装は完了です。
属性付きのショートコードの実装
次に単独型ショートコードを拡張したショートコードである属性付きのショートコードを実装していきます。
以下のコードをfunctions.phpにコピー＆ペーストしてください。
<?php
// 属性を持つショートコード関数の定義
function my_custom_shortcode_function($atts) {
// デフォルトの属性値を設定する
$atts = shortcode_atts(
array(
'name' => 'World',
),
$atts,
'my_shortcode'
);
// ショートコードが呼び出されたときに実行する処理
$name = $atts['name'];
return 'Hello, ' . $name . '!';
}
// ショートコードを登録
add_shortcode('my_shortcode', 'my_custom_shortcode_function');上記のコードをペーストして保存し、管理画面ページを更新したら以下のショートコードが利用可能となります。
[my_shortcode name="サンプルテキスト"]実装が完了したら表示させるところまで確認してみましょう。
以下のようの投稿編集管理画面のエディタから実装したショートコードを設定して保存しましょう。
出力されるショートコードは下図のようなイメージです。
上図のように「Hello, サンプルテキスト!」という文字がリターンされてページ上に表示されているのが確認できるかと思います。
これで属性付きのショートコードの実装は完了です。
包み込み型のショートコードの実装
次に包み込み型のショートコードを実装していきます。
以下のコードをfunctions.phpにコピー＆ペーストしてください。
<?php
// 開始タグと終了タグで囲まれたショートコードの定義
function my_custom_shortcode_function($atts, $content = null) {
// ショートコードの処理やコンテンツの変換を行う
return '<div style="background:#eee;">' . $content . '</div>';
}
add_shortcode('my_shortcode', 'my_custom_shortcode_function');上記のコードをペーストして保存し、管理画面ページを更新したら以下のショートコードが利用可能となります。
[my_shortcode]サンプルテキストサンプルテキスト[/my_shortcode] 実装が完了したら表示させるところまで確認してみましょう。
以下のようの投稿編集管理画面のエディタから実装したショートコードを設定して保存しましょう。
出力されるショートコードは下図のようなイメージです。
上図のように薄いグレーの背景がある「サンプルテキストサンプルテキスト」という文字がリターンされてページ上に表示されているのが確認できるかと思います。
これで包み込み型のショートコードの実装は完了です。
実用的な実装コード集
ここまでショートコードの実装の基本の解説をしてきましたが、次は実用的なショートコードの実装サンプル集をご紹介していきたいと思います。
具体的には以下の内容になります。
- バナー画像を表示するショートコード
- 投稿IDで記事導線を自動生成するショートコード
- テキストを装飾して加工するショートコード
それぞれ解説していきます。
バナー画像を表示するショートコード
バナー画像を表示するショートコードの実装方法について解説していきます。
以下のコードをfunctions.phpにコピー＆ペーストしてください。
<?php
// バナーを投稿内に挿入するためのショートコード関数
function post_banner_function() {
// 出力バッファリングを開始
ob_start();
?>
<!-- バナーのHTMLを出力 -->
<div class="banner-container">
<a class="banner-link" href="<?php echo esc_url(home_url()); ?>/" target="_blank">
<img class="banner-image" src="<?php echo get_theme_file_uri('/image/sample.jpg'); ?>" alt="サンプルバナー">
</a>
</div>
<?php
// 出力バッファを取得してクリーンアップ
return ob_get_clean();
}
// ショートコード 'post_banner' を追加
add_shortcode('post_banner', 'post_banner_function');カスタマイズの際は上記のコードのバナー画像のHTML部分をごっそり差し替えていただければと思います。
投稿IDで記事導線を自動生成するショートコード
投稿IDで記事導線を自動生成するショートコードの実装方法について解説していきます。
以下のコードをfunctions.phpにコピー＆ペーストしてください。
<?php
/**
* 関連記事を表示するショートコード関数
* @param array $atts ショートコードの属性
*/
function related_post_shortcode_func( $atts ) {
// 属性のデフォルト値を設定
$atts = shortcode_atts( array(
'id' => '', // 関連記事の投稿ID
), $atts );
// ショートコード属性から関連記事の投稿IDを取得
$post_related_id = $atts['id'];
// 関連記事の画像を取得（なければデフォルトのサンプル画像を使用）
$post_related_image = get_the_post_thumbnail_url( $post_related_id ) ?: get_theme_file_uri() . "/image/sample.jpg";
// 関連記事のリンク、タイトル、抜粋を取得
$post_related_link = get_permalink( $post_related_id );
$post_related_title = get_the_title( $post_related_id );
$post_related_excerpt = get_the_excerpt( $post_related_id );
// 関連記事のHTMLを生成
$output = '<a href="'. esc_url( $post_related_link ) .'">';
$output .= '<span><i class="fa-solid fa-flag"></i>この記事もチェック</span>';
$output .= '<span><span"><img src="'. esc_url( $post_related_image ) .'"></span>';
$output .= '<span><h5>'. esc_html( $post_related_title ) .'</h5><p>'. esc_html( $post_related_excerpt ) .'</p></span></span>';
$output .= '</a>';
// 関連記事のHTMLを返す
return $output;
}
// ショートコード 'related_post' を追加
add_shortcode( 'related_post', 'related_post_shortcode_func' );カスタマイズの際は上記のコードによって出力されたHTMLをCSSでいい感じにレイアウトしていただければと思います。
もし出力されるHTMLがテーマに適してなければご自身で上記PHPコードを修正していただいても大丈夫です。
テキストを装飾して加工するショートコード
テキストを装飾して加工するショートコードの実装方法について解説していきます。
以下のコードをfunctions.phpにコピー＆ペーストしてください。
<?php
// 開始タグと終了タグで囲まれたショートコードの定義
function text_design_shortcode_function($atts, $content = null) {
// ショートコードの処理やコンテンツの変換を行う
ob_start();
?>
<div style="border: 3px dotted #2a627e;padding: 19px;">
<?php echo $content; ?>
</div>
<?php
return ob_get_clean();
}
add_shortcode('text_design_shortcode', 'text_design_shortcode_function');カスタマイズの際は上記のコードによって出力されたHTMLをCSSでいい感じにレイアウトしていただければと思います。
まとめ
WordPressでショートコードを自作する方法についての解説は以上になります。
ショートコードはWordPressの代表的な機能のうちの一つであり、エンジニアでない方のサイトの管理運用を手助けしてくれる非常に優秀な機能の一つです。
エンジニアにとっては、クライアント案件などの開発においても、自作しなければいけない場面など多々あるかと思いますので、よろしければぜひ当記事をショートコード実装にお役立ていただけましたら幸いです。
