今回は新着記事を表示できるWordPressのプラグイン『Newpost Catch』についてご紹介しましょう。

NewPostCatch

この『Newpost Catch』を使用すれば、簡単に新着記事へのリンクを自動生成することができます。

しかし、デフォルトの表示ではちょっとダサいかな?っと思ってしまう部分が否めないので、サムネイル画像を横並びにカスタマイズする方法についてもご紹介しましょう。

NewpostCatchで新着記事をサイドバーに表示する方法を動画で説明




『Newpost Catch』のインストール方法


まず『Newpost Catch』をインストールしていきましょう。

ダッシュボード画面から『プラグイン→新規追加』で検索窓で「Newpost Catch」と検索しましょう。

『今すぐインストール』をクリックしてインストールが完了したら、忘れずに『有効化』してくださいね!

NewPostCatch

『Newpost Catch』をウィジェット(サイドバー)に設置しよう


『Newpost Catch』は有効化するだけでは新着記事のリンクは表示されません。

新着記事のリンクをどこに設置するのかを選択できるのですが、今回はウィジェット(サイドバー)に設置する方法をご紹介しましょう。


ダッシュボード画面から『外観→ウィジェット』に移動してください。

そして「NewPost Catch」をドラッグしながら、入れたい順番にドロップしましょう。

NewPostCatch


そして次は表示設定をしていきましょう。

NewPostCatch


細かい設定にこだわらないのであれば、以下の4項目だけをいじればOKです。

  • タイトル→「最近の投稿」でOK
  • サムネイルの設定:幅→120px
  • サムネイルの設定:高さ→120px
  • 投稿件数→5件

こちらに設定して、忘れずに『保存』をクリックしましょうね。

この設定だと

NewPostCatch


こんな感じで表示されます。

もちろん自分好みに設定を調整してもらえればOKです。

Newpost Catchのサムネイル画像を横並びにカスタマイズする方法


『NewPost Catch』サムネイル画像付きの新着記事のリンクを簡単に作成してくれるのですが、デフォルトでは上にサムネイル画像+下にテキストが表示されています。

僕はどうもこの表示が好きではなくて、どうにか画像とテキストが横並びにならないかな?っと思ったんですよね(笑)


ということで、サムネイル画像を横並びにカスタマイズする方法をご紹介しますね。

イメージはこんな感じです。

NewPostCatch


しかし、この設定をするにはCSSをいじる必要があります。

【1】コードをコピーする


まずはCCSに貼り付ける用のコードをコピーをしてください。

以下のコードをコピーしてください↓↓

#npcatch{
margin:0px;
}

#npcatch li{
font-size:15px;
overflow:hidden;
clear:both;
margin:0px 0px 5px;
vertical-align:top;
}

#npcatch img{
/*サムネイルのスタイル*/
float:left;
padding:0px;
box-shadow:0px 0px 7px #bbb;
}

#npcatch .title{
/*記事タイトルのスタイル*/
width:170px;
float:right;
padding:0px;
}


コピーが完了したら、これをCSSに貼り付ける行程にいきます。

【2】外観→テーマの編集→CSS


先程コピーしたコードを、つぎにスタイルシートに貼り付けます。

WordPressのメニューから『外観→テーマの編集』に移動してください。
※今回のテンプレートは「賢威7」を利用しています。テンプレートによっては違うこともありますのでご了承ください。


『賢威7』の場合は、base.cssを選択します。

すると、初心者にはワケの分からない文字列が表示されると思いますが、とりあえず一番下までスライドしてください。


一番下までスライドしたら、空白の部分にさきほどコピーしたコードを貼り付けましょう!

貼付けが完了したら、『ファイル更新』をクリックしてくださいね。

そして次にダッシュボード画面から『外観→ウィジェット』に移動してください。

NewPostCatchを選択して、「プラグインフォルダ内のデフォルトCSS(チェックすると適用)」のチェックを外したら設定は完了です。

%e3%83%81%e3%82%a7%e3%83%83%e3%82%af%e5%a4%96%e3%81%99

あとがき


今回は新着記事のリンクをサムネイル画像付きで表示してくれるプラグイン『NewPost Catch』についてご紹介しました。

基本的には簡単な設定でOKなのですが、少しデフォルトの表示が気になるのであれば僕のオススメする設定を試していきましょう!