[キタジマ タカシ]

JavaScript で開くタイミングを調整しようと思っていたのですが、CSS でやったほうがユーザー側でもタイミング調整しやすいかも？と思ってちょっとやってみています。

.p-global-nav .c-navbar__submenu[aria-hidden="false"] {
  transition-delay: 1s;
}

@media (hover: hover) and (pointer: fine) {
  .p-global-nav .c-navbar__item[aria-haspopup=true]:active:before,
  .p-global-nav .c-navbar__item[aria-haspopup=true]:focus:before,
  .p-global-nav .c-navbar__item[aria-haspopup=true]:hover:before {
    transition-delay: 1s;
  }
}

セレクタはちょっと調整が必要かもですが、こんな感じはどうでしょうか？

♥ 2

Who liked:

[キタジマ タカシ]

一点わかったことがあったので報告です。スライダーブロックのインスペクター（設定パネル）に「画像サイズ」という項目があり、スライダーに配置された画像がそこで設定されたサイズを持っていなかった場合は width と height が未設定になってしまうようです。なのでその他のサイズに変更してみると width と height が追加されるかと思います。

持っていない画像サイズが指定されている場合でも適当な width と height が追加されるようにできるかは引き続き調査します。

♥ 0

Who liked: No user

[キタジマ タカシ]

情報ありがとうございます！ コード的には width と height を入れるようにしていたつもりだったのですが、実際には反映されていないですね…。

snow-monkey-blocks/save.js at master · inc2734/snow-monkey-blocks

A add-on of WordPress theme Snow Monkey. Contribute to inc2734/snow-monkey-blocks development by creating an account on GitHub.

github.com

調査してみます！

♥ 0

Who liked: No user

[キタジマ タカシ]

Jetpack のモジュールのページ（/wp-admin/admin.php?page=jetpack_modules）で、どのモジュールが有効になっているか教えてください！

♥ 0

Who liked: No user

[キタジマ タカシ]

なるほどです。となると

if ( ! is_home() ) {
  return;
}

で良さそうなのですがなんでしょうね。上記のコードを追加した後のコードをここで共有してもらうことはできますか？ こちらでも同じコードを実際に動かして試してみたいと思います。

♥ 0

Who liked: No user

[キタジマ タカシ]

その予約システムを使ったことがないので僕のほうからは正確な回答はできないのですが、Snow Monkey はプレーンな WordPress でできることをできなくするようなことはしていないので、そのシステムが WordPress　と連携可能なものであれば連携は可能だと思います。

♥ 0

Who liked: No user

[キタジマ タカシ]

ユーザーフォーラムは、ご自身が試されたことを共有していただくことが誰かのためになる場所なのでとてもありがたいです！ このコードでも問題ありませんが、強いて言うなら snow_monkey_template_part_render ではなくて snow_monkey_template_part_render_template-parts/loop/entry-summary を使ったほうがコードがシンプルになるかなと思いました。

add_filter(
	'snow_monkey_template_part_render_template-parts/loop/entry-summary',
	function( $html, $name, $vars ) {
		if ( 'post' === $name ) {
			if ( 'rich-media' === $vars['_entries_layout'] ) {
				$html = str_replace( '<a ', '<a target="_top" ', $html );
			}
		}
		return $html;
	},
	10,
	4
);

♥ 0

Who liked: No user

[キタジマ タカシ]

追加CSSで記述しても適用されないという場合は、他に何か考えられる原因はありますでしょうか？

カスタマイザーの追加 CSS はコメントが含まれている場合正しく出力されなくなる場合があるようです。コメントを消してみてもダメな場合はその前に記述している CSS がきちんと閉じられているか、全角スペースが含まれていないか等確認してみたほうが良いかもです。

♥ 1

Who liked:

[キタジマ タカシ]

ブログ投稿ページ（2カラム）の場合のみ、2つのカラムの上に1カラムで見出しを入れたいと考えています。

