SWELL│目次下にウィジェットを追加するカスタマイズ

swell-widget-below-toc

目次の下に著者プロフィールを入れたり、CTAを入れるのは定番ですよね。

本記事では目次下にウィジェットを追加するカスタマイズを作成しましたので紹介します。

目次

目次下にウィジェットを追加するカスタマイズ

目次下にウィジェットを追加するカスタマイズはfunctions.phpをコードを挿入するだけです。

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

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

コードを記述する場所は下記になります。

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

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

register_sidebars( 1,
  array(
    'name'=>'目次下',
    'id' => 'widget-below-toc',
    'description' => '目次下に表示されるウイジェット',
    'before_widget' => '<div id="%1$s" class="widget-below-toc %2$s">',
    'after_widget' => '</div>',
    'before_title' => '<div class="widget-below-toc-title">',
    'after_title' => '</div>',
  )
);

function motoki_widget_below_toc($the_content) {
  if ( is_single() || is_category() && is_active_sidebar( 'widget-below-toc' ) ) {
    ob_start();
    dynamic_sidebar( 'widget-below-toc' );
    $widget_content = ob_get_clean();

    $pos_start = mb_strpos( $the_content, '<h2' ); 
    if ($pos_start === false) {     
    } else {
      $html_before = mb_substr( $the_content, 0, $pos_start );
      $html_after = mb_substr( $the_content, $pos_start );
      $the_content = $html_before . $widget_content . $html_after;
    }
  }
  return $the_content;
}
add_filter( 'the_content','motoki_widget_below_toc', 999 );

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

コード挿入後に外観 > ウィジェットから何かしらのウィジェットを追加して確認してみましょう。

まとめ

本記事では目次下にウィジェットを追加するカスタマイズを紹介いたしました。

リード文を見た後に、目次そして、ETAを証明する著者のプロフィールや監修者の情報を差し込むと記事として、自然な流れになるとおもいます。

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

SWELLカスタマイズ全まとめ

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

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

contact

お問い合わせ

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

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

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

この記事を書いた人

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

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

目次
閉じる