3.WordPressのヘッダーにレスポンシブ対応メニューとタイトルを組込む

|

サイトの全体のレイアウトが完了したら、各要素を出力するためのコードをphpで記述していきましょう。

WordPrssテーマ作成3では、テーマのheader.phpにタイトルとスマートフォン版で表示が切り替わるナビゲーションメニューを挿入する方法をご紹介します。

テンプレートに要素を組込む前に

WordPressテーマの各テンプレートを構成する要素を組込む前に、アイキャッチ,カテゴリ,タグ,抜粋の入った記事を20~100記事ほど準備しておきましょう。

記事やカテゴリを用意した上で作成しないと、大きさや配置の調整が難しくなりますので、先に挿入しておいてください。

記事の一括投稿は、プラグインで簡単に行うことができます。下記の記事で詳しく紹介していますので、是非参考にしてください。

ナビゲーションメニューを有効化する

ナビゲーションメニューを有効化するためには、functions.phpでWordPressにデフォルトで搭載されているナビゲーション機能を有効化させる必要があります。

functions.phpに記述
//カスタムメニュー
register_nav_menu( 'header-nav',  ' ヘッダーナビゲーション ' );
register_nav_menu( 'footer-nav',  ' フッターナビゲーション ' );

ヘッダーのナビメニューを有効化するのと同時に、フッターのナビメニューも忘れないように有効化しておきましょう。functions.phpへの記述が完了したら、メニューの位置の選択ボタンが表示されるので、管理画面からメニューを作成してください。

タイトルの要素を追加する

まずは、サイトタイトルを表示させるための要素から追加していきます。タイトルは、画像で表示するか文字列で表示するかで記述方法が違いますので、どちらかを選らんで記述してください。

タイトルを画像にする場合は、事前にタイトル用画像をアップロードしておきましょう。

header.phpのheader-innerの中に記述
<!--タイトルを画像にする場合-->
<div class="site-title">
  <h1><a href="<?php echo home_url(); ?>">
    <img src="アップロードした画像へのURL" alt="<?php bloginfo( 'name' ); ?>"/>
  </a></h1>
</div>

<!--タイトルを文字にする場合-->
<div class="site-title">
  <h1><a href="<?php echo home_url(); ?>">
    <?php bloginfo( 'name' ); ?>
  </a></h1>
</div>

サイトタイトルはh1タグで出力し、タイトルをクリックしたらトップページに飛ぶように『<?php echo home_url(); ?>』でリンクさせています。

imgタグのaltとタイトルを文字にする場合に入力している『<?php bloginfo( 'name' ); ?>』は、サイトタイトルを呼び出すためのコードです。

テーマフォルダの中に画像を入れ込む

デモサイトでは、テーマフォルダの中に『images』というフォルダを作成し、その中に『title.png』という名前の画像を入れphpで呼び出すようにしています。

テーマファイルのURLは『<?php echo get_template_directory_uri(); ?>』という記述で呼び出すことができるので、画像を呼び出すためのコードは下記のようになります。

<img src="<?php echo get_template_directory_uri(); ?>/images/title.png" alt="<?php bloginfo( 'name' ); ?>"/>

ナビメニューの要素を追加する

タイトルの要素を記述したら、次はナビメニューの要素を追加しましょう。ナビメニューは、簡単に背景色を追加できるように、最大幅が決まっているheader-innerの外に追加します。

header.phpの</div>(header-innerの終了タグ)の後に記述
<!--ヘッダーメニュー-->
<?php wp_nav_menu( array(
      'theme_location' => 'header-nav',
      'container' => 'nav',
      'container_class' => 'header-nav',
      'container_id' => 'header-nav',
      'fallback_cb' => ''
) ); ?>

ブラウザ幅いっぱいに表示される背景色を指定するために、ヘッダーナビを出力するための要素は、『<div class="header-inner">』の外側に追加しましょう。

