Learning site for website creation

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

  • 投稿日:2019年07月14日
  • 更新日:2019年07月15日

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

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

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

カテゴリー一覧のヘッダーパーツは配下ページ共通のヘッダーパーツになるため、ヘッダーモジュール「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; ?>

このページで出てくる関数

WordPress関数は「公式サイトのドキュメント」で確認しましょう。

WordPress関数

is_front_page()

home_url()

get_stylesheet_directory_uri()

wp_nav_menu()

表示確認

以下URLにアクセスするとトップページが表示されます。

http://localhost/WordPressフォルダ名/

以下URLにアクセスするとカテゴリー一覧が表示されます。

http://localhost/WordPressフォルダ名/category/カテゴリースラッグ/

ヘッダーがそれぞれ別になっていることを確認しましょう。

トップページヘッダー

カテゴリー一覧ヘッダー

 

 

※欠席者対応:lesson15 - lesson16