カスタマイザーをカスタマイズするための基礎 – Snow Monkey カスタマイズ

本記事は、Snow Monkey のカスタマイザーをカスタマイズするための基本的なことについて解説します。

カスタマイザーについて

テネーブル

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

Snow Monkey の カスタマイザーは改造カスタマイズも便利

テネーブル

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

ブリエ

カスタマイザーに新しい設定を追加するのって難しそうです。

テネーブル

通常の WordPress では容易にできない部分もありますが、Snow Monkey はそう言ったのも便利にしてくれるライブラリがありますので通常より簡単にできます。

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

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

GitHub – WP Customizer Framework
ルミェール

WP Customizer Framework ライブラリを開発されているのも、Snow Monkey 開発者のキタジマタカシ氏だよ。

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

カスタマイザーに設定を追加してみよう

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

サンプルプラグインのダウンロード

ケミ

本記事は、該当機能を動作する形でコードを記述済みの My Snow Monkey プラグイン (記事中では、サンプルプラグインと呼ぶようにしています)を用意しました。次のダウンロードリンクからファイルのダウンロードを行ってください。

ご注意

記事の解説用に制作した学習用のプラグインです。実際のウェブサイトでご利用される場合、コードを調整するなどをしてからご利用ください。

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

サンプルプラグインの構造は、次のようになります。

my-snow-monkey

my-snow-monkey.php

customizer

design

sections

toggle-menu

controls

color.php

text.php

section.php

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

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

テネーブル

その Snow Monkey 独自のフックが、アクションフックの snow_monkey_pre_load_customizer と、snow_monkey_post_load_customizer の2つです。

snow_monkey_pre_load_customizer フックは、Snow Monkey テーマのカスタマイザー 設定の読み込みに処理されます。

snow_monkey_post_load_customizer フックは、Snow Monkey テーマのカスタマイザー 設定の読み込みに処理されます。

テネーブル

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

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

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項目で別々のファイルにしていますので、ゆっくりみていきましょう。

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

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

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

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

テネーブル

カスタマイザーを表示していた場合、カスタマイザーの [デザイン] には、通常 [基本ページ設定] や [ヘッダー] , [フッター] と言うメニュー項目が展開されます。

その項目が並んでいる部分に [トグルメニュー] と言う新しい項目を追加したいと思います。

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

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

になります。

ルミェール

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

Panel と Section について

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

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

テネーブル

PanelSectionControl の一覧を整理してみましょう。

[デザイン] であれば、

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

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

それに対して、

[お知らせバー] であれば、

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

となっています。

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

項目(Control) について

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

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

項目の種類 には

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

が使用できます。

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

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

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

今回は、項目の種類項目オプション の詳細について割愛しますが、すべて覚える必要はありません。

サンプルプラグインでは、項目の種類 に関しては、色と文字の color と text の2つのみをサンプルとして使用しています。

詳しく知りたい方は WP Customizer Framework ライブラリの仕様などをご確認ください。

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

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

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

カスタマイザー以外を表示している場合について

カスタマイザー画面以外の画面が表示されている場合、PanelSection は画面に表示されません。その為、項目定義PanelSectionjoinする必要はありません。

if ( ! is_customize_preview() ) {
	return;
}

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

設定を保存してみよう

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

設定を取得してみよう

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

テネーブル

get_theme_mod 関数で取得を行なった時に、カスタマイザーで値が設定されていない場合には Control の 項目設定オプション の default の値を返却値に使われます。

ルミェール

is_customize_preview の条件式が、Control の定義後に書かれているのは、取得時などに Control 定義を参照するからだよ。1ファイルに1項目で別々に書かれているのも、定義だけをしっかり読ませて可読性を良くする為だよ。

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

テネーブル

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

設定を削除してみよう

テネーブル

カスタマイザーのテーマ特有の設定値を削除するために、WordPress 標準で remove_theme_mod 関数が用意されています。

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

ルミェール

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

ブリエ

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

(別記事の「WordPress のカスタムテーブルに関する基礎」内に解説を書いています)

参考ウェブサイト:WordPress Codex日本語版 – remove_theme_modページ
参考ウェブサイト:WordPress私的マニュアル – register_uninstall_hookページ

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

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

このコードで、プラグインをアンインストールした時にカスタマイザーで追加した設定の値も削除されるように処理しているんだ。実際にアンインストールすることを試す時は、プラグインも消されちゃうのでバックアップを取ってから!

最後に

カスタマイザーは、プログラミングが不得意な方でも簡単にテーマをカスタマイズをできる仕組みです。ウェブサイト制作者が簡単に設定できるなるということは、ウェブサイト制作会社にとっても対応工数を減らせると言うことです。カスタマイザーに設定や機能を追加してあげることは、お互いにメリットのあることだと思います。

是非、この機会にカスタマイザーの設定や機能も色々自由にカスタマイズしてみてはどうでしょうか?

ケミ

サンプルプラグインの構造などは、公式アドオンであるSnow Monkey Footer CTA を参考にして制作しました。興味のある方はそちらのコードも見てみてはいかがでしょうか。本記事の解説を理解された方であれば、PanelSectionControl の項目設定の方法なども理解がすぐできると思いますので、応用次第であのようなプラグインも制作できるようになるかもしれません。

この記事の筆者

Kmix39(ケミ)

電子の妖精。当ウェブサイトの記事制作などを行なっています。
金融・不動産・医療・教育などの数々の業種のシステム開発を経験を積み、スマートフォンアプリケーションと WordPress などのウェブアプリケーションを日々勉強中。