GeneratePressテーマでサイドバーを固定表示するプラグインの作り方

by

※メニューボタンの動作がまだおかしい。

WordPressサイトを作るとき、「読者がページをスクロールしてもサイドバーはずっと見えるようにしたい」と思ったことはありませんか？特にブログやニュースサイトでは、記事を読みながらもカテゴリーやタグなどにいつでもアクセスできると便利です。

今回は、WordPressのテーマ「GeneratePress」を使ったサイトで、サイドバーを固定表示するプラグインの作り方を解説します。パソコンでは固定表示、スマホでは左上のボタンから表示・非表示を切り替えられるようにします。

サイドバーを固定表示するとはどういうこと？

サイドバーの固定表示とは、ページをスクロールしても画面上にサイドバーが常に表示される状態のことです。これを実現すると、長い記事でも読者はいつでも簡単にメニューやウィジェットにアクセスできます。

たとえば、本のしおりのようなものをイメージしてください。本文をどんどんめくっても、しおりは常に見える位置にあります。ウェブサイトのサイドバーもそんな役割を果たせると便利です。

プラグイン作成の概要

今回作るプラグインは、次のような特徴を持ちます：

  • パソコン表示では、スクロールしてもサイドバーが画面上に固定される
  • スマホ表示では、最初はサイドバーを隠し、左上のメニューボタンで表示・非表示を切り替える
  • jQueryを使わずに純粋なJavaScriptで実装
  • テーマのCSSより優先的に適用されるよう設計

では、詳しく見ていきましょう。

プラグインを構成するファイル

このプラグインは3つのファイルで構成されています：

  1. PHPファイル：プラグインの本体となるファイル
  2. CSSファイル：サイドバーのデザインを調整するファイル
  3. JavaScriptファイル：スマホ表示時の動作を制御するファイル

それぞれのファイルについて順番に説明します。

1. PHPファイルの作成

まず、プラグインの基本となるPHPファイルを作成します。このファイルは、CSSとJavaScriptを読み込み、スマホ用のメニューボタンを追加する役割を担います。

<?php
/*
Plugin Name: Sticky Sidebar for GeneratePress
Description: GeneratePressテーマのサイドバーを固定表示し、モバイルではトグルボタンで表示切替可能にするプラグイン
Version: 1.0
Author: あなたの名前
*/

// CSSとJSの読み込み
function sticky_sidebar_enqueue_assets() {
    // CSSを追加
    wp_enqueue_style(
        'sticky-sidebar-style', 
        plugin_dir_url(__FILE__) . 'sticky-sidebar.css', 
        array(), 
        '1.0', 
        'all'
    );
    
    // JavaScriptを追加（jQueryなし）
    wp_enqueue_script(
        'sidebar-toggle-script',
        plugin_dir_url(__FILE__) . 'sidebar-toggle.js',
        array(), // jQueryに依存しない
        '1.0',
        true
    );
}
add_action('wp_enqueue_scripts', 'sticky_sidebar_enqueue_assets');

// モバイル用のメニューボタンを追加
function add_sidebar_toggle_button() {
    echo '<button id="sidebar-toggle-button" class="sidebar-toggle-button">☰ メニュー</button>';
}
add_action('wp_body_open', 'add_sidebar_toggle_button');
Code language: HTML, XML (xml)

このコードでは、wp_enqueue_scriptsというWordPressの「フック」を使って、CSSとJavaScriptファイルを読み込んでいます。フックとは、特定のタイミングで実行される処理を追加するための仕組みです。

また、wp_body_openというフックを使って、ページの本文が始まる部分にメニューボタンを追加しています。ボタンには「☰」という記号（ハンバーガーメニューアイコン）とともに「メニュー」という文字を表示しています。

2. CSSファイルの作成

次に、サイドバーのデザインを調整するCSSファイルを作成します。このファイルでは、パソコン表示とスマホ表示で異なるスタイルを適用します。

/* PCでのサイドバー固定表示 */
@media (min-width: 783px) {
    .widget-area.sidebar.is-left-sidebar {
        position: -webkit-sticky;
        position: sticky;
        top: 20px; /* 上部からの距離 */
        max-height: 95vh; /* 画面の95%の高さに制限 */
        overflow-y: auto; /* 内容が多い場合はスクロール */
        z-index: 9999; /* 優先度を確保 */
        background-color: #fff; /* 背景色 */
    }
}

