テーマカスタマイザーの編集方法
WordPressのテーマカスタマイザー、「外観」->「カスタマイズ」のページでは、主にテーマのスタイルをライブプレビュー（JavaScriptを書く必要あり）で確認しながら編集できます。
ここでは基本的なテーマカスタマイザーの編集方法を紹介していきます。
テーマカスタマイザーを作成
テーマカスタマイザーの作成方法ですが、テーマカスタマイザー用の関数を「customize_register」にフックさせます。
function mytheme_customize_register( $wp_customize ) {
// 設定済みのデータを取得し、既に設定されている設定を使用する必要がある場合に備えて
$theme_mods = get_theme_mods();
// 「$theme_mods[ 'setting_id' ]」という形で使用します。
}
add_action( 'customize_register', 'mytheme_customize_register' );
こういう形です。
あとは「$wp_customize」オブジェクトを使用して、「add_panel」「add_section」「add_setting」「add_control」を使用して設定項目を追加・編集していきます。
テーマカスタマイザー用のメソッド
「$wp_customize」は「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）」には載っていませんでしたが、普通に使用できますので安心してください。
// パネルの追加 $wp_customize->add_panel( 'other_custom_settings_panel', array( 'priority' => 5, 'capability' => 'edit_theme_options', 'theme_supports' => '', 'title' => 'その他の設定', 'description' => 'パネルの詳細', )); // セクションの追加 $wp_customize->add_section( 'custom_css_section', array( 'title' => 'カスタムCSS', 'panel' => 'other_custom_settings_panel', )); // 設定を追加 $wp_customize->add_setting( 'custom_css', array( 'default' => '', 'capability' => 'edit_theme_options', 'transport'=> 'postMessage', // ライブプレビュー（JavaScriptで編集する場合） 'sanitize_callback' => 'sanitize_text_field', )); // 設定に操作を追加 $wp_customize->add_control( 'custom_css', array( 'section' => 'custom_css_section', 'settings' => 'custom_css', // 設定項目を指定 'label' => 'カスタムCSS', 'description' => 'カスタムCSSです。styleタグ内に入力するテキストを入力してください。', 'type' => 'textarea', ));
操作の「type」はinputタグに使用する「type」だと思ってください。あと、selectやradioなどの選択肢を設ける場合は、
$wp_customize->add_control( 'something', array( 'section' => 'custom_css_section', 'settings' => 'something', // 設定項目を指定 'label' => 'セレクト', 'description' => 'セレクト', 'type' => 'select', 'choices' => array( 'left' => '左', 'center' => '真ん中', 'right' => '右', ), 'input_attrs' => array( 'class' => 'my-customization', 'style' => 'width: 100%', ), '' => '' ));
こんな感じで「choices」を指定します。「input_attrs」を使えば、属性値も配列で設定できます。
操作追加のクラス参照
「add_control」で追加できる編集は、簡単なinputタグの他、イメージのアップロードを行ったり、カラーピッカーを使用して色を設定するクラスも用意されていますので、設定項目に応じて使い分けましょう。
参照：Class Reference/WP Customize Manager/add control « WordPress Codex
サニタイズ関数を忘れないように
よく忘れがちなのが、テーマカスタマイザーではサニタイズ関数を要求する「sanitize_callback」の指定です。
まぁ無くても設定できるんですが、テーマの開発をする際「Theme Check」でも注意されると思います。
WordPress自体に予め用意されたサニタイズ関数などを呼び出すこともできますが、数値やチェックボックスのサニタイズは自分で作成する必要があったと思います。後にWordpressに標準的に容易されるかもしれませんし、僕がちゃんと調べていないだけかもしれませんが、一応ここにコピペで使えるものを用意しておきます。
// チェックボックス用
function sanitize_checkbox( $input ) {
if( $input == true ) {
return true;
} else {
return false;
}
}
// 数値用
function sanitize_int( $input ) {
return intval( $input );
}
簡易のサニタイズ関数ですが、あとは「add_setting」を書く際に「sanitize_callback」に関数名を指定してやれば、サニタイズが行われるようになります。
管理しやすい編集方法
テーマカスタマイザーは管理画面側ですから、設定項目ごとにファイルを分けても公開ページ側の速度に影響を与えることはありません。
function mytheme_customize_register( $wp_customize ) {
// 設定済みのデータを取得し、既に設定されている設定を使用する必要がある場合に備えて
$theme_mods = get_theme_mods();
// 「$theme_mods[ 'setting_id' ]」という形で使用します。
// カスタムCSS
require_once( 'custom-css.php' );
// ナビメニュー
require_once( 'nav-menu.php' );
}
add_action( 'customize_register', 'mytheme_customize_register' );
各ファイルには「add_panel」から入力しておけば良いので、非常に管理しやすくなります。
テーマのスタイルとして出力
スタイル出力用のフックは基本的に「wp_head」が使われますので、こちらにフックさせて関数を呼び出します。
add_action( 'wp_head', 'theme_customize_css' );
function theme_customize_css() {
$theme_mods = $get_theme_mods(); ?>
<style id="custom-css">
<?php echo $theme_mods[ 'custom_css' ]; ?>
</style>
<?php }
ライブプレビューの方法
個人的な意見ですが、ライブプレビューするためにある編集ページだと思いますので、余程複雑な編集を行わないかぎりJavaScriptを書いておいた方が良いです。でないと、ちょっと編集する度にプレビュー画面が更新されますので、中々確認できずイライラします。
これは設定項目１つ１つに対してコードを書く必要があります。
( function( $ ) {
wp.customize( 'custom_css', function( value ) { // 「custom_css」は設定のID
value.bind( function( newval ) { // 「newval」は設定の現在値
// ここにライブプレビューの変化を書く
$( 'style#custom-css' ).text( newval );
} );
} );
} );
カスタムCSSの例ですが、こうしておくとテキストエリアに入力したCSSがライブプレビューで反映されるようになります。
このように結構簡単に設置できてしまうので、テーマカスタマイザーに標準で用意していても良いんじゃないかと個人的には思っています。
擬似クラスはstyleタグ内にappend
ライブプレビューでの擬似クラスの編集方法について補足します。jQueryを使っていると分かると思いますが、CSSの擬似クラス、例えば「:before」などに直接アクセスすことは出来ません。ただ、Font Awesomeのアイコンなどをテーマカスタマイザーで設定する際には必要になるかもしれません。
そこで、設定したい特定のCSSをjQueryの「append」でstyleタグ内に挿入する方法が一番簡単だと思いますので、紹介しておきます。
( function( $ ) {
wp.customize( 'custom_css', function( value ) {
value.bind( function( newval ) {
$( 'style#custom-css' ).append( '.some-class:before{ content: "whatever"; }' );
} );
} );
} );
といった形を取れば、ライブプレビューの時に擬似クラスを設定した際に追加されます。
クラスや「font-family」を指定して、その都度編集するのもありですが、これが一番楽な方法じゃないかと思います。
さいごに
この他、ある程度慣れてきたら、日本語の参照ページにはあまりに載っていないことも沢山ありますので、英語の参照ページも参照してみてください。
1件のピン
[…] テーマカスタマイザーの編集方法 – WPワークスhttps://wp-works.com/how-to-edit-theme-customizer/ […]