NewpostCatchは最近の投稿にサムネイルを表示させるWordPressプラグイン

シェアボタンを押して情報を共有しましょう。

スクリーンショット_051716_022937_PM

どもっ、こんにちは!最近、運動不足の橋尾渡でっす!

さて今回は、WordPressの「最近の投稿」にサムネイルを付けることができるプラグインを紹介したいと思います!最近の投稿と言えば、ブログのサイドバーに表示されている、記事一覧のことですよね。

スクリーンショット_051816_120258_PM

初期設定では、サムネイルを付ける選択がありません。しかし、テーマによっては、サムネイルを付けることができるものも存在しますですが、僕の使っているSimplicityのテーマでは、サムネイルを付けることができないのです。

Simplicityのバージョンが上がれば、そういう機能がつくかもしれませんが、今のところはありませんね。なので、そういう最近の投稿にサムネイルの付けることができないテーマには、「Newpost Catch」というWordPressのプラグインを使って、サムネイルを表示させてやりましょう!

2016/05/19/ 12:29 追記

あの後、色々触っていたら、Simplicityはサムネイルを表示する「新着記事」と言うウィジェットが存在しました。なので、Simplicityをお使いの場合は、それを利用してください。その他のテーマをお使いの方は、この記事通りプラグインをインストールしていきましょう!

Simplicityにある人気記事と新着記事のウィジェットをカスタマイズしてみよう!

スポンサーリンク
レクタングル(大)広告

プラグインをインストールする

では、WordPressの管理画面を開いてプラグインを探しましょう。

スクリーンショット_051816_121839_PM

プラグインを検索する際に、注意してほしいのが、「NewpostCatch」で検索すると、何も表示されないので、「Newpost Catch」と空白を開けて検索しましょう。そして、インストールします。

スクリーンショット_051816_010122_PM

プラグインを有効化すれば、プラグインリストに入ります。これで、インストールは完了です。機能を無効化したい場合は、停止ボタンを押しましょう。

Newpost Catchの設定

スクリーンショット_051816_010546_PM

では、Newpost Catchのインストールが完了したので、次は使ってみましょう。外観からウィジェットを選択します。Newpost Catchのウィジェットが追加されているはずです。

一度、試しにNewpost Catchをサイドバーに表示させてみますか。

スクリーンショット_051816_010827_PM

ブログを確認してみたら、Newpost Catchらしきものが表示されています。ですが、バランスが非常に悪いですね。サムネイル画像は凄く小さいし、タイトルの文字が読みづらいです。これでは、プラグインを無効化したほうがマシです。

そこのあなた、この画像を見て不安になりましたね?大丈夫です、安心してください。実はこれ…、サムネイルの大きさは変更可能なのです!では、もう一度、ウィジェットの画面に移動してみましょう。

スクリーンショット_051816_011830_PM

ウィジェットの管理画面に戻りますと、Newpost Catchのウィジェットを設定できます。番号を付けましたので、1から順番に説明していきますね。

タイトルとは、名前の通り表示するメインタイトルを決める枠です。そのままでも大丈夫でしょう。

サムネイルの設定で、サムネイルの大きさを変えることが可能です。初期設定では、高さも幅も10pxだったので見た目が悪かったのですね。100pxで設定してやると良い感じになりますよ。

投稿件数では、表示させる記事の数を設定できます。たくさん表示させたい人は、10~20にでも数字を変えておきましょう。

投稿の日付を表示させるか否か。これは、タイトルと一緒に表示される形になります。

先頭に固定表示とは、WordPress側で設定している最初の記事を表示させることが可能です。宣伝したい場合は、チェックを入れましょう。

デフォルトCSSは、CSSでカスタマイズしたい場合には、チェックを外しておきましょう。CSSがわからない人はそのままで大丈夫です。

投稿タイプは、普段の記事か、固定ページを表示させるか、を選択できます。まぁ、基本的に投稿のままにしておきましょう。

それから、特定のカテゴリを指定して表示という項目もありますが、指定したい場合だけ設定してみましょう。僕は、特にいじっていません。そして、設定が終わったら下にある保存ボタンを押して更新してあげましょう!

それでは、100pxに設定したサムネイルを見てみますか!

スクリーンショット_051816_015529_PM

おお~!ちゃんと、サムネイルが表示されてますねぇ。これだと、訪問者の興味も惹きやすいはずです。文字だけのリンクだと、いまいち押したくなりませんもんね。なので、こういった画像を表示してあげるという方法は、とても大事なんです。

これで、Newpost Catchの設定は一通り終わりました。次にCSSでカスタマイズする方法を説明していきたいと思います。

Newpost Catchをカスタマイズする

設定は終わりましたが、デフォルトの見た目じゃ、いまいちカッコよくありませんよね。なので、CSSでカスタマイズしてオシャレにしてあげましょう!ちなみに、カスタマイズしたらこうなります。

スクリーンショット_051816_030524_PM

これが、完成形です。上に載せた初期の野暮ったいデザインとは、打って変わってスマートになりましたね。スマートと言えば、スマートフォンから見てもこんな感じのデザインになります。

それじゃあ、今からやり方を説明していきましょうか。また、ウィジェットの管理画面に移動してください。

スクリーンショット_051816_032347_PM

先程は、サムネイルのサイズを100pxにしていましたが、今度は、幅を100pxで、高さを80pxにしてください。こうすることによって、綺麗なバランスになります。それから、CSSのチェックを外しておいてください。これからCSSのコードを貼り付けますので、コピーしてください。

このCSSコードをコピーして、テーマの編集に貼り付けてあげましょう。すると、上記のようなスタイルが適用されます。ちなみに、「#newpostcatch-2 ul」というコードは、Simplicityの場合だと、初期設定で右に1emずれているので、0emを使って余白を消しています。

なので、Simplicity以外のテーマをお使いの方は、「#newpostcatch-2 ul」という部分は無視してOKです!では、貼り付けます。

スクリーンショット_051816_033528_PM

貼り付けることができたら、保存ボタンを押して反映させましょう。これで、カッコいいデザインになるはずです(笑)

まとめ

どうでしょうか。最近の投稿は、文字だけなのでちょっと物足りないですよね。なので、こういった便利なプラグインを使って見栄え良くしてあげてください。

そうすれば、ブログも賑やかになりますし、訪問してきたユーザーも、どういう記事なのか興味を持ちやすくなります。文字だけのリンクより、画像付きのリンク。これは、回遊率を上げるには絶対必要ですからね。

それでは、そろそろNewpost Catchでサムネイル付きの投稿を作れるプラグインについての記事を終わりたいと思います。ありがとうございました!

スポンサーリンク
レクタングル(大)広告
レクタングル(大)広告

シェアボタンを押して情報を共有しましょう。

フォローする