ナビメニュー

ナビメニューは、先程有効化したwordpressに搭載されているメニュー機能を呼び出すための記述をします。

『<?php wp_nav_menu( array(  ) ); ?>』でWordPressのメニュー機能を呼び出し、『array()』の中の値で各設定をします。各値の詳細は、下記の通りです。

theme_location

最初にfunctions.phpに記述した値と作成するメニューを関連付けます。funcitons.phpに記述した値と、theme_locationの値が違うとメニューが表示されないので、必ず同じ値を指定するようにしてください。

container

containerは、メニュー全体を囲むタグを指定します。今回は『nav』を指定しているので、メニュー全体が自動的に『<nav>~</nav>』の中に出力されます。

container_class・container_id

全体を括るタグのclass名とidの名を付けることができます。今回の場合は『<nav id="指定した名前" class="指定した名前">』となります。

fallback_cb

メニューが表示されていない場合の値を指定します。初期値では『wp_page_menu』となっており、メニューが指定または設定されてない場合に意図していない要素が出力されてしまいます。

意図しない表示を防ぐために、『fallback_cb』で値を指定しておきましょう。今回は、メニューを設定していないときに何も表示させないように『''』を指定しています。

スマートフォン用ボタンを追加する

スマートフォン用のボタンは、『<div class="header-inner">』の中に設置します。

header.phpの<div class="header-inner">の中の『<div class="site-title">』の終了タグ『</div>』の後に追加
<!--スマホ用メニューボタン-->
<button type="button" id="navbutton">
 <i class="fas fa-list-ul"></i><
</button>

スマホ用ボタンのアイコンは、骨組みテーマを作る際にheadタグに呼び出したFontAwesomeというWebフォントを使って作成しています。(ver5.0.13)
有料版のアイコンもありますが、今回は無料のアイコンのみを使って作成します。

要素が入ったかを一度確認する

要素の入れ込みが終わったら、一度更新して要素がきちんと入ったかを確認してみましょう。

要素の記述が間違いなければ上記の画像のように各要素が出力されます。『タイトル』『ボタン』『ナビメニュー』がきちんと出力されていればheader.phpへの記述は完了です。

サイトタイトルのCSSデザイン

CSSでデザインを始める前に、headerとheader-innerに要素を確認するため指定しているカラーと高さの一時設定を、非表示もしくは削除してください。

style.cssに記述
/*タイトルを画像にする場合*/
.site-title {
  text-align: left;
}

.site-title h1 {
  margin: 0;
  padding: 10px 5px 0;
  line-height: 1;
}

.site-title h1 img {
  width: auto;
  height: 70px;
}

.site-title a {
  display: block;
}


/*タイトルを文字列にする場合*/
.site-title {
  text-align: left;
}

.site-title h1 {
  font-size: 2.4em;
  margin: 0;
  padding: 10px 5px 0;
}

.site-title h1 a {
  display: block;
  text-decoration: none;
  color: #000;
}

タイトルを画像で表示する場合と文字で表示する場合で、記述が異なるのでどちらか選んで記述してください。

画像のサイズや文字のサイズは、自分のサイトのタイトルサイズに合わせて調整しましょう。

スマホ用のメニューのデザイン

メニュー表示は、複雑な構造のスマホ用の表示を基準にデザインしていきます。スマホ表示を調整するときは、ブラウザのデベロッパーツールでスマホ表示にして調整していきましょう。

ボタンのデザインと配置

スマホ表示のときに表示されるボタンは、タイトルの右側に表示されるように調整し、サイズのバランスを整えます。

style.cssに記述
/*スマホ用のメニューボタン*/
  .header-inner {
    position: relative;
  }

  #navbutton {
    position: absolute;
    top: 50%;
    right: 10px;
    padding: 8px 12px;
    cursor: pointer;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    border: solid 1px #aaa;
    border-radius: 5px;
    background-color: #fff;
  }

  #navbutton:hover {
    background-color: #ddd;
  }

  #navbutton:focus {
    outline: none;
  }

  #navbutton i {
    font-size: 2em;
    color: #333;
  }

