[キタジマ タカシ]

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

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

いいねをした人:

[キタジマ タカシ]

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

♥ 0

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

[キタジマ タカシ]

あーほんとですね…。僕が 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

いいねをした人:

[キタジマ タカシ]

あ！そうでした！これコアが自動生成する物を使ってから、特定のタイミングで変わっちゃうんです。タブパネルブロックの高度な設定のところでアンカーを設定するとそれが固定的に使われるようになるので、アンカーを設定してみてください！

♥ 0

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

[キタジマ タカシ]

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

♥ 1

いいねをした人:

[キタジマ タカシ]

調査してみたところ、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

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

[キタジマ タカシ]

こちらの環境では、一応下記の 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

いいねをした人:

[キタジマ タカシ]

スライダーブロックの設定パネルで「アニメーションの速さ（秒）」を5秒にすればかなりゆっくりになると思いますがどうでしょうか？

♥ 0

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

[キタジマ タカシ]

書いてみました！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

いいねをした人:

[キタジマ タカシ]

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

♥ 1

いいねをした人:

[キタジマ タカシ]

一旦、試してみますので、もうしばらくトピックはこのままでも良いでしょうか？

はい！解決したら閉じてください！

これは本当に余談ですが、下記URLもスノーモンキーで構築さてれいますね！

ですね！オレインさんが作られているサイトですが、目を通すと基本的なカスタマイズの方法はわかってくると思うのでおすすめです。

♥ 0

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

[キタジマ タカシ]

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

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

アコーディオンアイテムの 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

いいねをした人:

[キタジマ タカシ]

いくつか方法が考えられます。

## カスタム HTML ブロックを使う

これが1番簡単です。ホームページに割り当てた固定ページの編集画面で、カスタム HTML ブロックをいれて、そこに任意の HTML を書く方法です。PHP は書けないので、PHP も書きたい場合は他の方法が必要になります。

## 子テーマを使う

子テーマをお使いであれば、子テーマの中にトップページ用のテンプレートを作ることで、元のテンプレートを上書きできます。子テーマの中に /templates/view/front-page.php をつくって、そこに任意の HTML や PHP を書いてみてください。

## My Snow Monkey プラグインを使う

既に制作が進んでいて子テーマに切り替えられない場合は My Snow Monkey プラグインでもテンプレートの上書きができます。

まず、下記を参考に My Snow Monkey プラグインでテンプレートの上書きができるように準備をしてください。

My Snow MonkeyからSnow Monkeyのテンプレートファイルを上書きするための準備

子テーマでのカスタマイズであれば、親テーマと同じ階層を作り、そこに上書きしたいテンプレートファイルと同じファイ…

happy-snow-monkey.olein-design.com

できたら、plugins/my-snow-monkey/view というディレクトリ内にテンプレートを作ることで元のテンプレートを上書きできるようになるので、plugins/my-snow-monkey/view/templates/view/front-page.php をつくって、そこに任意の HTML や PHP を書いてみてください。

♥ 0

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

[キタジマ タカシ]

多分ブロックの ID は block-a08315cc-〜 となっていると思うので、smb-tab-for-block-a08315cc-〜 とするとどうでしょうか？

♥ 1

いいねをした人:

[キタジマ タカシ]

Snow Monkey Blocks v22.2.0 で機能を追加してみました。

Snow Monkey Blocks v22.2.0 をリリースしました

Snow Monkey Blocks v22.2.0 の概要 機能追加 タブ タブのIDをアンカーとして指定す…

snow-monkey.2inc.org

アップデートして試してみてください！

♥ 0

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

[投稿者]

投稿