WPtouchをカスタマイズして関連記事を表示する方法！

先日、WPtouchをカスタマイズしてオリジナルテーマを作成しましたが、その際に実装できなかった関連記事を、改めてカスタマイズし表示させるようにしました。

カスタマイズ方法

通常関連記事を表示する際に、WordPressのプラグイン「YARPP」を使用していまして、この度一度試してみたのですが表示がされなかったので、プラグインを使用せずに関連記事を表示することを試みました。
（プラグイン内のテーマに別のプラグインのテーマは、元々使用ができないのかも知れませんが…） 

何かいいコードはないかと調べていましたところ、memocarilogさんの記事「プラグインを使わずに”関連する記事”の表示する」でコードが公開されていましたので、コードはそのまま使わせて頂き、サムネイルを追加してみました。

私は、related.phpというPHPファイルを作成して、single.phpで呼び出して使用しています。

また、サムネイル関連のコードは、前回のカスタマイズの際に使用したコードを利用しています。

<h3>こんな記事もいかがでしょうか？</h3>

<?php
    $original_post = $post;
    $tags = wp_get_post_tags($post->ID);
    $tagIDs = array();
    if ($tags) {
        $tagcount = count($tags);
        for ($i = 0; $i < $tagcount; $i++) {
            $tagIDs[$i] = $tags[$i]->term_id;
        }
    $args=array(
    'tag__in' => $tagIDs,
    'post__not_in' => array($post->ID),
    'showposts'=>6,
    'caller_get_posts'=>1
    );
$my_query = new WP_Query($args);
if( $my_query->have_posts() ) {
    while ($my_query->have_posts()) : $my_query->the_post(); ?>
    <div class="related-post">
      <div class="related-thumb">
      <?php if (has_post_thumbnail()) { ?>
        <?php the_post_thumbnail(); ?>
	  <?php } else { ?>				
		<?php
				  $total = '24'; $file_type = '.jpg'; 
							
				  // Change to the location of the folder containing the images 
	              $image_folder = '' . compat_get_plugin_url( 'wptouch' ) . '/themes/core/core-images/thumbs/'; 
				  $start = '1'; $random = mt_rand($start, $total); $image_name = $random . $file_type; 
							
				  if ($wptouch_settings['post-cal-thumb'] == 'post-thumbnails-random') {
				    echo "<img src=\"$image_folder/$image_name\" alt=\"$image_name\" />";
				  } else {
				    echo '<img src="' . compat_get_plugin_url( 'wptouch' ) . '/themes/core/core-images/thumbs/thumb-empty.jpg" alt="thumbnail" />';
				  }?>
		<?php }  ?>
        </div>
        <div class="related-title">
        <a href="<?php the_permalink();?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php trim_str_by_chars( get_the_title(), 58 );?></a>
        </div> 
        <div class="clearer"></div>
      </div>      
<?php endwhile; wp_reset_query(); ?>

<?php } else { ?>
    関連する記事はありません
<?php } } ?>

single.phpで呼び出します。

<div class="related">
               <?php get_template_part('related'); ?>
</div>

あとは、CSSで整えるだけです。

最大表示数を変更する場合は、related.php内の‘showposts’の数字を変更すると変わります。

 

大変参考になりました、ありがとうございます！