WordPressでは、カスタム投稿タイプを活用することで、サイトの機能性とユーザーエンゲージメントを大きく向上させることが可能です。この記事では、WordPress開発者、デザイナー、そして学習者の皆さんに向けて、カスタム投稿タイプを使用して関連記事を表示する方法を紹介します。
はじめに
WordPressは、その柔軟性とカスタマイズ性で知られる世界最大のコンテンツ管理システムです。この記事では、WordPressのカスタム投稿タイプを使用して関連記事を表示する方法に焦点を当て、そのプロセスを詳細に解説します。
WordPressとカスタム投稿タイプの基本
WordPressは、ブログ投稿やウェブページ以外にも、さまざまな種類のコンテンツを管理するための「カスタム投稿タイプ」機能を提供します。これにより、ニュース記事、製品情報、レビューなど、特定のニーズに合わせたコンテンツタイプを作成できます。カスタム投稿タイプは、標準の投稿とページとは異なる特性を持ち、サイトの構造とコンテンツの管理をより効率的にします。
本記事の目的と対象読者
WordPressの開発者、デザイナー、および学習者
ソースコードの紹介
このセクションでは、WordPressのカスタム投稿タイプを使用して関連記事を表示するためのソースコードを紹介します。このコードは、サイトの特定のセクションで関連する記事や情報を動的に表示するのに役立ちます。
ソースコードの概要
提供するソースコードは、WordPressの標準的な機能とカスタム投稿タイプを利用して、特定のカテゴリーやタグに基づいて関連記事を表示します。これには、カスタムクエリの作成と、結果の表示方法に関するコードが含まれます。このコードは、WordPressテンプレートファイルに組み込むことで、カスタム投稿タイプに基づいた関連記事の表示を実現します。
必要なツールと事前準備
以下のソースコードを実装する前に、下記事前準備をしておく必要があります。これらの準備が整ったら、以下で紹介するソースコードをテーマファイルのsingle.phpやstyle.cssなどの適切なファイルに追加します。
functions.phpや「Custom Post Type UI」などのプラグインでカスタム投稿タイプやタクソノミーを設定する
管理画面からカスタム投稿タイプのカテゴリーや記事を作成する
ソースコードの紹介と解説
このセクションでは、WordPressのカスタム投稿タイプを使用して関連記事を表示するためのソースコードの詳細な解説を行います。このコードは、ウェブサイトの特定のセクションで関連する記事や情報を効果的に表示するために設計されています。
ソースコード例の紹介
PHPソースコード
PR
<?php
$post_type = get_post_type();
$tax = get_object_taxonomies($post_type);
$term_ids = array();
if(isset($tax[0])) {
$terms = get_the_terms(get_the_ID(), $tax[0]);
if($terms) {
foreach ($terms as $term) {
$term_ids[] = $term->term_id;
}
}
}
if(!empty($term_ids)) {
$args = array(
'post_type' => $post_type,
'tax_query' => array(
array(
'taxonomy' => $tax[0],
'field' => 'term_id',
'terms' => $term_ids,
)
),
'posts_per_page' => 3,
'post__not_in' => array(get_the_ID()),
);
$the_query = new WP_Query($args);
if($the_query->have_posts()): ?>
<div class="article__list">
<?php while($the_query->have_posts()) :$the_query->the_post();?>
<article class="article__item">
<a href="">
<div class="article__img">
<img src="<?php get_the_post_thumbnail_url(); ?>" alt="<?php the_title(); ?>">
</div>
<div class="article__content">
<time datetime="<?php the_time('Y-m-d'); ?>"><?php the_time('Y.m.d'); ?></time>
<p class="article__ttl"><?php the_title(); ?></p>
<div class="article-readmore">
<span>記事を読む</span>
<span class="arrow-right icon-circle"></span>
</div>
</div>
</a>
</article>
<?php endwhile; ?>
</div>
<?php endif;
wp_reset_postdata();
}
?>CSSソースコード
.article__list {
display: flex;
flex-wrap: wrap;
column-gap: 4%;
row-gap: 24px;
}
.article__item {
width: 48%;
border-radius: 10px;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.12);
transition: all 0.3s ease-in-out;
cursor: pointer;
}
.article__item:hover {
box-shadow: 0 0 15px rgba(0, 0, 0, 0.24);
transform: translateY(-3px);
}
.article__img {
position: relative;
}
.article__img::before {
content: "";
display: block;
padding-top: 75%;
}
.article__img img {
width: 100%;
height: auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
.article__content {
position: relative;
font-size: 14px;
padding: 15px;
background-color: #fff;
}
.article-readmore {
position: relative;
color: #fff;
background-color: #333;
font-size: 14px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 20px;
line-height: 40px;
}
.icon-circle {
display: inline-block;
width: 25px;
height: 25px;
position: absolute;
top: 50%;
right: 0;
transform: translate(-50%, -50%);
border-radius: 50%;
background-color: #fff;
}
.arrow-right::before {
content: "";
width: 10px;
height: 10px;
position: absolute;
top: 50%;
right: 6px;
border-top: 2px solid #191919;
border-right: 2px solid #191919;
transform: translate(0, -50%) rotate(45deg);
}
.arrow-right::after {
content: "";
width: 15px;
height: 2px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #191919;
}ソースコードの解説
表示されている記事の投稿タイプの取得
$post_type = get_post_type();表示されている記事のページの投稿タイプを取得します。
表示されている記事の投稿タイプのタクソノミーを取得
$tax = get_object_taxonomies($post_type);表示されている記事の投稿タイプに関連付けられたタクソノミーを取得します。
表示されている記事の投稿タイプのタームidを格納する変数を定義
$term_ids = array();表示されている記事の投稿タイプのタームidを格納する変数を定義します。
表示されている記事の投稿タイプのタームidを定義した変数に格納する
if(isset($tax[0])) {
$terms = get_the_terms(get_the_ID(), $tax[0]);
if($terms) {
foreach ($terms as $term) {
$term_ids[] = $term->term_id;
}
}
}このソースコードでタクソノミーやタームが存在する場合に、表示されている記事の投稿タイプのタームidが変数に格納されます。
タームidが空ではない場合に関連記事を表示する
if(!empty($term_ids)) { ... }表示させる関連記事の条件を指定する
$args = array(
'post_type' => $post_type,
'tax_query' => array(
array(
'taxonomy' => $tax[0],
'field' => 'term_id',
'terms' => $term_ids,
)
),
'posts_per_page' => 3,
'post__not_in' => array(get_the_ID()),
);
$the_query = new WP_Query($args);表示されている記事のカテゴリーと同じ記事を新しい記事から3件ずつ表示（表示されている投稿は一覧から除外）するという条件になります。
実際のサイトでの表示
このセクションでは、先に紹介したソースコードをWordPressサイトに実装した際の具体的なビジュアルと、それがユーザーエクスペリエンスに与える影響について説明します。この情報は、実際にコードをサイトに適用する際の参考になるでしょう。
ソースコードを適用したサイトのビジュアル
タイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトル
タイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトル
タイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトル
ソースコードを適用した箇所に、関連記事が動的に表示されます。例えば、ブログ記事の下部に関連するコンテンツが表示されることが多いです。関連記事は設定したカスタム投稿タイプやタクソノミーに基づいて自動的に生成されます。ビジュアルは、cssを変更すればカスタマイズ可能なので、サイトの全体的な見た目と一貫性を保ちつつ、ユーザーに価値あるコンテンツを提供してください。
ユーザーエクスペリエンスへの影響
関連記事の表示は、ユーザーエクスペリエンスに大きな影響を与えます。ユーザーは、興味のあるトピックに関連する追加の情報に簡単にアクセスできるため、サイト上での滞在時間が延びる可能性があります。また、関連記事へのリンクは、サイト内のナビゲーションを促進し、ユーザーのエンゲージメントを高めます。適切に実装された関連記事の表示は、ユーザーにとって有益であり、サイトのSEO効果を向上させることにも繋がります。
まとめ
本記事では、WordPressのカスタム投稿タイプを利用して関連記事を表示する方法について、ソースコードの紹介から解説、実際のサイトでの表示方法に至るまで詳しく解説しました。WordPress開発者、デザイナー、そして学習者にとって、サイトの機能性とユーザーエクスペリエンスを向上させるための貴重な情報となれば幸いです。
