SWELLのFAQブロックはdlタグで出力されます。
FAQブロックの各質問を見出しのH3とかにしたら便利そうですよね、という記事がありました。
元記事：https://motoki-design.co.jp/wordpress-customize/blog/swell-faq-h3/
the_contentフィルターフックを使って、FAQブロックのHTMLを見出しタグに置換するという内容です。
以前、FAQブロックの構造化データ出力のON・OFFを一括で行うという記事を書いた時には、FAQブロックのrender_blockフックを使ってカスタマイズを行いました。
ブロックのカスタマイズの場合は、ブロックを使う時だけ呼び出されるrender_blockフックを使う方が無駄がないのでは？と思いました。
この記事では、FAQブロックの質問をH3等の見出しに置き換えるカスタマイズをご紹介します。
FAQブロックの項目を見出しH3に変更するカスタマイズの内容
add_filter( 'render_block_loos/faq', function($block_content, $block){
$content = str_replace('<dt class="faq_q">', '<h3><dt class="faq_q">', $block_content);
$content = str_replace('</dt>', '</dt></h3>', $content);
return $content;
}, 20, 2 );.swell-block-faq h3 {
padding: 0;
margin: 0;
font-size: 1em;
}
@media (min-width: 600px) {
.swell-block-faq h3 {
font-size: 1em;
}
}
.swell-block-faq h3::before {
background: none;
}- 見出しのテストです。
答えです。
まとめ：FAQブロックの項目を見出しH3に変更する
カスタマイズそのものは、前回の記事（SWELLのFAQブロックのJSON-LD出力を一括でONにする）と参考サイトの記事を組み合わせれば、簡単にできました。
しかし、見出しがH3固定になってしまうのはどうなのかな？と思いました。
SWELLのFAQブロックの設定として見出し出力のON/OFFと、見出しの種類を選べるようになればいいのかもしれませんが、それはそれで設定項目が増えますし、過去記事のFAQブロックはどうするんだ！という話になり、構造化データ出力と同じ問題が発生します。
もし、個別に見出し出力のON/OFFと種類を指定できるカスタマイズをするなら、FAQブロックの高度な設定のCSSでパラメータを渡してあげて、カスタマイズコード内で条件判定するのが一番簡単だとおもいます。
$block['attrs']['className']に追加したclass名が渡されてきますので、reder_block内部で判定できます。
["attrs"]=>
array(2) {
["outputJsonLd"]=>
bool(true)
["className"]=>
string(3) "AAA"
}追加CSSから動作を変更するカスタマイズについては、以下の記事で取り扱っています。
コメント