custom-navbar — カスタムナビゲーションバー（WordPressプラグイン）

Web
custom-navbar — カスタムナビゲーションバー（WordPressプラグイン）

custom-navbar — カスタムナビゲーションバー（WordPressプラグイン）

このリポジトリは、テーマの既定ナビゲーションバーを置き換えることができるカスタマイズ可能なWordPressプラグインを提供します。PHPでプラグイン本体を実装し、CSSとJavaScriptで見た目と挙動を制御。ロゴの追加、背景色／文字色の指定、スティッキーモードの切替、カスタムボタンの追加、SNSアイコンの動的表示などモダンなナビゲーションに必要な機能を備え、レスポンシブ対応と柔軟な設定が可能です。小規模ながら実用的なコードベースで、テーマに依存しない独立したナビゲーション導入が手早く行えます。

https://github.com/kenaldertech/custom-navbar

概要

custom-navbarは、テーマ標準のナビゲーションバーをモダンでレスポンシブな独自ナビゲーションに置き換えることを目的としたWordPressプラグインです。プラグイン本体はPHPで実装され、見た目はcssフォルダ、挙動はjsフォルダで分離されています。READMEに記載された主な機能はロゴの追加、背景・文字色の調整、スティッキーモードのオン／オフ、カスタムボタンの配置、そしてSNSアイコンの動的表示など。比較的シンプルな構成のため、テーマに依存せず導入・調整がしやすく、開発者やサイト管理者が短時間でカスタムナビを導入できる点が魅力です。

GitHub

リポジトリの統計情報

  • スター数: 1
  • フォーク数: 0
  • ウォッチャー数: 1
  • コミット数: 5
  • ファイル数: 4
  • メインの言語: PHP

主な特徴

  • ロゴを固定高さで追加可能（見栄えを崩さない設計）
  • 背景色・文字色の設定でテーマとの調和を実現
  • スティッキーモード（スクロール時固定）の切替
  • カスタムボタンとSNSアイコンを動的に表示可能

技術的なポイント

このプラグインはPHP（custom-navbar.php）をエントリポイントとしており、CSSとJavaScriptを分離しているため責務が明確です。一般的なWordPressプラグイン実装の流れに従えば、custom-navbar.phpはプラグインヘッダーを含み、フロントエンド用のスタイル／スクリプトをwp_enqueue_scriptsフックで登録・読み込み、ナビゲーションのHTMLを適切なアクションフックやショートコードで出力していると推測できます。

見た目のカスタマイズ（ロゴ高さ、背景色、文字色）はCSS変数やインラインスタイル、あるいはテーマ側でのクラス付与により実現されている可能性が高く、管理画面での色選択やオプション保存にはWordPressのオプションAPI／設定APIを利用するのが標準的です。スティッキーモードはJavaScriptでスクロールイベントを監視し、一定のスクロール量を超えたときにナビに固定クラス（例: .is-sticky）を付与する実装が想定されます。これにより、CSSでposition: fixedやposition: stickyを切り替えて動作させられます。

モバイル対応では、ハンバーガーメニューのトグルやARIA属性を用いたアクセシビリティ対策（aria-expandedやroleの設定）を組み合わせることでキーボード操作やスクリーンリーダーへの配慮が可能です。SNSアイコンやカスタムボタンは、オプションで指定した配列をループして出力する「動的レンダリング」方式が採られることが一般的で、外部のアイコンフォント（Font Awesome等）やSVGを利用すると拡張性が高まります。

セキュリティ面では、管理画面から保存する値は必ずサニタイズ（esc_attr, sanitize_text_field等）・エスケープ（esc_html等）し、フォーム送信時にnonceを使った検証を行うべきです。また、スクリプト／スタイルの依存関係やバージョン指定を正しく行い、キャッシュやバージョン衝突に備えることが推奨されます。プラグインが比較的小規模でファイル数も少ないため、拡張時は設定ページの実装、テンプレートのフック提供、フィルタでHTML出力をカスタマイズ可能にするなどの設計が望まれます。

プロジェクトの構成

主要なファイルとディレクトリ：

  • README.md: file
  • css: dir
  • custom-navbar.php: file
  • js: dir

まとめ

テーマに依存せず柔軟に導入できるシンプルで実用的なカスタムナビプラグインです。

リポジトリ情報：

  • 名前: custom-navbar
  • 説明: A fully customizable WordPress plugin that replaces your theme’s default navigation bar with a modern, responsive, and configurable navbar. Built with PHP, CSS, and JS, it allows you to add a logo, control background/text colors, toggle sticky mode, add a custom button, and display social media icons dynamically.
  • スター数: 1
  • 言語: PHP
  • URL: https://github.com/kenaldertech/custom-navbar
  • オーナー: kenaldertech
  • アバター: https://avatars.githubusercontent.com/u/232712306?v=4

READMEの抜粋：

Custom Navbar Plugin

A fully customizable WordPress plugin that replaces your theme’s default navigation bar with a modern, responsive, and configurable navbar. Built with PHP, CSS, and JS, it allows you to add a logo, control background/text colors, toggle sticky mode, add a custom button, and display social media icons dynamically. Built by Kenneth Alvarenga (Tekai Labs LLC).

✨ Features

  • Add a logo with fixed height.
  • Set background and text colors.
  • Enable/disab…