【追加プラグインなし】WP-touch3.1.5で最新記事を表示する方法

WP-touch3.1.5のTOP画面

このエントリーをはてなブックマークに追加

WP-touch3.1をカスタマイズ

前回の記事ではWP-touch3.1に関連記事を表示できるようにしました。

今回はさらに最新記事を表示したいと思います。

関連記事とあわせて、完成型は以下です。

WP-touch3.1.5の記事画面

WP-touch3.1.5記事画面

私のサイトは、コンテンツの量が多くないのでそれぞれ3件ずつ表示していますが、増やすことも可能です。

それでは早速最新記事を追加しましょう。

WP-touch3.1で好きな場所に最新記事を表示する

WP-touch3.1はFTPなどから直接ファイルを編集します。

テーマ「Bauhaus」を使っていることを想定して話を進めていきます。

wp-content/plugins/wptouch/themes/bauhaus/default/single.php

各記事の表示は「single.php」で行われます。

「single.php」と同じディレクトリに「new-posts.php」を作成します。

wp-content/plugins/wptouch/themes/bauhaus/default/new-posts.php

フォルダの構成は上記のようになります。

作成した「new-posts.php」に以下のコードを記述してくだい。

numberpostsの値で表示する記事の件数を変更できます。

これで最新記事を好きな場所に表示する準備が整いました。

好きな場所でphpを呼び出す

get_template_part関数を使ってphpを呼び出します。

今回は各記事の関連記事の下に最新記事を表示するため以下のファイルに追記します。

wp-content/plugins/wptouch/themes/bauhaus/default/single.php

下から9行目辺りに以下の記述があるので、その後に追記します。

関連記事を呼び出す関数の下に、新規記事を呼び出す関数を追加しました。

ちなみに関連記事の方はPro版もしくは、前回の記事で関連記事の追加をしている場合を除くと表示されません。

割と簡単な記述で最新記事を追加できたと思います。

サムネイルの表示に関しては、各記事にアイキャッチ画像を設定していると表示されます。

もしかしたらアイキャッチ画像を指定していないとエラーが出るかもしれません。

画像があるだけで見た目がよくなると思うので、設定していない方はこの機会にアイキャッチ画像を設定してみてください。

最新記事のCSS

特に必要ないかもしれませんが、CSSも紹介しておきます。

サムネイル画像をspanにしてfloatをつけることで、画像のすぐ横にタイトルのリンクを持ってくることができます。

ただspanだけだと、画像の下の方にリンクがつくのでそれを調整しています。

最新記事や関連記事を表示するメリット

googleなどの検索から自分のサイトの1つの記事に対してアクセスがあるとします。

そのときに、記事の下部に最新記事や関連記事のすすめがあったら、次の記事を見る可能性が格段にあがります。

少しでも多くの記事に目を通してもらえる機会を増やすことは大切ですよね。

訪問者にとって必要な情報を全て持ち合わせているのに、その事実に気がついてもらえなかったら意味がありません。

スマホという限られたスペースで、最大限の情報を提供できることは他サイトとの差別化につながると思います。

次回は、「WP-touch3.1にグーグルアドセンスを表示する方法」を紹介します。

カテゴリー: WP-touch3.1 タグ: , パーマリンク

このエントリーをはてなブックマークに追加

あわせて読みたい関連記事

アドセンスを表示 WP-touch3.1.5にグーグルアドセンスを表示する方法

WP-touch3.1.5の記事画面 【追加プラグインなし】WP-touch3.1.5で関連記事を表示する方法