WordPressのGeneratePressで
ヘッダーを上部に固定する
（単機能プラグインを自作）

by
sticky-header-simple 1.0.2ダウンロード

関連記事

1. はじめに – 自作プラグインの意義

ウェブサイトを訪れたとき、画面をスクロールしてもヘッダーが常に見える状態を「固定ヘッダー」と呼びます。スーパーマーケットで買い物をするとき、どこにいても店内の案内表示が見えると便利なのと同じように、ウェブサイトでもナビゲーションメニューが常に表示されていると、訪問者は迷わずサイト内を移動できます。

GeneratePressでヘッダーを上部に固定するには、主に3つの方法があります。有料プラグインを購入する、既存の無料プラグインを使う、またはテーマに直接コードを書き込む方法などです。それぞれの特徴を見ていきましょう。

  1. GeneratePress Premiumの機能を使う方法
    有料版に含まれる「Sticky Navigation」機能を使って、数クリックで設定できます。
  2. プラグインを使う方法
    「Sticky Menu & Sticky Header」などのプラグインを利用すれば、コード不要で簡単にヘッダーを固定できます。
  3. テーマに実装する方法
    無料版を使っている場合や、より細かい調整をしたい場合に適しています。
  4. プラグインを自作する方法

しかし、GenerateProの有料版やSticky Headerプラグイン（これも有料へのオファーがある）は機能が豊富な分、大がかりになります。また、テーマに直接コーディングした場合、コードの管理がCSS、PHP、JavaScriptに分散してしまい、後から修正や管理が難しくなることがあります。

1. はじめに – 自作プラグインの意義
1. はじめに – 自作プラグインの意義

そこで今回は、必要な機能だけを持つ「単機能の自作プラグイン」を作る方法を紹介します。例として、ヘッダーを画面上部に固定する機能を持つプラグインの作り方を見ていきましょう。

1. はじめに – 自作プラグインの意義

2. なぜ単機能プラグインが便利か

「ヘッダーを固定するだけなのに、わざわざプラグインを作るの？」と思うかもしれません。しかし、小さな機能でもプラグイン化には大きなメリットがあります。

2.1. プラグイン化のメリット

  1. テーマ非依存：テーマを変更しても機能が失われません
  2. 管理しやすい：関連するコードが1つの場所にまとまります
  3. 再利用可能：他のサイトでも同じ機能を簡単に使えます
  4. オン/オフの切り替えが簡単：機能の有効/無効をワンクリックで切り替えられます
  5. アップデートに強い：テーマのアップデートでコードが上書きされる心配がありません

調味料で例えると、テーマ直接編集は「料理に直接調味料を混ぜ込む」ようなもの。一度入れたら取り出せませんし、料理（テーマ）を変えると味付け（機能）もゼロからやり直しです。

一方、プラグインは「調味料を別の容器に入れておく」ようなもの。どの料理にも好きな時に加えられますし、必要なければ使わないこともできます。

3. 固定ヘッダーの課題を理解する

ヘッダーを固定する機能を例に考えてみましょう。この機能をテーマに直接実装すると、以下の課題が生じます：

  1. CSS、JavaScript、時にはPHPのコードが分散する：3つの異なるファイルを編集することになります
  2. 管理バー（ログイン時に表示される黒いバー）との位置関係調整が複雑：画面サイズによって管理バーの高さと動作が変わるため
  3. テーマ更新時のコード消失リスク：テーマをアップデートすると、カスタムコードが消えてしまうことがあります

これらの課題を解決するには、プラグイン化が最適な選択肢です。

4. 単機能プラグインの基本構造

WordPressのプラグインは、最もシンプルな形では1つのPHPファイルだけで構成できます。しかし、コードを整理するために、通常は次のような構造にします：

sticky-header-simple/
├── sticky-header-simple.php    （メインファイル）
├── css/
│   └──header-fix.css     （CSSファイル）
├── js/
│   └──header-fix.js      （JavaScriptファイル）
└── readme.txt       （説明書：任意）

5. プラグイン作成の手順

それでは、実際に固定ヘッダープラグインを作っていきましょう。

5.1. 1. フォルダとファイルの準備

