[Olein_jp]

いつも便利にSnow Monkeyを使わせていただいております。

Snow Monkeyのカスタマイズに直接関係する質問ではないことをお許しください。
現在、個人的に100%GPL無償配布テーマを作成しておりまして、そちらでのカスタマイザー機能構築にキタジマ様が公開されているWP Customizer Frameworkを使ってみようと導入してみたところです。

色々と小手先で触っている程度なのですが、パネルを作成し、セクション、コントロールと追加し、ソースをwp_loaded()経由でインライン書き出しするところまでテストすることができました。

今後、パネルやセクション等々増やしてカスタマイザー構築を進めようと考えているのですが、スタイルの書き出し部分をSnow Monkeyではどのように処理されているのか知りたくGitHub上でソースコードを探求しておりましたが、その箇所は発見できず…でした。

下に私のGitHubにも上げている該当箇所部分のコードを掲載させていただきます。

functions.php

/**
 * Load Customizer
 */
require_once get_template_directory() . '/inc/customizer/customizer.php';

require_once get_template_directory() . '/inc/customizer/output-style.php';

inc/customizer/customizer.php（ほぼ公式ドキュメントのコピー）

/**
 * Load WP Customizer Framework
 */
$customizer = \Inc2734\WP_Customizer_Framework\Customizer_Framework::init();

$customizer->panel( 'design', [
	'title' => 'sample',
	'priority' => 1000,
] );

$customizer->section(
	'base-design',
	[
		'title'    => __( 'Base design settings', 'snow-monkey' ),
		'priority' => 100,
	]
);

$customizer->control(
	'color',
	'accent-color',
	[
		'label'    => __( 'Accent color', 'snow-monkey' ),
		'default'  => '#bd3c4f',
		'priority' => 100,
	]
);

if ( ! is_customize_preview() ) {
	return;
}

$panel   = $customizer->get_panel( 'design' );
$section = $customizer->get_section( 'base-design' );
$control = $customizer->get_control( 'accent-color' );
$control->join( $section )->join( $panel );

output-style.php

add_action( 'wp_loaded', function() {
	$customizer = \Inc2734\WP_Customizer_Framework\Customizer_Framework::init();
	$cfs = $customizer->styles();

	$accent_color = get_theme_mod( 'accent-color' );

	$cfs->register(
		[
			'.c-site-title > a',
			'.c-site-description',
		],
		[
			"color: {$accent_color}",
			"border-bottom-color: {$accent_color}",
		],
		'@media (min-width: 768px)' // Optional
	);
});

このoutput-style.phpファイルでの書き出し処理部分をどのように増築したら良いのか困っております。

https://github.com/Olein-jp/OleinPress-Media/tree/master/inc/customizer

御指南いただければ幸いです。よろしくお願いいたします。

♥ 0

いいねをした人: 居ません

[キタジマ タカシ]

項目を増やしていく方法には、大きく分けて2パターンあると思います。1つは単純に1ファイルに追加していく方法、もう一つは Snow Monkey のように項目ごとに分割する方法です。それぞれにサンプルを書いてみますね。

基本的な考え方

あえて書く必要はないのかもしれませんが、理解しておいたほうがわかりやすいかなと思いますので、まず基本的な考え方を書いておきます。

「パネルの中のセクションの中のコントロール」という考え方ではなくて、「独立したコントロール、セクション、パネルがそれぞれあり、コントロールをどのセクションに属させるか、セクションをどのパネルに属させるかを定義する」と考えてください。

単純な方法

では、まず1ファイルに書いていく方法です。

$customizer = \Inc2734\WP_Customizer_Framework\Customizer_Framework::init();

$customizer->panel( 'design', [ ... ] );
$customizer->section( 'base-design', [ ... ] );
$customizer->control( 'color', 'accent-color', [ ... ] );
$customizer->control( 'number', 'base-font-size', [ ... ] );

if ( is_customize_preview() ) {
	$panel_design           = $customizer->get_panel( 'design' );
	$section_base_design    = $customizer->get_section( 'base-design' );
	
	$control_accent_color = $customizer->get_control( 'accent-color' );
	$control_accent_color->join( $section_base_design )->join( $panel_design );
	
	$control_base_font_size = $customizer->get_control( 'base-font-size' );
	$control_base_font_size->join( $section_base_design )->join( $panel_design );
}

