WPワークス

ダウンロードコンテンツやワードプレスのカスタマイズ方法を配信中。

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

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

クラス「Nora_Theme_Customizer_Settings」は、

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

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

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

使い方

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

[wpdm_package id=’557′]

パッケージ内は

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

の2つのファイルです。

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

1.PHPファイルをインクルード

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

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

2.JSファイルをエンキュー

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

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

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

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

使用例として2回。

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

さいごに

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

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

メニュ
ホーム
トップへ