目次
WordPressでサイトをカスタマイズする際、テンプレートタグは非常に重要な役割を果たします。
この記事では、PHPを用いたWordPress開発で頻繁に使用されるテンプレートタグを詳しく解説し、具体的な使用例を紹介します。
これらのタグを理解し活用することで、効率的にサイトの機能を拡張し、SEO対策にも繋げることができます。
リンク出力
記事のパーマリンク（固定リンク）を取得し、リンクとして出力する際に使用します。
<?php the_permalink(); ?>使用例:
<a href="<?php the_permalink(); ?>">詳細を読む</a>サムネイル関連タグ
サムネイルURLの出力
投稿のサムネイル画像のURLを取得し、<img>タグに組み込む方法です。
<img src="<?php the_post_thumbnail_url(); ?>" alt="<?php the_title(); ?>" width="実寸を入れる" height="実寸を入れる" loading="lazy">サムネイルサイズ指定 imgタグ出力
指定したサイズのサムネイルを<img>タグとして直接出力します。
<div class="post-thumbnail">
<?php the_post_thumbnail('medium'); ?>
</div>サムネイルがないときに代替画像を出力
/path/to/nothumb.jpgは実際のパスに置き換えてください
<?php if (has_post_thumbnail()) : ?>
<img src="<?php the_post_thumbnail_url(); ?>" alt="<?php the_title(); ?>" width="実寸を入れる" height="実寸を入れる" loading="lazy">
<?php else : ?>
<img src="/path/to/nothumb.jpg" alt="<?php the_title(); ?>" width="実寸を入れる" height="実寸を入れる" loading="lazy" class="imgauto">
<?php endif; ?>タイトル関連タグ
タイトルの出力
投稿のタイトルを表示する際に使用します。
<?php the_title(); ?>使用例:
<h2 class="post-title"><?php the_title(); ?></h2>タイトルの文字数制限
タイトルの文字数制限はphpで制御する方法もありますが、ここではcssの方法を紹介します。
.post-title{
overflow: hidden;
-webkit-box-orient: vertical;
display: -webkit-box;
}
@media screen and (min-width: 768px){
.post-title{
-webkit-line-clamp: 3;
}
}
@media screen and (max-width: 767px){
.post-title{
-webkit-line-clamp: 2;
}
}3行目の -webkit-line-clamp: 2; で行数を制御します。cssのほうが柔軟にレスポンシブデザインに対応できるのでおすすめです。
投稿情報の出力
投稿日付の出力
投稿された日付を指定したフォーマットで表示します。
<?php the_time('Y.m.d'); ?>使用例:
<time class="post-date" datetime="<?php the_time('Y-m-d'); ?>" itemprop="datePublished"><?php the_time('Y.m.d'); ?></time>更新日付の出力
更新された日付を指定したフォーマットで表示します。
<?php the_modified_date('Y.m.d') ?>使用例:
<?php if(get_the_time('Y-m-d') != get_the_modified_date('Y-m-d')):?>
<time datetime="<?php the_modified_date('Y.m.d') ?>" itemprop="datemodified"><?php the_modified_date('Y.m.d') ?></time>
<?php endif;?>if文の条件分岐を足してあげることによって更新されたときのみに出力することができる
カテゴリーの出力
投稿が属するカテゴリーをリンク付きで表示します。
<?php the_category(' / '); ?>使用例:
<p class="post-categories">カテゴリー: <?php the_category(' / '); ?></p>タグの出力
投稿に設定されたタグをリンク付きで表示します。
<?php the_tags('', ', '); ?><ul>での出力方法
<?php
$term_tags = get_the_tags();
?>
<?php if (!empty($term_tags) && is_array($term_tags)): ?>
<ul class="post-tags">
<?php foreach ($term_tags as $term_tag): ?>
<?php
$term_tag_link = get_term_link($term_tag->slug, $term_tag->taxonomy);
$term_tag_name = $term_tag->name;
?>
<li><a href="<?php echo $term_tag_link; ?>"><?php echo $term_tag_name; ?></a></li>
<?php endforeach; ?>
</ul>
<?php endif; ?>使用例:
<p class="post-tags">タグ: <?php the_tags('', ', '); ?></p>タクソノミーの出力
投稿が所属するタクソノミーをul形式で出力
<?php
$term_cats = get_the_terms($post->ID, 'タクソノミーカテゴリー');
?>
<?php if (!empty($term_cats) && is_array($term_cats)): ?>
<ul class="taxonomy__cats">
<?php foreach ($term_cats as $term_cat): ?>
<?php
$term_cat_link = get_term_link($term_cat->slug, $term_cat->taxonomy);
$term_cat_name = $term_cat->name;
?>
<li><a href="<?php echo $term_cat_link; ?>"><?php echo $term_cat_name; ?></a></li>
<?php endforeach; ?>
</ul>
<?php endif; ?>
<?php
$term_tags = get_the_terms($post->ID, 'タクソノミータグ');
?>
<?php if (!empty($term_tags) && is_array($term_tags)): ?>
<ul class="taxonomy__tags">
<?php foreach ($term_tags as $term_tag): ?>
<?php
$term_tag_link = get_term_link($term_tag->slug, $term_tag->taxonomy);
$term_tag_name = $term_tag->name;
?>
<li><a href="<?php echo $term_tag_link; ?>"><?php echo $term_tag_name; ?></a></li>
<?php endforeach; ?>
</ul>
<?php endif; ?>抜粋の出力
投稿の抜粋の表示します
<?php the_excerpt(); ?>投稿の抜粋を指定した文字数で表示します。
<?php echo mb_substr(get_the_excerpt(), 0, 250); ?>使用例:
<div class="post-excerpt">
<?php echo mb_substr(get_the_excerpt(), 0, 250); ?>...
</div>ポイント:
mb_substrを使用してマルチバイト文字を正確に処理。- 抜粋の長さを調整し、読みやすさを向上。
記事のループ出力
下記にて詳細をまとめてありますのでご確認ください
タクソノミーの出力
デフォルトの説明文
<?php
$term = get_queried_object();
?>
<?php if ( ! empty( $term->description ) ) : ?>
<?php echo $term->description; ?>
<?php endif; ?>まとめ
WordPress/PHPのテンプレートタグを効果的に活用することで、サイトのカスタマイズや機能拡張が容易になります。
本記事で紹介したテンプレートタグを参考に、自身のサイトに適用し、ユーザーエクスペリエンスの向上やSEO対策に役立ててください。また、テンプレートタグの理解を深めることで、より高度なカスタマイズや開発が可能となります。
