できる!Snow Monkey カスタマイズ – 第10回 カスタマイザーカスタマイズ基礎

この記事は、不定期連載「できる!Snow Monkey カスタマイズ 」の第10回目。今回の記事の内容は、Snow Monkey のカスタマイザーのカスタマイズの基本的なコトについて語ります。

カスタマイザーについて

Snow Monkeyテーマは、管理画面で「外観」 > 「カスタマイズ」 のメニューを選択する事で、プレビューを見ながら視覚的にページのレイアウトやデザインの変更などができる機能があります。

テネーブル

Snow Monkey 公式のフォーラムなどでは、この機能を度々 カスタマイザー って呼んでいたりします。

テネーブル(アイコン03)

カスタマイザーをカスタマイズしてみよう

カスタマイザー に、新しい設定を追加するカスタマイズを行えば、コーディング知識がない人でも簡単にその設定をカスタマイザーで切り替え出来るように使ってもらう事ができるでしょう。

今回は、サンプルとして「トグルメニューの色」をカスタマイザーで追加してみましょう。

テネーブル

今回の記事は難易度が高いカスタマイズを解説していますので、該当の機能を動作する形でコード記述済みの My Snow Monkey (記事中では、サンプルプラグインと呼ぶようにしています)を用意しています。

次からダウンロードを行って記事中の解説を読まれる事を推奨します。

テネーブル(アイコン05)
ご注意

解説用に作った機能ですので、実際のWebサイトでご利用する場合は、コードを調整するなどをしてください。

サンプルプラグインの構造

サンプルプラグインの構造としては次のようになっています。

my-snow-monkey

my-snow-monkey.php

customizer

design

sections

toggle-menu

controls

color.php

text.php

section.php

カスタマイザーの項目設定のライブラリについて

Snow Monkeyテーマでは、カスタマイザーの項目を WP Customizer Framework と言うライブラリで制御されています。

テネーブル

WP Customizer Framework ライブラリを開発されているのも、Snow Monkeyテーマ開発者のキタジマ タカシさんです。

テネーブル(アイコン01)
GitHub – WP Customizer Framework

Snow Monkeyテーマでのカスタマイザーを制御する場合は、この WP Customizer Framework を使用した上でカスタマイズを行うのが推奨とされます。

カスタマイザーに関するフックについて

通常の WordPress のテーマであれば、カスタマイザーの設定を変更するのは init フックや、その他の制約を意識しなければなりません。しかし、 Snow Monkey v7 からは、カスタマイザー設定を読み込む前後にフックが追加されました。これにより、簡単にカスタマイザーの設定を操作する事が可能になったのです。

ルミェール

それが、アクションフックの snow_monkey_pre_load_customizer と、snow_monkey_post_load_customizer の2つだよ!

ルミェール(アイコン01)
テネーブル

今回の場合は、 Snow Monkey テーマのカスタマイザー設定が読み込まれた後に新しい設定を追加しますので、Snow Monkey テーマのカスタマイザー 設定の読み込み後に処理をされる snow_monkey_post_load_customizer フックを使用して追加のカスタマイザー設定を読み込む事にしました。

サンプルプラグインでは、下記の部分が該当のコードになります。

テネーブル(アイコン01)
add_action(
	'snow_monkey_post_load_customizer',
	function() {
		// customizerディレクトリ内のファイルを読み込みます
		Helper::include_files( untrailingslashit( plugin_dir_path( __FILE__ ) ) . '/customizer' );
	}
);

Helper::include_files は指定したディレクトリ内のファイルを require するヘルパー関数です。
これにより customizer ディレクトリ内の全てのファイルを処理されます。

追加のカスタマイザー設定を読み込もう

サンプルプラグインでは、 customizerディレクトリ内の別ファイルで生成している追加カスタマイザー設定をロードするようにします。

ルミェール

この別ファイルが、追加するカスタマイザー設定になってるよ!
1ファイルに1項目で別々のファイルにしているんだ。

ゆっくりみていこう!

ルミェール(アイコン05)

カスタマイザーライブラリの為の宣言

use Inc2734\WP_Customizer_Framework\Framework;
use Framework\Controller\Controller;

この最初の2行についてよく解らない場合は、 WP Customizer Framework と カスタマイザー設定の関数などを使う為の宣言と思ってください。

カスタマイザーの項目(Control)を追加

テネーブル

投稿ページを表示してカスタマイザーを表示している場合、カスタマイザーの「デザイン」には「投稿ページ設定」と言うメニュー項目が展開されます。

その設定項目内に「関連記事のレイアウト」と言う項目がありますので、その項目の下に「関連記事の記事数」と言う新しい項目を追加したいと思います。

テネーブル(アイコン01)

項目(Control)を追加するには、

  1. Framework::control で項目の control を定義
  2. Framework::get_panel で追加する箇所の Panel を取得(Panel が必要な場合)
  3. Framework::get_section で追加する箇所のセクションを取得
  4. Framework::get_control で追加する項目の control を取得
  5. 取得した control に対して、パネルやセクションを join して追加する位置を設定

と言う流れになります。

ルミェール

なんだか全然解らないよね…


まずは、解らなくてもサンプルプラグインのコードにはコメントで番号を付けているよ。見ながら解説を読んでいってね!

ルミェール(アイコン04)

PanelとSectionについて

Panel は、その下にもメニューがある場合の親になる階層メニューの事だと思ってください。
Snow Monkey では、「デザイン」「レイアウト」「SEO/SNS」が該当します。

Section は、その下に項目ページがある階層メニューの事だと思ってください。
Snow Monkey では、「お知らせバー」「デザインスキン」「広告」「ページ速度最適化」などが該当します。

テネーブル

例えば…

デザイン であれば、

