更新日: 2013年6月10日
WordPress

WordPress の WPtouch で関連記事・前後ページを表示

WordPress のモバイルテーマ用のプラグイン WPtouch で関連記事、前後記事を表示させるように修正しました。モバイルからのユーザービリティも向上させたいですからね。

【お知らせ】英単語を画像イメージで楽に暗記できる辞書サイトを作りました。英語学習中の方は、ぜひご利用ください！

画像付き英語辞書 Imagict | 英単語をイメージで暗記
【開発記録】
英単語を画像イメージで暗記できる英語辞書サービスを作って公開しました

WPtouch の single.php を修正して関連記事、前後記事のテンプレートを読み込む

まず wp-content/plugins/wptouch/themes/default/single.php を修正して、関連記事、ページネーションのテンプレートを読み込むようにします。single.php の31行目の後に、get_template_part() 関数でテンプレートを読み込むように修正します。

<div id="singlentry" class="<?php echo $wptouch_settings['style-text-justify']; ?>">
    <?php the_content(); ?>	
    <?php /* 関連記事とページネーションを挿入 */ ?>
    <?php get_template_part('relative'); ?>
    <?php get_template_part('pagination'); ?>

<?php the_content(); ?>

<?php /* 関連記事とページネーションを挿入 */ ?>

<?php get_template_part('relative'); ?>

<?php get_template_part('pagination'); ?>

最初はどうせ共通だしと、デスクトップ用の関連記事、前後記事の部分テンプレートを PHP の include 関数で読み込もうとやってみたのですが、なぜか上手く行かなかったので同じディレクトリ（wp-content/plugins/wptouch/themes/default/）に、 ./relative.php, ./pagination.php を別に作成して get_template_part 関数で読み込むことにしました。

関連記事（./relative.php）のソース

関連記事は、同一カテゴリーの記事を表示させるようにさせています。関連記事表示にタグ使うとか、プラグイン使うとかはお好みで。

wp-content/plugins/wptouch/themes/default/relative.php を作成します。

<!-- relative articles -->
<?php if(is_single()) : ?>
<?php
foreach((get_the_category()) as $cat) {
    $cat_id = $cat->cat_ID ;
    break ;
}
query_posts(
  array(
    'post_type' => 'post',
    'orderby' => 'date',
    'order' => 'DESC',
    'cat' => $cat_id,
    'showposts' => 10,
    'post__not_in' => array( get_the_ID() ),
  )
);
?>
<?php if(have_posts()) : ?>
<ul class="relative_article">
<li>- 関連記事 -</li>
<?php while (have_posts()) : the_post(); ?>
<li class="relative_link"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
<?php endwhile; ?>
</ul>
<?php endif; ?>
<?php wp_reset_query() ?>
<?php endif; ?>

<?php if(is_single()) : ?>

<?php

foreach((get_the_category()) as $cat) {

$cat_id = $cat->cat_ID ;

break ;

}

query_posts(

array(

'post_type' => 'post',

'orderby' => 'date',

'order' => 'DESC',

'cat' => $cat_id,

'showposts' => 10,

'post__not_in' => array( get_the_ID() ),

)

);

<?php if(have_posts()) : ?>

<?php while (have_posts()) : the_post(); ?>

<?php endwhile; ?>

</ul>

<?php endif; ?>

<?php wp_reset_query() ?>

<?php endif; ?>

ページネーション（./pagination.php）のソース

ページネーション（前後記事の表示）は、同一カテゴリー内の前後の記事を10個表示させるようにしました。すべての記事の日付順にするなど、ここもお好みで。

wp-content/plugins/wptouch/themes/default/pagination.php を作成します。

<!-- pagination -->
<div class="pagination">
<div class="p_prev">
<?php previous_post_link('<< 前の記事 : %link', '%title', true); ?>
</div>
<div class="p_next">
<?php next_post_link('>> 次の記事 : %link', '%title', true); ?>
</div>
</div>
<!-- /pagination -->

<?php previous_post_link('<< 前の記事 : %link', '%title', true); ?>

</div>

<?php next_post_link('>> 次の記事 : %link', '%title', true); ?>

</div>

最後に CSS を修正

wp-content/plugins/wptouch/themes/default/style.css を修正します。末尾に以下を追加しました。

ul.relative_article {
  list-style-type: none;
}

.relative_article li.relative_link {
  background: url(../../../../themes/easyramble/images/plus.png) no-repeat;
  padding-left: 11px;
}

.pagination{
  margin-top:30px;
}