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

- お知らせ
- NEW 2023.11.23 【Photoshop】水彩風のテクスチャー作成ついて解説
- お知らせ
- 2023.11.16 【Photoshop】写真の一部を消す加工ついて解説
- お知らせ
- 2023.11.09 【Photoshop】鉛筆風フォントの作成について解説
こんな方に読んでほしい
[記事の内容]
WordPressにはテンプレートパーツ用意されております。
主に、共通する箇所に使用する場合が多いです。
最初から用意されているテンプレートパーツは以下のようになります。
get_header() | 現在のテーマファイルからヘッダーファイルを読み込みます。 |
---|---|
get_footer() | 現在のテーマファイルからフッターファイルを読み込みます。 |
get_sidebar() | 現在のテーマファイルからサイドバーファイルを読み込みます。 |
// header読み込み
<?php get_header(); ?>
// sidebar読み込み
<?php get_sidebar(); ?>
// footer読み込み
<?php get_footer(); ?>
上記のテンプレートパーツはよく使いますが、
実際のホームページでは多くの部分で共通の箇所が多くあります。
任意のテンプレートパーツを作成・出力したい場合は以下のようになります。
今回は、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関数は以下のようになります。
( $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; ?>
今回はこれで以上です。
get_template_part
を使用します。$slug
テーマスラッグ名になります。$name
特定テンプレート名になります。2023.11.23
2023.11.16
2023.11.09
2023.10.26
![]() |
【Amazon.co.jp 限定】1冊ですべて身につくHTML & CSSとWebデザイン入門講座 (DL特典: CSS Flexbox チートシート) 新品価格 |
2023.11.23
2023.11.16
2023.11.09
2023.10.26
2023.10.12
2023.09.28
2023.06.15
2022.06.30
2020.03.22
2020.03.06
© 2023 shu-naka-blog