【WordPress】Luxeritas用サイドバー表示切替トグルプラグインの作成

WordPressテーマ「Luxeritas（ルクセリタス）」は、非常に軽量かつ高速に動作する優れたテーマです。しかし、標準の2カラムレイアウト（メイン領域の幅が866px等）で運用している場合、技術系記事などで長めのソースコードブロックや大判の図表・画像、キャプチャを掲載した際に、横幅が窮屈に感じられる場面があります。

読者がコードの全体像を把握しようとしたり、画像の細部を確認しようとしたりする際、横スクロールが発生したり画面が圧迫されたりすることは、コンテンツの可読性や閲覧体験の低下につながる一因となります。

目次

ワンタップでメイン表示領域を100%に広げる環境構築

この課題を解決するため、ページの閲覧者が自身のタイミングで自由にサイドバーの表示・非表示を切り替えられる環境を構築します。

画面右下に目立たない半透明のトグルボタンを固定配置し、1タップでサイドバーを非表示にしてメイン領域（#main）を画面幅100%に拡張できる仕組みを目指します。スクロール位置を問わずいつでも切替が可能で、なおかつ閲覧の邪魔にならないレスポンシブかつスムーズなインターフェースを提供することが目的です。

functions.phpの肥大化と記述の煩雑さ

当初、このようなレイアウト変更機能は、子テーマの functions.php や style.css へ直接記述して試すケースが多く見られます。しかし、子テーマへ直接コードを追加していく手法にはいくつかの問題点が存在します。

  • 管理の煩雑化: テーマのカスタマイズコードと機能拡張コードが混ざり合い、後から見返した際にコードの保守やトラブルシューティングが困難になる。
  • 不必要なテーマ化の負担: この程度のレイアウト変更機能のためだけに専用の独自テーマを一から自作するのはオーバースペックであり、制作・管理コストに見合わない。
  • テーマ固有の仕様への対処: Luxeritasには #main 要素に対して固定的なFlexboxスタイルが適用されているほか、テーマ標準のJavaScript（luxe.min.js）が特定のDOM要素を走査・解析する仕様があります。記述場所を誤ると null.split などのJavaScriptエラーが発生したり、スタイルの崩れを引き起こしたりします。

専用プラグイン「Luxeritas Sidebar Toggle」の導入手順

これらの課題を解消するため、機能を単一の独立したプラグイン「Luxeritas Sidebar Toggle」としてパッケージ化しました。プラグインとして切り分けることで、子テーマのファイルを一切変更せずに機能を管理できます。

本プラグインはGitHub上でオープンソースとして公開しており、ビルド済みのZIPファイルをダウンロードして有効化するだけで即座に利用可能です。

【導入手順】

  1. GitHubのリポジトリまたはReleasesページから、最新版のZIPファイル（luxeritas-sidebar-toggle.zip）をダウンロードします。
  2. WordPressの管理画面にログインし、「プラグイン」＞「新規プラグインを追加」を開きます。
  3. 画面上部の「プラグインのアップロード」をクリックし、ダウンロードしたZIPファイルを選択して「今すぐインストール」を実行します。
  4. インストール完了後、「プラグインを有効化」をクリックします。

プラグインの内部構成は以下のように整理されており、Luxeritas（親テーマ）が有効化されている場合のみ安全にスクリプトとスタイルが読み込まれる設計となっています。

luxeritas-sidebar-toggle/
├── luxeritas-sidebar-toggle.php # プラグインメインファイル（親テーマ判定・フッター読み込み）
├── style.css # メイン幅100%化と右下固定ボタンのスタイル
└── sidebar-toggle.js # DOM生成・開閉状態管理（localStorage）・リサイズイベント発火

JavaScriptはページのHTML構造への直接干渉を避け、<div id="wp-footer"> の配下へ安全にボタンを動的生成します。これにより、Luxeritas本体のスクリプトエラーを防ぎつつ、安定した動作を実現しています。

テーマ更新に強くすっきり独立した閲覧環境の完成

プラグインを有効化すると、画面右下のPAGE TOPボタンのすぐ上付近に、半透明の「サイドバー非表示」ボタンが表示されます。
ボタンをクリックするだけで、サイドバーが非表示になると同時にメイン領域が100%に広がり、長大な表、ソースコードや大判画像もスクロールなしで快適に閲覧できるようになりました。

サイドバー表示中

▼

サイドバー非表示

また、本機能を子テーマから切り離して独立したプラグインとしたことで、以下のメリットが得られました。

  • テーマ本体や子テーマがアップデートされても、設定やコードが上書き消去される心配がない。
  • 機能を停止させたい場合は、管理画面でプラグインを無効化するだけで元通りに戻すことができる。
  • コードが子テーマの functions.php 等に混入しないため、WordPress全体の保守性が大幅に向上した。

まとめ

Luxeritasの2カラム表示において、コードや画像の閲覧性を高めるべくサイドバー開閉トグル機能を実装しました。子テーマへの直書きによる記述の乱雑化やテーマ依存のエラーを避けるため、独立した専用プラグイン「Luxeritas Sidebar Toggle」として開発・パッケージ化を行いました。GitHubで配布中のZIPファイルを管理画面からアップロードするだけで簡単に導入でき、テーマ更新の影響を受けない快適で保守性の高い閲覧環境を確立できました。

WordPress・ブログ運営・SEOgit,HTTPS,Luxeritas,wordpress,プラグイン,自作

Posted by 納戸 工房