スポンサーリンク

【初心者でも簡単】ページごとにヘッダーやフッターが異なるサイトのWordPress化の手順

便利ツール・サービス

今回はページごとにヘッダーやフッターが異なるサイトのWordPress化の手順をご紹介します。

WordPress化では、まずはヘッダーをheader.phpとして切り取り、そのheader.phpを各ページでヘッダーとして読み込むようにします。

しかし、実際には全ページでヘッダーが同じとは限りません。

私自身もあるWebサイトのWordPress化の依頼を受けた際、いざ中身を細かく見てみると、ページごとにヘッダーが異なり、どうやってheader.phpを切り分けたら良いのか困惑しました。

調べてみるとWordPressでは複数の異なるヘッダーをあらかじめ用意し、ページごとに使うヘッダーを切り替えることが可能とのこと。これはヘッダーだけでなくフッターも同様です。

その知見をもとにWebサイトのWordPress化を実施し、ご依頼は無事完了することができました。

今回はその時行った手順をご紹介したいと思います。

そもそもHTML・CSSで作ったサイトをどうやってWordPress化するの?という方は、以下の記事をご参照くださいね!

この記事の対象読者は以下のような方を想定しています

  • サイトのWordPress化を実施したことがある人
  • これからサイトのWordPress化に挑戦しようとしている人

この記事を読むことで以下がわかるようになります

  • WordPress化の際にページごとにヘッダー/フッターを切り替える方法

WordPress化の流れ

まずはWordPress化のおさらいをしましょう。
もう全部ばっちりだよ!という方はここは飛ばしていただいてOKです。

サイトのWordPress化=サイトをWordPressのテーマにするということです。
CSS/JS/画像のパスをWordPress用に修正したりヘッダーとフッターをWordPress用のパーツとして切り取ったりという作業があります。

最終的に整理したコードをWordPressにアップロードして、WordPressにテーマとして認識させることでWordPress化が完了します。

詳細は以下の通りです。

  1. まずはHTML/CSSでサイトを作成する
  2. CSS/JS/画像のパスをWordPress用に修正する
  3. ヘッダーとフッターをWordPress用のパーツとして切り取る
  4. 切り取ったヘッダーやフッターを該当箇所で読み込む設定をする
  5. WordPress用に整理したソースコードをWordPressにアップロードする
  6. WordPressにテーマとして認識させる

今回は3と4の「ヘッダーとフッターをパーツとして切り取る」「切り取ったヘッダーやフッターを該当箇所で読み込む設定をする」という部分についてもう少し詳しく解説していきます。

【手順】ヘッダーが複数パターンある場合の対処法

一つのヘッダーを全ページ共通で使用する場合は、コードからヘッダー部分を切り取り、header.php として保存したあと、コードを切り取った部分に header.php を読み込みました。

しかしこれでOKなのはヘッダーが1パターンしかない場合のみです。
例えば、下層ページが複数あり、ページ毎にヘッダーが異なる場合は、どのように対処すれば良いでしょうか?
その手順を見ていきます。

各ページごとに、wp_head();を追加する

ヘッダーとして切り出す前に、WordPressのヘッダーに不可欠な<?php wp_head(); ?>を以下の通り各ページの</head>直前に追加します。

トップページだけではなく、トップページとヘッダーデザインが異なる下層ページについても忘れずに追記しましょう。

<!DOCTYPE HTML> 
<html lang="ja">
<head>
 <meta charset="utf-8">
 ・・・省略・・・
 <title>WordPress化について</title>
  ←ここに<?php wp_head(); ?>を追記
</head>
トップページのヘッダーをheader.phpとして切り出す

トップページのヘッダー部分を切り出します。

具体的には、以下のように<!DOCTYPE HTML>~</header>までを切り取りましょう。

<!DOCTYPE HTML> ←ここから切り取りスタート
<html lang="ja">
<head>
 <meta charset="utf-8">
 ・・・省略・・・
 <title>WordPress化について</title>
<?php wp_head(); ?>
</head>
<body>
 <header>
 <div class="logo>
  <a href="https://blog.frankul.net/"><img class="logo-image" src="https://blog.frankul.net/"></a>
  </div>
  <nav><ul>
    <li>HOME</li>
    <li>CONTACT</li>
  </ul></nav>
 </header> ←ここまで切り取り

<section>
 <div>
  <p>プロフィール</p>
 </div>

ヘッダー部分というと<head>部分のみ、あるいは<header>部分のみを考えがちですが、WordPress化においてはHTMLの一番最初から、各ページのヘッダー部分を構成している<header>までの部分を指します。

この切り出した部分をheader.phpとして保存します。

また、切り取った場所に以下の通り<?php get-header(); ?>を記述し、header.phpを読み込みます。

<?php get_header(); ?>

<section>
 <div>
  <p>プロフィール</p>
 </div>
下層ページのヘッダー部分を切り出す

続いていよいよトップページとはヘッダーが異なる下層ページの取り扱いです。

