24：トップページヘッダと配下ページでヘッダを分ける

公開日:2019年07月14日更新日:2019年07月15日

WordPress

トップページのヘッダーと配下ページのヘッダーが両方表示されています。

トップページとそれ以外のページでヘッダーの内容を変更します。

カテゴリー一覧のヘッダーをヘッダーモジュールに移動

カテゴリー一覧のヘッダーパーツは配下ページ共通のヘッダーパーツになるため、ヘッダーモジュール「header.php」に移動します。

category.php

ヘッダーパーツをカットします。

変更前

<?php
get_header();
?>
<div class="header">
  <div class="inner">
    <div class="flex">
      <div class="flex-item logo">
        <a href="index.html">
          <img src="img/logo.png" alt="ロゴ">
        </a>
      </div><!-- .flex-item -->
      <div class="flex-item nav">
        <ul class="flex">
          <li class="flex-item">
            <a href="#">Works</a>
          </li>
          <li class="flex-item">
            <a href="archive.html">Blog</a>
          </li>
          <li class="flex-item">
            <a href="index.html#profile">Profile</a>
          </li>
        </ul>
      </div><!-- .flex-item -->
    </div><!-- .flex -->
  </div><!-- .inner -->
</div><!-- .header -->

変更後

<?php
get_header();
?>

header.php

category.phpでカットしたヘッダーパーツをペーストします。

変更前

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>ポートフォリオサイト</title>
  <link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">
  <?php wp_head(); ?>
</head>
<body>
<div class="hero">
  <div class="inner">
    <div class="flex">
      <div class="flex-item logo">
        <a href="index.html">
          <img src="<?php echo get_stylesheet_directory_uri(); ?>/img/logo.png" alt="ロゴ">
        </a>
      </div><!-- .flex-item -->
      <div class="flex-item nav">

<?php
wp_nav_menu( array(
  'container' => false,
  'theme_location' => 'header-nav',
));
?>

      </div><!-- .flex-item -->
    </div><!-- .flex -->
  </div><!-- .inner -->
</div><!-- .hero -->

変更後

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>ポートフォリオサイト</title>
  <link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">
  <?php wp_head(); ?>
</head>
<body>
<div class="hero">
  <div class="inner">
    <div class="flex">
      <div class="flex-item logo">
        <a href="index.html">
          <img src="<?php echo get_stylesheet_directory_uri(); ?>/img/logo.png" alt="ロゴ">
        </a>
      </div><!-- .flex-item -->
      <div class="flex-item nav">

<?php
wp_nav_menu( array(
  'container' => false,
  'theme_location' => 'header-nav',
));
?>

      </div><!-- .flex-item -->
    </div><!-- .flex -->
  </div><!-- .inner -->
</div><!-- .hero -->

<div class="header">
  <div class="inner">
    <div class="flex">
      <div class="flex-item logo">
        <a href="index.html">
          <img src="img/logo.png" alt="ロゴ">
        </a>
      </div><!-- .flex-item -->
      <div class="flex-item nav">
        <ul class="flex">
          <li class="flex-item">
            <a href="#">Works</a>
          </li>
          <li class="flex-item">
            <a href="archive.html">Blog</a>
          </li>
          <li class="flex-item">
            <a href="index.html#profile">Profile</a>
          </li>
        </ul>
      </div><!-- .flex-item -->
    </div><!-- .flex -->
  </div><!-- .inner -->
</div><!-- .header -->

トップページヘッダ―と配下ページヘッダーを分けて表示

条件分岐関数を使用して表示を分けます。

関数名	内容
is_front_page()	フロントページか調べる
is_home()	トップページか調べる
is_singular()	投稿または固定ページか調べる
is_page()	固定ページか調べる
is_single()	投稿詳細ページか調べる
is_sticky()	投稿が「先頭に固定表示（sticky）」か調べる
is_archive()	アーカイブページか調べる
is_post_type_archive()	カスタム投稿タイプアーカイブページか調べる
is_category()	カテゴリーアーカイブページか調べる
is_tag()	タグアーカイブページか調べる
is_date()	日付アーカイブページ（年別/月別/日別アーカイブページ）か調べる
is_year()	年別アーカイブページか調べる
is_month()	月別アーカイブページか調べる
is_day()	日別アーカイブページか調べる
is_search()	検索結果ページか調べる
have_posts()	投稿があるか調べる
has_post_thumbnail()	アイキャッチ画像が指定されているか調べる
has_tag()	タグがついているか調べる
has_category()	カテゴリーに属しているか調べる in_category()とほぼ同じ
have_comments()	コメントがあるか調べる
comments_open()	コメント投稿を許可しているか調べる

今回はis_front_page関数を使用してトップページと配下ページを分けます。

header.php

if文でヒーローパーツとヘッダーパーツを分岐させます。

変更前

<div class="hero">
  <div class="inner">
    <div class="flex">
      <div class="flex-item logo">
        <a href="index.html">
          <img src="<?php echo get_stylesheet_directory_uri(); ?>/img/logo.png" alt="ロゴ">
        </a>
      </div><!-- .flex-item -->
      <div class="flex-item nav">

<?php
wp_nav_menu( array(
  'container' => false,
  'theme_location' => 'header-nav',
));
?>

      </div><!-- .flex-item -->
    </div><!-- .flex -->
  </div><!-- .inner -->
</div><!-- .hero -->

