Newpost Catchを使って固定ページに新着記事(最新記事)を表示させる方法まとめ

s-man-791049_1920a

どうもNon太(@LoveWifeLives)です。

最近このLove Wife LifeのブログTOPページをカスタマイズしたんですが、その時に新着記事(最新記事)を表示させるために「Newpost Catch」というプラグインを使いました。

この「Newpost Catch」を使いこなすための解説ページは色々とあったのですが、一つのページだけを見て完了というわけにはいかず、色々と組み合わせた結果自分用のカスタマイズが出来たので、備忘録も兼ねて残しておこうと思います。

プラグインをダウンロードして有効化するまでは割愛しますので、すでに「Newpost Catch」が有効化されている前提でお話しを進めます。

現在はストークというテーマを利用しているため、今現在表示されているトップページにNewpost Catchは使用していません。
スポンサーリンク

ショートコードで表示できる優れもの

「Newpost Catch」の何が凄いって、プラグインをダウンロードして後はショートコードを本文中に記述するだけで新着記事(最新記事)が表示されるようになること。

そのショートコードはこれ↓↓↓

[npc]
※本来ショートコードは[(全角)ではなく、[(半角)での表示が必要ですが、ここでは説明のために全角の[]を表示させてます。

このショートコードを本文中に記述するだけで、最新記事が一覧で表示されるようになるんです。

そう考えると、Newpost Catchってかなり嬉しいプラグインですよね。

▼で、[npc]と本文中に書いて実際に表示させたのがこちら。s-2016-04-14_18h26_20

いや、まぁ…確かに表示されたのはされたんだけど…サムネイル画像は小さすぎるし、画像と本文が横並びになってないし、という表示でした。

これでは見栄えが悪すぎるのでカスタマイズが必要ですね。

ショートコードを追加するだけで表示を変えられる

実はこのプラグイン、[npc]の後ろに色々なショートコードを付け足すだけで表示のされ方が変わるんです。

例えば、

▼[npc width=”50″ height=”50″]と書いた場合s-2016-04-14_18h35_36

先ほどよりもサムネイル画像が大きくなりました。「width」は横幅で「height」は高さです。

Newpost Catchのサムネイル画像の基本値が10 × 10だから、ショートコード【width=”50″ height=”50″】と書いてあげることで画像のサイズが変わるんですね。

▼[npc width=”100″ height=”60″]と書いた場合s-2016-04-14_18h38_00

あれっ?100 × 60という長方形のサイズ比にしたはずなのに正方形で表示されてる…。

この現象は、こちらの記事(Newpost Catchのサムネイル画像の縦横比がおかしくならないようにする / iLOG)に書かれてますが、Word Press管理画面の【設定>>メディア】と進んだ先にある「サムネイルのサイズ」の設定値に依存するとのこと。

じゃあこの数値を変えたらいけるのか?

と言うことで、Word Press設定のサムネイルのサイズを幅100、高さ60に変えてみました。(僕の環境では幅150、高さ150で設定されていた。)

s-2016-04-14_18h45_59

残念ながらこの数値を変えただけでは、ショートコードで設定した縦横比の画像にはならず何も変わりませんでした。(正方形表示のまま)

サムネイル画像が長方形の綺麗な形で表示されることを望んでましたが、まぁ正方形でいいやということで、画像の大きさは【width=”100″ height=”100″】で行くことにしました。

▼[npc width=”100″ height=”100″ date=”1″]と書いた場合s-2016-04-14_18h58_54

“date”が日付の有無なので、タイトルの末尾に日付も付くようにしました。

日付まで表示されたのはいいのですが、とにかくなんかダサいですよね。

画像の横にタイトルが並んでいないのが一番ダサく見えるので、ここからは実際にCSSを追記することで調整してみました。

ショートコードの一覧は、開発者のブログ記事(【いろんなところにサムネイル付き最新記事を表示できます】WordPressプラグイン「Newpost Catch」の新機能「ショートコード」の使い方)の中に書かれてるので、参考に見てみるのもいいですよ。

スポンサーリンク

実際に追記したCSS

上記で説明した通り、新着記事(最新記事)が表示されるのは良いものの綺麗とは言えない並び方だったため、実際にCSSを追加しました。

追加するのはスタイルシート(style.css)です。

アルバトロスを使っている場合は子テーマにスタイルシート(style.css)があるので、そこに追記したコードがこちら。

場所はどこでもOKですが、子テーマに最初から書かれているコードのすぐ下に書いて問題ないです。

このコードはこちらの記事(サムネイル画像付きの最近の投稿を一覧表示する – Newpost Catchの使い方 / WordPress Cpllege)を参考に、そのままのコードを記載しています。

▼CSS追記後に、[npc width=”100″ height=”100″ date=”1″]と本文中に書いた場合s-2016-04-14_19h38_11

一発で画像とタイトルが横並びになって、表示が綺麗に揃いました。

次に、タイトルの下に引かれたアンダーラインが邪魔だなと思ったので、CSSコードを追加しました。

黄色く表示されているところを追記します。

▼これを書くことでリンクの下線が消えました。s-2016-04-14_19h41_57

次に、投稿した日付をもう少し大きく表示させて色も変えたいなぁと、また追記します。

font-sizeを【x-small⇒small】に、font-weightを【400⇒600】、colorを【#666699⇒#adb5bf】に変更しました。

このあたりはかなり自分の好みが入っているので、好きな大きさや色に変えていけばいいと思います。

▼こんな風に、日付が大きくグレーっぽい色に変わりました。s-2016-04-14_19h47_57

あともう少し。記事と記事の間に点線を入れたいなと。

追記したのはこちら。

点線なので【dotted】、【solid】にすれば点線じゃなく直線が引かれます。

▼記事と記事の間に点線が引かれたs-2016-04-14_19h52_48

最後にサムネイル画像の下が5pxとなっていたので、それを0にして行間を少しだけ詰めました。

これで少しだけですが、行間が詰まって見栄えが良くなったように思えました。

記述したCSSコードは以上で、本文中に[npc width=”100″ height=”100″ date=”1″]を記載することで、現在のこのブログのトップページのような表示がされるようになります。

諦めたCSS

サムネイル横にある「●」

トップぺージを見てもらえれば分かりますが、新着記事(最新記事)の左側に「●」が付いています。

この「●」は不要だったので本当は消したかったんです。

その際は【list-style-type: none;】だとか【list-style-image:none;】を記述すれば良いと言われてるものの、それを記述しても消えず、さらにそれが効かない場合は【display: block;】も併せて記述すれば良いと書かれているページがありましたが、それでも消えませんでした。

なので、今回は「●」を消すのは諦めました。

記事本文の表示

これは諦めたというか、なくていいと思いました。

一度調べて、こちらの記事(Newpost Catchを使って記事一覧を表示する順番を変えたり記事の概要を表示するためのTips / まったりこんふぃでんしゃる)に書かれているコードを記述してみたのですが、うまくいかなかったのでもういいやと思いました。

実際記事本文の最初の数十文字が表示されるのはパソコンで見ている時のみで、スマホなどのモバイルの時は表示されないようなので。

Newpost Catchのカスタマイズ / まとめ

かなり手こずりましたが、何とか形にはなりました。

誰かテーマがアルバトロスでも、リストの「●」を消せるコードが分かる方がいらっしゃれば教えて下さい!w

Newpost Catchを使ってウィジットではなく記事本文中に新着記事(最新記事)を表示させようとしている方で、同じように行き詰った人が少しでも参考にしてもらえれば幸いです。

Newpost Catchを開発された方のブログはこちらs-2016-04-14_14h04_46

Newpost Catchで参考になった記事

サムネイル画像付きの最近の投稿を一覧表示する – Newpost Catchの使い方 / WordPress College

【いろんなところにサムネイル付き最新記事を表示できます】WordPressプラグイン「Newpost Catch」の新機能「ショートコード」の使い方 / 今村だけがよくわかるブログ

【ショートコードで簡単にできる】WordPressプラグイン「Newpost Catch」で動的に同じカテゴリの最新記事をサムネイル付きで表示する方法 / 今村だけがよくわかるブログ

こちらの記事も一緒にどうぞ!

TOPページを大幅変更するために行ったカスタマイズについて

Shortcodes UltimateプラグインはCSSが苦手な人にもホントに重宝する!

スポンサーリンク

4 件のコメント

  • Non太さんの記事、大変参考にさせていただいております(^ ^)

    こちらの新着記事一覧と同様のものを私のウェブサイトへ導入したいな…と考えているのですが、こちらの記事でのCSSコードで完成するものと、現在のトップページにて設置されているものとを比較すると、現在のものの方がかなり洗練されているなーと感じます。

    かなり突き詰められたのではないでしょうか??

    現在のトップページに使用されているコードを是非ご教示いただいたのですが、いかがでしょうか??

    よろしくお願いいたします(^ ^)

    • タナカさんこんばんは。コメントありがとうございます。
      出来るならばお教えしたいんですが…実はこれは、WordPressのテーマをストークにしてるから簡単に出来ているカスタマイズなんです。笑
      こちらの記事で紹介しているように、ストークを導入すればウィジットであとはちょこちょこっとやるだけで、
      トップページは僕のような感じに出来ますよ。(ハミングバードでも出来ますが、アルバトロスはできない仕様になってます。)
      コードでは僕は限界だったので…期待に応えられずすみません。

      • ご返信ありがとうございます!
        リンクの記事、読ませていただきました。

        私は現在、ハミングバードなので、設定できそうです。
        トップページとする固定ページのバナーなどを作り込んでいる最中ですので、そちらが完成したら早速導入してみたいと思います!

        ありがとうございます(^ ^)

        • いえいえ、僕もまだまだ勉強中なので。。。
          少しでもお役に立っていたら良かったです♪

  • コメントを残す

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