Stinger3カスタマイズ。yet another related posts pluginで関連記事を表示する。

2016/10/16


wordpress

関連記事を表示してくれるプラグイン、YARPP(yet another related posts plugin)。
このWordPressプラグインを、無料テーマ「Stinger3」と併用する際の設定をメモしておきます。

Stinger3の機能をつかって関連記事の抜粋を表示し、なおかつ、YARPPの機能をつかって精度の高い関連記事を表示する。
SEOの面でも、また、読者の利便性の面でも、悪くないカスタマイズだと思いますよ。

スポンサーリンク

カスタマイズの手順

まずは、YARPPをインストールして、テンプレートファイルを作成します。
この方法については、例えば、こちらのブログを参照してください。

yet another relative plugin

テンプレートファイルを作成したら、その中身を削除し、テンプレートファイルに以下のコードを貼り付けます。

<?php if(have_posts()):?>
	<h2 class="kanren">関連記事</h2>
	<div class="sumbox02">
	<div id="topnews">
	<div>
<?php while(have_posts()) : the_post(); ?>
		<dl>
		<dt>
			<a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>">
<?php if ( has_post_thumbnail() ): // サムネイルを持っているときの処理 ?>
<?php echo get_the_post_thumbnail($post->ID, 'thumb110'); ?>
<?php else: // サムネイルを持っていないときの処理 ?>
					<img src="<?php echo get_template_directory_uri(); ?>/images/no-img.png" alt="no image" title="no image" width="110px" />
<?php endif; ?>
			</a>
		</dt>
		<dd>
			<h2 class="saisin">
				<a href="<?php the_permalink() ?>">
<?php the_title_attribute(); ?>
				</a>
			</h2>
			<p class="basui">
<?php echo mb_substr( strip_tags( stinger_noshotcode( $post->post_content ) ), 0, 50 ) . ''; ?>
			</p>
			<p class="motto"><a href="<?php the_permalink() ?>">記事を読む</a></p>
		</dd>
		</dl>
<?php endwhile; ?>
	</div>
	</div>
	</div>
<?php else: ?>
	<!-- 関連記事がないときのHTMLをここに書く-->
<?php endif; ?>

続いて、Stinger3の「single.php」内の関連記事を表示するコードを削除します。具体的には、下記のコードです。

<!--関連記事-->
<h2 class="kanren">関連記事</h2>
    <div class="sumbox02">
      <div id="topnews">
        <div>
<?php
$categories = get_the_category($post->ID);
$category_ID = array();
foreach($categories as $category):
array_push( $category_ID, $category -> cat_ID);
endforeach ;
$args = array(
'post__not_in' => array($post -> ID),
'posts_per_page'=> 10,
'category__in' => $category_ID,
'orderby' => 'rand',
);
$st_query = new WP_Query($args); ?>
<?php
if( $st_query -> have_posts() ): ?>
<?php
while ($st_query -> have_posts()) : $st_query -> the_post(); ?>
          <dl>
            <dt> <a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>">
<?php if ( has_post_thumbnail() ): // サムネイルを持っているときの処理 ?>
<?php echo get_the_post_thumbnail($post->ID, 'thumb110'); ?>
<?php else: // サムネイルを持っていないときの処理 ?>
              <img src="<?php echo get_template_directory_uri(); ?>/images/no-img.png" alt="no image" title="no image" width="110px" />
<?php endif; ?>
              </a> </dt>
            <dd>
              <h2 class="saisin"> <a href="<?php the_permalink(); ?>">
<?php the_title(); ?>
                </a></h2>
              <p class="basui">
<?php echo mb_substr( strip_tags( stinger_noshotcode( $post->post_content ) ), 0, 50 ) . ''; ?></p>
              <p class="motto"><a href="<?php the_permalink(); ?>">記事を読む</a></p>
            </dd>
          </dl>
<?php endwhile;?>
<?php else:?>
          <p>記事はありませんでした</p>
<?php
endif;
wp_reset_postdata();
?>
        </div>
      </div>
    </div>

最後に、削除したコードの代わりに下記のコードを貼り付けます。

<?php related_posts(); ?>

以上、Stinger3とyet another related posts pluginを併用するカスタマイズでした。

画像引用元:how to make WordPress needle cushion by Odyssey

スポンサーリンク