スマホ用のボタンは、『postion: relative;』で『header-inner』を基準とし、『postion: absolute;』で位置を指定します。今回はtansformを使用して、スマホ用のメニューボタンが、ちょうど『header-inner』の中央に自動で調整されるようにしています。

配置を指定したら、後はボタンのサイズや色を指定していきます。ボタンがクリックされたときの動作なども、『:hover』や『:forcus』などで設定しておきましょう。

ボタンの色やボーダーサイズは、自分好みに調整してください。

デザインが整ったら、ブラウザのデベロッパーツールで様々なデバイスのサイズを確認し、タイトルとスマホ用ボタンが被っていないかを確認します。

被っている場合は、CSSを調整してボタンのサイズや位置を調整したり、『@media』を使ってタイトルのサイズをスマホ表示のときのみ小さくしたりなどの調整を行いましょう。

ナビメニューデザイン

ナビメニューは、phpでheader-navを呼び出す時に指定した『<nav ="header-nav">』の中に『<ul><li>』のリスト形式で出力されます。

style.cssに記述
/*ヘッダーナビ*/
#header-nav {
  display: none;
}

.header-nav {
  padding-left: 10px;
}

.header-nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.header-nav li a:before {
  content: "\f0da";
  font-family: 'Font Awesome 5 Free';
  color: #555;
  font-size: 0.9em;
  padding-right: 3px;
}

.header-nav li a {
  display: block;
  padding: 15px 5px;
  color: #000;
  font-weight: bold;
  font-size: 1em;
  text-decoration: none;
}

.header-nav li a:hover {
  opacity: 0.8;
}

スマートフォンでは、ボタンが押されるまでメニューを表示させたくないので、ナビメニューを『display: none;』で非表示になるよう設定します。

※最初に『display: none;』の記述をすると表示が消えてしまうので、デザインが終わって最後に記述を加えましょう。

各メニュー項目の前には、ワンポイントとなるアイコンを追加したかったので、『.header-nav li a:before』で擬似要素を作成し、CSSでFontAwesomeのアイコンを付け加えています。(ver5.0.13)

ナビボタンを動かす

ボタンのCSS設定が終わったら、ナビボタンを押したときにメニューが表示されるようにしましょう。メニューの表示・非表示はjQueryを使って動作させるので、テーマフォルダ内にjavaScriptファイルを新たに作成してください。

デモでは、『js』というjavascript専用のフォルダを作成し、『navbutton.js』というファイル名で追加しています。javaScriptのファイルを作成する場合は、拡張子を『.js』でファイルを作成します。

テーマにアップロードするときは、FTPなどでサーバーにアップしてください。

※ATOMとXamppを連携して作成している場合は、プロジェクトフォルダの上で右クリック→『新規フォルダ』→『フォルダの名前』でフォルダを追加し、追加したフォルダの上で新規ファイル →『ファイルの名前.js』で追加することができます。

javaScriptファイルを作成したら、プログラムを動かすためのコードを記述していきます。

jQuery(function() {
  jQuery("ボタンのID").click(function() {
      jQuery("ボタンの中に収納したい要素のID").slideToggle();
  });
});

上記のような構成で記述します。jQuery()の中の要素は必ず『""』で括り、入れたい物が複数ある場合は、『 , (半角カンマ)』で区切って要素を指定してください。

以上を踏まえて記述すると、デモテーマでは下記のようなソースコードになります。

navbutton.jsに記述
jQuery(function() {
  jQuery("#navbutton").click(function() {
      jQuery("#header-nav").slideToggle();
  });
});

javaScriptファイルを作成し、アップするだけではWordPress上ではまだ動きません。テーマに作成したjavaScriptファイルを読み込ませるためにfunctions.phpに記述を加えましょう。

