⓹ header.php、footer.phpを作ろう【WordPressテーマの自作】

公開日:

ウェブブラウザへページを表示させるには、「これはウェブページですよ」と認識されるためのルールを守ることが必要です。

WordPressで配布されているテーマを使って投稿などを書く限りでは、テーマ側がこれらのルールに則ってページを作ってくれる(HTML化してくれる)ので、意識することはまずありませんが、自作テーマでは、このルールを記述してかなければなりません。

以前に書いた通り、WordPressテーマのファイルには、

  • 全ページ共通のヘッダー(ページ先頭)部分 header.php
  • 全ページ共通のフッター(ページ末尾)部分 footer.php

があります。このページでは、header.php、footer.phpでひとまずウェブページですよ!と認識されるようにコードの記述を追加していきます。

ウェブページですよ!と認識されるためのルールとは

ウェブページはすべてHTMLというプログラム言語をウェブブラウザが読み取り、その仕組みに沿って見た目の出力をしていきます。従ってルールに則っていないとページが表示されなかったり、表示がおかしくなったり、きちんと認識されなかったりします。

基本的に必要なHTMLの構造は、以下のようになります。

<!DOCTYPE html>
<html>
<head>
表示はしないけど、読み込ませる必要のあるもの
</head>
<body>
実際に表示される部分
</body>
<footer>
表示はしないけど、読み込ませる必要のあるもの
</footer>
</html>

何が書かれているかというと・・・

  • HTMLという言語ルールに従って書いてますよ doctype宣言、htmlというタグ
  • 表示しないけどページに読み込ませるものですよ head footer
  • この部分は表示させるものですよ body

という内容を含み、それぞれ開始タグ(<タグ名>)と閉じタグ(</タグ名>)の対になっています。

通常のHTMLで作成するページであれば、全ページにこれらをすべて書く必要があるのですが、WordPressテーマの場合はヘッダーとフッターは共通で、内容(上記でいう「実際に表示される部分」)だけが固定ページ、投稿、一覧などで異なるので、そこから上をheader.phpへ、そこから下をfooter.phpへ書いていきます。

header.phpを実際に作ってみよう

ではページ先頭に全ページ共通で出力する(表示はされない部分と、共通して表示される部分)header.phpを作っていきましょう。

最低限必要なものだけを入れたものが以下のコードになります。テストサイトへインストールした自作テーマの編集(テーマエディタ)からheader.phpを開いてコピーしましょう。

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<!-- 表示されないヘッダー情報ここから -->
<head prefix="og: http://ogp.me/ns#">
<meta charset="<?php bloginfo('charset'); ?>">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<?php wp_head(); ?>
</head>
<!-- 表示されないヘッダー情報ここまで -->
<!-- 表示される部分ここから -->
<body <?php body_class(); ?>>
<!-- ページ先頭に共通で表示される部分ここから -->
<header class="page-header">
<div class="header-inner">
<div class="site-title">
<h1><a href="<?php echo home_url(); ?>"><?php bloginfo( 'name' ); ?></a></h1></div>
<div class="site-description"><span><?php bloginfo( 'description' ); ?></span></div>
</header>
<!-- ページ先頭に共通で表示される部分ここまで -->

上記コードはひとまず自作テーマでウェブページが表示されるようにすることを目的に、最低限の記述のみをしています。いわゆるSEO(検索エンジン最適化)のためのコードについては別のページで詳しく解説します。

SEO関連は抜きにと言いながらいきなり結構複雑なコードに見えるかも知れません。

footer.phpを実際に作ってみよう

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

本ページおよび、制作過程のページは、実際に作成しながら進めています。前後ページへの挿入を行う必要性、内容を忘れないように書き留めていく必要があることから、公開済みの状態で内容を充実させていっていますので、お見苦しい点が多々あるかとは思いますが、ご容赦ください。

サイトへの支援をお願いします

サイトへお越しいただきありがとうございました。
テーマを無料で提供し続けることができるよう、投げ銭によるサイトへの支援、およびSNSによる拡散をお願いします

  •  白黒ハチワレ猫の【モモ】とのんびり暮らしながらフリーランスでサイト制作のお手伝いをしています。
    ブログツールでありながら本格的なウェブサイトに必要な機能を追加できるWordpressの良さを活かした楽しく便利なサイト作りのお手伝いをさせていただいております

QR Code

このページはモバイル端末でもご覧いただけます

左のQRコードを読み取っていただくと、このページのURLが表示され、簡単にアクセスできます。ぜひモバイル端末でもご覧ください。

WordPressのカスタマイズ・不具合対応などご相談ください

Wordpressのカスタマイズ、不具合解消のご相談はすべてココナラのダイレクトメッセージからお受けしております。まずはこちらのバナーからお気軽にお問い合わせください。