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

スポンサーリンク

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

【お知らせ】 英単語を画像イメージで楽に暗記できる辞書サイトを作りました。英語学習中の方は、ぜひご利用ください!
画像付き英語辞書 Imagict | 英単語をイメージで暗記
【開発記録】
英単語を画像イメージで暗記できる英語辞書サービスを作って公開しました
スポンサーリンク

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

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

最初はどうせ共通だしと、デスクトップ用の関連記事、前後記事の部分テンプレートを 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 を作成します。

ページネーション(./pagination.php)のソース

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

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

最後に CSS を修正

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

リスト表示(liタグ)に指定するバックグラウンド画像は、相対パスで指定しました。ここ間違わないように注意するくらいですかね。

スポンサーリンク
WordPress は人気ナンバーワンのブログ・ウェブサイトの管理ツールです。PHP を使えればカスタマイズできるので、ぜひトライされてみてください。
 
スポンサーリンク

Leave Your Message!