最新記事を画像付きで表示できるnewpost catchの使い方

サイトを訪れた時、
「このサイトの一番新しい記事を読みたい」
と思ったことはないでしょうか?

そんな時に、
「最新記事」がまとめてあると、
見やすく便利ですよね。

wordpressでは、
最新記事を見やすく表示してくれる
便利なプラグイン
newpost catchがあります。

使い方、設定方法を紹介します。

 

1.newpost catchとは?

newpost catchは、
サムネイル付きで
最新記事を表示する
プラグインです。

最新記事が画像付きで
表示できるため、

このブログは、
最近どんな記事を書いているのか?

をわかりやすく
ユーザーに伝えることができます。

2.newpost Catchのインストール

newpost catchを
インストールしていきましょう。

2-1プラグインの新規追加

管理画面にログインし、
画面左側にあるメニュー
「プラグイン」→「新規追加」
を押します。

newpost catch

右上の枠に
「newpost catch」と入力します。

newpost catch

2-2.プラグインのインストール

「newpost catch」プラグインの
「今すぐインストール」を押します。

newpost catch

2-3. プラグインの有効化

「有効化」ボタンを押します。

newpost catch

画面がインストール済み
プラグインの画面に切り替わります。

newpost catch

インストール完了です。

3.ブログのサイドバーに設置

使っているテーマによって、
このように既に最新記事が
サイドバーに表示されている
ものもあります。

newpost catch

この表示だと、
タイトルだけが並んでいる
だけの表示になっています。

これを、サムネイル付きで
表示させるのが
newpost catchです。

3-1.管理画面でのウィジェット設定

まず、現在表示されている
最新記事の表示を
ウィジェットから削除します。

※ウィジェットとは、
特定の機能を使用するための
パーツのことです。

サイトに表示させたい
機能を持ったウィジェットを
サイドバーなどに追加することで
表示することができます。

管理画面の左側メニューにある
外観を押し、
「ウィジェット」を押します。

newpost catch

ウィジェットから
最新記事を削除していきます。

サイドバーにある
「最近の投稿」の
下向き矢印を押します。

newpost catch

「削除」を押すと、

ウィジェットからなくなります。

削除をしても、左側の
「利用できるウィジェット」に
移動するだけなので、
いつでも元に戻すことができます。

次に、新しく
「newpost catch」を設置します。

画面の左側にある
「newpost catch」を
先ほどの「最近の投稿」があった
場所に移動します。

移動の仕方は、
「newpost catch」を
ドラッグ&ドロップするか、

※ドラッグ&ドロップとは、
マウスの操作の一つです。
移動させたいものの上に
マウスを置き、
「左ボタン」を押したまま、
マウスポインタを目的の場所まで
移動させます。(ドラッグ)

移動したいところまで
持っていったら「左ボタン」を
離します。(ドロップ)

newpost catch

「newpost catch」を押すと、
その下に項目が出てきます。

どこにこのウィジェットを
追加するかの項目です。

「サイドバーウィジェット」
チェックを入れて、
「ウィジェットを追加」
を押します。

newpost catch

3-2.初期設定と表示の確認

「newpost catch」を右側に
移動すると、
「newpost catch」の設定画面が
開きます。

newpost catch

「newpost catch」の
初期設定をします。

A:タイトル「最近の投稿」
このままの設定でOKです。

変更する場合は、
「最新記事」「新着記事」など、
わかりやすいものにしておきましょう。

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

ブログ画面を見ながら
好きな大きさに調整しましょう。

C:投稿件数
表示する記事の件数です。

5件になっていますが、
多くても10件程度にしておきましょう。

他の項目は、
デフォルトのままで
変更しなくてもOKです。

設定できたら、
一番下の「保存」ボタンを押して、
ブログの画面を見てみましょう。

newpost catch

サムネイル付きの画像が出てきました。

newpost catch

サムネイル画像は
お好みでサイズを調整してください。

もし、ここでサムネイル画像が
表示されていない場合が、
画像のサイズが小さいことが
原因としてあげられます。

デフォルトのままの
「50」ではなく、
100以上で設定してみてください。

4.記事投稿画面で使用するショートコードの使い方

ウィジェットでサイドバーに
追加する方法以外に、

投稿の本文中などに
ショートコードを記述するだけで
「最近の投稿」が
表示することができます。

ショートコードとは
短いコードで表現することが
できる機能です。

「newpost catch」の
ショートコードは
[npc★]です。

※全て半角です。
※ブログ記事に表示されてしまいますので
★をいれておりますが、実際にあなたが行う場合は
★マークは実際に入力する際は必要ありません。

ショートコードを記述できる
箇所は主に3箇所あります。

・投稿本文中
・テキストウィジェット内
・テーマファイル内

テキストウィジェット内や
テーマファイル内に記述する方法は
PHPの知識が必要になるので、

一番簡単な投稿本文中に記述する
方法を紹介します。

4-1.投稿本文中にショートコードを使う

ショートコードを
投稿本文中入れる方法です。

管理画面の左側メニューで
「投稿」→「新規投稿」を押し、
新規投稿画面にします。

newpost catch

本文内に、[npc★]の
ショートコードを記述します。

newpost catch

サイトを見てみると、
本文中に表示されています。

newpost catch

4-2.ショートコードに追加するだけで表示方法が変えられる

[npc★]だけの場合、
サムネイル画像が表示されず、
テキストだけになっています。

ショートコードの記述に
タグを付け足すだけで
この表示方法を変えることができます。

サムネイル画像のサイズを
変更したい場合、
次のように記述します。

[npc width=”幅サイズpx″ height=”高さサイズpx″]

width=”幅サイズpx″は、
サムネイル画像の幅のサイズを記述します。

height=”高さサイズpx″は、
サムネイル画像の高さのサイズを記述します。

[npc width★=”120″ height=”120″]とした場合

newpost catch

newpost catch

サムネイル画像が見やすくなりました。

この見た目をもう少し変えてみます。

テキストが短く改行されているので、
本文で表示されると、
左側が大きく空白に
なってしまっています。

この場合は、
newpost catchの設定を
変更します。

管理画面の左側のメニューで、
「外観」→「ウィジェット」を押します。

newpost catch

画面右側の
サイドバーウィジェットにある
newpost catchの下向き三角を押します。

newpost catch

「プラグインフォルダ内の
デフォルトCSS
(チェックすると適用)」の
チェックを外します。

newpost catch

「保存」ボタンを押します。

先ほどの投稿画面に戻ります。

管理画面の左側メニューにある
「投稿」→「投稿一覧」を押します。

newpost catch

先ほど記述した投稿画面を
開きます。

画像サイズを「50」に変更します。

newpost catch

サイトを見てみましょう。

newpost catch

テキストが改行されずに、
綺麗に表示されています。

5.まとめ

最近の投稿を簡単に
サムネイル付きで表示する方法の
紹介でした。

画像付きの見た目は、
ユーザーに他の記事を
見てもらいやすくなることにあります。

サイト内をより見やすくして
ユーザーにとって
わかりやすくしていきましょう。

合わせて読みたい

コメントを書いてお友達と情報を共有しましょう!