こんにちは、”はふぃ”です。

以前、WordPressで投稿した記事を一覧表示するプラグインとしてPost Gridを紹介しました。

このプラグインを使ってトップページのレイアウトを実装していたのですが、以下のような問題が発生していました。

• 仕様上、タイトルが長い場合に省略されてしまい全文表示できない
• アップデートの影響なのか、表示崩れすることがある

特に一つ目の問題が深刻で、以下のようにタイトルからどんな内容なのか全くわからない状態になってしまっていました。

そこで他のプラグインに変更しようと思い、見つけたのがWP Show Postsです。

今回はWP Show Postsを使って記事一覧を表示する手順について、実際に設定しながら説明したいと思います。

WP Show Postsについて

WP Show PostsはPost Gridと同様に記事一覧のレイアウトを作成するためのプラグインですが、Post Gridほど詳細な設定ができるわけではありません。

そのためレイアウトの細かな調整はcssを使って自分で行うこととします。

WP Show Postsの使い方

プラグインをインストール＆有効化するとサイドメニューに「WP Show Posts」の項目が追加されるので、「新規追加」をクリックします。

新しいリストを作成する画面になるので、まず「タイトル」を入力し設定に移っていきます。

投稿

「投稿」の項目では以下のようなことが設定できます。

• 投稿タイプ：一覧化するアイテムのタイプ
  • post：記事
  • page：ページ
• 分類：投稿タイプが”post”の場合にどのようなくくりでまとめるか
  • 選択しない：全記事
  • category：カテゴリーごと
  • post_tag：タグごと
  • post_format：？
• ページあたりの投稿数：１ページに何件投稿を表示するか

カラム

• カラム：一行に表示する投稿数
• カラムの間隔：投稿間の間隔

画像

一覧表示される投稿のアイキャッチ画像の設定です。

※ それぞれ項目名通りなので説明省略

コンテンツ

アイキャッチ画像（またはタイトル）の下に表示する内容に関する設定です。

• コンテンツの種類：”全文” or “抜粋” or “なし”
• 抜粋の長さ：コンテンツの種類が”抜粋”の際に表示する抜粋の最大文字数
• Title element：タイトル名に使用するhtmlタグ
• 「続きを読む」の文字：入力された文字が”続きを読む”リンクとして使用される（※ 空白の場合はリンクなし）
• Read more button class：上記の”続きを読む”リンクのclass名

※ 設定後

設定が完了したら、右側のメニューの「使用法」にある「ショートコード」をコピーし（後ほど利用します）、「公開」ボタンを押して公開状態にします。

トップページに反映

トップページに反映させるためにまず固定ページを作成します。

サイドメニューの「固定ページ > 新規追加」をクリックします。

固定ページで「ヴィジェット > ショートコード」で先ほどコピーしたショートコードを貼り付けます。

画面が完成したら「公開」ボタンを押して公開状態にします。

次にサイドメニューの「設定 > 表示設定」に移動します。

「ホームページの設定」という項目で「固定ページ」を選び、「ホームページ」を先ほど作成した固定ページのタイトルのものを選択します。

最後に「変更を保存」をクリックすればトップページへの反映の完了です！

デザインの調整

ここまでで記事一覧を表示することはできました。

しかし、冒頭で話したようにWP Show Postsは単純なレイアウトしか作成できません。

それでは画面として味気ないので、cssを使ってレイアウトのデザインを調整しようと思います。

トップページのcssを追加する方法

サイドメニューの「外観 > カスタマイズ」を選択します。

するとメニューやウィジェットを編集できる画面になるので、サイドメニューの「追加 CSS」をクリックします。

ここにcssを追加することでトップページのデザインを調整することができます。

※ ここに書いたcssは全ての画面に影響するので、注意してください！

右側のプレビュー画面はcssを追加しても「公開」ボタンを押すまで変化しない（動的ではない）ので、実際の画面でdeveloperツールを使って調整してからここに追加するようにしましょう。

ちなみにこのサイトで追加したcssは以下です。

/* ブロック表示 */
.wp-show-posts-columns .wp-show-posts-single:not(.wp-show-posts-masonry-block) {
  display: block;
}

/* 抜粋のフォントサイズ */
.wp-show-posts-entry-content p {
  font-size: 15px;
}

/* 記事と記事の間隔 */
.wp-show-posts-columns .wp-show-posts-inner {
  margin: 0 0 0px 10px !important;
}

/* 「続きを読む」ボタン */
a.wp-show-posts-read-more, a.wp-show-posts-read-more:visited {
  display: initial;
  padding: initial;
  border: initial;
  color: hsl( 123, 100%, 33% );
  font-size: 12px;
}

/* 「続きを読む」ボタン（hover時） */
a.wp-show-posts-read-more:focus, a.wp-show-posts-read-more:hover {
  border: initial;
  color: hsl( 123, 100%, 23% );
  background: initial;
}

/* 抜粋の一文目（挨拶文なので消す） */
.wp-show-posts-entry-content p:first-child {
  display: none;
}

結果

2019/05/07現在

まとめ

cssが使える人は、シンプルなプラグインを使って外観を作り、cssでデザインを調整する方が自由度も高いのでおすすめです！

↓ これからWordPressを始めようと思っている方はこちらもチェック！