[Olein_jp]

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

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

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

♥ 0

Who liked: No user

[キタジマ タカシ]

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

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

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

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

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

みたいな。

♥ 0

Who liked: No user

[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

Who liked: No user

[キタジマ タカシ]

項目ごとに分割する方法

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

Who liked: No user

[キタジマ タカシ]

項目を増やしていく方法には、大きく分けて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

Who liked: No user

[キタジマ タカシ]

あ！！ほんとだ、すみません！

とりあえずの対策ですが、/app/public/wp-content/themes/snow-monkey/app/setup/dependency/elementor.php の、if ( ! defined( 'ELEMENTOR_VERSION' ) ) { の上の行に use Inc2734\Mimizuku_Core\Helper; と入れていただくと解決するかと！

♥ 0

Who liked: No user

[花村 貴史]

追加です。

試しにElementorでページを作ってみようとしたところ、以下のエラーが表示されました。

手順は

・新規固定ページの作成（旧エディタ）
・「Elementorで編集」ボタンをクリック

です。

♥ 0

Who liked: No user

[Mio Urakami]

こちら、新機能の「ローカルナビゲーションウィジェット」で対応いただいたので、トピックを閉じますね。

WooCommerce 対応の強化や便利ウィジェットの追加、デザインの調整などをおこなった Snow Monkey v4.4 をリリースしました

v4.4 の更新内容 機能追加 ローカルナビゲーションウィジェットを追加デフォルトアイキャッチ画像の設定機能を…

snow-monkey.2inc.org

♥ 0

Who liked: No user

[M T]

申し訳ございません。よく見ないで返信してしまいました。 $args[‘post__not_in’] = [ get_the_ID() ];がそうですね。

♥ 0

Who liked: No user

[キタジマ タカシ]

v4.4.0 から、下記のコードで制御できるようになります。来週月曜リリース予定です！

add_filter(
    'inc2734_wp_awesome_widgets_taxonomy_posts_widget_args',
    function( $args ) {
        if ( is_singular() ) {
            $args['post__not_in'] = [ get_the_ID() ];
            $args['orderby'] = 'name';
        }
        return $args;
    }
);

♥ 0

Who liked: No user

[山崎 大祐]

キタジマ様

超特急な、ご対応ありがとうございます！大変うれしいです

きっと他のかたもニーズはあるかと思います。特に、小さな商店などは。

なぜ「PC サイズでのみ表示されます。」としていたかというと、「ヘッダーの中」にいれて表示させると、固定ヘッダーのときにヘッダーの占める割合が多くなるなぁとか、条件でいろいろ調整するのが難しいというのが理由でした。

もちろん、スマホユーザーiphoneSEなどは画面が占領させお客様にとっては、良くないことを担当のものにつたえたのですが、エンドユーザー様にとっては、ロゴと電話番号が一番だと押し問答状態でした。

感謝いたします！

♥ 0

Who liked: No user

[キタジマ タカシ]

つくってみました！結構良さそうなので v4.4.0 のアップデートで反映したいと思います！ご提案ありがとうございます。

PC

モバイルでも表示に未チェックの場合

モバイルでも表示にチェックした場合

♥ 0

Who liked: No user

[キタジマ タカシ]

なぜ「PC サイズでのみ表示されます。」としていたかというと、「ヘッダーの中」にいれて表示させると、固定ヘッダーのときにヘッダーの占める割合が多くなるなぁとか、条件でいろいろ調整するのが難しいというのが理由でした。

でもご提示のサイトをみて思ったのですが、こういう感じで、

• PCのときはヘッダーの右側
• スマホ/タブレットのときは（ヘッダーの中じゃなくて）コンテンツの最上部

と別に表示させれば良いな！と気づきました。ありがとうございます！

チェックマークの分岐で、ロゴの下に表示させられると最高です。

ここはちょっと悩むところで、あまり設定項目は増やしたくないので、もしヘッダーコンテンツがある場合はスマホでも当然でてほしい、という方が大多数であれば特に設定はもうけずに、必ずでるようにしたほうが良いと思うんですよね。ちなみに山崎さんのお仕事ではどうでしょう？

ちょっと考えます！

♥ 0

Who liked: No user

[キタジマ タカシ]

<div class="accbox">
    <!--ラベル1-->
    <label for="label1">〜</label>
    <input type="checkbox" id="label1" class="cssacc" />
    <div class="accshow">
        <!--ここに隠す中身-->
        <p>・〜</p>
        <p>・〜</p>
        <p>・〜</p>
        <p><img src="....." alt=""></p>
    </div>
    <!--//ラベル1-->

コードを見ると次のようになっており、.accbox が閉じられていないのでは？と思ったのですがどうでしょうか？

♥ 0

Who liked: No user

[キタジマ タカシ]

早速、やってみました！追加CSSを使えば、こんなことが出来ちゃうんですね！感動！！

良かったです！

「クラシックブロック」を選択していましたが、エラーが出たということは、僕のHTMLの書き方がミスったというよりは、まだGutenberg が不安定ということなんでしょうか？

そうなんですね。Chrome でしか試したことがなくて恐縮ですが、Chrome のデベロッパーツールを開いた状態で編集画面（Gutenberg）を開くと、Console タブになんでエラーになったのかというのが赤字で表示されるんじゃないかと思います。実際に出力されている span タグを見る限りでは構文違反とかはなさそうにみえますが、Gutenberg 的に NG ということがあるのかもしれませんし、または単純に不安定でバグ、ということもあるかもしれません。

直感的に作れるし他のページにも使いたいと思っていますが、もしプロの目から見て「確かに！」って感じなら、初めは不慣れでもGutenbergに慣れていった方が後々いいのかも、と思いながら悩んでいます。

これはいろいろなスタンスの人がいるのであくまで一参考に捉えていただければと思うのですが、僕は dispo さんのトップページの HTML がめちゃくちゃだとは思いませんし、表示速度が離脱したくなるほど遅いとも思いません。もちろんプロがオーダーメイドでコーディングしたほうがスマートで無駄のないマークアップはできるとは思いますが、現代の検索エンジンはマークアップがキレイだから上位表示させようということはないと僕は思いますし、最低限見出しは見出しタグで、みたいなことができていればよいのではないかと思います。

また、表示時間もいま2秒くらいで表示されているようで、理想を言えばもっと早いほうが良いのでしょうが、検索順位を極端に落とされるほど遅いとは思いません。Elementor を使うことで処理量は増えるので、使わないよりは遅くなりがちだとは思いますが、表示時間を計測して許容範囲内であれば使っても全然良いのではないかと思います。

♥ 0

Who liked: No user