WordPressのテーマを作っていく場合、1枚で完結するページ構成ではない限りは共通パーツを使用する事で効率的な運用をする事ができます。
例えばヘッダーに使用しているロゴなどがあった場合にロゴの変更を希望されたらhtmlの場合は全ページを修正しないといけないですが、WordPressの場合は共通パーツであるheader.phpを一箇所変更することで全ページに適応する事ができます。WordPressでサイトを作る時に共通パーツでの管理はお役立ちになる事が多いのでぜひ使いこなして欲しいです。
前回のindex.phpを参考に共通パーツを使えるように変更していきます。
前回のページは以下になります。
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>タイトル</title>
<?php wp_head(); ?>
</head>
<body>
<h1>サイトのタイトル</h1>
<!-- 投稿記事反映 -->
<div class="blog_contents">
<?php if(have_posts()): ?>
<ul>
<?php while(have_posts()): the_post(); ?>
<li class="blog_title"><a href="記事へのリンク"></a>投稿記事のタイトル１</li>
<?php endwhile; ?>
</ul>
<?php else: ?>
<p>投稿はありません</p>
<?php endif; ?>
</div>
<?php wp_footer(); ?>
</body>
</html>ひとまずヘッダーとフッターを共通にしていきたいと思います。
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>タイトル</title>
<?php wp_head(); ?>
</head>
<body>
<h1>サイトのタイトル</h1>header.phpというファイルを作ってここまでを移動させます。
<?php wp_footer(); ?>
</body>
</html>footer.phpというファイルを作ってここまでを移動させます。
index.phpに残ったのは
<!-- 投稿記事反映 -->
<div class="blog_contents">
<?php if(have_posts()): ?>
<ul>
<?php while(have_posts()): the_post(); ?>
<li class="blog_title"><?php the_title(); ?></li>
<?php endwhile; ?>
</ul>
<?php else: ?>
<p>投稿はありません</p>
<?php endif; ?>
</div>この内容になります。
header.phpに記述した内容があった部分とfooter.phpに記述した内容があった部分にそれぞれ読み込むためのWPタグを記述します。
<?php get_header(); ?>
<!-- 投稿記事反映 -->
<div class="blog_contents">
<ul>
<?php if(have_posts()): ?>
<?php while(have_posts()): the_post(); ?>
<li class="blog_title"><a href="記事へのリンク"></a>投稿記事のタイトル１</li>
<?php endwhile; ?>
<?php else: ?>
<li>投稿はありません</li>
<?php endif; ?>
</ul>
</div>
<?php get_footer(); ?>するとindex.phpはこのような状態になります。
このように読み込みする時にはインクルード用のWordPressのタグを使用する事で簡単に読み込みできるように修正できます。
共通パーツにする事で</head>の直前に記述が必要な<?php wp_head(); ?>や</body>の直前に記述が必要な<?php wp_footer(); ?>の記述漏れも防ぐ事ができるので簡単なページでも共通で使うものはパーツ化すると便利になりますよ。
インクルードタグは他にも<?php get_sidebar(); ?>などが用意されています。
ナビゲーション用にオリジナルでパーツを用意する事もできるのでぜひ活用してください。
<?php get_header(); ?>
// header.phpを読み込む
<?php get_sidebar(); ?>
// sidebar.phpを読み込む
<?php get_footer(); ?>
// footer.phpを読み込む
<?php comments_template(); ?>
// comments.phpを読み込む
<?php get_search_form(); ?>
// 検索フォームを読み込む
<?php get_template_part('navigation'); ?>
// テンプレートパーツを読み込む（ファイル名がnavigation.phpの場合）
<?php get_template_part('parts/news'); ?>
// テーマフォルダ中のテンプレートパーツを読み込む（フォルダ名がparts、ファイル名がnews.phpの場合）
<?php include( TEMPLATEPATH . '/navigation.php' ); ?>
// その他のファイルを読み込む
// ※テンプレートパーツでの読み込みと同じように使えるが子テーマがある場合は親テーマのみから読み込む
// 'header-2.php' を読み込ませる
<?php get_header('2'); ?>
// 'sidebar-2.php' を読み込ませる
<?php get_sidebar('2'); ?>いくつか使えそうなものをおいておくので参考にどうぞ。
