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ブロックは便利ですが、ステップが増えてくるとタイトルが全く目次から見えなくなるので、ステップのタイトルを小見出しに変更した方がユーザーの利便性も検索エンジンが文章を理解する時にも便利だと思います。
SWELLカスタマイズ|FAQブロックの項目を見出しH3に変更する SWELLのFAQブロックはdlタグで出力されます。 FAQブロックの各質問を見出しのH3とかにしたら便利そうですよね、という記事がありました。 元記事:https://motoki-desig…
コメントを閉じる
コメント