[キタジマ タカシ]

最新ということは

Snow Monkey v27.2.2
Snow Monkey Blocks v22.2.1

ですかね。

現状、.smb-spider-pickup-slider .spider__canvas の min-height が指定されていて最低限の高さが決まっているので、まずはそれを無効にする必要があります。その上で、height を追加してガチガチに固定してしまうとか、aspect-ratio で固定してしまうとかかなぁと。

.smb-spider-pickup-slider .spider__canvas {
  min-height: auto !important;
  aspect-ratio: 16 / 9;
}

♥ 5

Who liked:

[Olein_jp]

今後、同じような要望や問題を抱えた方がこちらのスレッドを閲覧される際に、各プロダクトのバージョンが明記されていた方が共有知になり得ると思いますので、お手隙の際に掲載をお願いします。

【お使いの Snow Monkey のバージョン】
【お使いの Snow Monkey Blocks のバージョン】
【お使いの Snow Monkey Editor のバージョン】
【お使いのブラウザ】
【当該サイトのURL】

♥ 13

Who liked:

[TarCoon☆CarToon]

https://snow-monkey.2inc.org/2024/09/28/snow-monkey-blocks-v22-2-0/

アップデート情報を確認しました！
思った通りに動作して大変満足しております！

トピックを閉じさせていただきますね。ありがとうございました。

♥ 1

Who liked:

[キタジマ タカシ]

あーなるほど、これちょっと難しい問題ですね…。

お知らせ記事にかいたように、2つの状況でタブが開く機能を追加しました。

1. タブの ID を指定したアンカーリンクからページを開いたとき
2. タブの ID を指定したページ内リンクをクリックしたとき

タブブロックが設置されているページ「以外」から、https://example.com/#smb-tab-for-{タブのID} へのリンクをクリックすると、そのタブブロックの位置までページがスクロールし、タブが開きます。このとき、「タブブロックの位置までページがスクロール」は「Snow Monkey テーマ」の機能で実施され、「タブが開く」は「Snow Monkey Blocks」の機能で実行されています。

そして、その状態で https://example.com/#smb-tab-for-{他のタブのID} をクリックしたら、そのタブに切り替わってほしいということですよね。それは上記に書いた「タブの ID を指定したページ内リンクをクリックしたとき」に該当すると思うのですが、現状だと、この機能は <a href="#smb-tab-for-{他のタブのID}">、つまり URL を含まずにアンカーだけが指定されたリンクにしか反応しないようになっているため、https://example.com/#smb-tab-for-{他のタブのID} というリンクだと機能しないんです。

で、そこを https://example.com/#smb-tab-for-{他のタブのID} というリンクでも開くようにするのはまぁなんとかできるかも？という気がするのですが（未検証・未開発）、スクロールがどうかなぁという感じです。

「「タブブロックの位置までページがスクロール」は「Snow Monkey テーマ」の機能で実施され」と書きましたが、これはページが開いた瞬間のときに実行されるので、すでに開いているときは実行されないんですよね。シンプルに HTML の機能としてアンカーリンクで移動させるようにする（※現在のタブ操作では無効化している）のはできはするのですが、そうすると Snow Monkey のヘッダーがオーバーレイとかになっているときにそれが考慮されずに重なってしまいます。だからリンクに u-smooth-scroll クラスをつけてスムーススクロールさせればヘッダー位置を考慮してスクロールしてくれるのかもしれませんが、スムーススクロールになっちゃうのと、そもそもタブを開く機能と干渉して効かなかったりしないかな…みたいな…。

と、色々気になるのですが、ひとまず調査してみます…。

♥ 2

Who liked:

[キタジマ タカシ]

plugins/my-snow-monkey/view の中が子テーマと同じ感じになるので、plugins/my-snow-monkey/view/header.php、plugins/my-snow-monkey/view/footer.php をつくれば上書きできます。

♥ 0

Who liked: No user

[キタジマ タカシ]

あーほんとですね…。僕が DOMDocument に詳しくなく、入れ子を維持したままタグの置換をおこなう方法がよくわからなかったので、preg_replace() を使って span.smb-accordion__item__title__label を h2.smb-accordion__item__title__label に置換するコードを書いてみました。入れ子の深いところを h2 に置換するので HTML にこれで良いのかよくわかりませんが、とりあえず置換はうまくいきました。

