ZATYのBLOG

お問い合わせする

【テーマ開発】header.phpとfooter.phpのメンテナンス性を考慮した使い方

805views

プログラミング
PHP SEO WordPress テーマ開発 メンテナンス

WordPressはget_header()やget_footer()と呼ぶことで、テーマ用意されているheader.phpやfooter.phpを読み込まれる関数が用意されています。

この関数は引数を指定することで、header-page.phpを読み込む設定にするできるのできます。

この記事では、この関数で呼び出されるheader.phpやfooter.phpにどのようなPHPコードを記述したら、コンポーネントを意識しメンテナンス性も考慮できたテーマにできるか解説します。

なお、コンポーネント理論は主観が含まれる可能性があります。

目次

  1. get_header()とget_footer()
    1. この関数をなぜ使うのか
  2. header.phpに記述すべきこと
    1. タイトルタグとディスクリプションのメタタグについて
    2. ヘッダーのPHPファイルを分ける場合
    3. Google Analyticsを利用する場合
  3. footer.phpに記述すべきこと
  4. まとめ

get_header()とget_footer()

この2つの関数はWordPressの独自関数で、それぞれテーマに用意されているheader.phpとfooter.phpを読み込みます。引数を1つ指定することで、別のファイルを読み込ませることも可能です。

<?php
get_header('contact'); // header-contact.phpが読み込まれるようになります。

PHPにはrequire_once()やrequire()のような、PHPファイル読み込み関数が用意されています。get_header()とget_footer()どちらも内部的にはrequire_once()を利用します。

違いは、「階層指定をしなくても良いこと」「PHPファイルが用意されていない場合もエラーが発生しないこと」です。

もちろん使用しないことによるプログラム上の不具合はありませんが、可読性や保守性のためにもヘッダーとフッターの読み込みは必ずget_header()とget_footer()で行うようにしましょう。

この関数をなぜ使うのか

基本的にPHPでファイル分割する理由は「そのコードを使い回すかどうか」です。

特にサイトの"ヘッダー"と"フッター"はどのページでも同様のデザインになることが多く、WordPressを利用しない場合でも専用のPHPファイルを用意するのが一般的です。

他にもファイル分割する理由として、「コードの可読性のため」が考えられます。サイトのヘッダー要素のデザインが複雑である場合、HTMLも長くなります。ファイルを分割し適切な命名をすることで、そのPHPファイルにどのような目的があるのかをはっきりさせることができるでしょう。

header.phpに記述すべきこと

get_header()で読み込まれるheader.phpは下記のように<header>タグまで記述するのが良いでしょう。

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
  <head>
    <meta charset="UTF-8">
    <!-- metaタグなど -->
    <?php wp_head(); ?>
  </head>
  <body>
    <header class="header">
     ヘッダー中身
    </header>

このような記述をされるのがheader.phpです。ここで注意なのが、wp_head()です。この関数を呼ぶことで、WordPress側で用意するスタイルシートやプラグインで出力されるタイトルタグ・メタディスクリプションタグが出力されます。

タイトルタグとディスクリプションのメタタグについて

通常のHTMLでは必ず記述するtitleタグやmeta:descriptionタグは、All in ONE SEOやyoast SEOなどSEO関連のツールを使用する場合には記述してはいけません。記述することによりタイトルとディスクリプションが2つ出力された奇妙なサイトになってしまいます。

プラグインを使用していない場合でも、functions.phpにadd_theme_support( 'title-tag' );と記述することにより、WordPressが用意した法則でタイトルタグが出力されます。SNSのためのOGPの設定やディスクリプションの設定は用意されていないので、プラグインを利用しない場合はheader.phpに記述してください。

タイトルタグとディスクリプションのタグはその後の運用によって記述するかどうかを判断しましょう。

ヘッダーのPHPファイルを分ける場合

先ほど、get_header関数に引数を指定することでheader-contact.phpのように読み込むPHPファイルを変えられることを説明しました。どのようなときに使用するのでしょうか。

