お問い合わせ

SWELL|目次上にウィジェットエリアを追加するカスタマイズ

SWELLの目次の上にウィジェットエリアがあったら便利だと思いませんか?

SWELLの目次の下にウィジェットエリアを追加するカスタマイズを見かけたので、その記事を参考にSWELL目次上にウィジェットエリアを追加するカスタマイズを行ったのでご紹介します。

目次上には著者プロフィールなどを配置したり、広告を配置したり色々できますので、とても便利だと思います。

SWELLには目次上や目次下の広告エリアがある

SWELLには目次の上と下に広告エリアがあります。

ウィジェットエリアとして使用可能

この領域はHTMLをそのまま出力できるので、ショートコードも展開してくれますので、ウィジェットエリアのように使えます。

ブログパーツのショートコードも置けます。

欠点があります

広告エリアは目次の上か下の、どちらかしか使えません。

また、スマホ実機じゃないと表示されない現象もあります。

SWELL目次上にウィジェットエリアを追加するカスタマイズ

functions.phpに張り付けると、目次上のウィジェットエリアが追加されます。

カスタマイズコード

register_sidebars( 1,
  array(
    'name'=>'目次上',
    'id' => 'widget-before-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_before_toc($the_content) {
  if ( is_single() || is_category() && is_active_sidebar( 'widget-below-toc' ) ) {
    ob_start();
    dynamic_sidebar( 'widget-before-toc' );
    $widget_content = ob_get_clean();

    $pos_start = mb_strpos( $the_content, '<div class="p-toc ' ); 
    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_before_toc', 999 );

参考記事

まとめ

SWELLの目次は目印(<div class=”p-toc)だけPHPで置いておき、ページ読み込み後にjavascriptで動的に追加されます。

今回のカスタマイズでは、その目印を探して、目次のHTMLの直前にウィジェットエリアを配置しました。

役に立ったら他の人にもシェア!
  • URLをコピーしました!
  • URLをコピーしました!
コメントを閉じる

コメント

コメントする

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

クリックできる目次