2026年6月18日

WordPressのスティッキーサイドバーを実装する方法

テーマ・デザイン

はじめに

この記事では、ユーザーエクスペリエンスを向上させるためにWordPressサイトにスティッキーサイドバーを追加する方法について説明します。スティッキーサイドバーは、ユーザーがページをスクロールしても常に表示される役立つ情報を提供できます。

症状・背景

このテーマが必要になる主な場面:

ウェブサイトのナビゲーションを改善したい場合
常に表示すべき重要な情報がある場合
ユーザーがページをスクロールする際にも常にアクセスできる情報を提供したい場合
独自のCSSやJavaScriptを使用してカスタムデザインを作成したい場合

手順・設定方法

ステップ1: サイドバーテンプレートファイルにHTMLコードを追加

# テーマディレクトリ内のsidebar.phpまたはfunctions.phpを開きます。
nano wp-content/themes/your-theme/sidebar.php  # sidebar.phpの場合はこのコマンドを使用
nano wp-content/themes/your-theme/functions.php  # functions.phpの場合はこのコマンドを使用

# 以下のようなHTMLコードをサイドバーテンプレートファイルに追加します。
<div id="sticky-sidebar">
    <h2>スティッキーサイドバー</h2>
    <!-- サイドバーコンテンツをここに挿入 -->
</div>

# ファイルを保存し、編集を終了します（nanoを使用している場合）。
CTRL + X
Y (変更を保存)
Enter (ファイル名を確認してエンターボタンを押す)

ステップ2: CSSでスティッキーサイドバーのスタイルを設定

# テーマディレクトリ内のstyle.cssを開きます。
nano wp-content/themes/your-theme/style.css

# 以下のようなCSSコードを追加します。
# スティッキーサイドバーの基本的なスタイルを定義
# サイドバーコンテナは固定位置で、右端に配置されます。
# スクロールが発生したときにサイドバーが固定されるように設定します。
# 視覚効果と視認性を向上させるためにボーダーを追加
.sticky-sidebar {
    position: fixed;
    right: 20px;
    top: 15%;
    width: 230px;
    background-color: #fff;
    border-radius: 4px;
    padding: 16px;
    z-index: 9999;
}

# スクロールが発生したときにサイドバーを固定するための追加CSS
.sticky-sidebar.sticky {
    top: 50px; /* ヘッダーやナビゲーションバナーの高さに合わせて調整 */
}

ステップ3: JavaScriptを使用してスティッキーサイドバーを固定する

# テーマディレクトリ内のfunctions.phpを開きます。
nano wp-content/themes/your-theme/functions.php

# 以下のようなコードを追加します。このスクリプトは、サイトのロールオーバースクロール時にサイドバーが固定されるように設定します。
function add_custom_scripts() {
    // スティッキーサイドバースタイルシートとスクリプトを読み込みます
    wp_enqueue_style('sticky-sidebar-style', get_template_directory_uri().'/css/sticky.css');
    wp_enqueue_script('sticky-sidebar-script', get_template_directory_uri().'/js/sticky.js', array(), '1.0', true);
}
add_action('wp_enqueue_scripts', 'add_custom_scripts');

# ファイルを保存し、編集を終了します（nanoを使用している場合）。
CTRL + X
Y (変更を保存)
Enter (ファイル名を確認してエンターボタンを押す)

ステップ4: スティッキーサイドバーの固定状態を監視

# テーマディレクトリ内のjs/sticky.jsを開きます。
nano wp-content/themes/your-theme/js/sticky.js

# 以下のようなJavaScriptコードを追加します。このスクリプトは、ウィンドウスクロールイベントを検出し、サイドバーが適切な位置に固定されるように設定します。
jQuery(document).ready(function($){
    var stickySidebar = $('.sticky-sidebar');
    var sidebarOffsetTop = $('#primary').offset().top;
    
    $(window).scroll(function(){
        if ($(this).scrollTop() > sidebarOffsetTop) {
            stickySidebar.addClass('sticky');
        } else {
            stickySidebar.removeClass('sticky');
        }
    });
});

注意事項

スティッキーサイドバーは、ユーザーがページをスクロールする際にも常に表示されるため、サイトの読み込み速度やユーザーエクスペリエンスに影響を与える可能性があります。
ユーザーエージェントに基づいて異なるCSSスタイルを適用することで、特定のデバイスやブラウザでの視覚効果を最適化できます。
既存のJavaScriptライブラリまたはプラグインを使用してスティッキーサイドバーを実装すると、既に存在する他のJavaScriptコードとの衝突を防ぐことができます。

まとめ

1. CSSでスタイル設定: スティッキーサイドバーの見た目と動作をカスタマイズします。

2. HTML構造の追加: サイドバーテンプレートに必要なHTML構造を追加します。

3. JavaScriptによる固定: ユーザーがページをスクロールする際にサイドバーが固定されるように設定します。

4. カスタムスクリプトの登録: WordPressのfunctions.phpでカスタムCSSとJSファイルを読み込みます。

Post Views: 5