【WordPress】トップヘッダーと下層ヘッダーをif文で出しわける

どうも、くまだです。

WordPressのオリジナルテーマを使ったサイト制作をやっていると、トップヘッダーと下層ヘッダーのデザインや色が違うことがあります。そのあたりの対処は「if文」を使って出しわけることができます。

titleタグの出しわけはこちらです。

画像の出しわけはこちらです。

トップヘッダーと下層ヘッダーをif文で出しわけ

ヘッダーのレイアウトが下層と全く同じであれば、header.phpを作って他のファイルから<?php get_header();?>でだいじょうぶです。(他の細かい処理は置いといて)

デザインや色、もしくはピクセルや余白間がトップと下層ヘッダーで違う場合は以下のようにif文で出しわけます。

// header.php

<!DOCTYPE html>
<html lang="ja">

<head>
~~~省略
</head>
<body>
  <div class="container">
    <?php if (is_front_page()) : ?>
    // ここにトップのヘッダーを書く
    <?php else : ?>
  // ここに下層のヘッダーを書く
    <?php endif; ?>

is_front_page();で、フロントページ(トップ)ならトップページ用のヘッダーを出す。else(そうでなければ)なら下層のヘッダーを出す。

このやり方であれば、他のphpファイルでheader.phpを呼び出すとき<?php get_header();?>一つで済みます。

しかし上の書き方だと、header.phpの中にトップページ用のヘッダーと下層ページ用のヘッダーが同時に記述してある形になります。それが気になるというのであれば、以下のようにファイルをつくってそれぞれにコードを移します。独自のテンプレートファイルのようなものです。

  • トップページ用のヘッダー→header-top.php
  • 下層のヘッダー→header-under.php

上の2つのファイルを例えば「template」というフォルダ(フォルダ名はなんでもいい)に格納します。それを以下のようにファイルを呼び出します。

// header.php

<!DOCTYPE html>
<html lang="ja">

<head>
~~~省略
</head>
<body>
  <div class="container">
    <?php if (is_front_page()) : ?>
        <?php get_template_part('template/header-top'); ?>
    <?php else : ?>
       <?php get_template_part('template/header-under'); ?>
    <?php endif; ?>

これでファイルがだいぶスッキリしました。

get_template_part();は、テンプレートパーツを読み込む関数です。トップページ用のヘッダー、下層のヘッダーはそれぞれ先ほど別のphpファイルに分けてtemplateというフォルダに入れたので、それらをget_template_part();で読み込んでいます。

そしてif文でページごとに出し分けする、という感じです。ヘッダーのデザインがトップと下層で違うときは使えるネタです。

ここまで読んでくださりありがとうございました。

この記事を書いた人