デザイン(Panel) > 基礎デザイン設定(Section) > 設定項目(Control)

とメニューが階層になっています。

それに対して、

お知らせバー であれば、

お知らせバー(Section) > 設定項目(Control)

となっています。

Panel と Sectionの違い、わかりましたか?

テネーブル(アイコン01)

今回のサンプルプラグインでは「デザイン」Panelの中に「トグルメニュー」と言う新しい Section を追加し、その中に項目を追加しようと思います。
「デザイン」Panel のキー名は design なので Framework::get_panel( 'design' ); で取得する事が可能です。

項目(Control) について

Framework::control は様々な設定を使えます。
ここでは簡単にいくつかの説明を行います。

Framework::control(
     項目の種類,
     項目の設定キー,
     項目のオプション(配列)
 );

項目の種類は

項目の種類説明
text文字入力
contentコンテンツ
colorカラーピッカー
checkboxチェックボックス
number数値入力
radioラジオボタン
textareaテキストエリア
selectセレクトボックス

となります。

項目の設定キーは、 slug のようなもので、実際に保存される設定のキー名となります。設定値の保存・取得・削除などでも使用します。

項目の設定オプションは配列ですが、項目の種類によって内容は異なり、豊富に用意されています。ここではいくつか基本的な設定オプションのみ記載しています。

項目オプションキー説明
labelラベル文字列
priority優先度
defaultデフォルト値
active_callbackこの設定を表示するかどうかの判定
ルミェール

項目の種類や項目オプションの詳細については、今回は割愛するよ!
こんな種類がいっぱいあるんだと覚えるだけで良いかも。

ルミェール(アイコン01)
テネーブル

すべての項目を覚える必要はありません。
サンプルプラグインでも、色と文字をサンプルとして使う為に colortext の2つのみを使っています。

テネーブル(アイコン01)

カスタマイザー設定の項目の表示について

WP Customizer Framework は、Panel やSection を join する事で、表示するPanelやSection を決定できます。
また、項目オプションの priority で項目内の位置を決定できます。priority の数値順に上から項目が表示されるようになっています。

表示しているページによってカスタマイザーの項目が変更される仕組みは、項目オプションの active_callback の条件で表示の有効 / 無効を制御されます。return true 時にその項目が表示されるようになっています。それにより、表示されているプレビュー画面に応じて設定できる項目を切り替えられると言う訳です。

カスタマイザー時以外について

カスタマイザー画面以外の場合には、Panel や Section が画面に表示されない為、項目定義をPanel や Sectionに joinする必要はありません。

if ( ! is_customize_preview() ) {
	return;
}

と言う処理を行い、カスタマイザーの画面以外では controljoin を行わないようにしています。

設定を保存してみよう

設定の保存は、項目定義を行なって joinすれば、カスタマイザーで設定を保存した際に自動的に設定キーで値を保存されるようになっています。保存を行う為の処理は書く必要がありません。

設定を取得してみよう

保存されている設定の値は使用しなければ、意味がありません。
保存されている設定の値は、get_theme_mod 関数を使用する事で取得ができます。

テネーブル

get_theme_mod 関数で取得を行なった際に、設定されていない場合は Control の項目設定オプションの default の値が使われます。

テネーブル(アイコン01)
ルミェール

is_customize_preview の条件式がControlの定義後に書かれているのは、取得時などに Control 定義を参照するからなんだ!

1ファイルに1項目で別々に書いてるのも、定義だけをしっかり読ませて可読性を良くする為なんだね。

ルミェール(アイコン05)

サンプルプラグインでは my-snow-monkey.php の置換部分で get_theme_mod 関数を使用して設定の値を反映させています。
置換についての解説についてはこれまでの記事で解説していますので、割愛いたします。

テネーブル

get_theme_mod 関数で取得した値は、置換や条件式で使用するなど様々なカスタマイズに利用できます。決まった使い方と言うものはありません。自由に利用しましょう!

テネーブル(アイコン03)

設定を削除してみよう

テネーブル

テーマ設定を削除する関数としては、remove_theme_mod が用意されています。

remove_theme_mod( 削除したいテーマ設定名 ); となります。

テネーブル(アイコン01)
ルミェール

プラグインをアンインストールする時は、追加した設定は不要になる場合が多いよね。

アンインストール時に、設定を削除するようにしてみよう。

プラグインのアンインストール時に呼び出される関数として、 register_uninstall_hook と言うのが専用に用意されているよ。

ルミェール(アイコン01)
WordPress私的マニュアル – register_uninstall_hookページ
Codex日本語版 – remove_theme_modページ

サンプルプラグインでは、my-snow-monkey.php の下記の箇所が該当します。

register_uninstall_hook( __FILE__, '_uninstall' );

function _uninstall() {
	remove_theme_mod( 削除したい設定キー );
}
ルミェール

このコードがプラグインをアンインストールするとテーマ設定が削除されるようにしているよ。
実際にアンインストールする時はプラグインが消されちゃうので、バックアップを取って試そう

ルミェール(アイコン03)

最後に

カスタマイザーにテーマ設定を追加する事で、プログラミングが不得意な方でもカスタマイザーを使用して簡単にテーマカスタマイズを出来るように機能追加をしてあげる事が可能でしょう。
サイト制作者にとって簡単に設定できるようにしてあげるのはWeb制作会社にとってもメリットがある事だと思います。

是非、この機会にカスタマイザーも色々自由に変えてみてはどうでしょう?

テネーブル

サンプルプラグインの構造は、公式アドオンであるSnow Monkey Footer CTAを参考にして制作しています。

興味のある方はそちらのコードも見てみましょう。
この記事の解説が理解された方であれば、Panelの作り方や Sectionの作り方、他のControlの項目設定の方法などもすぐに理解できると思います。

テネーブル(アイコン03)