【WordPress】テンプレートパーツを作成について解説

シュウ

今回は【WordPress】テンプレートパーツを作成について解説!!
の解説になります！

こんな方に読んでほしい

WordPressを学び始めた方へ
WordPressのテンプレートパーツについて解説していきます。
今回はWordPressの「テンプレートパーツの作成・出力」について解説しております。

[記事の内容]

テンプレートについて

WordPressにはテンプレートパーツ用意されております。
主に、共通する箇所に使用する場合が多いです。
最初から用意されているテンプレートパーツは以下のようになります。

get_header()	現在のテーマファイルからヘッダーファイルを読み込みます。
get_footer()	現在のテーマファイルからフッターファイルを読み込みます。
get_sidebar()	現在のテーマファイルからサイドバーファイルを読み込みます。

// header読み込み
<?php get_header(); ?>

// sidebar読み込み
<?php get_sidebar(); ?>

// footer読み込み
<?php get_footer(); ?>

上記のテンプレートパーツはよく使いますが、
実際のホームページでは多くの部分で共通の箇所が多くあります。
任意のテンプレートパーツを作成・出力したい場合は以下のようになります。

get_template_partについて

今回は、get_template_partを使い任意のテンプレートパーツを準備します。
ページA、B、Cが存在し、コンテンツ部分に共通の箇所がある場合によく使用されます。
以下のようなイメージになります。

例:実績ページA、B、Cが存在し「画像、タイトル、テキスト」を出力させたい場合は、WordPressのループを使用し「画像、タイトル、テキスト」の出力コードを3ページに指定しなければなりません。

3ページにコードを指定するのは大変です。
そのような時にテンプレート用の.phpファイルとget_template_partを使用します。
以下のように「phpファイル」準備します。

〇〇-〇〇.php	現在のテーマファイルから任意のテンプレートパーツを読み込みます。例：tpl-works.php　※実績のテンプレートパーツを読み込む例：tpl-gallery.php　※ギャラリーのテンプレートパーツを読み込む〇〇-〇〇.phpの〇〇の箇所は分かりやすい名前にしましょう。

下記のように、tpl-works.phpの中身は以下のようになります。
メインループで、「画像、タイトル、テキスト」など出力させています。

<?php if(have_posts()): ?>
    <?php while(have_posts()): the_post(); ?>
        <div class="day"><?php the_time('Y.n.j'); ?></div>
		<div class="thumbnail"><?php the_post_thumbnail(); ?></div>
		<h2><a href="<?php the_permalink(); ?>"><?php the_title() ?></a></h2>
    <?php endwhile; ?>
<?php else: ?>
	<p>現在、実績はありません。</p>
<?php endif; ?>

get_template_part関数の仕様について

次にget_template_partを指定します。
get_template_part関数は以下のようになります。

( $slug, $name );	$slug テーマスラッグ名 $name 特定テンプレート名になります。

上記のように「,（カンマ）」で区切って、記述します。
任意の場所に以下のコードを記述します。

// 例:実績のテンプレートパーツを読み込む
<?php get_template_part('tpl','works'); ?>

// 例:ギャラリーのテンプレートパーツを読み込む
<?php get_template_part('tpl','gallery'); ?>

ポイント！
「ページA、B、C」の任意の場所にget_template_part(tpl','works')を指定し、
tpl-works.phpの中身を読み込むイメージなります。

<?php
/*
Template Name: 実績
*/
?>
<?php get_header();?>

	<div id="contents">
		<main>
			<div class="works-area">
				<!--テンプレートパーツを読み込む　下記ファイルの中身を読み込む-->
				<?php get_template_part('tpl','works'); ?>
			</div>
		</main>	
	</div><!--contents END-->

<?php get_footer();?>

<?php if(have_posts()): ?>
    <?php while(have_posts()): the_post(); ?>
        <div class="day"><?php the_time('Y.n.j'); ?></div>
		<div class="thumbnail"><?php the_post_thumbnail(); ?></div>
		<h2><a href="<?php the_permalink(); ?>"><?php the_title() ?></a></h2>
    <?php endwhile; ?>
<?php else: ?>
	<p>現在、実績はありません。</p>
<?php endif; ?>