WordPress Twenty Fourteen のグローバルナビゲーションをカスタマイズしました。
Twenty Fourteenは固定ページを作成すると、デフォルトでは自動でナビ部分にページへのリンクがメニューとして追加されていきます。
カテゴリーのページや他のサイトへのリンクも手動で追加できるので手順をメモしました。もしお役に立つようでしたらご参考まで。
スポンサーリンク
[adSense]
グローバルナビゲーションとは？
簡単に言ってしまえば、サイト内の各コンテンツを案内するためのメニューのこと。一般的にはヘッダ部の直下にあることが多く、「グローバルメニュー」「グローバルナビ」「ナビ」など、いろいろ呼ばれています。（以下メニュー）
カスタマイズの詳細
・メニューの右端にある検索フォームを外す
・カテゴリ名をメニューに追加
・メニューの背景色を変更して文字サイズを大きく
検索フォームを外す
検索フォームはサイドバーに新たに設置しようと思うので、メニューにあるものは外したいと思います。
Wordpress設定画面 「外観」-「テーマ編集」子テーマの「header.php」を選択して編集します。
下記の検索フォーム記述（2箇所）をコメントアウトして無効にするか削除します。
■ 47～49行目
<div> <a href="#search-container"><?php _e( 'Search', 'twentyfourteen' ); ?></a> </div>
■ 58～62行目
<div id="search-container"> <div> <?php get_search_form(); ?> </div> </div>
以上で検索フォームの外しはOKです。
カテゴリー名をメニューに追加
WordPress設定画面 「外観」-「メニュー」をクリック
１．▼のマークをクリックしてカテゴリーの設定を開きます
２．「すべて表示」のタグをクリック
３．必要なカテゴリーにチェックを入れて
４．「メニューに追加」をクリック
右側の「メニュー構造」のところにカテゴリー名が追加されるので、ドラッグしながら順番を調節して５．「メニューを保存」をクリック。
以上でメニューにカテゴリーを追加できました。
メニューの背景色と文字サイズのカスタマイズ方法
メニュー部分の背景色（デフォルトでは黒）を別の色に変更して文字サイズを大きくします。
メニューの背景色は、CSSの設定を変更します。
Wordpress設定画面 「外観」-「テーマ編集」-「スタイルシート」を選択
以下のメニュー背景色を変更
.site-header {
background-color: #444; /*←メニュー 背景色--------------*/
max-width: 1260px;
position: relative;
width: 100%;
z-index: 4;
}次にメニューの文字サイズを変更します。以下のfont-size～の一行を追記します。
.primary-navigation li {
border: 0;
display: inline-block;
height: 48px;
line-height: 48px;
position: relative;
font-size:14px; /*←追加 メニュー文字サイズ----------------*/
}以上、メニュー部分のカスタマイズの方法でした。
ひとこと
Twenty Fourteenには簡単にカラーなどのデザインを変更できる「Fourteen Extended」などのプラグインあるので、試してみると面白いと思います。
とは言いつつプラグインは極力少ない方がいいので、細かい点や自分でできるところはがんばってカスタマイズしていきたいですね。
