SWELL│ステップの項目をh3に変更して目次に表示させるカスタマイズ

swell-step-h3

ブログで何かの手順を説明する時はSWELLのステップのブロックが便利です。

しかしこのステップの項目は目次等には表示されません。

そこでステップの項目をh3に変更して、目次にも表示させるカスタマイズを作成してみました。

本記事ではステップの項目をh3に変更して目次に表示させるカスタマイズを紹介いたします。

目次

SWELLでステップの項目をh3に変更して目次に表示させるカスタマイズ

ステップの項目をh3に変更して目次に表示させるカスタマイズはfunctions.phpをコードを挿入するだけです。

以下、詳しく解説いたします。

functions.phpにコードを挿入する

WordPressの管理画面 > 外観 > テーマファイルエディター > functions.php

functions.phpに下記のコードを挿入してください。

divだったステップの項目をh3に置換しています。

function motoki_swell_step_h3($content) {
  $content = str_replace('<div class="swell-block-step__title u-fz-l">', '<h3 class="swell-block-step__title u-fz-l">', $content);
  $content = str_replace('</div><div class="swell-block-step__body">', '</h3><div class="swell-block-step__body">', $content);
  return $content;
}

add_filter('the_content','motoki_swell_step_h3');

カスタマイズは以上です。

コード挿入後にキャッシュをクリアして、ステップのある記事を開いて目次を確認しましょう。

まとめ

本記事ではステップの項目をh3に変更して目次に表示させるカスタマイズを紹介しました。

ステップの内容が目次にも表示されて、より記事が分かりやすくなると思います。

是非、本記事のカスタマイズを参考にしてください。

SWELLカスタマイズ全まとめ

SWELLに関連するカスタマイズ記事を全てまとめました。

是非チェックしてみてください。

contact

お問い合わせ

WordPressの技術的なお悩みやご要望がありましたら、お気軽にお問い合わせください。

もちろんデザインに関することも相談できます。

  • 見た目の調整エラー相談その他技術に関する相談をしたい
  • 絞り込み検索オリジナルのブロックを作りたい
  • SEO内部施策構造化データの設定を依頼したい
  • サイトの高速化を診断・依頼したい
  • トップページデザインを依頼したい

この記事を書いた人

すいみんのアバター すいみん テクニカルアーティスト

カナダ在住のテクニカルアーティスト。
大学ではアート(油画)を専攻。卒業後はアニメ・映画・映像・ゲーム業界で、2Dから3DCG、ゲームエンジン、WEB制作まで幅広いコンテンツ制作の経験を積んでいます。デザイナーとエンジニアの中間のポジションでお仕事をするのが得意。

目次
閉じる