Web制作・プログラミング関連のおすすめレビュー記事はこちら

静的サイトをWordPress化する手順④（ファイルの分割）

Web制作

今回は前回までに作ったファイルを分割していきます。

おさらいとして第一回で作ったファイル一覧です。

前回までで作ったファイル構成

サイトの共通部分をまとめる

多くのサイトでは複数ページに渡って共通で出てくる部分があります。（ヘッダーやフッター、サイドバーなど）

WordPressではそのような共通部分を切り分けて専用のインクルードファイルと呼ばれるもので管理します。

✔インクルードファイルとは

インクルードファイルはサイトにおける共通部分を切り分けて管理するためのファイル。

header.php、footer.php、sidebar.phpが代表的。

作成したファイルを<?php get_header(); ?>のように任意の場所で読み込める。

また上記の３種類だけでなく、自分で任意の名前をつけて作成することもできる。

その場合は、〇〇.phpを<?php get_template_part('〇〇') ?>という形で読み込みが可能。

インクルードファイルといっても難しいものではなく、対象の部分をカット＆ペーストするだけで作成できます。

切り分けて管理するメリットは、後から修正があった際にインクルードファイルだけを修正することですべてのページに修正を反映できるという点です。

次のステップで実際に作成してみましょう。

header.phpとfooter.phpの作成

まずheader.phpとfooter.phpというファイルを作成してください。これが先ほど説明したインクルードファイルに当たります。

header.phpの中身はfront-page.phpの<!DOCTYPE html>（コードの一番最初）から</header>（ヘッダーの終了タグ）までをコピーし、貼り付けてください。

footer.phpの中身はfront-page.phpの<footer>（フッターの開始タグ）から</html>（コードの一番最後）までをコピーし、貼り付けてください。

しっかりと移動できたことを確認したらfront-page.phpからコピーした部分は削除しましょう。

移動後は下の（変更後）の様に<main>タグのみ残っている状態になっていればOKです。

front-page.php(変更前)
<!DOCTYPE html> //ここから
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, 
  minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>SAMPLE SITE</title>
  <link href="/css/style.css" rel="stylesheet">
  <?php wp_head(); ?>
</head>
<body>
<header class="header" id="header">
  <div class="header-in">
    <h1 class="header-logo"><a href="./"><img src="<？php echo get_theme_file_uri('img/logo.png'); ?>"></a></h1>
   <nav class="NavMenu">
      <ul>
        <li><a href="./about">ABOUT</a></li>
        <li><a href="./news">NEWS</a></li>
        <li class="header-btn"><a href="./entry">ENTRY</a></li>
      </ul>
    </nav>
  </div>
</header> //ここまでを切り取ってheader.phpに移動
<main>
  <section class="top">
    <h2>サンプルタイトル</h2>
    <p>サンプルテキスト。サンプルテキスト。</p>
  </section>
  <section class="second">
    <h2>サンプルタイトル２</h2>
    <p>サンプルテキスト２。サンプルテキスト２。</p>
  </section>
  <section class="contact">
    <h2>お問い合わせフォーム</h2>
    <p>下記フォームよりお問い合わせください。</p>
    <input class="name">
    <input class="e-mail">
    <input class="address">
  </section>
</main>
<footer class="footer" id="footer"> //ここから
  <div class="inner">
    <p>Copyright © SAMPLE SITE All Rights Reserved.</p>
  </div>
</footer>
<?php wp_footer(); ?>
</body>
</html>　//ここまでを切り取ってfooter.phpに移動
front-page.php(変更後)
<main> <section class="top">
    <h2>サンプルタイトル</h2>
    <p>サンプルテキスト。サンプルテキスト。</p>
  </section>
  <section class="second">
    <h2>サンプルタイトル２</h2>
    <p>サンプルテキスト２。サンプルテキスト２。</p>
  </section>
  <section class="contact">
    <h2>お問い合わせフォーム</h2>
    <p>下記フォームよりお問い合わせください。</p>
    <input class="name">
    <input class="e-mail">
    <input class="address">
  </section>
</main>

header.phpとfooter.phpの読み込み

次に切り取った部分にheader.phpとfooter.phpのファイルを読み込んでいきます。

読み込みに使うのは

<?php get_header( ); ?>と<?php get_footer( ); ?>という関数です。

これはそれぞれheader.phpを読み込む、footer.phpを読み込むための関数でこれを記述した位置に、ヘッダーをフッターを表示できます。

front-page.phpの先ほど切り取った部分にこの関数を記述していきます。

下の様になっていればOKです。

front-page.php
<?php get_header(); ?>
<main>
  <section class="top">
    <h2>サンプルタイトル</h2>
    <p>サンプルテキスト。サンプルテキスト。</p>
  </section>
  <section class="second">
    <h2>サンプルタイトル２</h2>
    <p>サンプルテキスト２。サンプルテキスト２。</p>
  </section>
  <section class="contact">
    <h2>お問い合わせフォーム</h2>
    <p>下記フォームよりお問い合わせください。</p>
    <input class="name">
    <input class="e-mail">
    <input class="address">
  </section>
</main>
<?php get_footer(); ?>

次はヘッダー、フッター、サイドバー以外の共通部分がある場合を見ていきましょう。

その他にも共通部分がある場合

サイトの形式によってはヘッダー、フッター、サイドバー以外にも複数ページに共通して使われる部分が出てくるかと思います。

そんなときはheader.phpやfooter.phpを作ったように自分で独自のインクルードファイルを作成できます。

今回は<section class="contact">が複数ページでの共通部分だと想定してみましょう。

まずは任意の名前でファイルを作成しましょう。中身が想定しやすい名前がいいですね。

今回はcontact.phpとしておきます。ファイルを作成したら先ほどと同じ様にまとめたい部分を

カット＆ペーストで移動します。

読み込む場合は<?php get_template_part() ?>の引数にファイル名を.phpを省略して指定し、読み込みます。

以下の様になっていればOKです。

contact.php
 <section class="contact">
    <h2>お問い合わせフォーム</h2>
    <p>下記フォームよりお問い合わせください。</p>
    <input class="name">
    <input class="e-mail">
    <input class="address">
  </section>
front-page.php
<?php get_header(); ?>
<main>
  <section class="top">
    <h2>サンプルタイトル</h2>
    <p>サンプルテキスト。サンプルテキスト。</p>
  </section>
  <section class="second">
    <h2>サンプルタイトル２</h2>
    <p>サンプルテキスト２。サンプルテキスト２。</p>
  </section>
<?php get_template_part('contact') ?>
</main>
<?php get_footer(); ?>

ここまでの作業で、トップページは表示される様になりました。

トップページ以外でもインクルードファイルを読み込む

ここまではトップページ(front-page.php)を編集してきました。

他のページでも共通部分を切り分けて管理できるように、同じような作業をしていきます。

他のページのテンプレートファイルでも<?php get_header(); ?>, <?php get_footer(); ?>などをつかってインクルードファイルを読み込んでください。

今回はここまでとします。続きは次回以降やっていきましょう。

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