クラス「Nora_Theme_Customizer_Settings」の解説ページ

面倒な作業無しでテーマカスタマイザーを操作するクラス「Nora_Theme_Customizer_Settings」の解説ページです。

クラス「Nora_Theme_Customizer_Settings」は、

  • テーマカスタマイザーへの設定項目の追加
  • ライブプレビューの設定を追加
  • スタイルを自動生成し、ヘッダーに出力

といった面倒なテーマカスタマイザーに関する「テーマ」や「プラグイン」側での設定項目の追加を、セレクタ毎に簡単に追加できます。

自分で書くコードが随分減ると思います。

  • Table of Contents

使い方

まずはダウンロードします。

[wpdm_package id=’557′]

パッケージ内は

  • 「class-nora-theme-customizer.php」
  • 「nora-theme-customizer.js」

の２つのファイルです。

「テーマ」や「プラグイン」に実装する際は、以下の方法でこれらのファイルを読ませて使います。

１．PHPファイルをインクルード

まず、ファイル「class-nora-theme-customizer.php」をインクルードします。

<?php
require_once( 'path-to-your/class-nora-theme-customizer.php' );
?>

「path-to-your/」の部分はテーマもしくはプラグイン内に設置したディレクトリを指定してください。

２．JSファイルをエンキュー

次に「nora-theme-customizer.js」を出力します。「customize_preview_init」にフックさせ、以下のように出力します。

<?php
// プレビュー用のスクリプトを出力
add_action( 'customize_preview_init', 'nora_theme_customizer_live_preview' );
function nora_theme_customizer_live_preview() {

	wp_enqueue_script(
		'nora_theme_customizer_js',
		'path-to-your/nora-theme-customizer.js',
		array( 'jquery', 'customize-preview' ),
		'',
		true
	);

}
?>

こちらもファイルの位置や依存するJSファイルのハンドルをちゃんと指定してください。

３．テーマカスタマイザーに設定項目を追加

最後にテーマカスタマイザーに追加する「パネル」「セクション」「設定項目」などを扱います。

使用例として２回。

<?php 
/*
 * 使用例１
 */
// セクションは必須項目
$section = array(

	'id' => 'section_id', // 必須項目
	'title' => 'セクションテスト', // セクションを追加する場合
	'description' => 'セクション詳細テスト', // セクションを追加する場合

	// パネルを指定、もしくは追加する場合
	'panel' => array(
		'id' => 'panel_id', // 指定もしくは追加する場合は必須
		'title' => 'パネルテスト',
		'description' => 'パネル詳細テスト'
	)

);

// スタイルを変化させたいセレクタ
$selectors = '#main-content #post-list .post-list-div';

// 設定項目の追加
$settings = array(

	// 設定項目のベースとなるID
	'setting_id' => 'setting_id', // ユニークなものを指定してください。

	// 設定項目の配列
	'properties' => array(

		// プロパティ名だけだとデフォルト編集が可能
		'background', 'background-color', 'background-image',

		// オプション値の指定方法
		'background-attachment' => array(
			'default' => '', // デフォルト値
			'preview' => false // スタイルプロパティのプレビュー（サポートしているプロパティは標準的にプレビューされます）
		),
		'opacity' => array(
			'default' => '0.1',
			'preview' => true
		),
		'width' => array(
			'default' => '200px'
		),
		'background-repeat' => array(
			'default' => 'repeat',
			'type' => 'select', // inputのタイプを指定（「choices」のある設定項目は「radio（テキスト入力可）」か「select（テキスト入力不可」）
			// 選択肢の追加（左は設定値、右は表示テキスト）
			'choices' => array(
				'some-value' => '追加分',
				'repeat' => 'リピートあり',
				'any-value abc 100%' => 'なんか'
			),
		),

		// サポートされていないプロパティ、
		'something-idont-know' => array(
			'default' => 'some',
			'preview' => false,
			'type' => 'range', // 「text」「textarea」「range」「select」「radio」「checkbox」「image」「color」から指定（デフォルトは「text」）
			'label' => '該当無しテストrange',
			'description' => '該当無しテストrange詳細',
			'min' => '100', // 「range」の最小値
			'max' => '300', // 「range」の最大値
			'step' => '5' // 「range」のスライドバーの1メモリの値
		),
	)
);

// 設定を追加
$new_element_customizer = new Nora_Theme_Customizer_Settings( $section, $selectors, $settings );

/*
 * 使用例２
 */
$section = array(
	'id' => 'section_id2',
	'title' => 'セクションテスト2',
	'description' => 'セクション詳細テスト2',
	'panel' => array(
		'id' => 'panel_id',
		'title' => 'パネルテスト',
		'description' => 'パネル詳細テスト'
	)

);
$selectors = '#main-content #post-list';
$settings[ 'setting_id' ] = 'setting_id2';
$settings[ 'properties' ] = array(
	'background', 'background-color', 'background-image', 'background-attachment', 'abcdefg' 
);

$other_element_customizer = new Nora_Theme_Customizer_Settings( $section, $selectors, $settings );
?>

基本的なスタイルのプロパティだとサポートしていますので、指定するだけでinputタグのタイプも自動で振り分けられます。２つ目の例のようにプロパティ名をしていするだけで大丈夫です。

さいごに

今後はインスタンスから、もうちょっと柔軟な設定を追加できたり、データを取得できるようにしようと思っています。

基本的なスタイルのプロパティであれば、プロパティ名だけで問題ない筈ですし、もともと書くコードを減らすために作成したクラスですので、設定しにくいと感じる場合のみ各プロパティのオプションデータを追加してください。