$customizer->panel( 'layout', [ ... ] );
$customizer->section( 'header', [ ... ] );
$customizer->control( 'select', 'header-layout', [ ... ] );

if ( is_customize_preview() ) {
	$panel_layout   = $customizer->get_panel( 'layout' );
	$section_header = $customizer->get_section( 'header' );
	
	$control_header_layout = $customizer->get_control( 'header-layout' );
	$control_header_layout->join( $section_header )->join( $panel_layout );
}

add_action( 'wp_loaded', function() {
	$customizer = \Inc2734\WP_Customizer_Framework\Customizer_Framework::init();
	$cfs = $customizer->styles();

	$accent_color = get_theme_mod( 'accent-color' );

	// accent-color を使ったスタイルの定義を書く
	$cfs->register( ... );

	// base-font-size を使ったスタイル定義を書く
	$cfs->register( ... );
});

移動中に書いていて実際に試せていないので構文エラーなどがあるかもしれません、その際は適宜修正してください…（すみません><）。

♥ 0

いいねをした人: 居ません

[キタジマ タカシ]

項目ごとに分割する方法

Snow Monkey がとっている方法です。項目が多くて1ファイルだとすごく長くなってしまうので、各パネル、各セクション、各コントロールごとにファイルを分割し、それぞれ include する、という方法をとっています。

// snow-monkey/functions.php

use Inc2734\Mimizuku_Core\Helper;

$includes = [
	'/app/customizer',
];
foreach ( $includes as $include ) {
	Helper\load_theme_files( __DIR__ . $include );
}

上記のコードが app/customizer の中にある各カスタマイザーの項目（パネル、セクション、コントロール）を読み込む、という処理になります。Inc2734\Mimizuku_Core\Helper\load_theme_files というメソッドで読み込んでいますが、これは inc2734/mimizuku-core というライブラリの中で定義された関数なので、WP Customizer Framework だけを使いたい場合は使用できません。なので、うーん、ちょっとめんどうですが、1ファイルずつ include させるのが簡単かもしれません。こんな感じ。読み込み順番は、パネル、セクション、コントロールになるようにする必要があります（多分そうしないと未定義でコケちゃう）。

include_once ( get_template_directory() . '/app/customizer/design/panel.php' );
include_once ( get_template_directory() . '/app/customizer/design/sections/base-design/section.php' );
include_once ( get_template_directory() . '/app/customizer/design/sections/base-design/controls/accent-color.php' );
include_once ( get_template_directory() . '/app/customizer/design/sections/base-design/controls/base-font-size.php' );
include_once ( get_template_directory() . '/app/customizer/layout/panel.php' );
include_once ( get_template_directory() . '/app/customizer/layout/sections/header/section.php' );
include_once ( get_template_directory() . '/app/customizer/layout/sections/header/controls/header-layout.php' );

あとは、Snow Monkey のファイルを参考に見てもらえればと思います。

次に、スタイルの定義についてです。これは snow-monkey/app/setup/customizer-styles.php で各スタイル定義用のファイルを読み込んでいます。こちらも inc2734/mimizuku-core のメソッドを使ったりしているので、単純化すると下記のような感じです。

add_action(
	'wp_loaded',
	function() {
		include_once( get_template_directory() . '/assets/css/foundation/_body/_body.php' );
		include_once( get_template_directory() . '/assets/css/object/component/_btn/_btn.php' );
		...
	},
	11 // この数字は Snow Monkey デザインスキンを動作させる都合で必要なものなので、なくても構いません
);

/assets/css/foundation/_body/_body.php などのコードは Snow Monkey のファイルを参考にしてみてください。

---

わからない、動かない、などあればお気軽に書き込みどうぞ！

♥ 0

いいねをした人: 居ません

[Olein_jp]

「パネルの中のセクションの中のコントロール」という考え方ではなくて、「独立したコントロール、セクション、パネルがそれぞれあり、コントロールをどのセクションに属させるか、セクションをどのパネルに属させるかを定義する」と考えてください