/* モバイル用のスタイル */
@media (max-width: 782px) {
    /* メニューボタンのスタイル */
    .sidebar-toggle-button {
        position: fixed;
        top: 10px;
        left: 10px;
        z-index: 10000; /* サイドバーより上に表示 */
        background-color: #0073aa;
        color: #fff;
        border: none;
        border-radius: 4px;
        padding: 8px 12px;
        cursor: pointer;
        font-size: 16px;
        box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    }
    
    /* サイドバーの初期状態（非表示） */
    .widget-area.sidebar.is-left-sidebar {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 85%; /* 画面の85%幅 */
        height: 100vh;
        background-color: #fff;
        z-index: 9999;
        overflow-y: auto;
        box-shadow: 2px 0 10px rgba(0,0,0,0.2);
        padding: 20px;
        padding-top: 50px; /* ボタンの下に配置 */
    }
    
    /* サイドバーが表示されるとき */
    .widget-area.sidebar.is-left-sidebar.visible {
        display: block;
    }
}
Code language: CSS (css)

CSSでは、「メディアクエリ」という機能を使って、画面幅によって異なるスタイルを適用しています。画面幅が783px以上（パソコン表示）の場合は、サイドバーを固定表示します。782px以下（スマホ表示）の場合は、サイドバーを初期状態では非表示にし、メニューボタンをクリックしたときだけ表示するようにしています。

position: stickyは、最初は通常の配置で表示され、スクロールすると指定した位置で固定される性質を持ちます。いわば、「粘着する」ような挙動をするため、「sticky（粘着性）」と呼ばれています。

z-indexは、要素の重なり順を指定するプロパティです。数値が大きいほど前面に表示されます。ここでは、サイドバーが他の要素に隠れないよう、高い値（9999）を設定しています。

3. JavaScriptファイルの作成

最後に、スマホ表示時にメニューボタンをクリックしたときの動作を制御するJavaScriptファイルを作成します。

document.addEventListener('DOMContentLoaded', function () {
    const toggleButton = document.getElementById('sidebar-toggle-button');
    const sidebar = document.querySelector('.widget-area.sidebar.is-left-sidebar');
    
    if (toggleButton && sidebar) {
        toggleButton.addEventListener('click', function () {
            sidebar.classList.toggle('visible');
        });
    }
});
Code language: JavaScript (javascript)

このコードは、ページの読み込みが完了したとき（DOMContentLoadedイベント）に実行されます。メニューボタンとサイドバーの要素を取得し、ボタンがクリックされたときにサイドバーのvisibleクラスを追加または削除します。これにより、ボタンをクリックするたびにサイドバーの表示・非表示が切り替わります。

jQueryを使わない「Vanilla JavaScript」で書かれているので、軽量で高速に動作します。jQueryは多機能ですが、今回のような単純な操作ならば、純粋なJavaScriptだけで十分実現できます。

プラグインの設置方法

作成したプラグインを設置する手順は以下の通りです：

  1. WordPressサイトのwp-content/plugins/ディレクトリにsticky-sidebarというフォルダを作成します
  2. 作成したフォルダに、以下の3つのファイルを配置します：
    • sticky-sidebar.php
    • sticky-sidebar.css
    • sidebar-toggle.js
  3. WordPressの管理画面から「プラグイン」メニューを開き、「Sticky Sidebar for GeneratePress」を有効化します

これで、サイドバーが固定表示されるようになります。パソコンでは常に表示され、スマホでは左上のメニューボタンから表示・非表示を切り替えられます。

カスタマイズのポイント

このプラグインは、基本的な機能を提供していますが、必要に応じて以下のようなカスタマイズも可能です：

  • 色やデザインの変更: CSSファイルで、色やサイズ、フォントなどを自由に変更できます
  • 表示・非表示の切り替わる画面幅の調整: メディアクエリの値（現在は782px）を変更することで、どの画面幅からスマホ表示に切り替わるかを調整できます
  • サイドバーの位置: 現在は左側のサイドバーを対象にしていますが、右側のサイドバーにも適用できます

まとめ

今回は、WordPressのGeneratePressテーマでサイドバーを固定表示するプラグインの作り方を解説しました。このプラグインを使うと、パソコンではスクロールしてもサイドバーが常に表示され、スマホでは左上のメニューボタンから表示・非表示を切り替えられます。

プラグイン作成は少し複雑に感じるかもしれませんが、PHP、CSS、JavaScriptの基本を理解していれば、自分好みにカスタマイズしていくことも可能です。WordPressサイトの使いやすさを向上させるために、ぜひ試してみてください。