これは具体的にどのページの種類ことでしょうか？ 例えばブログの一覧ページ（is_home()）のときだけ、ブログの記事ページ（is_single()）のときも含む、カテゴリーアーカイブや年月アーカイブ、検索結果ページはどうする等…。そのあたりをはっきりさせることで条件分岐の条件をどうするかが決まるかなと思います。

♥ 0

Who liked: No user

[キタジマ タカシ]

例えば画像の中のclass=”wp-block-image size-large”に:nth-child(2n)のスタイルを指定したい場合

.wp-block-image:nth-child(2n) とか .wp-block-image.size-large:nth-child(2n) とかですかね。

:nth-child や :nth-of-type はちゃんと理解していないと意図しないところにスタイルが当たってしまうので注意が必要です。

CSSの :nth-child、:nth-of-type などにクラス名を使う落とし穴 | PisukeCode – Web開発まとめ

pisuke-code.com

基本的に、もともとついているクラス名を使ってスタイルを当てるのは、そのクラスを持つ要素すべてのスタイルを変更したいとき、と考えたほうが良いかなと思います。その部分だけ特別にスタイルを変えたいのであれば、既存のクラス名を使うのではなく、独自に追加したクラス名を使うのが良いと思います。ブロックを選択してインスペクター（設定パネル）の高度な設定のところで独自のクラス名を追加できます。

♥ 1

Who liked:

[キタジマ タカシ]

GitHub でコードを見ると border ではなく box-shadow になっているようですがどうですかね？

snow-monkey-design-skin-rn-simple/design-skin.css at master · Rindou/snow-monkey-design-skin-rn-simple

Snow Monkeyのデザインスキン「リンドウ・シンプル」. Contribute to Rindou/snow-monkey-design-skin-rn-simple development by creating an account on GitHub.

github.com

デベロッパーツールで実際どういう CSS が適用されているのか確認すると良いと思います。

♥ 2

Who liked:

[キタジマ タカシ]

例えばアクセントカラーや基本文字サイズが反映されないのでしょうか？

だとすると、これらは snow-monkey/assets/css/app/foundation/_body/_app.php で出力されているので、ここをデバッグしてみると何かわかるかもしれません。例えばアクセントカラーであれば、このファイルの57行目を

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

から

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

としてみてちゃんとアクセントカラーの設定値が画面に出力されるか確認する等。

PHP バージョンが原因かはわかりませんが、PHP バージョンの違いによる動作確認は wp-env でできそうです。

@wordpress/env

wp-env を使用してプラグインやテーマのビルド用とテスト用の WordPress ローカル環境を…

ja.wordpress.org

Local by Flywheel でも多分できると思います。

♥ 0

Who liked: No user

[キタジマ タカシ]

あーなるほどです。メガメニューに限らず普通のメニューももしかしたらそうしたほうが良いかもですね。ちょっと実際に遅延させてみて操作感を確かめてみたいと思います！

♥ 0

Who liked: No user

[キタジマ タカシ]

キャッシュ系ではなくて「JavaScript遅延読み込み」でしたか！ なるほどです。情報ありがとうございます！

トピックは閉じてしまってよろしいでしょうか？

はい、解決済みということで、クローズお願いします！

♥ 1

Who liked:

[キタジマ タカシ]

確認しました。確かにプレビュー内で遷移したり、投稿やアーカイブページを開いた状態でカスタマイザーを起動しても当該メニューが表示されませんでした。

ちょっとまだ何も原因はわかっていないのですが、ページの遷移がかなり速いのが気になりました。インストールしたてでデータが少ないから、だけなのかもしれませんが、エックスサーバーを使用されているということで、サーバー側のキャッシュ機能（Xアクセラレータ、XPageSpeed、mod_pagespeed等）を有効にされているのであれば、もしかしたらそれが原因という可能性もあるのかな？と思いました。もし初期設定ではなくてご自身で有効にされたものがあるのであれば、一度オフにして確認してみてください！

♥ 1

Who liked:

[投稿者]

投稿