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

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

WordPrssテーマ作成3では、header.phpにタイトルと、Jqueryを使ったタブレット・スマートフォンのときにボタンに収納されるナビゲーションメニューを組み込んでいきます。

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

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

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

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

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

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

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

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

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

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

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

<?php
if(is_home() || is_front_page()) {
  $title_tag_start = '<h1 class="site-title">';
  $title_tag_end = '</h1>';
} else {
  $title_tag_start = '<p class="site-title">';
  $title_tag_end =  '</p>';
}
?>

<!--タイトルを画像にする場合-->
<div class="site-title-wrap">
  <?php echo $title_tag_start; ?>
    <a href="<?php echo home_url(); ?>">
      <img src="<?php echo get_template_directory_uri() ?>/images/title.png">
    </a>
  <?php echo $title_tag_end; ?>
</div>

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

サイトタイトルは、トップページにいる場合は『h1タグ』それ以外のページでは『pタグ』で出力されるように設定しています。これは、トップページ以外の場合は記事のタイトルやアーカイブ名が『h1タグ』になるので、重複を防ぐためです。

トップページとそれ以外のページの分岐は、『<?php if(is_home()) {～} else {～} ?>』で行っています。

また、タイトルをクリックした場合のトップページへのリンクは、『<?php echo home_url(); ?>』でトップページのURLを呼び出しています。

imgタグのaltとタイトルを文字にする場合に指定している『<?php bloginfo( 'name' ); ?>』は、『WordPress管理画面 > 設定 > 一般 > サイトのタイトル』に設定している文字列を呼び出すための関数です。

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

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

タイトルの要素を記述したら、次はナビメニューの要素を追加します。ナビゲーションメニューは、最初に『functions.php』で有効化した機能を使用します。

<!--ヘッダーメニュー-->
<div id="header-nav-wrap" class="header-nav-wrap">
<?php wp_nav_menu( array(
      'theme_location' => 'header-nav',
      'container' => 'nav',
      'container_class' => 'header-nav',
      'container_id' => 'header-nav',
      'fallback_cb' => ''
) ); ?>
</div>

上記のWordPress関数を記述することで、管理画面で設定したメニューを自動で出力することができます。上記のメニューを呼び出す関数についてもう少し詳しく説明しますので、作成するテーマに合わせて調整してください。

メニューを呼び出すWordPress関数『wp_nav_menu』

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

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

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

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

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

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

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

今回作成するWordPressテーマでは、タブレット・スマートフォン表示の際は、ヘッダーメニューをトグルメニューとして表示しますので、トグルメニューの開閉を開くためのボタンを設置します。

スマートフォン用のボタンは、上記で設置したヘッダーメニューを呼び出す関数の直前に設置します。

<!--スマホ用メニューボタン-->
<button type="button" id="navbutton" class="navbutton">
  <i class="fas fa-bars"></i>
</button>

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

各要素の記述が完了したら、一度ブラウザを更新して要素がきちんと入ったかを確認してみましょう。

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

パソコン用のデザインをCSSで反映する

『WordPressテーマ作成2』で作成したデザインをベースに、まずはPC用のデザインから整えていきましょう。

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

サイトタイトルのCSS

.site-title-wrap {
  text-align: left;
}

/*タイトルを画像にする場合*/
.site-title a {
  font-weight: bold;
  line-height: 1;
  display: inline-block;
  text-decoration: none;
}

.site-title a img {
  display: inline-block;
  width: auto;
  height: 44px;
}

/*タイトルを文字列にする場合*/
.site-title a {
  font-size: 2.4rem;
  font-weight: bold;
  line-height: 1;
  display: inline-block;
  text-decoration: none;
  color: #000;
}

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

ヘッダーメニューのCSS

今回は、ヘッダーメニューは上下中央揃えかつ右寄せでタイトルの横に配置されるように設定します。

.header-inner {
  position: relative;
}

.navbutton {
  display: none;
}

.header-nav-wrap {
  position: absolute;
  top: 50%;
  right: 0;
  margin-left: 230px;
  /*タイトル分の余白をあけておく*/
  transform: translateY(-50%);
}

.header-nav {
  font-size: 0;
}

.header-nav li {
  font-size: 1rem;
  display: inline-block;
  margin-right: 1rem;
}

.header-nav li a {
  font-weight: bold;
  display: block;
  text-decoration: none;
  color: #000;
}

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

ヘッダーメニューは、『position: absolute;』を使って配置します。『position: absolute』で移動させる要素に『top: 50%; transform: translateY(-50%);』と指定することで、基準値の上下中央に移動させることができます。

また、ヘッダーメニューと左側のサイトタイトルが重なるのを防止するため『margin-left』でタイトル分の余白を開けておきましょぅ。余白のサイズは、タイトルの横幅のサイズに合わせてください。

ヘッダーメニューの中の各要素は、『display: inline-block;』で横に並べます。『.header-nav(ulタグ)』に『font-size: 0;』を記述しているのは、liタグを横に並べたときに意図しない余白が入るのを防ぐためです。

上記の画像のようにサイトタイトルとヘッダーメニューが横並びに配置されたらPC版のCSS調整は完了です。

要素の絶対配置『postion』relativeとabsolute

『postion:absolute;』を使うことで、要素の位置を絶対配置することができます。ただし、『postion:absolute;』を使用するときは、親要素に『postion:relative;』を指定し、基準位置を決めておかないと、意図した場所に配置できない場合があるので注意してください。

