はじめに
こちらの記事の続きで書いてます。
ファイル構成
ヘッダーやフッター、サイドバーなどの共通のパーツを作って、ページ構成ファイルに読み込ませます。
MyTheme/
├ template-parts/ ※共通パーツ保存先
| └ common_parts.php ※共通パーツ
├ header.php ※基本共通パーツ
├ footer.php ※基本共通パーツ
├ front-page.php
├ index.php
└ style.css
基本共通パーツ
WordPressデフォルトで決められた命名規則のファイルです。
header.php、footer.php、sidebar.php
これらのファイルは、テーマディレクトリの直下に保存すると使えるようになります。
これらのファイルは、wordpress関数で呼び出すことができます。
基本共通パーツ以外
基本共通パーツ以外のファイルは、共通パーツ保存用のディレクトリを作って、そこに保存していくのが良いです。
今回は、template-partsというディレクトリを作って、そこに保存します。
共通パーツ化させる
今回は、front-page.phpを共通パーツとなるheader.phpとfooter.phpに分けてみます。
ヘッダー部分とフッター部分を分けてみます。
<!-- ↓↓↓ここからheader.php↓↓↓ -->
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MyHomePage</title>
</head>
<body>
<!-- ↑↑↑ここまでheader.php↑↑↑ -->
<!-- ↓↓↓ここからfront-page.php↓↓↓ -->
<h1>MyHomePage</h1>
<p>This is my page.</p>
<!-- ↑↑↑ここまでfront-page.php↑↑↑ -->
<!-- ↓↓↓ここからfooter.php↓↓↓ -->
</body>
</html>
<!-- ↑↑↑ここまでfooter.php↑↑↑ -->
基本共通パーツ化
以下のとおりにパーツ化させます。
header.php
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MyHomePage</title>
</head>
<body>
footer.php
</body>
</html>
基本共通パーツを呼び出す
header.phpとfooter.phpを呼び出します。
get_header()やget_footer()というWordPress関数で呼び出すことができます。
front-page.php
<?php get_header(); ?>
<h1>FRONT PAGE</h1>
<p>This is front page.</p>
<?php get_footer(); ?>
共通パーツを呼び出す
以下のコードで呼び出すことができます。
<?php include("template-parts/common-parts.php"); ?>
common-parts.phpは相対パスで呼び出します。
front-page.php
<?php get_header(); ?>
<?php include("template-parts/common-parts.php"); ?>
<h1>FRONT PAGE</h1>
<p>This is front page.</p>
<?php get_footer(); ?>