ブートストラップ3を使って自作テーマ作成(11)WordPressのメニュー画面でナビゲーションメニューを設定

現時点ではナビゲーションメニューのメニュー項目はheader.php内に直接記述されています。メニュー項目や表示順などをWordPressのメニュー画面で設定できるように変更します。

管理画面のメニュー画面で設定したメニューを表示するwp_nav_menu関数とブートストラップ3のナビゲーションメニューのスタイルを設定するwp-bootstrap-navwalkerを使って設定します。
 
1)wp-bootstrap-navwalkerを配置
 
①下記サイトからwp-bootstrap-navwalker.phpを入手します。
twittem/wp-bootstrap-navwalker
 
②テーマディレクトリ内にコピー
 
ここでは、incディレクトリ内にコピーします。
 
③functions.phpでインクルード
 
functions.php内に下記記述を追加します。
 
define(‘MYTHEMES_PATH’, get_template_directory() );
require MYTHEMES_PATH . ‘/inc/wp-bootstrap-navwalker.php’;
 
 
2)header.phpを修正
 
メニューのリンク項目が記述されている部分をwp_nav_menu関数に置き換えます。
header.phpのナビゲーションメニュー部を下記のように修正します。
 

<div class="navbar navbar-fixed-top navbar-inverse" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <?php wp_nav_menu( array('theme_location' => 'primary',
          'menu_class' => 'nav navbar-nav',
          'container_class' => 'navbar-collapse collapse',
          'fallback_cb' => 'wp_bootstrap_navwalker::fallback',
          'walker' => new wp_bootstrap_navwalker()
    ) );?>
  </div><!-- /.container -->
</div><!-- /.navbar -->

3)WordPressの管理画面でメニューを作成し、登録
 
①「外観」→「メニュー」→「メニューを編集」タブでメニューを作成します。”メニュー構造”欄で適宜、階層化したメニューを作成します。
 
②「位置の管理」タブで”トップメインメニュー”に①で作成したメニューを指定し、保存します。
 
 
4)動作確認
 
ブラウザで表示し、管理画面で設定したメニュー項目がナビゲーションメニューに表示され、階層構造にしたメニュー項目がドロップダウンで表示される事を確認します。
 
「ブートストラップ3を使って自作テーマ作成」の目次へ

関連記事の目次
VPSサーバーでスナップショットを取得
~障害に備え、リカバリーポイントを作成。
VPSサーバーにログインして、設定内容を確認
~グローバルIPアドレス確認、SSHキーを作成。
VPSサーバーにSSHでログイン
~Tera Term、SSH、公開鍵認証方式
yumコマンドで最新のパッケージにアップデート
~全パッケージを最新にアップデート
Apacheのインストール
~yumコマンドでApacheインストール、iptablesでファイアウォールの設定
PHPとMySQLをインストール
~yumコマンドでPHP、MySQLインストール
WinSCPを使ってWordPressをアップロード
~WinSCPをクライアントPCにインストール、ファイルアップロード方法
WordPressをインストール
~MySQLでWordPress用データベース作成、wp-config.phpファイルの設定
CentOSのファイアウォール設定
~iptablesを使ってネットワークフィルタリング設定を一から行う
OpenSSHの設定をよりセキュアに
~ログイン制限、ポート変更、認証方式
ApacheでTCPのTraceメソッドを無効にする
~Apacheの設定変更、Telnetで動作確認
ヘッダーにApacheバージョンが表示されないようにする
~Apacheの設定変更、Telnetで動作確認
Apacheでディレクトリ内一覧表示を無効にする
~autoindex_moduleのロードを無効にする
セキュリティを考慮し、MySQLの匿名ユーザーにパスワードを設定、または削除
~MySQLの匿名ユーザーにパスワードを設定、または削除
PHPのバージョンが表示されないようにする
~php.iniの設定変更
WordPressディレクトリのパーミッションをセキュアに
~WordPress用ディレクトリの所有グループ、ユーザー、パーミッション設定
パーマリンク設定時のApache設定
~WordPressパーマリンクの設定、Apache .htaccessの設定
WordPressテーマの選定
~テーマ追加の特徴フィルターの項目、テンプレートキング
WordPressで画像のアップロード、サイズ調整、リンクを設定
~アップロード画像の画像サイズ、サムネイル、画像編集、リンク設定
更新可能なRPMパッケージのリストをメールで送信する
~yumコマンド、Bashスクリプト、Cron
Linuxでディスク使用量が多いディレクトリを調べる方法(1)
~du --max-depth
Linuxでディスク使用量が多いディレクトリを調べる方法(2)
~duコマンド、sortコマンド
WordPressデータベースのバックアップとリストア
~コマンドラインでバックアップ、リストア
WordPressのバージョンアップと旧バージョンへの戻し
~データベースとディレクトリのバックアップ、リストア
BashスクリプトでWordPressデータベースを自動バックアップ
~MySQLデータベースをBash、Cronを使って自動バックアップ、メール通知
BashスクリプトでDos攻撃など大量アクセスのログを検知
~Apacheアクセスログ、Dos、Cron、メール通知
テーマ作成
 
ブートストラップ3を使って自作テーマ作成
~Bootstrap3、自作テーマ作成、TwentyFourteen
Bootstrapのフリーのテーマを使ってデザインを簡単にカスタマイズ
~Bootstrap3のスタイルをカスタマイズ
 
WordPresssショートコード
 
簡単なショートコードを作ってみる
~ショートコードの作り方
ショートコードを使って関連記事のリンクを自動で挿入
~ショートコードの簡単なサンプル
ショートコードを使ってディレクトリ内のファイル名を取得し、投稿内にリンクを挿入
~カスタムフィールド利用、PHPで日本語文字列検索などのコーディング
 
AJAX、AngularJSなどその他応用
 
WordPress投稿内でAngularJSを使用
~AngularJS、Bootstrap、アコーディオン
Bootstrap3で作成したナビゲーションメニューをAngularJSに変更
~AngularJS、Bootstrap、自作テーマheder.php
WordPressでAngularJSを使ったGoogleマップを使えるようにする
~AngularJSを使って投稿内にGoogleマップ

「ブートストラップ3を使って自作テーマ作成(11)WordPressのメニュー画面でナビゲーションメニューを設定」への1件のフィードバック

  1. ずっとドロップダウンの実装が上手く行かず唸っていたので助かりました!
    ありがとうございました!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です