お問い合わせ

SWELLカスタマイズ|ステップブロックのステップを見出しタグ(h3/h4)に変更する

この記事の機能は、SWELL Ver2.7.6以降でサポートされました。今後は、この記事のカスタマイズを行わなくても、最新のSWELLを使えばステップブロックを見出しに対応させることができます。

もし、古いバージョンのSWELLを使っていてバージョンアップができない場合のみ、この記事のカスタマイズを利用してください。

SWELLにはステップブロックがありますよね。

こんなやつです。

STEP
ステップタイトル①

内容①

STEP
ステップタイトル②

内容②

このタイトル部分をh3やh4タグに変更できたら便利だと思いませんか?

SWELLのフォーラムでも要望が上がっていました。

この記事は、そんな人のためのカスタマイズになります。

ステップブロックのタイトルをh3タグに置き換えるカスタマイズ

『高度な設定』の『追加 CSS クラス』にh__4を追加すると、見出しがh4になります。

『高度な設定』の『追加 CSS クラス』にh__3を追加すると、見出しがh3になります。

何も指定しなければ、見出しタグを追加しません。

カスタマイズコード

コードの簡単な説明です。

render_block_loos/stepフックを使って、ブロックを描画するまえのHTMLを加工しています。

faqブロックと異なり、divタグの前にhタグを追加するのではなく、divタグをhタグに置き換えないといけないので、処理が複雑というか煩雑になっています。

<?php
add_filter( 'render_block_loos/step', function($block_content, $block){
	
	if(array_key_exists('className', $block['attrs'])){
		$str = $block['attrs']['className'];
	}else{
		$str = "";
	}
	$check_h4 = "h__4"; 
	$check_h3 = "h__3"; 
	if ( strpos( $str, $check_h4 ) !== false ) {  $htag="h4";}
	if ( strpos( $str, $check_h3 ) !== false ) {  $htag="h3";}
	if(empty($htag)){return $block_content;}
	
	// stepタイトルを取得 PREG_SET_ORDER
	$has_step = preg_match_all( '|<div class="swell-block-step__title.*?>.*?<\/div>|im', $block_content, $step_list, PREG_SET_ORDER );

	//  stepタイトルがなければ何もしない
	if ( ! $has_step ) return $block_content;

	//  各stepタイトルのdivを置き換える
	foreach ( $step_list as $num => $step ) {
		$step_list_h[$num] = str_replace('<div class="swell-block-step__title', '<'.$htag.' class="swell-block-step__title', $step_list[$num]);
		$step_list_h[$num] = str_replace('</div>', '</'.$htag.'>', $step_list_h[$num]);
		$block_content = str_replace($step_list[$num],$step_list_h[$num], $block_content);
	}
  return $block_content;
}, 20, 2 );
.swell-block-step__item h3,
.swell-block-step__item h4 {
    padding: 0;
    margin: 0;
    font-size: 1em;
	border:none;
}
@media (min-width: 600px) {
.swell-block-step__item h3,
.swell-block-step__item h4{
        font-size: 1em;
    }
}
.swell-block-step__item h3::before,
.swell-block-step__item h4::before {
    background: none;
}

STEPブロックのタイトルをh3タグにする実施例

『高度な設定』の『追加 CSS クラス』にh__3を追加すると、見出しがh3になります。

STEP

ステップタイトル①

内容①

STEP

ステップタイトル②

内容②

STEPブロックのタイトルをh4タグにする実施例

『高度な設定』の『追加 CSS クラス』にh__4を追加すると、見出しがh4になります。

STEP

ステップタイトル①

内容①

STEP

ステップタイトル②

内容②

まとめ

stepブロックは便利ですが、ステップが増えてくるとタイトルが全く目次から見えなくなるので、ステップのタイトルを小見出しに変更した方がユーザーの利便性も検索エンジンが文章を理解する時にも便利だと思います。

他の人にもシェアしてね
コメントを閉じる

コメント

コメントする

コメントは日本語で入力してください。(スパム対策)

クリックできる目次