スポンサーリンク

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

便利ツール・サービス

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

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

【初心者でも簡単】HTML/CSSで作ったサイトのワードプレス化の方法を詳しく解説！
今回は、HTML/CSSで作ったサイトをワードプレス化する方法をご紹介します。 HTML/CSSでサイトを作ったはいいけど、機能をもっと拡張させる上でワードプレスのプラグインを使いたい、という時に便利な「サイトのワードプレス化」。その手順を詳しく、そしてわかりやすく解説します。
blog.frankul.net
2022.11.25

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

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

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

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

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

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

【初心者でも簡単】HTML/CSSで作ったサイトのワードプレス化の方法を詳しく解説！
今回は、HTML/CSSで作ったサイトをワードプレス化する方法をご紹介します。 HTML/CSSでサイトを作ったはいいけど、機能をもっと拡張させる上でワードプレスのプラグインを使いたい、という時に便利な「サイトのワードプレス化」。その手順を詳しく、そしてわかりやすく解説します。
blog.frankul.net
2022.11.25

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

  • サイトの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なのはヘッダーが１パターンしかない場合のみです。
例えば、下層ページが複数あり、ページ毎にヘッダーが異なる場合は、どのように対処すれば良いでしょうか？
その手順を見ていきます。

各ページごとに、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をコピーしました