まずは、先ほどと同様以下の通り<!DOCTYPE HTML>~</header>部分をヘッダー部分として切り出します

<!DOCTYPE HTML> ←ここから切り取りスタート
<html lang="ja">
<head>
 <meta charset="utf-8">
 ・・・省略・・・
 <title>WordPress化について(下層ページ)</title>
<?php wp_head(); ?>
</head>
<body>
 <header>
 <div class="logo>
  <a href="https://blog.frankul.net/"><img class="logo-image" src="https://blog.frankul.net/"></a>
  </div>
  <nav><ul>
    <li>HOME</li>
    <li>CONTACT</li>
  </ul></nav>
 </header> ←ここまで切り取り

<section>
 <div>
  <p>プロフィール</p>
 </div>
header-xxx.phpとして保存

切り取ったヘッダー部分は、header.phpとは別のファイル、header-xxx.php(xxxは任意の文字列)に保存します。

xxx-header.php等ではなく、必ずheader-xxx.phpの形にします。
この形で保存しておくと、WordPressによってヘッダーパーツとして認識されます。

切り取ったヘッダーを読み込む

読み込みをする場所(切り取った場所)に以下の通り<?php get-header(‘xxx’); ?>を追記します。

<?php get-header('xxx'); ?>

<section>
 <div>
  <p>プロフィール</p>
 </div>

xxxは先ほどヘッダーファイルにつけた名称header-xxx.phpのxxx部分です。
こうすることで、先ほど保存したヘッダーファイルがデフォルトのheader.phpに代わってヘッダーとして読み込まれます。

その後の手順は通常のWordPress化と同じで、ソースコードをWordPressにアップロードします。

【手順】フッターが複数パターンある場合の対処法

ページごとにフッターのデザインが異なる場合は、どのように対処すれば良いでしょうか。
その手順を見ていきます。

各ページごとに、wp_footer();を追加する

WordPressのフッターに不可欠な<?php wp_footer(); ?>を以下の通り各ページの</body>直前に追加します。

トップページだけではなく、トップページとフッターデザインが異なる下層ページについても忘れずに追記しましょう。

<footer>
 <ul> 
  <li>HOME</li> 
  <li>CONTACT</li> 
 </ul>
  <small>©Frankul</small>
</footer>
 ←ここに<?php wp_footer(); ?>を追加
</body>
</html>
トップページのフッターをfooter.phpとして切り出す

トップページのフッター部分を切り出します。

具体的には、以下のように<footer>~</html>までを切り取りましょう。

 <div>
  <p>プロフィール</p>
 </div>
</section>

<footer> ←ここから切り取りスタート
 <ul> 
  <li>HOME</li> 
  <li>CONTACT</li> 
 </ul>
  <small>©Frankul</small>
</footer>
<?php wp_footer(); ?>
</body>
</html> ←ここまで切り取り

フッター部分というと<footer>部分のみを考えがちですが、WordPress化においては<footer>から末尾の</html>までの部分を指します。

この切り出した部分をfooter.phpとして保存します。

また、切り取った場所に以下の通り<?php get-footer(); ?>を記述し、footer.phpを読み込みます。

 <div>
  <p>プロフィール</p>
 </div>
</section>

<?php get_footer(); ?>
下層ページのフッター部分を切り出す

トップページとはフッターが異なる下層ページについても先ほどと同様以下の通り<footer>~</html>部分をフッター部分として切り出します

 <div>
  <p>プロフィール</p>
 </div>
</section>

<footer> ←ここから切り取りスタート
 <ul> 
  <li>HOME</li> 
  <li>CONTACT</li> 
 </ul>
  <small>©Frankul</small>
</footer>
<?php wp_footer(); ?>
</body>
</html> ←ここまで切り取り
footer-xxx.phpとして保存

切り取ったフッターは別ファイル、footer-xxx.php(xxxは任意の文字列)として保存します。

xxx-footer.php等ではなく、必ずfooter-xxx.phpの形にします。
この形で保存しておくと、WordPressによってフッターパーツとして認識されます。

切り取ったフッターを読み込む

読み込みをする場所(切り取った場所)に以下の通り<?php get-footer(‘xxx’); ?>を記載します。

 <div>
  <p>プロフィール</p>
 </div>
</section>

<?php get-footer('xxx'); ?>

xxxは先ほどフッターファイルにつけたfooter-xxx.phpのxxx部分です。

これでデフォルトのfooter.phpに代わって、footer-xxx.phpがフッターとして読み込まれます。

まとめ

以上でページごとにヘッダーやフッターが異なる場合のWordPress化の作業が完了しました。

整理すると、今回の重要なポイントは以下でした。

  • トップページと下層ページのヘッダー/フッターが異なる場合、その部分をheader(footer)-xxx.phpとして保存すること
  • 切り取ったヘッダー/フッターを<?php get-header(footer)(‘xxx’) ?>で呼び出すこと


これで少々構造の複雑なサイトのWordPress化もばっちりだと思います。
ぜひ試してみてください!

タイトルとURLをコピーしました