例えば、トップページではファーストビューのヘッダーが大きく表示され、下層ページは小さめのヘッダーとするデザインのサイトがあると思います。その場合は、front-page.phpではget_header('front-page');と記述し、それ以外でget_header();を使用するという使い方ができるでしょう。

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
  <head>
    <!-- 省略 -->
  </head>
  <body>
    <header class="header-front-page">
      大きなファーストビュー
    </header>

この場合、metaタグ部分は共通になる可能性が高いので、PHPファイル分割しても良いでしょう。

それでは、同一のheader.phpにして、if文で分岐する場合とどのように違うのでしょうか。

プログラミングの機能としては全く変わりません。

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
  <head>
  <!-- 省略 -->
  </head>
  <body>
  <?php
    if ( is_front_page() ) :
  ?>
    <header class="header-home">
      大きなファーストビュー
    </header>
  <?php
    else :
  ?>
    <header class="header">
      ヘッダー
    </header>
  <?php 
    endif;
  ?>

ただし、コードを見ると、一見ヘッダーが2つあるようなHTMLに見えます。実際にはheaderタグの中身は多くのHTMLタグが含まれるコードになるので、可読性は低くなるでしょう。

では、テーマに"inc"ディレクトリを用意して、インポートする形式にしたらどうでしょうか。

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
  <head>
  <!-- 省略 -->
  </head>
  <body>
  <?php
    if ( is_front_page() ) {
      get_template_part( "inc/header-front-design" );
    }else {
      get_template_part( "inc/header-sub-design" );
    }
  ?>

だいぶ見通しが良くなりました。get_template_parts()は、今はrequire関数と同様のものと考えていただいて構いません。ただし、ファイルの拡張子（.php）は記述しないので注意してください。

それではテーマのディレクトリ構造はどのようになるでしょうか。header-front-page.phpの場合はmetaタグ内を共通化し、新たにhead-meta.phpを作成するとします。

# header-front.phpを利用する場合
"theme"
 |— "header.php"
 |— "header-front-page.php"
 |— "inc"
     |— "head-meta.php"

# header.php内で分岐した場合
"theme"
 |— "header.php"
 |— "inc"
     |— "header-front-design.php"
     |— "header-sub-design.php"

このようになるでしょう。ファイルの数とディレクトリの数に違いはありません。

ディレクトリは普通、上の階層から順番に開いていくので、前者の場合は、「header.phpとheader-front-page.phpが用意されていて、"inc"ディレクトリがあるな。」という認識をするでしょう。後者の場合は、header.phpを読むか"inc"ディレクトリを開くことによって、ヘッダーのデザインが異なることを認識します。

現在は、ディレクトリ構造がヘッダー要素のみでファイルの中身がどのようになっているのか理解しています。なのでどちらも同様に認識できますが、初めてこのテーマを見たとき、または数年後に見返した際にどのような認識の差が出てくるのかを考えることが重要です。

また、ある固定ページを新規追加することになり、その固定ページは新しくヘッダーを用意する必要があるという場面が訪れたとします。その固定ページは、page-works.phpのようにファイルが作成され、今まで同様にget_header関数でヘッダーを呼び出します。

この時、前者の方式でheader.phpを作成していた場合、get_header( 'works' );と関数を呼び出し、header-works.phpを作成する流れになります。

後者の場合は、まず、header.phpに分岐を追記する必要があります。

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
  <head>
  <!-- 省略 -->
  </head>
  <body>
  <?php
    if ( is_front_page() ) {
      get_template_part( "inc/header-front-design" );
    } elseif {
      get_template_part( "inc/header-sub-design" );
    } else {
      get_template_part( "inc/header-works-design" );
    }
  ?>

"inc"ディレクトリにheader-works-design.phpを作成する流れになります。

このように、header.phpを分けることで、テーマ開発が完了した後のメンテナンスやカスタマイズを考慮された、可読性の高いテーマにできるでしょう。

Google Analyticsを利用する場合

WEBサイトの運用上、訪問者の解析のためにGoogle AnalyticsやGoogle Adsenseを利用する機会が多いと考えられます。これらを利用するためには、headタグ内にコードを記述する必要があります。

