固定ページにサムネイル付き投稿記事一覧を表示

「最近は画像のない記事リストが増えました」という記事を見つけ、私もそうだったのでカテゴリー別サムネイル表示に再挑戦してみました。
私の場合は、Topページでカテゴリーを説明して、その下にカテゴリーの投稿リストを表示させていました。もちろんプラグインですよ＝List category posts
それを画像付きで、抜粋記事があり、1列あるいは複数列で表示させることを目指します。

プラグインを使わないで

やろうとしましたが、いきなり Pause error の連発で、ファイルが壊れてしまいブログの表示すらできない状態になりました。

さすがに今回は困り果てて、誰かに助けてもらうしかないと思っていたところ、wordpress から壊れたファイルだけをUPロードできると分かり、何とか修復することができました。

やっぱりプラグインで⤵

私のような初心者にはやっぱりプラグインが最高ですね！

Newpost Catch

ほとんどの人が Newpost Catch を使っているみたいで、私も有効化してやってみました。ウィジェットと本文ではブログの投稿順リストはうまくいきますが、カテゴリー別リストは化けてしまいうまくいきません。

このプラグインは、Twenty Seventeen ではテストされていなくて、皆さんが書いている設定画面も出てきません。

2017年10月まではウィジェットで使っていましたが、フロントページを抜粋記事一覧に変更したことで、ウィジェットの長さが抜粋記事一覧より かなり長くなったため、リスト一覧は削除しました。

たどり着いた WP Show Posts

このプラグインの良いところは表示させたい項目を書き込むと、ショートコードと関数を作ってくれるところです。カテゴリーが5個ある場合は5種類のショートコードを作り、リストを表示したい場所に１個づつ貼り付けします。最新記事を表示させたい場合は、分類を未記入にします。

設定は、投稿・カラム・画像・コンテンツ・メタ情報を好みに応じて入力していきます。

こんな感じです。詳細設定は未記入でＯＫです。

あとはショートコードを本文の表示させたい場所に入れるだけです 。
このようにして作ったTopページはこちらからどうぞ。

抜粋文はエディッターの抜粋文をそのまま表示してくれます。
何も書いてない時は、本文の冒頭から表示文字数をカットしてくれます。

フォントの装飾は今のところやっていませんが、あまり融通が利かないみたいです。
気が向いたらCSSをいじってみます。

まとめ

何度も失敗を重ね、やっぱりプラグインで成功しました。phpをコピペして変更してみるのですが、必ず問題が発生します。できるだけ安全に改善する方が良いですね。

「あわせて読みたい記事」を追加

参考サイトはブロジャニ、記事下に「あわせて読みたい記事」を表示させてアクセスアップを狙うプラグインWordPress Related Posts」です。

決めてになったのは、↓

私の運営するブログでは、細かい調整を何度か繰り返したはいいものの、全く関連性のない記事ばかりが表示されることが多かったんです…一瞬でこれまでの悩みが解決しました。

この数行でWordPress Related Postsは間違いないプラグインであると判断しました。実際使いやすいです。

追記　2017.11.25

プラグインでAMP（モバイル用ページの高速化）に対応したところ、あわせて読みたい記事も表示され、 Related Postsとダブるのでこちらを削除しました。

CSSを改良してカスタムCSSに追加　2017.8.15

/* 画像の周りに細い線　*/
.wp-show-posts-image img {
   padding: 0px;
   border: solid 0.6px #ccc;
   background-color: #fff;
}

/* 画像の右側と文字の間隔 */
.wp-show-posts-image.wpsp-image-left {
   float: left;
   margin-right: 0.6em;
}

/* Title文字の大きさ */
.wp-show-posts .wp-show-posts-entry-title {
   font-size: 18px;
   line-height: 20px;
   margin-bottom:5px;
}

少しきれいになりました。

現在のTopｐページは、カテゴリー別に全記事を載せていますが、長くなるのでトグルで開閉できるようにしています。トグルの使い方は「ブログテーマをライオンメディア・１カラムへ変更」で詳しく書いています。