WordPressでオリジナルテーマを作ろう #4: ヘッダーの作成

前回の続きです。

####ナビゲーションメニューの有効化

functions.phpにコードを追加します。

functions.php

register_nav_menu( 'header-nav',  ' ヘッダーナビゲーション ' );
register_nav_menu( 'footer-nav',  ' フッターナビゲーション ' );

これでヘッダーのナビメニューを表示する準備が整いました。ついでにフッターのナビメニューも有効化しました。フッターは後ほど表示できるようにします。（今回はしません）

WordPressの管理画面に移りましょう。
次に外観からメニューを選択し、メニュー名に任意の名前を入力します。（本記事では「ヘッダーナビ」とします）

そして「メニューを作成」を押します。

メニューを作成し終わったら、メニューを保存を選択します。

####タイトル、ヘッダーメニューの表示

サイトタイトルを表示させるために、header.phpにコードを追加します。

header.php

<header>
    <div class="header-inner">
        <?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(); ?>">
                    <?php bloginfo( 'name' ); ?>
                </a>
            <?php echo $title_tag_end; ?>
        </div>
        <!--メニューボタン-->
        <button type="button" id="navbutton" class="navbutton">
            <i class="fas fa-bars"></i>
        </button>
        <!--ヘッダーメニュー-->
        <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>
    </div>
</header>

サイトを確認すると、

タイトルとヘッダーメニューが表示されているのがわかります。

####デザインの調整

「WordPressでオリジナルテーマを作ろう #3: レイアウトの作成」の際、レイアウト確認用に記述した部分があるのでそれを削除します。

style.css

header {
  background-color: #888;
}
.header-inner {
  background-color: #ccc;
  height: 200px;
}

次にPC用のデザインをstyle.cssに記述します。

style.css

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

.site-title a {
  font-size: 2.4rem;
  font-weight: bold;
  line-height: 1;
  display: inline-block;
  text-decoration: none;
  color: #000;
}

.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;
}

ブラウザを更新します。（更新しても変化がない場合は、デベロッパーツールを開いた状態でリロードボタンを右クリックし、「キャッシュの消去とハード再読み込み」をクリックしてください）

上のような画面が表示されれば、PC用のデザインは出来上がりです。

タブレット用、スマートフォン用のデザインも記述していきます。

#####タブレット用

style.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%);
  }

#####スマートフォン用

style.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の調整が終わったら、display: none;のコメントアウトを外してください。

####ナビボタンの動作

新たにjsディレクトリを作成し、navbutton.jsというファイルを追加します。

js/navbutton.js

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

navbutton.jsを読み込むために、functions.phpにコードを追加します。

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' );

ブラウザを更新し、ナビボタンを押してみましょう。メニューが展開されるようになります。

次回はフッターを作成していきます。

WordPressでオリジナルテーマを作ろう #5: フッターの作成