パラメータを持つショートコード

基本のショートコードの作成方法と、自己完結型と囲み型の使い方が分かったところで、ショートコード [$tag] とハンドラ関数でパラメータを使用する方法を説明します。

ショートコード [$tag] は、属性と呼ばれるパラメータを受け取ることができます:

[wporg title="WordPress.org"]
  Having fun with WordPress.org shortcodes.
[/wporg]

ショートコード・ハンドラ関数は、3つのパラメータを受け取ることができます:

  • $atts – 配列 – [$tag] 属性。
  • $content – 文字列 – ショートコードの内容。上の例では、「Having fun with WordPress.org shortcodes」となります。
  • $tag – 文字列 – [$tag] の名前です (つまりショートコードの名前)。
function wporg_shortcode( $atts = array(), $content = null, $tag = '' ) {}

属性のパース (構文解析)

ユーザーにとって、ショートコードは投稿コンテンツの中にある、角括弧 [] 付きの文字列でしかありません。ユーザーは、どの属性が利用可能で、舞台裏で何が起こっているのか分かりません。

プラグイン開発者にとって、属性の使用に関するポリシーを強制する方法はありません。ユーザーは、属性を1つ含めることも、2つ含めることも、まったく含めないこともできます。

ショートコードの使用方法を制御するには:

  • ハンドラ関数用のデフォルトパラメータを宣言しましょう。
  • array_change_key_case() で属性配列用のキーケースを正規化しましょう。
  • shortcode_atts() を使用して属性を構文解析し、デフォルト値の配列とユーザー $atts を提供しましょう。
  • 出力を返す前に、出力の安全確保をしましょう。

完全な例

基本的なショートコード構造、自己完結型と囲み型のシナリオ、出力の安全確保、を使用した完全な例です。

ショートコード [wporg] は、タイトルを受け取り、CSS でスタイルを設定できるボックスを表示します。

/**
 * The [wporg] shortcode.
 *
 * Accepts a title and will display a box.
 *
 * @param array  $atts    Shortcode attributes. Default empty.
 * @param string $content Shortcode content. Default null.
 * @param string $tag     Shortcode tag (name). Default empty.
 * @return string Shortcode output.
 */
function wporg_shortcode( $atts = [], $content = null, $tag = '' ) {
  // normalize attribute keys, lowercase
  $atts = array_change_key_case( (array) $atts, CASE_LOWER );

  // override default attributes with user attributes
  $wporg_atts = shortcode_atts(
    array(
      'title' => 'WordPress.org',
    ), $atts, $tag
  );

  // start box
  $o = '<div class="wporg-box">';

  // title
  $o .= '<h2>' . esc_html( $wporg_atts['title'] ) . '</h2>';

  // enclosing tags
  if ( ! is_null( $content ) ) {
    // $content here holds everything in between the opening and the closing tags of your shortcode. eg.g [my-shortcode]content[/my-shortcode].
    // Depending on what your shortcode supports, you will parse and append the content to your output in different ways.
    // In this example, we just secure output by executing the_content filter hook on $content.
    $o .= apply_filters( 'the_content', $content );
  }

  // end box
  $o .= '</div>';

  // return output
  return $o;
}

/**
 * Central location to create all shortcodes.
 */
function wporg_shortcodes_init() {
  add_shortcode( 'wporg', 'wporg_shortcode' );
}

add_action( 'init', 'wporg_shortcodes_init' );

原文 / 日本語訳

s
検索
c
新規投稿を作成する
r
返信
e
編集
t
ページのトップへ
j
次の投稿やコメントに移動
k
前の投稿やコメントに移動
o
コメントの表示を切替
esc
投稿やコメントの編集をキャンセル