細かいカスタマイズが嬉しい、グリッドレイアウトができるWordPressプラグイン「Content Views」

SEROの嫁です。
夫とニコ生で喋ったり、ブログに投稿したりしています。
2級ウェブデザイン技能士。

今年の頭にこのSTUDIO SEROのトップページを、記事をメインにしたデザインに変更しました。

STUDIO SEROトップ

このように記事のサムネイルがずらっと並んだ、いわゆる「グリッドレイアウト」というものですね。

今このサイトで使っているWordpressのテーマではこういうレイアウト機能が無かったのでどうしようかなーと思っていたら、ちょうどいいプラグインがあったので使わせてもらうことにしました。

インストールと有効化

プラグインの新規追加で「Content Views」と検索し、「今すぐインストール有効化」します。

使い方

有効化すると、ダッシュボードのメニューに「Content Views」の項目が追加されるので「新規追加」をクリックします。

新規追加

編集画面に移動するので、まずタイトルを付けます。自分が分かりやすいものでいいでしょう。

タイトル

Filter Settings

続いて「Filter Settings」タブで、表示させたい内容を設定します。

Filter Settings

Content type 投稿記事、または固定ページを選択
Common 「Include only」…表示させたい記事のID(指定しない場合は空白)
「Exclude」…除外したい記事のID(指定しない場合は空白)
「Limit」…表示する数(すべて表示する場合は空白)
Advance 投稿日順、カテゴリー別、キーワードなどの条件が指定できます

かなり細かく設定ができます。
カテゴリ別の表示やソートができるのは嬉しいですね。

 

Display Settings

Display Settings」タブでは、レイアウトの設定をします。

レイアウトには3種類あります。

Layout

Grid グリッド(格子状)レイアウト
Collapsible List 折りたたみ式リスト
Scrollable List コンテンツスライダー式リスト

レイアウトタイプ

このサイトで使っているのは「Grid」です。

LayoutとResponsive

Items per row」では1行に表示するサムネイルの数を指定できます。
また、「Responsive」ではモバイルとタブレットで表示した場合の数も設定可能。

その他の設定は以下の通り。

その他の設定

Format サムネイルとテキストの配置
Fields settings  タイトルや文章、タグなどの表示設定。サムネイルのサイズ指定も可能です。
Pagination  ページ送り表示の有無
Others リンク先を新しいタブで開くかどうかの設定

すべて英語表記ではありますが、設定はシンプルなのであまり迷うことはなかったです。

設定が終わったら、画面の一番上にあるショートコードを、表示させたいページに貼り付ければ完成です。
(テーマファイルに直接貼り付ける場合は右のコード)

ショートコード

このプラグインで特に良いと思ったのが、設定の途中でも「Show Preview」をクリックすればレイアウトのプレビューが見られるところ!

Show Preview

一口で「グリッドレイアウト」といっても、なかなか「これ!」というプラグインに今まで出会わなかったんですが、この「Content Views」はかゆいところに手がとどく良プラグインだと思います!

コメントを残す

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