functions.phpに記述
//メニューボタンjs呼び出し
function navbutton_scripts(){
  wp_enqueue_script( 'navbutton_script', get_template_directory_uri() .'/js/navbutton.js', array('jquery') );
}
add_action( 'wp_enqueue_scripts' , 'navbutton_scripts' );

上記の関数を追加することで、javascriptファイルをWordPressで読み込ませることができます。

『wp_enqueue_script(パラメータ)』は、スクリプトファイルを重複させないようにしたり順番を指定したりするための関数です。パラメータの指定順位と内容は下記のように指定します。

wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );
$handle スクリプトを識別するための値を入力します。他のjsファイルと分けるために任意の名前を指定しましょう。
$src スクリプトファイルへのパスを指定します。jsファイルある場所までの絶対パスで指定してください。
$deps 依存しているスクリプトを指定します。jQueryの場合はarray('jquery')と指定します。
$ver バージョンを指定します。WordPressのjqueryは、更新とともにアップグレードされていくのでバージョンを指定したい場合は指定しましょう。
$in_footer 読み込ませる位置を指定することができます。trueで</body>の前、falseで</head>の前でスクリプトファイルを読み込みます。

今回は、識別名とファイルへのパス・依存スクリプト以外のパラメータは特に指定しないため、省略しています。また、wp_enqueue_scriptを動作させるために最後に『add_action(~』の記述も忘れずに行ってください。

以上でスマートフォン用のメニューの設定・デザインは完了です。javascriptファイルがWordPressに正しく認識されていれば、下記の画像のようにボタンを押すとメニューが展開されるようになります。

パソコン用のメニューのデザイン

スマホ用のデザインが出来上がったら、それをベースに@mediaを使ってパソコン用のCSSを編集していきましょう。パソコン表示では、ボタンを非表示にしメニューが横並びで表示されるように設定します。

style.cssに記述
/*ヘッダーメニューPC閲覧時*/
@media (min-width: 768px) {
  #header-nav {
    display: block!important;
  }
  .header-nav {
    max-width: 1200px;
    margin: 0 auto;
    padding:0 10px;
    box-sizing: border-box;
  }
  .header-nav ul:after {
    display: block;
    clear: both;
    content: '';
  }
  .header-nav li {
    display: inline-block;
    width: auto;
  }
  .header-nav li a {
    font-size: 1.1em;
    padding: 5px 10px;
  }
  #navbutton {
    display: none;
  }
}

今回は768pxをフックポイントに設定しているので、iPadなどのタブレットではパソコン用のCSSが表示されます。タブレットでもスマホ用の表示にしたいときは、フックポイントを変更してください。

スマホ閲覧時のときに記述した非表示設定(display: none;)も『display: block !important;』で解除しボタンを非表示にします。

また、ナビメニューはheader-innerの外にあるため、最大幅が適応されません。ヘッダーナビにもheader-innerと同じように最大幅を設定し、中央に配置されるように設定を追加してください。

ヘッダーやメニューの背景に色を付ける

ヘッダーやナビメニューでは、インナー要素に最大幅を指定しているため簡単に背景色を付けることができます。

style.cssに記述
header {
  background-color: #bfeaff;
}
.top-nav-area {
  background-color: #333;
}

『header』と『.top-nav-area』に背景色を付けることで、それぞれに背景色を簡単に設定できます。どちらかだけに指定すれば、メニューの背景のみ・メニューの背景色はヘッダーと同じ、という設定も可能です。

パソコン用のデザインの調整が完了したら、WordPressテーマのヘッダーでの作業は完了です。次の記事では、ヘッダーと同じくサイトの共通部分であるサイドバーとフッターの作成方法についてご紹介します。

下記より記事で作成したところまでのテーマファイルを下記よりダウンロードできます。

3.までで作成したテーマ ダウンロード