この記事をシェアする

Similar Postsを使って関連記事を表示させる

設定などなど

テーマ「twenty seventeen」にてSimilar Postsを用いて関連記事を表示させる。

プラグインよりSimilar Postsを検索してインストールする。

 

 

 

 

「設定」⇒「Similar Posts」をクリックして設定画面にいく。

 

 

 

 

Number of posts to show: 表示させる数

初期設定の5のままにしておく。

Match the current post’s category? 関連記事表示の際に同じカテゴリーから選ぶかどうかをYESにしておく。

 

 

 

 

次にOutput template:を以下のように変更する。

<div class="similar_posts">
<a href="{url}">
{php: echo get_the_post_thumbnail( {postid}, array(80,80), array('title' => ' {title}' )); }</a>
<div class="similar_posts_title">
<a href="{url}">{title} </a></div>
<p class="similar_posts_snippet">{snippet:60}…</p>
</div>
<div style="clear: both"></div>

これで、Similar Postsの設定は終了する。

次に、「設定」⇒「メディア」をクリックする。

 

 

 

 

サムネイルのサイズを50×50に変更する。

<h2>関連記事</h2>
<?php similar_posts();

single.phpに上記を追加する。

追加例が以下である。

<?php
   /* Start the Loop */
   while ( have_posts() ) : the_post();
    get_template_part( 'template-parts/post/content', get_post_format() );?>
	<h2 class="mozaiku">関連記事</h2>
	<?php similar_posts();
	// If comments are open or we have at least one comment, load up the comment template.
	if ( comments_open() || get_comments_number() ) :
	 comments_template();
	endif;

	the_post_navigation( array(
			'prev_text' => '<span class="screen-reader-text">' . __( 'Previous Post', 'twentyseventeen' ) . '</span><span aria-hidden="true" class="nav-subtitle">' . __( 'Previous', 'twentyseventeen' ) . '</span> <span class="nav-title"><span class="nav-title-icon-wrapper">' . twentyseventeen_get_svg( array( 'icon' => 'arrow-left' ) ) . '</span>%title</span>',
			'next_text' => '<span class="screen-reader-text">' . __( 'Next Post', 'twentyseventeen' ) . '</span><span aria-hidden="true" class="nav-subtitle">' . __( 'Next', 'twentyseventeen' ) . '</span> <span class="nav-title">%title<span class="nav-title-icon-wrapper">' . twentyseventeen_get_svg( array( 'icon' => 'arrow-right' ) ) . '</span></span>',
			) );

   endwhile; // End of the loop.?>

このように、single.phpを変更すると以下のように関連記事が表示される。

 

 

 

 

 

 

これで、Similar Postsにて関連記事表示は終了。

まとめ

アイキャッチ画像を登録することによって、関連記事に画像表示することも可能である。

また、関連記事表示を表示することによって、サイト滞在時間などを多くすることができるはず。

関連記事表示するプラグインは数多く存在しているので自分のサイトにあったプラグインを捜すことが大切である。

この記事をシェアする
フォローする

スポンサードリンク

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です