wordpress

カスタム分類が同じ記事を関連記事としてサムネイル付きで表示する

カテゴリーではある程度、記事の分類ができるけれど、カテゴリー一覧に出したくないカテゴリーもある。その都度、カテゴリーIDで表示・非表示をするのは面倒なもの。

投稿タグも記事を分けることができるけれど、wordpressはMovabletypeのようにシークレットタグが使えないので、表に見えない記事の分類には向かない。
投稿タグを外に出さないのであれば良いのだけれど、それはそれで使っていて、
特に表に出さないけれど記事を分類したいときは、やはり「カスタム分類」。

そこで、通常のカテゴリーとは別にカスタム分類が使えるのだけれど、カスタム分類が同じ記事を一覧として出したい場合がある。

通常、サイドバーなどにメニューとして出すことが多いようだけれど、記事の下に「関連のある記事」としてサムネイル付きで出すとする。

関連記事としてプラグインで有名なのが「Yet Another Related Post Plugin」なのだけれど、
カテゴリーの中で出したい・出したくないというのもあるし、自分としては意図しない記事も出てしまったりして、プラグイン任せにできない場合も。

良い例としてはこちらのサイト。
http://www.try180.com/

関連記事を出す

カスタム分類が同じ記事をサムネイル付きで出す

カテゴリーは記事のジャンル(例では動画のジャンル)、
投稿タグはその記事に関連したお悩みキーワード、
カスタム分類は動画の講師名 で分類している。
そして、講師のプロフィール記事(カテゴリー/講師 カスタム分類/講師名)の下に
“その人が講師を務めた動画記事の一覧”を関連記事として出している。

通常、「Yet Another Related Post Plugin」では、“この人の動画”ページだけではなく、ジャンルが似たようなページが出てきたり、全く異なる案内ページが出てしまったりするのでNG。

さて、前振りが長くなってきましたが、実装方法。
1.カスタム分類を作る。
通常は、「外観」→「テーマ編集」→「functions.php」に

<?php
register_taxonomy(
‘カスタム分類の名前英字’,
‘post’,
array(
‘label’ => ‘分類の名前’,
‘hierarchical’ => true,
)
);
?>

と記載。
すると、「投稿」→に上で設定した分類の名前が表示されるので、表示。
通常のカテゴリーを作るのと同じ要領でカスタム分類のカテゴリーを作っていく。

 

投稿する際に、「表示オプション」から“分類の名前”をチェックすると、投稿画面にカスタム分類のカテゴリーが表示されるので、通常のカテゴリー選択と同じようにカスタム分類のカテゴリーにチェックしていく。

手書きで「functions.php」に書かなくても、プラグインで簡単に管理できるものもある。
ちなみにこちら。Custom Post Type UI
ただ、英語だし、慣れている人はやっぱり「functions.php」に書いた方がテンプレートとして流用できるからいいかな、と。

さて、ここからが本格実装。

「関連の記事」として出したいページ、大体は単一記事になるかと思いますが、(使っているテンプレートによって異なる)、single.phpの「関連のある記事一覧」を出したい箇所に以下を追加。

<?php
$term = array_shift(get_the_terms($post->ID,’カスタム分類の名前英字’));
?>
<?php $tax_posts = get_posts(‘taxonomy=カスタム分類の名前英字&term=’.esc_html($term->slug)); if($tax_posts): ?>
<h3><?php echo $term->name; ?>が講師の動画一覧</h3>
<div class=”kanren”>
<?php foreach($tax_posts as $tax_post): ?>
<?php if ($post->ID != $tax_post->ID): ?>
<dl>
<dt><a href=”<?php echo get_permalink($tax_post->ID); ?>”><?php echo get_the_post_thumbnail($tax_post->ID,’thumbnail’); ?></a></dt>
<dd><a href=”<?php echo get_permalink($tax_post->ID); ?>”><?php echo esc_html($tax_post->post_title); ?></a></dd><div class=”more”><a href=”<?php echo get_permalink($tax_post->ID); ?>”>この記事を見る</a></div></dl>
<?php else: ?>
<?php endif; ?>
<?php endforeach; ?>
</div>
<?php endif; ?>

上の例では、クラスで“kanren”をくくって、dl、dtクラスでサムネイルの横に記事名が並ぶようにスタイルシートを設定。

 

「この記事を見る」で記事ページに飛ばすようにしている。
「この記事を見る」はクラス“more”でボタンのように成形、右に表示されるようにしている。

こうすることで、スタイルシートで文字の色やサムネイルの大きさも変えられるし便利!

-wordpress
-,

© 2020 wordpressやってみた