この考え方、全然できておらず目から鱗でした。ありがとうございます。

結果的に、前者の「単純な方法」で試してみて、うまい具合にコントロールを新規追加し、プレビューも問題なく、スタイルをページに書き出すことができました。

/**
 * Load WP Customizer Framework
 */
$customizer = \Inc2734\WP_Customizer_Framework\Customizer_Framework::init();

$customizer->panel( 'design', [
	'title' => 'sample',
	'priority' => 1000,
] );

$customizer->section(
	'base-design',
	[
		'title'    => __( 'Base design settings', 'snow-monkey' ),
		'priority' => 100,
	]
);

$customizer->control(
	'color',
	'accent-color',
	[
		'label'    => __( 'Accent color', 'snow-monkey' ),
		'default'  => '#bd3c4f',
		'priority' => 100,
	]
);

$customizer->control(
	'color',
	'description-color',
	[
		'label'    => __( 'Descriptioncolor', 'snow-monkey' ),
		'default'  => '#bd3c4f',
		'priority' => 110,
	]
);

このような感じです。

この後に

if ( ! is_customize_preview() ) {
	return;
}

$panel_design              = $customizer->get_panel( 'design' );
$section_base_design       = $customizer->get_section( 'base-design' );
$control_accent_color      = $customizer->get_control( 'accent-color' );
$control_description_color = $customizer->get_control( 'description-color' );

$control_accent_color->join( $section_base_design )->join( $panel_design );
$control_description_color->join( $section_base_design )->join( $panel_design );

とありますが、

if ( ! is_customize_preview() ) {
	return;
} else {

	$panel_design              = $customizer->get_panel( 'design' );
	$section_base_design       = $customizer->get_section( 'base-design' );
	$control_accent_color      = $customizer->get_control( 'accent-color' );
	$control_description_color = $customizer->get_control( 'description-color' );

	$control_accent_color->join( $section_base_design )->join( $panel_design );
	$control_description_color->join( $section_base_design )->join( $panel_design );

}

こうする必要は特にありませんか？特段、挙動が変わるわけではないようですが、いただきましたコードに、

if ( is_customize_preview() ) {
	$panel_layout   = $customizer->get_panel( 'layout' );
	$section_header = $customizer->get_section( 'header' );
	
	$control_header_layout = $customizer->get_control( 'header-layout' );
	$control_header_layout->join( $section_header )->join( $panel_layout );
}

という記述箇所があったので、こういう処理にした方が良いのかな？とか、素人的に思いましたので…（間違っていると思います…

—–

重ねてお聞きしたいのですが、上記の流れでカスタマイザーを実装していくつもりなのですが、例えばレイアウトの変更などはスタイルの書き出しではなく、条件分岐で読み込むファイルを変える、もしくはCSSクラスを切り替えるなどの処理が必要になってくると思いますが、そちらの方法に関して何かアドバイスいただければ幸いです。

よろしくお願いいたします。

♥ 0

いいねをした人: 居ません

[キタジマ タカシ]

こうする必要は特にありませんか？

PHPMD で「else 使うな！」と怒られるんで、必要ないときは使わないクセがつきました^^; 挙動は変わらないのでどちらでも好きなほうで良いと思います。

例えばレイアウトの変更などはスタイルの書き出しではなく、条件分岐で読み込むファイルを変える、もしくはCSSクラスを切り替えるなどの処理が必要になってくると思いますが、そちらの方法に関して何かアドバイスいただければ幸いです。

カスタマイザーの設定値は get_theme_mod( 'xxx' ); で取得できるので、その値で分岐させたりすることになりますね。例えば、

$output_description = get_theme_mod( 'output-description' );
if ( true === $output_description ) {
  // description を出力
}

みたいな。

♥ 0

いいねをした人: 居ません

[Olein_jp]

ありがとうございます！！

分岐も問題なく動かすことができました！！
あとはもう少しWP Costomizer Frameworkの内部を覗いてどんなことできるのか研究して見たいと思います。

ご指南いただきましてありがとうございました！！

♥ 0

いいねをした人: 居ません

[投稿者]

投稿