前回まででTOPページがほぼ完成したので、今回からは下層ページを作って行こうと思うのですが、その前にファイルの共通化について解説したいと思います。
サイト内では、HeaderやFooter等、複数のページで使われるほぼ同じパーツがあります。それらのパーツをいちいち全てのページで記述していると、冗長になってしまいます。また、全てのページのHeaderの仕様を変更したいみたいな時に、全てのページのファイルを変更することに迫られるので非効率です。
そこで有効なのがファイルの共通化です。phpやWordPressの場合だと、複数のページで使い回すパーツは、別ファイルで保存しておいて、使う時だけそのファイルを呼び出すということが可能になります。それでは、一度やってみましょう。
まず、テーマファイルの直下にheader.phpというファイルを追加します。
次に、front-page.php内の、以下の<!DOCTYPE html>から</header>までの部分をコピーして、
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- 省略 -->
</head>
<body>
<header>
<!-- 省略 -->
</header>下のようにheader.phpファイル内に貼り付けましょう。
そして以下の、
<?php wp_head(); ?> というコードを、headerファイル内のheadの閉じタグの直前に追加して、
のようにしてください。このコードは入れなくても正常に動作することが多いですが、入れておいた方が後々、WordPressの機能を使おうとする時に便利なので、入れておきましょう。
この状態だとまだ、トップページからheader.phpファイルが呼び出されていません。なので、front-page.phpファイル内のheaderの閉じタグまでを全て消して、
<?php get_header(); ?>というコードを追加し、以下のようにします。
ブラウザで確認してもトップページの見た目は変わりませんが、front-page.phpファイルからheader.phpファイルが呼び出されて、表示されていると思います。
次にこれとほとんど同じ作業をfooterでも行います。footer.phpファイルを作成し、そこにfront-page.phpファイル内の、footerタグ以下を全てコピペします。そして、bodyの閉じタグの直前に、
<?php wp_footer(); ?>を入れて、以下のようにします。
そして、front-page.phpファイル内のfooterタグがあった所に、
<?php get_footer(); ?>
を追加して、以下のようにします。
するとfooterもheaderと同じように共通化されたと思います。
すでに気になっている人もいるかもしれませんが、footerファイルを切り分けた後から、下のようにサイトの上部分にツールバーが出るようになってしまったと思います。
次回はこのツールバーを消すのと、header,footer以外のファイルの共通化を行なっていきます。
