【簡単】WordPressでスクロール追従ウィジェットを作成する方法

今回はWordPressのウィジェットへサイドバースクロール追従機能を付ける方法を紹介します。
以下のような追従バナーを設置する場所として使うことを想定した仕様となっています。
非常に簡単なので是非、参考にしてみて下さい。

WordPressでスクロール追従ウィジェットを作成する方法

ウィジェット機能の有効化については以下の記事を参照下さい。

WordPressテーマ作成で任意の場所にウィジェットを追加する方法

今回がWordPressでオリジナルテーマを作成する際に必要となってくるであろうウィジェットの作成方法について解説します。ウィジェットとはテーマに組み込まれているGUI（Graphical User Interface）で操作可能なコンテンツ配置部分の事です。

kt-life.net

2021.05.07

今回の例では以下のようにウィジェットを有効化しました。

// ウィジェットの有効化・設定
function theme_slug_widgets_init()
{
// スクロール追従
    register_sidebar(array(
'name' => 'サイドバースクロール追従',
'id' => 'sidenavi',
'before_widget' => '<div class="side_widget sticky">',
'after_widget' => '</div>',
'before_title' => '<h2 class="side_widget_title">',
'after_title' => '</h2>',
));
}
add_action('widgets_init', 'theme_slug_widgets_init');

ウィジェットを表示したい場所に以下の記述をします。（sideber.phpなどに）

<!-- スクロール追従ウィジェット -->
<?php dynamic_sidebar('sidenavi'); ?>

そして、そのコンテナに対して以下のCSSを効かせます。「position: sticky;」は親要素内に留まるようにポジションを固定してくれます。これを利用してサイドバーのコンテナ内で固定します。

// サイドバー追従
.sticky {
    position: sticky;
    top: 0;
    padding: 55px 20px 20px 20px;
    margin-top: -10px;
}

以上が「【簡単】WordPressでスクロール追従ウィジェットを作成する方法」でした。