<div class="header">
  <div class="inner">
    <div class="flex">
      <div class="flex-item logo">
        <a href="index.html">
          <img src="img/logo.png" alt="ロゴ">
        </a>
      </div><!-- .flex-item -->
      <div class="flex-item nav">
        <ul class="flex">
          <li class="flex-item">
            <a href="#">Works</a>
          </li>
          <li class="flex-item">
            <a href="archive.html">Blog</a>
          </li>
          <li class="flex-item">
            <a href="index.html#profile">Profile</a>
          </li>
        </ul>
      </div><!-- .flex-item -->
    </div><!-- .flex -->
  </div><!-- .inner -->
</div><!-- .header -->

変更後

<?php if( is_front_page() ) : ?>
<div class="hero">
  <div class="inner">
    <div class="flex">
      <div class="flex-item logo">
        <a href="index.html">
          <img src="<?php echo get_stylesheet_directory_uri(); ?>/img/logo.png" alt="ロゴ">
        </a>
      </div><!-- .flex-item -->
      <div class="flex-item nav">

<?php
wp_nav_menu( array(
  'container' => false,
  'theme_location' => 'header-nav',
));
?>

      </div><!-- .flex-item -->
    </div><!-- .flex -->
  </div><!-- .inner -->
</div><!-- .hero -->
<?php else : ?>
<div class="header">
  <div class="inner">
    <div class="flex">
      <div class="flex-item logo">
        <a href="index.html">
          <img src="img/logo.png" alt="ロゴ">
        </a>
      </div><!-- .flex-item -->
      <div class="flex-item nav">
        <ul class="flex">
          <li class="flex-item">
            <a href="#">Works</a>
          </li>
          <li class="flex-item">
            <a href="archive.html">Blog</a>
          </li>
          <li class="flex-item">
            <a href="index.html#profile">Profile</a>
          </li>
        </ul>
      </div><!-- .flex-item -->
    </div><!-- .flex -->
  </div><!-- .inner -->
</div><!-- .header -->
<?php endif; ?>

トップページURLを取得

トップページURLを取得する場合はhome_url関数を使用します。表示関数ではなくURL文字列を返すだけなのでecho命令を忘れないようにしましょう。

<?php echo home_url(); ?>

外部ファイルは絶対パス取得関数を使用

get_stylesheet_directory_uri関数を使用してテーマフォルダまでの絶対パスを取得します。echo命令と「/」を忘れないようにしましょう。

<?php echo get_stylesheet_directory_uri(); ?>/

メニュー表示

メニュー表示はwp_nav_menu関数を使用します。

<?php
wp_nav_menu( array(
  'container' => false,
  'theme_location' => 'header-nav',
));
?>

header.php

ヒーローパーツのロゴリンクのhref属性を絶対パスに変更します。

ヘッダーパーツのロゴリンクのhref属性を絶対パスに変更します。

ヘッダーパーツのロゴ画像のsrc属性を絶対パスに変更します。

ヘッダーパーツのメニューをwp_nav_menu関数で出力します。

変更前

<?php if( is_front_page() ) : ?>
<div class="hero">
  <div class="inner">
    <div class="flex">
      <div class="flex-item logo">
        <a href="index.html">
          <img src="<?php echo get_stylesheet_directory_uri(); ?>/img/logo.png" alt="ロゴ">
        </a>
      </div><!-- .flex-item -->
      <div class="flex-item nav">

<?php
wp_nav_menu( array(
  'container' => false,
  'theme_location' => 'header-nav',
));
?>

      </div><!-- .flex-item -->
    </div><!-- .flex -->
  </div><!-- .inner -->
</div><!-- .hero -->
<?php else : ?>
<div class="header">
  <div class="inner">
    <div class="flex">
      <div class="flex-item logo">
        <a href="index.html">
          <img src="img/logo.png" alt="ロゴ">
        </a>
      </div><!-- .flex-item -->
      <div class="flex-item nav">
        <ul class="flex">
          <li class="flex-item">
            <a href="#">Works</a>
          </li>
          <li class="flex-item">
            <a href="archive.html">Blog</a>
          </li>
          <li class="flex-item">
            <a href="index.html#profile">Profile</a>
          </li>
        </ul>
      </div><!-- .flex-item -->
    </div><!-- .flex -->
  </div><!-- .inner -->
</div><!-- .header -->
<?php endif; ?>

変更後

<?php if( is_front_page() ) : ?>
<div class="hero">
  <div class="inner">
    <div class="flex">
      <div class="flex-item logo">
        <a href="<?php echo home_url(); ?>">
          <img src="<?php echo get_stylesheet_directory_uri(); ?>/img/logo.png" alt="ロゴ">
        </a>
      </div><!-- .flex-item -->
      <div class="flex-item nav">

<?php
wp_nav_menu( array(
  'container' => false,
  'theme_location' => 'header-nav',
));
?>

      </div><!-- .flex-item -->
    </div><!-- .flex -->
  </div><!-- .inner -->
</div><!-- .hero -->
<?php else : ?>
<div class="header">
  <div class="inner">
    <div class="flex">
      <div class="flex-item logo">
        <a href="<?php echo home_url(); ?>">
          <img src="<?php echo get_stylesheet_directory_uri(); ?>/img/logo.png" alt="ロゴ">
        </a>
      </div><!-- .flex-item -->
      <div class="flex-item nav">

<?php
wp_nav_menu( array(
  'container' => false,
  'theme_location' => 'header-nav',
));
?>

      </div><!-- .flex-item -->
    </div><!-- .flex -->
  </div><!-- .inner -->
</div><!-- .header -->
<?php endif; ?>