まず、上記の構造でフォルダとファイルを作成します。エディタ（メモ帳、VSCode、Sublimeなど）を使って以下のファイルを作成しましょう。

5.2. 2. メインファイルの作成

sticky-header-simple.phpに、プラグインの基本情報と、CSSやJavaScriptを読み込む処理を書きます：

<?php
/**
 * Plugin Name: Sticky Header Fix
 * Plugin URI: 
 * Description: WordPressのヘッダーを上部に固定し、管理バーとの位置関係を適切に調整します。
 * Version: 1.0.3
 * Author: Chiilabo
 * Author URI: 
 * License: GPL-2.0+
 * Text Domain: sticky-header-fix
 */

// 直接アクセス禁止
if (!defined('ABSPATH')) {
    exit;
}

// プラグインのパスとURLを定義
define('SHF_PLUGIN_PATH', plugin_dir_path(__FILE__));
define('SHF_PLUGIN_URL', plugin_dir_url(__FILE__));

// CSSとJavaScriptを読み込む
function shf_enqueue_assets() {
    // CSS読み込み
    wp_enqueue_style(
        'shf-css',
        SHF_PLUGIN_URL . 'css/header-fix.css',
        array(),
        '1.0.0'
    );
    
    // JS読み込み - jQueryに依存しないバージョン
    wp_enqueue_script(
        'shf-js',
        SHF_PLUGIN_URL . 'js/header-fix.js',
        array(), // jQueryの依存を削除
        '1.0.0',
        true
    );
}
add_action('wp_enqueue_scripts', 'shf_enqueue_assets', 999);

Code language: HTML, XML (xml)

このコードの説明：

  • プラグイン情報（名前、説明、バージョン、作者）を設定
  • 直接アクセス禁止の安全対策
  • プラグインのパスとURLを定数として定義
  • CSSとJavaScriptを読み込む関数を作成し、WordPressのフックに登録

注意点としては、

  • ファイル名は正しく配置すること
    間違っているとPHP実行中に致命的なエラーでページが空白になりました。
  • cssの優先度
    テーマよりも後に読み込まれるように、add_actionの優先度を 999 に挙げました。

5.3. 3. CSSファイルの作成

css/sticky-header.cssに、ヘッダーを固定するスタイルを書きます：

/* 基本のヘッダー固定スタイル */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
    background-color: #fff; /* ヘッダーの背景色 */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* 影をつけて立体感を出す */
  }
  
  /* 管理バーがある場合のデスクトップ表示（783px以上） */
  .admin-bar .site-header {
    top: 32px;
  }
  
  /* 管理バーがある場合のタブレット表示（782px～601px） */
  @media screen and (max-width: 782px) {
    .admin-bar .site-header {
      top: 46px;
    }
  }
  
  /* 管理バーがある場合のモバイル表示（600px以下） */
  @media screen and (max-width: 600px) {
    .admin-bar .site-header {
      top: 0;
    }
    
    .admin-bar.scroll-top .site-header {
      top: 46px;
    }
  }
  
  /* コンテンツがヘッダーの下に隠れないように調整 */
  body {
    padding-top: 80px; /* ヘッダーの実際の高さに合わせて調整 */
  }
  Code language: CSS (css)

このCSSの役割：

  • ヘッダーを画面上部に固定する
  • 管理バーの高さに合わせて位置を調整する
  • 画面サイズごとに異なる管理バーの高さに対応する
  • 固定ヘッダーによってコンテンツが隠れないよう余白を設定する

5.4. 4. JavaScriptファイルの作成

js/sticky-header.jsに、管理バーとの位置関係を調整するためのスクリプトを書きます：

/* 基本のヘッダー固定スタイル */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
    background-color: #fff; /* ヘッダーの背景色 */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* 影をつけて立体感を出す */
  }
  
  /* 管理バーがある場合のデスクトップ表示（783px以上） */
  .admin-bar .site-header {
    top: 32px;
  }
  
  /* 管理バーがある場合のタブレット表示（782px～601px） */
  @media screen and (max-width: 782px) {
    .admin-bar .site-header {
      top: 46px;
    }
  }
  
  /* 管理バーがある場合のモバイル表示（600px以下） */
  @media screen and (max-width: 600px) {
    .admin-bar .site-header {
      top: 0;
    }
    
    .admin-bar.scroll-top .site-header {
      top: 46px;
    }
  }
  
  /* コンテンツがヘッダーの下に隠れないように調整 */
  body {
    padding-top: 80px; /* ヘッダーの実際の高さに合わせて調整 */
  }
  Code language: CSS (css)