WEBサイトの解析をする上で、WordPressの管理者やプレビュー状態のレポートはノイズになるので除外しましょう。

まずは、上記で説明したディレクトリ構造を振り返ってみましょう。"inc"ディレクトリの中にhead-meta.phpがあり、この中にmetaタグを記述します。この時、header.phpは次のようになります。

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
  <head>
    <?php get_template_part( 'inc/head-meta' ); ?>
  </head>
  <body>
    <header class="header">
     ヘッダー中身
    </header>

head-meta.phpの記述例（一部）です。

<meta charset="UTF-8">
<meta name="viewposrt" content="width=device-width, initial-scale=1">
<!-- その他必要なmetaタグなど -->

<?php wp_head(); ?>

head-meta.phpはheader.phpだけでなく、header-front-page.phpやheader-works.phpなど複数のヘッダー用PHPファイルから呼び出されることを想定しています。

では"inc"ディレクトリに、view-visitor.phpを作成します。このPHPファイルにアナリティクスなどの認証のためのコードを記述します。以下はGoogle Tagsの場合のサンプルコードです。

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-ooooooo"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-ooooooo');
</script>

このPHPファイルをhead-meta.phpで呼び出します。この時、ログインされているユーザーの場合は呼び出さないように設定します。

<meta charset="UTF-8">
<meta name="viewposrt" content="width=device-width, initial-scale=1">
<!-- その他必要なmetaタグなど -->

<?php wp_head(); ?>
<?php
  if ( ! is_user_logged_in() ) {
    get_template_part( 'inc/view-visitor.php' );
  }
?>

プレビューやログイン状態での記事閲覧で、アナリティクスへレポートが送られなくなりました。

footer.phpに記述すべきこと

footer.phpもheader.php同様、get_footer関数に引数を指定することで、footer-single.phpのように読み込むPHPファイルを変更することができます。

フッターは一般的にサイトの内部リンクや、コピーライト、SNSのリンク、関係外部リンクなどを含むことが多いでしょう。これらもヘッダー同様、ページで共通部分になるので必ずfooter.phpとしてファイルを用意しておきましょう。

また、SEO対策として、WebPageや検索ボックス、LocalBusinessなどの構造化データを設置する場合もfooter.phpに記述するのが良いと考えられます。

それらを踏まえると、footer.phpは次のようになります。

  <footer class="footer">
    <ul class="site-links">
      <li class="site-link-item">
      <!-- 省略 -->
      </li>
    </ul>
    <p class="copyrights">&copy; <?php echo date('Y'); ?> <a href="<?php echo home_url(); ?>">ZATY</a></p>
  </footer>
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "WebSite",
    "url": "<?php echo home_url(); ?>",
    "potentialAction": {
      "@type": "SearchAction",
      "target": {
        "@type": "EntryPoint",
        "urlTemplate": "<?php echo home_url();?>/archive?zS={search}"
      },
      "query-input": "required name=search"
    }
  }
  </script>

  <?php wp_footer(); ?>
</body>
</html>

ここでは検索ボックスの構造化データを記述してみました。もちろんコードの内容はWEBサイトのデザインなどによって大きく変動しますが、bodyタグ直前のwp_footer関数は忘れずに記述してください。

wp_footer関数は、ヘッダーに記述したwp_head関数同様WordPressが正常に機能するための関数です。この関数の記述を忘れると、ログインしていても管理バーが表示されなくなり、WordPressで読み込んだJavaScriptも正しく読み込まれなくなります。

まとめ

今回はheader.phpとfooter.phpを焦点として、get_header関数やget_footer関数やheader.phpとfooter.phpはどのような記述が最適かを解説しました。

WEBサイトは共通部分をしっかり適切にファイル分離することで、今後のメンテナンス性が大きく変わってきます。ただファイルを分割するのではなく、カスタマイズの可能性や共通して使用するコンポーネントであるかを考慮してファイル分離するのが良いでしょう。

広告

関連記事