テーマカスタマイザーの編集方法

テーマカスタマイザー 編集方法
テーマカスタマイザー 編集方法

WordPressのテーマカスタマイザー、「外観」->「カスタマイズ」のページでは、主にテーマのスタイルをライブプレビュー(JavaScriptを書く必要あり)で確認しながら編集できます。

ここでは基本的なテーマカスタマイザーの編集方法を紹介していきます。

テーマカスタマイザーを作成

テーマカスタマイザーの作成方法ですが、テーマカスタマイザー用の関数を「customize_register」にフックさせます。

こういう形です。

あとは「$wp_customize」オブジェクトを使用して、「add_panel」「add_section」「add_setting」「add_control」を使用して設定項目を追加・編集していきます。

テーマカスタマイザー用のメソッド

「$wp_customize」は「WP_Customize_Manager」クラスのオブジェクトですので、用意されているメソッドを使用してテーマカスタマイザーを編集していきます。

参照:WP_Customize_Manager

主に使用するメソッドは以下の通りです。

$wp_customize->add_panel
セクションを載せるパネルを追加します。
$wp_customize->add_section
設定項目を載せるセクションを追加します。
$wp_customize->add_setting
設定項目を指定したセクションに追加します。
$wp_customize->add_control
指定した設定項目の操作を編集します。

パネルは「テーマカスタマイズ API – WordPress Codex 日本語版(2015/11/05)」には載っていませんでしたが、普通に使用できますので安心してください。

操作の「type」はinputタグに使用する「type」だと思ってください。あと、selectやradioなどの選択肢を設ける場合は、

こんな感じで「choices」を指定します。「input_attrs」を使えば、属性値も配列で設定できます。

操作追加のクラス参照

「add_control」で追加できる編集は、簡単なinputタグの他、イメージのアップロードを行ったり、カラーピッカーを使用して色を設定するクラスも用意されていますので、設定項目に応じて使い分けましょう。

参照:Class Reference/WP Customize Manager/add control « WordPress Codex

サニタイズ関数を忘れないように

よく忘れがちなのが、テーマカスタマイザーではサニタイズ関数を要求する「sanitize_callback」の指定です。

まぁ無くても設定できるんですが、テーマの開発をする際「Theme Check」でも注意されると思います。

WordPress自体に予め用意されたサニタイズ関数などを呼び出すこともできますが、数値やチェックボックスのサニタイズは自分で作成する必要があったと思います。後にWordpressに標準的に容易されるかもしれませんし、僕がちゃんと調べていないだけかもしれませんが、一応ここにコピペで使えるものを用意しておきます。

簡易のサニタイズ関数ですが、あとは「add_setting」を書く際に「sanitize_callback」に関数名を指定してやれば、サニタイズが行われるようになります。

管理しやすい編集方法

テーマカスタマイザーは管理画面側ですから、設定項目ごとにファイルを分けても公開ページ側の速度に影響を与えることはありません。

各ファイルには「add_panel」から入力しておけば良いので、非常に管理しやすくなります。

テーマのスタイルとして出力

スタイル出力用のフックは基本的に「wp_head」が使われますので、こちらにフックさせて関数を呼び出します。

ライブプレビューの方法

個人的な意見ですが、ライブプレビューするためにある編集ページだと思いますので、余程複雑な編集を行わないかぎりJavaScriptを書いておいた方が良いです。でないと、ちょっと編集する度にプレビュー画面が更新されますので、中々確認できずイライラします。

これは設定項目1つ1つに対してコードを書く必要があります。

カスタムCSSの例ですが、こうしておくとテキストエリアに入力したCSSがライブプレビューで反映されるようになります。

このように結構簡単に設置できてしまうので、テーマカスタマイザーに標準で用意していても良いんじゃないかと個人的には思っています。

擬似クラスはstyleタグ内にappend

ライブプレビューでの擬似クラスの編集方法について補足します。jQueryを使っていると分かると思いますが、CSSの擬似クラス、例えば「:before」などに直接アクセスすことは出来ません。ただ、Font Awesomeのアイコンなどをテーマカスタマイザーで設定する際には必要になるかもしれません。

そこで、設定したい特定のCSSをjQueryの「append」でstyleタグ内に挿入する方法が一番簡単だと思いますので、紹介しておきます。

といった形を取れば、ライブプレビューの時に擬似クラスを設定した際に追加されます。

クラスや「font-family」を指定して、その都度編集するのもありですが、これが一番楽な方法じゃないかと思います。

さいごに

この他、ある程度慣れてきたら、日本語の参照ページにはあまりに載っていないことも沢山ありますので、英語の参照ページも参照してみてください。

参照:WordPress › Theme Options – The Customizer API | Theme Developer Handbook | WordPress Developer Resources

1件のピン

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

メニュ
ホーム
トップへ