WordPress カテゴリー別に新着記事を表示するプラグイン – WPP Plus Widget

検索サイトからのユーザーが目的の記事を読んだ後、他の記事も読んでくれたら嬉しいですよね。そういう考えで「最近の投稿」をサイドバーに掲載している方は多いと思います。

ですが、ここで自分のブログについて考えてみてください。検索サイトから来てくれた方が必要としている記事が「最近の投稿」にしっかりと並んでいると思いますか?テーマをひとつに絞って書かれてるブログの場合は問題ないと思います。ただ雑多な内容になってしまっているブログの場合は、アクセスしてくれた方が求める記事へのリンクを的確に提供できているとは言えないのではないでしょうか。

実はこのブログもそうなんです。Game Users というサイトの開発情報を掲載するために始めたブログなのですが、WordPress のプラグインを開発してから、WordPress についての記事も書くようになりました。そのため記事の内容に幅ができてしまったのです。

WordPress の情報を求めてブログを訪ねて来てくれた方が、まったく関係のない開発情報の記事を読んでも面白くないと思いますので、新着記事の表示もカテゴリー別に分けることにしました。

そこで使わせてもらったのが、WordPress Popular PostsWPP Plus Widget というプラグインです。この記事では、コードをコピーして貼り付けるだけで、当ブログと同じ新着記事を表示できる方法を解説しています。

この記事の解説に従って設定すると、トップページではブログ全体の新着記事が表示され、個別の記事ページではその記事が所属しているカテゴリーの新着記事が表示されるようになります。

HTML や CSS の知識がある方は、自分でデザインをカスタマイズすることも可能です。この記事では、カスタマイズ方法についても解説していきますので、ぜひ参考にしながらチャレンジしてみてください。

この記事は以下の記事の続きになります。必要なプラグインのインストールなどを済ませてから、こちらの記事を読んで下さい。

WordPress カテゴリー別に人気記事ランキングを表示するプラグイン – WPP Plus Widget

新着記事を表示する


新着記事は ダッシュボード > 外観 > ウィジェット で表示の設定を行います。WPP Plus Widget のインストールが済んでいると、新着記事というウィジェットが追加されています。

新着記事をサイドバーに表示する

左側に新着記事と書かれた部分がありますので、それをドラッグ&ドロップで、右側のブログサイドバーに移動させてみましょう。

ブログサイドバーに表示されたら、新着記事の欄をクリック(タップ)して開いてください。

 

新着記事の設定

設定 解説
タイトル 最新記事と入力してください。ブログトップページに表示される新着記事のタイトルです。なんでも構いませんので、好きなタイトルをご自分で考えてください。
タイトル(下層) 「{category}」の最新記事と入力してください。個別の記事ページや、カテゴリーページなど、トップページ以外で表示される新着記事のタイトルです。こちらも好きなタイトルを考えてください。{category} を入れると、表示している新着記事のカテゴリー名がタイトル部分に表示されます。
カテゴリの深さ 任意の数字 を半角で入力してください。カテゴリーの設定によって適切な値が変わってきます。いろいろ入力して納得の行く表示になる数字を見つけてください。カテゴリーの深さについて開発者の方が解説してくれていますので、こちらの記事を参考にしてください。
記事数 10 を選択してください。新着記事の表示件数を設定します。10 を選択すると記事が 10 件表示されます。

 

フォーマット設定

記事一覧の前後:最初のフォーム(左側)に以下のコードをコピーして貼り付けてください。

記事フォーマット:以下のコードをコピーして貼り付けてください。

 

サムネイル 解説
noimageのURL 200px × 200px の画像をメディアにアップロードして、その画像の URL を指定してください。新着記事の一覧にはサムネイル画像が表示されますが、各記事にアイキャッチ画像が設定されていない場合、ここで設定した画像が代わりに表示されます。
画像サイズ(横幅/高さ) 100 / 100 を入力してください。新着記事に表示されるサムネイル画像のサイズを指定します。

 

オプション 解説
表示記事を除外する チェックしてください。ブラウザに表示しているページは新着記事の一覧に表示されなくなります。
トップページで表示しない チェックを外してください。新着記事の一覧をトップページに表示したくない場合はチェックしてください。
カテゴリページで表示しない チェックを外してください。新着記事の一覧をカテゴリーページに表示したくない場合はチェックしてください

 

1. noimage の設定方法: 画像をアップロードする

ダッシュボード > メディア > ライブラリ新規追加ボタンを押して、画像をアップロードしましょう。200px × 200px のサイズの画像を推奨します。スマートフォンやタブレットでは倍のサイズをアップロードして、半分のサイズで表示すると綺麗に表示されます。

 

2. noimage の設定方法: 画像の URL を取得する

アップロードした画像をクリック(タップ)すると、画像の表示になると思います。ここで URL と書かれたフォームの中身をコピーしましょう。

 

3. noimage の設定方法: 画像の URL を貼り付ける

サムネイルの noimageのURL 欄にコピーした画像の URL を貼り付けてください。

 

ウィジェットの設定を保存する

すべての設定が終わりましたら、右下にある保存ボタンを押してください。これで新着記事のウィジェットの設定は終わりです。

スタイルシートを適用する


このままでも新着記事は表示されますが、まだスタイルシートが適用されていませんのでデザインは整っていません。

この段階ではこんな表示になります

 

1. スタイルシートを追加するページに移動する

ダッシュボード > Custom CSS & JS > Add Custom CSS をクリック(タップ)してください。スタイルシートを追加するページに移動します。

 

2. スタイルシートを入力して保存する

タイトルを入力するフォームに WPP Category New List と入力しましょう。そしてその下の /* */ に囲まれた赤文字の英文をすべて削除して、以下のコードをコピーして貼り付けてください。

そして公開ボタンを押しましょう。新着記事にスタイルシートが適用されます。

新着記事の完成!


解説どおりに設定を行い、アイキャッチ画像が各記事に設定されていると、新着記事はこのように表示されます。

ただしこれはテーマ Twenty Seventeen を使っている場合の表示です。他のテーマではサイドバーの横幅が狭かったりしますので、このままの設定では表示がおかしくなることがあります。

 

テーマ Twenty Fifteen の場合

サイドバーのサイズが狭いため、サムネイル画像と文字のバランスが悪くなってしまっています。

この場合はさきほど編集した ダッシュボード > 外観 > ウィジェット > 新着記事 に戻り、サムネイルのサイズを調整します。

サムネイル欄の画像サイズを 100 → 60 に変更して保存してください。

そしてスタイルシートも編集します。ダッシュボード > Custom CSS & JS > All Custom Code にアクセスし、さきほど入力したスタイルシートを編集します。

width: 100px;
  ↓↓↓
width: 60px;

この 100px と書かれている部分を 60px に編集して更新してください。これで新着記事に表示されるアイキャッチ画像のサイズが小さくなります。

 

完成!

アイキャッチ画像が小さくなり、文字とのバランスが良くなりました。上記で解説した部分を編集して、使用しているテーマに合ったデザインに変更してください。

HTML やスタイルシートの知識がある方は、ウィジェットの HTML コードや、追加したスタイルシートをまるごと置き換えることで、完全にオリジナルのデザインに変更することも可能です。

最後に


カテゴリー別に新着記事を表示することで、関連の深い記事を読者に紹介することができますので、より魅力的なブログに感じてもらえるのではないでしょうか。

ぜひ人気記事ランキングと一緒に設定してみてください。

コメントを残す

メールアドレスが公開されることはありません。

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)