[キタジマ タカシ]

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

お知らせ記事にかいたように、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:

[キタジマ タカシ]

あ、そうだ、タブブロックは動的ブロック（PHP で表示されるブロック）ではないので、Snow Monkey Blocks をアップデートしたあと、一度ページの編集画面を開くことでタブブロックの HTML が最新版に自動更新されます。なので、タブブロックを設置したページを一度開いて、ページを再保存してから再度試してみてください！
※成功すると、タブボタン部分に smb-tab-for-block-bbd4aa30-44dc-4ff9-b2f2-bbd8bb040b7d という id が追加された状態で表示されるようになります。

♥ 1

Who liked:

[TarCoon☆CarToon]

最初はブロックIDのまま試してしまっていましたが動作しなかったので、

• https://example.com/#smb-tab-for-xxxxx　や
• https://example.com/#smb-tab-for-block-xxxxx　なども

試してみたのですが、思う様に動作しません。

実験的に、

OtheRsや、
https://tarcoon.me/jp/shop/#smb-tab-for-block-bbd4aa30-44dc-4ff9-b2f2-bbd8bb040b7d

誤字脱字の指摘など、
https://tarcoon.me/jp/info/contact/#smb-tab-for-block-906f0fb3-8909-40dc-875b-c0fd789f1d78

リンク先のURLを直接入力して試したところ動作しませんでした。

♥ 0

Who liked: No user

[キタジマ タカシ]

返信遅くなりすみません！外出先で返信しようと思っていたらパソコンがまさかの電池切れだったため、ひとまず実現に必要な技術だけ書いておきます！

あとでコードを書いてみようと思っていますが、お急ぎであれば下記を参考に書いてみてください。

アコーディオンアイテムの HTML の書き換えなので、render_block_snow-monkey-blocks/accordion-item フックを使います。

アコーディオンのタイトルにFont Awesome を表示させたい

このトピックには2件の返信、2人の参加者があり、最後にreadにより1年前に更新されました。 3件の投稿を表示…

snow-monkey.2inc.org

上記トピックでは単純な置換なので str_replace() を使っていますが、今回は開始タグと終了タグの書き換えが必要であり、入れ子を考慮すると単純な置換は難しいので HTML API を使って置換するのが良いと思います。

Introducing the HTML API in WordPress 6.2

WordPress 6.2 introduces WP_HTML_Tag_Processor – a tool for block authors to adjust HTML tag attributes in block markup within PHP. It’s the first …

make.wordpress.org

♥ 1

Who liked: