どうも、くまだです。
WordPressのオリジナルテーマを使ったサイト制作をやっていると、トップヘッダーと下層ヘッダーのデザインや色が違うことがあります。そのあたりの対処は「if文」を使って出しわけることができます。
titleタグの出しわけはこちらです。
画像の出しわけはこちらです。
LPデザインのお仕事募集中です↓↓↓
トップヘッダーと下層ヘッダーを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文でページごとに出し分けする、という感じです。ヘッダーのデザインがトップと下層で違うときは使えるネタです。
ここまで読んでくださりありがとうございました。