add_filter(
	'render_block_snow-monkey-blocks/accordion-item',
	function( $block_content ) {
		return preg_replace(
			'|<span class="smb-accordion__item__title__label">(.+?)</span>|ms',
			'<h2 class="smb-accordion__item__title__label">$1</h2>',
			$block_content
		);
	}
);

ただ、Snow Monkey Blocks のアップデート等により、クラス名が変わったり span に属性が追加されたりすると、この置換処理は効かなくなるので、その点はご注意ください。

♥ 1

Who liked:

[TarCoon☆CarToon]

大変失礼いたしました。リリース記事を参考にIDを設定するとIDは固定化されました。

タブパネルブロックに任意の ID（HTML アンカー）を指定することもできるようになりました。例えば tab-a という HTML アンカーを入力したとすると、タブパネルの ID は tab-a となり、そのタブパネルのためのタブ（ボタン）には smb-tab-for-tab-a という ID がつきます。（https://snow-monkey.2inc.org/2024/09/28/snow-monkey-blocks-v22-2-0/）

しかし、一度リンクを開き、移動先のページ内のタブのリンクをクリックすると動作しなくなってしまいます。
ID のタブが開いた状態 + そのタブの位置までページがスクロールされた状態でページが開かせたいのですが動作しません。

 

ヘッダーに設置したタブリンク

• https://tarcoon.me/jp/shop/#smb-tab-for-ShoP-1
• https://tarcoon.me/jp/shop/#smb-tab-for-ShoP-2
• https://tarcoon.me/jp/shop/#smb-tab-for-ShoP-3

 

フッターに設置したタブリンク

• https://tarcoon.me/jp/info/contact/#smb-tab-for-ConTact-1
• https://tarcoon.me/jp/info/contact/#smb-tab-for-ConTact-2
• https://tarcoon.me/jp/info/contact/#smb-tab-for-ConTact-3
• https://tarcoon.me/jp/info/contact/#smb-tab-for-ConTact-4
• https://tarcoon.me/jp/info/contact/#smb-tab-for-ConTact-5

♥ 0

Who liked: No user

[TarCoon☆CarToon]

これは、もしかして毎回にidが変わってしまう感じでしょうか？
設定をしなおしたり確認するたびに、変わっていたので
入れ直していたのですが、なかなかうまく動作しません😢😢😢

♥ 1

Who liked:

[キタジマ タカシ]

なるほどです。Snow Monkey Blocks のスライダーはドラッグでスライドやフェードするようになっているので、それと干渉しているのかもしれません。CSS ではなくて JavaScript でリンクの処理をしたりすればなんとかなるかもしれませんが、無駄に複雑になる気がするので、別なスライダー系プラグインの使用を検討したほうが良いかもしれません…。

♥ 1

Who liked:

[read]

お忙しいところご返信いただきましてありがとうございます！

早速いただいたコードで試してみましたが、同様にリンクが開かない場合がありました。

Macで、ChromeとSafariで試しています。

・スマホでは開くことができることの方が多いが、たまにタップしてもリンクが開かない場合がある
・パソコンではMagic Mouseを使っているが、有線マウスに変えたところ、「リンクが開かない」の頻度が下がった

何度も検証した結果、「クリックしながら少しでも横スクロールさせてしまうとリンクが開かない」ということがわかりました。意識して「さっ」とクリックした場合は100%開きません。
要素の上でマウスを静止して、2秒ほど数えてからクリックするとリンクが開きます。
スマホでのタップも、画面を静止してから真上からポンと押すと確実にリンクが開きます。

MagicMouseの場合、繊細な動作を読み取るので、自分のクリックの仕方が悪いのか、普通にクリックしているつもりでも90%くらい1回目のクリックで開かずストレスを感じていました。
普通の有線マウスの場合は、20%ぐらいの確率で開きません。

CSSのみで横スクロールをさせているコンテンツでは問題なくリンクが開くのですが、Snowmonkeyのコンテンツスライダーのみこの現象が起こってしまいます。
これは仕様上仕方がないでしょうか？

♥ 0

Who liked: No user

[diiih]

問題解決いたしました。このページに複数フォームがありまして、１つが複製したものでIDにprefが設定したままで干渉していたようです。確認不足で申し訳ありません。

GONSYさん、ご指摘ありがとうございます。こちらは半角英数字にしました。

