WordPress テーマカスタマイザーに任意の HTML を出力する

特定のカスタマイザーコントロールに基づくラベルや説明 以外 の HTML をカスタマイザーに追加する方法の紹介です。改行、画像、ボタンまたは見出しなんかを追加できます。

現在 WordPress のネイティブ機能として実装することは出来ませんが、カスタムコントロールを使用して実装することが可能です。

この記事は WP Theming で公開された Customizer Control: Arbitrary HTML の翻訳記事です。執筆者の許可を得た上で翻訳、公開しています。

カスタムコントロール

任意の HTML を表示させる為のカスタムコントロールはものの数行で実装できます。ラベルと説明が要らなければさらに短縮することも可能です。

if ( class_exists( 'WP_Customize_Control' ) && ! class_exists( 'cd_Custom_Content' ) ) {
  class cd_Custom_Content extends WP_Customize_Control {
    public function render_content() {
      public $content = '';
      if ( isset( $this->label ) ) {
        echo '<span class="customize-control-title">' . $this->label . '</span>';
      }
      if ( isset( $this->content ) ) {
        echo $this->content;
      }
      if ( isset( $this->description ) ) {
        echo '<span class="description customize-control-description">' . $this->description . '</span>';
      }
    }
  }
}

これは実際には設定ではない (ただ HTML を出力するだけで「設定」としての役割は果たさない) ので、設定として登録するのは少し変ですが、カスタマイザーに出力するためにはこのような実装が必要になります。

スポンサーリンク

カスタマイザーで出力する

先程のカスタムコントロールを定義したら、あとはもうカスタマイザーでそれを出力するだけです。
例:

$wp_customize->add_setting( 'example_control', array() );
$wp_customize->add_control( new Prefix_Custom_Content( $wp_customize, 'example_control', array(
    'section' => 'title_tagline',
    'priority' => 20,
    'label' => __( 'Example Control', 'theme_slug' ),
    'content' => __( 'Content to output. Use <a href="#">HTML</a> if you like.', 'theme_slug' ) . '</p>',
    'description' => __( 'Optional: Example Description.', 'theme_slug' ),
) ) );

サニタイズ

原文にはない項目ですが、こんな設定でも Theme Check プラグインに怒られたのでサニタイズ方法もついでに紹介。
sanitize_text_field 関数を使用してサニタイズ出来ます。ちなみにサニタイズは設定の中身 (保存されたデータ) にのみ影響を及ぼし、label や description へは何もしません。つまるところ全く意味がないですが必要なのでやりましょう。

$wp_customize->add_setting( 'example-control', array( 
  'sanitize_callback' => 'sanitize_text_field',
) );

スポンサーリンク

訳者一言

便利だったので備忘録代わりに翻訳させていただきました。
チェックボックスやラジオボタンだと label と description しかなく、見出しがなくて分かりにくい問題をこれで解決できます👍

WordPress テーマカスタマイザーで任意のCSSを読み込ませる方法 を使ってCSSを読み込ませ、スタイルもコントロールしてあげることで、更にカスタマイザーを見やすく向上できますね !