このページはポートフォリオ作成課題の補足、レベルアップ版です。 必ず作る必要はありませんので、余裕のある方・WordPressタグの扱いに慣れてきたときに試してみて下さい。
フロントページのヘッダーを分ける方法
ここまでのレッスンではfront-page.phpはヘッダー部分をテンプレート分けせず、そのまま使用しました。 テンプレートファイルに分けるには２つの方法があります。
- A:header.phpに条件分岐で書く
- B:header-front.phpを作成する
A:条件分岐で書く方法
header.phpでフロントページにのみ呼び出す「is_front_page()」を使って条件分岐を作ります。
その中に、表示内容が変わる<div class="collapse">内をそれぞれ記述します。
header.php
---略---
<nav class="navbar navbar-expand-lg navbar-dark fixed-top">
<div class="container d-flex justify-content-between">
<a class="navbar-brand" href="<?php echo home_url() ?>">DevFolio</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarTogglerDemo02">
<?php if ( is_front_page() ) : // フロントページだけ表示 ?>
<!-- index.htmlのコード -->
<ul class="navbar-nav">
<li class="nav-item pl-md-4">
<a class="nav-link js-scroll active" href="#">Home</a>
</li>
<li class="nav-item pl-md-4">
<a class="nav-link js-scroll" href="#about">About</a>
</li>
<li class="nav-item pl-md-4">
<a class="nav-link js-scroll" href="#service">Services</a>
</li>
<li class="nav-item pl-md-4">
<a class="nav-link js-scroll" href="#work">Work</a>
</li>
<li class="nav-item pl-md-4">
<a class="nav-link js-scroll" href="#blog">Blog</a>
</li>
<li class="nav-item pl-md-4">
<a class="nav-link js-scroll" href="#contact">Contact</a>
</li>
</ul>
<?php else : ?>
<!-- wordpressのカスタムメニューをインクルード -->
<?php wp_nav_menu(
array(
//登録したメニュー名使って、呼び出すメニューを指定する
'theme_location' => 'header-navigation',
'menu_class' => 'navbar-nav',
)
); ?>
<?php endif; ?>
</div>
</div><!-- .container -->
</nav>
B:header-front.phpを作る方法
foront-page.phpの</header>タグまでをカットして新規ファイルに貼り付けます。
張り付けたファイルをheader-front.phpという名前で保存します。
front-page.phpの最上部に下記インクルートタグを挿入します。
<?php get_header('front'); ?>