ワードプレスで、おすすめ記事を紹介するページを作成しました。

おすすめ記事をランダムにピックアップして表示するものです。

このブログは雑学読み物系なので「カテゴリはどうでもいいから面白い記事を読みたい」という需要があると勝手に思って作ってみました。

そこで備忘録も兼ねて、作成方法を書き残しておきます。

プラグインを使って簡単にできるので、参考になれば嬉しいです。

スポンサーリンク

おすすめ記事ページの中身

ランダム表示にこだわったのは、古い記事を埋もれさせないためです。

古くても自信があるページが目に触れる導線を確保したかったのです。

そこで、デザインはともかく、おすすめ記事が一覧で見やすいように次のようなページにしました。

PCでの表示

おすすめ記事PC

スマホでの表示

おすすめ記事スマホ

≫≫おすすめ記事ページへ

おすすめ記事ページの作り方

おすすめ記事ページを作るにあたって、”Advanced Random Posts Widget” というプラグインを使いました。

元々は、記事をランダムに表示させるためのプラグインですが、カテゴリ別、タグ別でランダム表示させることができます。

おすすめ記事には「おすすめ」というタグをつけて、そのタグの中から記事をランダム表示させるという方法を使いました。

Advanced Random Posts Widgetの使い方

まずは、Advanced Random Posts Widgetをインストールして有効化します。

すると、ウィジェットの中に「Random Posts」が追加されます。

random posts wordpress

ウィジェットとして使う

Advanced Random Posts Widgetをウィジェットとして使うのなら、設置したい場所にウィジェットを持って行って設定すればOKです。

ランダムポスト設定

設定は、左のタブで設定項目を選んで必要な項目を設定するでだけ。

簡単に使うのなら、下の設定だけでOKです。

  • General:タイトルを入れる(Title)
  • Posts:表示する記事数を入れる(Number of posts to show)
  • Taxonomy:必要に応じてカテゴリやタグを選択する
  • Thimbnail:サムネイル画像を設定する(Use custom thumbnail sizes)でサムネイルサイズの指定をするのが簡単)
  • Extras:表示させる項目を指定する(何もしなければタイトルだけ)
  • Custam CSS:カスタマイズするときに使用

ついでなので、サイドバーにサムネイルなしで、おすすめ記事を表示させてみました。

ページに使う

ウィジェットとして使うのは割と簡単なのですが、今回はページに表示させるのが目的です。

この場合は、ショートコードで指定しなくてはいけません。

Advanced Random Posts Widgetにショートコードの一覧があるので、詳しい設定をしたい場合は、参考にしてください。

今回は、サムネイルとタイトルだけの表示をしたいので、以下のコードを使いました。

[arpw tag="49" limit="10" thumbnail="true" thumbnail_size="small-thumbnail-size"]

※[ ]を半角に直して使ってください。

ワードプレスで新しく固定ページを作ってタグを張り付けるだけです。

それぞれの設定項目について、簡単に説明してみます。

tag

最初のarpwは、”Advanced Random Posts Widget” の略で、ランダムポストを使いますという宣言です。

次の 「tag=”49″」 は、「おすすめ」というタグの中から表示する記事を選ぶという設定です。

ここで49というのは「おすすめ」タグのIDナンバーです。

タグのIDナンバーを調べるには、まずタグの一覧を開き、設定したいタグの上にカーソルを置きます。

すると、画面の一番下にタグの詳細が表示されるので、そこにあるIDが目的とするタグのIDナンバーです。

ワードプレスのタグ画面

ワードプレス タグID

カテゴリーのIDも同じようにわかるので、カテゴリー別にランダム表示させるときは「cat=”xx”」とxxのところにカテゴリーIDを入れればOKです。

limit

表示する記事数です。

ウィジェットではなく、ページに表示されるので10記事と多めに設定しました。

thumbnail

サムネイル画像の表示設定です。

「thumbnail=”true”」は、サムネイルを表示させるという意味です。

次の「thumbnail_size」は、サムネイルのサイズです。

ワードプレスダッシュボードから、「設定」→「メディア」を選ぶとサムネイルの一覧が表示されます。

ワードプレスメディア画面

ワードプレステーマなどで使われているサムネイルのサイズが記載されているので、適切なサイズのサムネイル名称を「thumbnail_size」に書き込みます。

もし適切なサイズがなければ、新しくサムネイルを作ることになります。

今回も適切なサイズがなかったのでSimple Image Sizesというプラグインを使ってサムネイルを作成しました。

CSSでデザインを調整

もし表示が気に入らなければ、CSSをいじることになります。

自分の場合は、記事タイトルのリンクの下線を外して太字にすることと、文字色を変えるために、CSSに以下を追記しました。

a.arpw-title {
text-decoration: none; font-weight:bold;
}
a.arpw-title:link {
color: #606060;
}
a.arpw-title:visited {
color: #606060;;

a.arpw-title:hover {
color: #ff6600;

a.arpw-title:active {
color: #ff8000;
}

テーマやデザインに応じて、設定を変更してください。

最後に

ワードプレスで、おすすめ記事ページ作成の方法を説明しました。

他にも応用が利く方法だと思うので、参考にしてもらえれば嬉しいです。


スポンサーリンク

このブログが気に入ったら
いいね ! しよう

Twitter で