解決したので閉じさせていただきます。ありがとうございました。

♥ 1

Who liked:

[キタジマ タカシ]

調査してみたところ、2つの要因がありました。

1つ目は、Snow Monkey のパンくずはページのクエリを参照してリストを生成しているということです。例えば、詳細ページ用のリストはページが is_single() のときに生成され、アーカイブページ用のリストはページが is_archive() のときに生成されます。ループの中だとしてもページのクエリは is_arhive() が true になるので、アーカイブページ用のリストが出力されてしまう、ということになります。

2つ目は、Snow Monkey のパンくずは一度生成したリストをキャッシュするようになっているので、↑の対策をしたとしてもキャッシュされたパンくずを出力してしまうために同じリストが繰り返し表示されてしまうということです。

上記2つに対して対策してみたコードが下記になります。

/**
 * ループのメタ情報部分にパンくずを追加する。
 */
add_filter(
	'snow_monkey_template_part_render_template-parts/loop/entry-summary/meta/meta',
	function( $html ) {
		query_posts( array( 'p' => get_the_ID() ) ); // これが重要。クエリを記事用に再生成する。
		ob_start();
		\Framework\Helper::get_template_part( 'template-parts/common/breadcrumbs' );
		$breadcrumbs = ob_get_clean();
		wp_reset_query(); // クエリをもとに戻す
		return $html . $breadcrumbs;
	}
);

/**
 * パンくずを都度生成するようにする。
 */
add_filter(
	'snow_monkey_get_template_part_args_template-parts/common/breadcrumbs',
	function( $args ) {
		$breadcrumbs       = new \Inc2734\WP_Breadcrumbs\Bootstrap();
		$breadcrumbs_items = $breadcrumbs->get();
		// $breadcrumbs_items = apply_filters( 'snow_monkey_breadcrumbs', $breadcrumbs_items ); // 必要ならコメントアウト

		$args['vars']['_items'] = $breadcrumbs_items;
		return $args;
	}
);

なんとなくあんまりきれいな処理ではない気がするので、気になるようなら自作したほうが良いかもしれません…。

♥ 0

Who liked: No user

[GONSY]

郵便番号のテキスト属性【ID】に zip を指定していれば、pref や city を指定した場所に自動入力されると思いますが、いかがでしょうか？
URLが非公開ということでデベロッパーツールでの検証はできませんが、コンソールにエラーなどは出ていませんか？
 
それと、属性【NAME】は英語表記が一般的ですが、ご提示の画像は 都道府県 と日本語を使用されていらっしゃる理由は何でしょうか？

♥ 2

Who liked:

[キタジマ タカシ]

こちらの環境では、一応下記の CSS でクリックできることを確認しました。（Mac Chrome）

.contents-slider-link {
  position: relative!important;
}

.contents-slider-link * { /* セレクタは要調整 */
    position: static;
}

.contents-slider-link p.contents-slider-link-url {
  position: absolute!important;
  top:0!important;
  left: 0!important;
  width: 100%!important;
  height: 100%!important;
  z-index:999!important;
}

.contents-slider-link a {
  background: red; /* リンクが広がっているか確認しやすくするため用 */
  position: absolute!important;
  top:0!important;
  left: 0!important;
  width: 100%!important;
  height: 100%!important;
  z-index:999!important;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}

♥ 1

Who liked:

[キタジマ タカシ]

書いてみました！WordPress の HTML API で書き換えられるのは属性だけでタグは書き換えられなかったので、PHP の DOMDocument と DOMXPath を使ってみました。

add_filter(
	'render_block_snow-monkey-blocks/accordion-item',
	function( $block_content ) {
		$doc = new \DOMDocument;
		$doc->loadXML( $block_content );

		$xpath = new \DOMXPath( $doc );
		$divsToReplace = $xpath->query( "//div[contains(@class, 'smb-accordion__item__title')]" );

		foreach ( $divsToReplace as $div ) {
			$h2 = $doc->createElement( 'h2', $div->nodeValue );
			foreach ( $div->attributes as $attr ) {
				$h2->setAttribute( $attr->name, $attr->value );
			}
			$div->parentNode->replaceChild( $h2, $div );
		}

		return $doc->saveXML();
	}
);

render_block_{ブロック名} フックが実行されるのはフロントだけで、エディター上では下記変わらないのでご注意ください。

♥ 1

Who liked: