[m.yosh]

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

### 実現したいこと

「コンテンツスライダー」に連動するサムネスライダー（スライダーブロックの「ドットをサムネイルに変更」のイメージ）を付けることは可能でしょうか？
自動生成でなく手動で作成してもよいのですが、コンテンツスライダーと連動するようにしたいです。（サムネをクリックで該当スライドを表示する。できればサムネ画像は別途指定した画像を使いたいです。

♥ 0

Who liked: No user

[キタジマ タカシ]

あまりスマートではありませんが、一応こんな感じで、できはしました。
「ドットを表示」でドットを出した上で、render_block_ フックでドットを任意の画像に置換させています。

add_filter(
	'render_block_snow-monkey-blocks/spider-contents-slider',
	function ( $block_content ) {
		$p = new \WP_HTML_Tag_Processor( $block_content );
		if ( $p->next_tag() ) {
			// 追加 CSS クラスに「smb-contents-slider-1」を入力したブロックが対象
			if ( $p->has_class( 'smb-contents-slider-1' ) ) {
				// サムネイル用の CSS を適用
				if ( $p->next_tag( array( 'class_name' => 'spider__dots' ) ) ) {
					$p->set_attribute( 'data-thumbnails', 'true' );

					$block_content = $p->get_updated_html();
				}

				// 1個目のドットを書き換え
				$block_content = preg_replace(
					'|<button(.*?)data-id="0"(.*?)>(.*?)</button>|s',
					'<button$1data-id="0"$2><img src="https://placehold.jp/100x100.jpg" alt="0" /></button>',
					$block_content
				);

				// 2個目のドットを書き換え
				$block_content = preg_replace(
					'|<button(.*?)data-id="1"(.*?)>(.*?)</button>|s',
					'<button$1data-id="1"$2><img src="https://placehold.jp/100x100.jpg" alt="1" /></button>',
					$block_content
				);
			}
		}
		return $block_content;
	}
);

♥ 1

Who liked:

[m.yosh]

ご提示いただいたコードを試したところ想定通りうまく行きました！

こういうやり方があったのですね。

他の方法を探さすしかないかと思っていたので助かりました。

どうもありがとうございます。

トピックを閉じます。

♥ 1

Who liked:

[投稿者]

投稿