SHU BLOG

BLOG NEWS ブログ

TITLE

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

SHU[シュウ]

1991年生まれ九州の宮崎県育ち
高校卒業後、愛知県で自動車関係の
お仕事に5年間勤め、WEB業界に
転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画
基本インドアです!笑

シュウ
シュウ
今回は【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について

今回は、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; ?>

まとめ

今回はこれで以上です。

POINT
  • WordPressテンプレートパーツを作成・読み込みについて解説しました。
  • get_template_partを使用します。
  • テンプレートファイルを用意する際には、分かりやすい名前にしましょう。
  • $slug テーマスラッグ名になります。
  • $name 特定テンプレート名になります。
  • 「,(カンマ)」で区切って、記述します。
スポンサーリンク

SHU

1991年生まれ九州の宮崎県育ち高校卒業後、愛知県で自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画基本インドアです!笑
つくる、しあわせをテーマとして主にWEBに関する様々な情報を発信しています。

最新記事

関連記事

オススメ記事

月別アーカイブ

HP

お助けコネクト

神奈川県を中心に不用品回収・粗大ゴミ回収・遺品整理・ゴミ屋敷片付け・家具の移動 など
なんでもやります!!お気軽にご相談ください。詳細はコチラから

page_top