WordPressの公式・非公式問わずいろいろなテーマを研究していると、人気テーマの傾向がいくつか見えてきますね。その一つに、ロゴ・色・文章はもちろん、レイアウトも感覚的かつ柔軟に変更できる「テーマカスタマイザー」の機能が豊富、ということが挙げられます。

下の画像は、WordPressをインストールすると同梱されているテーマ「Twenty Seventeen」のテーマカスタマイザーの操作画面の一部です。

感覚的に操作できる「テーマカスタマイザー」機能が用意されている

今後、テーマを作ったり配布するなら「テーマカスタマイザーの作り込み具合」によってテーマが選ばれる基準ってかなり変わるんだろうな〜と思います。（もちろん、他にも基準はあると思います）

私の会社でもWordPressのテーマを作っているところで「せっかく作るなら選ばれるテーマがいいよね！」というわけで「テーマカスタマイザー」の機能は特に力を入れています。

https://twitter.com/s56bouya/status/874779313467293696

配布もするので（もうちょっとで公式サイトにテーマを登録申請できそうです）、よかったら使ってみてね！！

テーマカスタマイザーで特定のセクションやパネルの開閉状態を取得して何かをする方法

ここからが本題ですが、テーマカスタマイザーの操作画面では「セクション」や「パネル」が開いているのか、閉じているのか、その状態を取得する方法があります。

「セクション」「パネル」ってなんですか？

「どれが『セクション』で『パネル』なんだ？」と思う方もいらっしゃると思うんですが、複数のセクションがグループ化されているものがパネルです。

下の画像だと「メニュー」「ウィジェット」がパネルで、その他は「セクション」です。実際の画面で確認すると「ああ、なんだ。そんなことか」って感じで、すぐ理解できると思います。

「セクション」と「パネル」についてなんとなく理解したところで、さっそく開閉状態を取得してみましょう。

以下のコードはWordPressに同梱されているTwenty Seventeenのテーマフォルダ内にある「customize-controls.js」を参考にして、一部を抜粋して書き換えたものです。

(function() {
 wp.customize.bind( 'ready', function() {

  wp.customize.section( 'title_tagline', function( section ) {
   section.expanded.bind( function( isExpanding ) {
    console.log( isExpanding ); // サイト基本情報のセクションの開閉状態を取得
   } );
  } );

 });
})( jQuery );

セクション「サイト基本情報」が開かれている場合は「true」で、開かれた状態から閉じる場合は「false」が取得できます。下のサンプル動画をご参考ください。

「customize-controls.js」ファイルは、フック「customize_controls_enqueue_scripts」を使って読み込みます。以下もTwenty Seventeenテーマのファイル内に書かれているコードを抜粋しています。

/**
 * Load dynamic logic for the customizer controls area.
 */
function twentyseventeen_panels_js() {
   wp_enqueue_script( 'twentyseventeen-customize-controls', get_theme_file_uri( '/assets/js/customize-controls.js' ), array(), '1.0', true );
}
add_action( 'customize_controls_enqueue_scripts', 'twentyseventeen_panels_js' );

「設定値と組み合わせる」など、使い方はいろいろありますね

セクションやパネル内の設定値もjQueryで取得できるので、この「開閉状態」と併用することで

• 特定のセクションやパネルの特定の値が設定されていたら、どこかの背景色を変える
• 特定のセクションやパネルで設定漏れなどがあればアラートなどで案内する

など、アイデア次第でいろんなことができそうです。

また一つ勉強になりました！