『postion:absolute;』は、上記のように様々な動きをします。使い方は色々とありますが、一番スタンダードな使い方は下記のCSSのようになります。

/*postion: absoluteを使うときのcss*/
親要素	{
  position: relative;
}

要素A {
  /*適応させたいcssを記述*/
}

要素B {
  postion: absolute;
  right: 0;
  bottom: 0;
}

コーディングを始めたばかりの頃は難しいかもしれませんが『postion:absolute;』は、『postion:relative;』で基準を決めてから使うこと忘れずに覚えておきましょう。

タブレット・スマホ用のメニューのCSSを反映する

今回作成するWordPressテーマでは、タブレット・スマートフォン表示の場合にヘッダーメニューがトグルメニューに収納されるように作成しますが、動作は後で追加するので、CSSのみ先に調整しましょう。

※タブレット・スマートフォンの表示は、各ブラウザーのデベロッパーツールを使用することで確認することができます。デベロッパーツールは基本的には『F12』キーで表示できます。

タブレットのCSS

@media(max-width: 800px) {
  .site-title a img {
    height: 40px;
  }

  .navbutton {
    font-size: 2rem;
    position: absolute;
    z-index: 999;
    top: 50%;
    right: 1.25rem;
    display: block;
    cursor: pointer;
    transform: translateY(-50%);
    border: 0;
    background-color: transparent;
  }

  .navbutton:focus {
    outline: 0;
  }

  .header-nav-wrap {
    z-index: 999;
    top: 86px;
    /*ヘッダーの高さと合わせる*/
    right: auto;
    left: 0;
    /* display: none; */
    width: 100%;
    margin-left: 0;
    transform: none;
    background-color: #03162f;
  }

  .header-nav li {
    display: block;
    margin-right: 0;
  }

  .header-nav li a {
    position: relative;
    padding: .8rem 1.25rem;
    color: #fff;
    border-bottom: 1px solid #888;
  }

  .header-nav li a:after {
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    position: absolute;
    top: 50%;
    right: 1.25rem;
    display: block;
    content: '\f105';
    transform: translateY(-50%);
  }
}

ナビボタン(.navbutton)は、PC版ヘッダーと同じように『postion: absolute;』で位置を指定し、ボタンのサイズや色も整えます。また、『:forcus』を使用してクリックされたときの動作も指定しておきましょう。

ヘッダーナビ(.header-nav-wrap )は、PC表示のときから位置を変更するために『right: auto;』『transform: none;』『margin-left: 0;』で使用しない要素を打ち消し、再度位置を調整してください。『top』からの位置は、headerの高さと同じ高さを指定します。(高さはデベロッパーツールなどで調べることができます。)

また、ボタンが押されるまでメニューを表示させたくないので、ヘッダーナビ(.header-nav-wrap )を『display: none;』で非表示になるよう設定します。※最初に『display: none;』の記述をすると表示が消えてしまうのでCSSの調整が終わるまでコメントアウトしておきましょう。

ヘッダーナビの要素(.header-nav li)は、『display: inline-block;』を『display: block;』に変更して横並びから縦並びにします。各リンク(.header-nav li a)には、ワンポイントとなるアイコンを追加したかったので、『.header-nav li a:after』で擬似要素を作成し、FontAwesomeのアイコンを付け加えています。(ver5.0.13)。

スマートフォンのCSS

スマートフォンの表示は、タブレットとデザインは共通なため、サイズの調整のみ行います。

@media(max-width: 600px) {
  .site-title a {
    font-size: 2rem;
  }

  .site-title a img {
    height: 32px;
  }

  .navbutton {
    right: .8rem;
  }

  .header-nav-wrap {
    top: 62px;
  }

  .header-nav li a {
    padding: .8rem;
  }

  .header-nav li a:after {
    right: .8rem;
  }
}

スマートフォンの横幅はタブレットに比べて狭いため、それに合わせて全体的にサイズを一回り小さくしています。

サイトのタイトルとナビゲーションのボタンが、被らないようにデベロッパーツールなどで確認しながらサイズを調整しましょう。

CSSの調整が完了したら、タブレット表示のときのヘッダーナビ(.header-nav-wrap )の『display: none;』のコメントアウトを忘れずに外し、メニューを非表示にしましょう。

ナビボタンを動かすためのjavascriptを追加する

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

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

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

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

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

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

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

また、通常のjQueryであれば『$』で表記するところを、WordPressで使用する場合は『jQuery』と記述しなければ動かないので注意してください。

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

jQuery(function() {
  jQuery("#navbutton").click(function() {
      jQuery("#header-nav-wrap").slideToggle();
  });
});

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

function navbutton_scripts(){
  wp_enqueue_script( 'navbutton_script', get_template_directory_uri() .'/js/navbutton.js', array('jquery'), '', true );
}
add_action( 'wp_enqueue_scripts' , 'navbutton_scripts' );

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

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

wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );

wp_enqueue_scriptを動作させるために、アクションフック『add_action(～』で関数の読み込み位置を忘れずに指定してください。

javascriptファイルがWordPressに正しく認識されていれば、下記の画像のようにボタンを押すとメニューが展開されるようになります。

以上で、WordPressテーマのheader.phpの外観部分のは完成です。次の記事では、ヘッダーと同じくサイトの共通部分であるサイドバーとフッターの作成方法についてご紹介します。

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