このJavaScriptの役割：

  • ページの最上部にいるかどうかを検知する
  • 最上部にいるときはbody要素にscroll-topクラスを追加する
  • これにより、モバイル表示時に管理バーの下にヘッダーを表示できる

6. 管理バーとの位置関係について

WordPressの管理バー（ログイン時に表示される黒いバー）は、画面サイズによって表示が変わります。これを理解することが、ヘッダー固定機能を正しく実装するカギとなります。

6.1. 画面サイズごとの管理バーの特性

画面サイズ管理バーの高さ位置特徴
デスクトップ（783px以上）32px固定スクロールしても常に表示
タブレット（782px～601px）46px固定スクロールしても常に表示
モバイル（600px以下）46px絶対位置スクロールすると見えなくなる

上記の表を見ると、モバイル表示（600px以下）では管理バーがスクロールで消えることがわかります。これが、JavaScriptが必要になる理由です。

もし携帯で「カメラのピントが合わないから直して」と言われたら、「自動フォーカスにしておくね」と設定するのと同じように、管理バーの動きに合わせてヘッダーの位置を「自動調整」するのがJavaScriptの役割です。

7. プラグインのインストール方法

作成したプラグインをサイトにインストールするには：

  1. 作成したフォルダ（sticky-header-simple）をZIPファイルに圧縮します
  2. WordPress管理画面で「プラグイン」→「新規追加」→「プラグインのアップロード」を選択
  3. 圧縮したZIPファイルをアップロードして「今すぐインストール」をクリック
  4. インストール完了後、「有効化」をクリック

これで、ヘッダー固定機能が有効になります。

8. テーマごとの調整ポイント

GeneratePressなど多くのテーマでは.site-headerというクラス名がヘッダーに使われていますが、テーマによって異なる場合があります。その場合は、CSSファイルの.site-headerを適切なクラス名に変更する必要があります。

テーマのヘッダー要素のクラス名を調べるには：

  1. サイトを表示して、ブラウザの開発者ツールを開く（F12キーなど）
  2. 検査ツール（インスペクター）でヘッダー部分をクリック
  3. 表示されたHTMLからヘッダー要素のクラス名を確認

また、ヘッダーの高さに合わせて、CSSのbody { padding-top: 80px; }の値も調整してください。

9. まとめ – 単機能プラグインの強み

今回は「ヘッダーを固定する」という単機能のプラグインを作りました。このアプローチの利点をまとめると：

  1. コードの一元管理：CSS、JavaScript、PHPが一つのパッケージにまとまる
  2. テーマ非依存：テーマを変更しても機能が維持される
  3. 再利用性：他のサイトでも簡単に使える
  4. メンテナンス性：修正や機能追加が容易

このように、単機能プラグインは「大きな問題を小さく解決する」アプローチです。高価な多機能プラグインや、テーマへの直接コーディングによる管理の煩雑さを避け、必要な機能だけをシンプルに実装できます。

自分だけの調味料セット（機能）を作って、どんな料理（テーマ）にも使えるようにするのが、WordPressの楽しさの一つかもしれません。

10. 発展編：プラグインのカスタマイズ

基本的なプラグインに満足できない場合は、以下のような機能を追加してカスタマイズできます：

  1. 管理画面の追加：ヘッダーの固定位置や背景色を設定できるようにする
  2. 条件分岐：特定のページでだけヘッダーを固定するオプションを追加する
  3. アニメーション効果：スクロール時にヘッダーがスムーズに現れる効果を追加する

WordPressプラグイン開発は、小さな一歩から始めて徐々に発展させていくことができます。まずは単機能のプラグインから始めて、WordPressの可能性を広げていきましょう。