WordPress ショートコードの作成: 独自のショートコードを開発しよう

WordPressでは、プラグインやテーマのfunctions.phpファイルを編集することで、独自のカスタムショートコードを作成できます。この記事では、独自のショートコードを開発する方法を解説します。

基本構造
メッセージボックス
完成版

基本構造

まず、functions.phpファイルを開き、以下のような形式でショートコードを作成します。

function custom_shortcode_function($atts, $content = null) {
  // ショートコードの処理を記述
}
add_shortcode('custom_shortcode', 'custom_shortcode_function');

ここで、custom_shortcode_functionは、ショートコードの処理を実行する関数名です。$attsはショートコードの属性を受け取る引数で、$contentはショートコードで囲まれたコンテンツを受け取る引数です。add_shortcode関数により、ショートコード名（custom_shortcode）と関数名（custom_shortcode_function）を関連付けます。

メッセージボックス

例として、シンプルなメッセージボックスのショートコードを作成してみましょう。functions.phpファイルに以下のコードを追加します。

// message_box_shortcode 関数
//
// この関数は、[message_box]ショートコードを定義し、その内容を
// .message-boxクラスのdiv要素で囲んだ形で出力します。
//
function message_box_shortcode($atts, $content = null) {
  return '<div class="message-box">' . do_shortcode($content) . '</div>';
}
add_shortcode('message_box', 'message_box_shortcode');

このショートコードは、[message_box]という名前で使用できます。

ショートコードで囲まれたコンテンツは、message-boxクラスを持つ<div>要素でラップされます。do_shortcode関数により、ネストされたショートコードも処理されます。

投稿や固定ページのエディタで以下のようにショートコードを使用できます。

[message_box]これはメッセージボックスです。[/message_box]

CSSを追加して、メッセージボックスのスタイルをカスタマイズできます。

このように、独自のカスタムショートコードを作成することで、WordPressサイトに機能やデザインを追加できます。

完成版

先程のコードは簡素すぎて、使う意味があまりありません。それを改善して、より有用なものにしていきましょう。

ショートコードの属性にメッセージボックスのタイプ（情報、警告、エラー、成功）を指定できるようにし、それに応じてCSSクラスを適用して表示を変更できるようにします。

ショートコード関数の修正

function message_box_shortcode($atts, $content = null) {
  // 属性のデフォルト値を設定
  $default_atts = array(
    'type' => 'info', // デフォルトは 'info'
  );
  // ユーザーが指定した属性をデフォルト値とマージ
  $atts = shortcode_atts($default_atts, $atts, 'message_box');

  // タイプに応じたCSSクラスを適用
  $class = 'message-box message-box-' . $atts['type'];

  // ショートコードのHTMLを生成
  return '<div class="' . esc_attr($class) . '">' . do_shortcode($content) . '</div>';
}
add_shortcode('message_box', 'message_box_shortcode');

CSSの追加

以下のCSSをテーマのカスタムCSSセクションに追加するか、子テーマのstyle.cssに追加して、メッセージボックスのスタイルを定義します。

.message-box {
  padding: 15px;
  margin-bottom: 20px;
  border-radius: 5px;
  font-size: 1.1em;
}

.message-box-info {
  background-color: #d9edf7;
  border: 1px solid #bce8f1;
  color: #31708f;
}

.message-box-warning {
  background-color: #fcf8e3;
  border: 1px solid #faebcc;
  color: #8a6d3b;
}

.message-box-error {
  background-color: #f2dede;
  border: 1px solid #ebccd1;
  color: #a94442;
}

.message-box-success {
  background-color: #dff0d8;
  border: 1px solid #d6e9c6;
  color: #3c763d;
}

ショートコードの使い方

ショートコードを投稿やページに挿入して、メッセージボックスを表示します。タイプ属性でメッセージボックスのタイプ（info, warning, error, success）を指定できます。

以下は使用例です。

[message_box type="info"]これは情報メッセージボックスです。[/message_box]
[message_box type="warning"]これは警告メッセージボックスです。[/message_box]
[message_box type="error"]これはエラーメッセージボックスです。[/message_box]
[message_box type="success"]これは成功メッセージボックスです。[/message_box]

特定のタイプのメッセージボックスを追加するだけでなく、CSSを編集することで、背景色、境界線、テキスト色などのデザインを調整することもできます。

さらにカスタマイズする場合は、ショートコードに他の属性を追加することもできます。例えば、アイコンやタイトルを追加したり、メッセージボックスにカスタムCSSクラスを適用したりできます。

WordPress ショートコード ② メッセージボックスを作ろう