お問い合わせ

SWELLカスタマイズ|FAQブロックの項目を見出しH3に変更する

  • URLをコピーしました!

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等の見出しに置き換えるカスタマイズをご紹介します。

この記事を書いた人

Wordpressのカスタマイズ歴10年のプロです。無料から有料までWordpressテーマの使用経験は豊富で、テーマのカスタマイズに関する知見も深い。Webサイト制作からカスタマイズまで仕事を請け負った実績は多数あり。

目次

カスタマイズの内容

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;
}

見出しのテストです。

答えです。

まとめ

カスタマイズそのものは、前回の記事参考サイトの記事を組み合わせれば、簡単にできました。

しかし、見出しが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"
  }

この記事が気に入ったら
いいねしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

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

目次