[実践編 Level 16.] WordPress(ワードプレス)|ページビルダープラグイン「Elementor」の使い方③ トップページにお知らせ記事を一覧で表示してみよう!

トップページに欠かせないのは、お知らせなどのNewsコンテンツだろう。

お知らせがあることによって、サイトの更新状況をユーザーに伝えることができるし、見せ方によっては経営者ブログなどを一覧にして表示させることも可能だ。

このレベルでは、WordPressの「投稿ページ」とそれを一覧表示させるプラグインを使って攻略を進めていきたいと思う。

Sydneyのテーマを使ったデモサイトを公開するので、参考にしてほしい:

https://www.dammy.wordpress-quest.com/

※サイトの内容は攻略が進むごとに随時変わるのでご了承願いたい。
基本的にデモサイトのカスマイズは、
当サイトで記載してある方法以外は使っていない。

投稿ページを一覧表示してくれるプラグイン「WP Show Posts」

ここでは、下記の参考画像ようなお知らせ一覧を目指したいと思う。

投稿ページを作成してみよう

最初のほうのレベルでも紹介したように、WordPress(ワードプレス)のページコンテンツには「固定ページ」と「投稿ページ」の二種類が存在する。

用途によって使い分けるのだが、「固定ページ」はトップページでも設定したように、更新日などの日付が関係ない静的なページの作成に適している。

今回は、公開日や更新日などが関係してくるお知らせなどのページを作成したいので「投稿ページ」を使ってコンテンツを作成しよう。

「投稿ページ」を作成する流れは「固定ページ」の作成方法とほぼ同じやり方となる。

先ずは、「ダッシュボード」→「投稿」→「新規追加」と進もう。
 
 

投稿ページの編集画面が表示されるので、タイトルと文章を入力したら、右側の公開メニューを設定しよう。

公開設定

先ずは、一番上の「ステータスと公開状況」から設定していこう。

「公開状態」では、記事のステータスを設定できる。

とりあえず下書きで編集したときなどは。「非公開」にしておけば、一般ユーザーからは表示されないようになる。

パスワード保護は、その記事のページにアクセスするときにパスワードを聞かれるので、パスワードを知らないと入れない。

「公開」では、記事をいつ公開するのかが設定できる。

ここでは、公開予定だけではなく、過去の日付を入れることも可能だ。

記事の一覧を日付順に表示させているときなどは、ここの日付を変更すれば順位が変わる。

「投稿フォーマット」は上級者向けの設定なので、「標準」のままでOK。

「レビュー待ち」は複数の編集者でサイトを作っている場合に、管理権限を持つ管理者の承認をもらってから投稿する機能だ。編集者が複数いるときなど、必要に応じて設定しよう。

「先頭に固定」は日付やその他の属性に関係なく、該当する記事を常に先頭にもってくる機能だ。重要なお知らせや、目立たせたい記事に設定しよう。

カテゴリーの設定

続いて記事のカテゴリーを設定しよう。

カテゴリーを新規で追加するには、「新規カテゴリーを追加」にカテゴリー名を記入して下の追加ボタンを押せばOKだ。

カテゴリーは記事のジェンルを区別したり一覧設定の際にも必要なのでしっかり設定しておこう。

タグの設定

タグの設定はコーポレートサイトなどではそこまで重要ではないが、SEO的には設定しておいたほうがいいだろう。

タグ=キーワードなので、記事の内容に合わせてキーワードを設定しよう。

タグを設定するには、キーワードを入力して「Enter」を押すだけだ。
 

アイキャッチの設定

アイキャッチは記事のアイコン画像みたいなものと考えてOKだ。

これは記事一覧などを作成するときに一緒に表示させる画像なので、見栄え的にもぜひ設定しておこう。

サイズは正方形をオススメする。最低でも750pxはあったほうがいいだろう。

アイキャッチを挿入するには「アイキャッチ画像を設定」から画像を選ぼう。

抜粋の設定

抜粋とは記事一覧の際に表示される本文の内容となる。

ここになにも記入しない場合は、記事の冒頭部分が自動的に表示されるので、必要に応じて設定しよう。

ディスカッションの設定

ここでは、コメントやピンバックなどの設定ができる。

必要に応じてチェックを入れよう。

コメントのチェックを外さない場合は、記事の下にコメントを入力するフォームが表示される。

投稿の属性の設定

ここでは投稿ページのフォーマットを選択できる。

固定ページのときと一緒で、1カラムのサイトを目指すならサイドバーが表示されないように「No sidebar」にしておこう。

ただ、お知らせのページのみサイドバー有りにしたい場合は、「デフォルトテンプレート」のままにすればサイドバーが表示される。

設定が終わったら、右上の「公開する」ボタンを押して保存しよう。

投稿ページを一覧表示させるプラグイン「WP Show Posts」

投稿ページの一覧をトップページに表示させるには、PHPコードをいじる必要があるが、初心者にはハードルが高すぎる。

そこで、今回もプラグインを使って対応したい。

使うプラグインによって見え方や動作が異なるので一概には言えないが、個人的にオススメのプラグインは「WP Show Posts」だ。

このプラグインのいいところは、日本語の記事などでもタイトルや抜粋を問題無く表示してくれて、なおかつレイアウトも綺麗なところだ。

プラグインによってはレイアウトが崩れたり、タイトルが枠をはみ出したりと、なかなか上手くいかないのだが、「WP Show Posts」はその辺は」きちんと表示してくれる数少ないプラグインと言えるだろう。

インストールしたら、ダッシュボードのメニューに「WP Show Posts」の項目が追加させるので、「新規追加」を選択しよう。

WP Show Postsの設定

「WP Show Posts」は日本語に対応しているので、設定画面はとてもわかりやすくできている。
投稿タイプ」= 投稿ページか固定ページの表示を選べる。投稿ページを表示させるには「post」を選ぼう。

分類」= ここではどの分類で表示させるのか選べる。カテゴリーのほかにタグなども選べる。ここでは「category」を選ぼう。

分類項目」= 先ほど投稿の追加ページで作成したカテゴリー名を選ぼう。

ページあたりの投稿数」= 記事をいくつ表示するのか選べる。あまり多いとサイトが長くなってしまうので、3〜6ぐらいが適切かと思う。

カラムの設定

カラムの設定では、一列に何個の記事を表示させるのか選べる。

ここは自由に設定してOKだが、数が少ないほど表示が多きなるので、3以上がオススメだ。

ちなみに、スマホなど画面のワイドが小さくなると自動的に1列表示になる。

その下の「カラムの間隔」では記事同士の空きを調整できる。ここはデフォルトの数値でも問題ないだろう。

 
 

画像の設定

ここではアイキャッチ画像のサイズなどの調整が可能だ。

Elementorを使っている場合は画像の高さや幅は自動で調整させるので、記入しなくてOKだ。

画像の配置は「中央」、画像の位置は好みで問題無い。

 

コンテンツの設定

コンテンツでは一覧で表示させるテキスト部分の設定が可能だ。

ここの設定も好みで構わない。「Title element」はタイトルの大きさを決められるがあまり大きいと見た目が悪いので「h5」ぐらいが丁度いいだろう。

「コンテンツの種類」は下記を参考にしてほしい。

 
ちなみに、こちらの参考画像では、左が投稿ページの「抜粋」にテキストを設定した場合で、右が「抜粋」になにも設定していない場合だ。

「コンテンツの種類」を抜粋に選択しても、抜粋が無い場合は本文が適用されるので注意しよう。

メタ情報設定

メタ情報の設定では、投稿者名や日付などの設定が可能だ。

表示させたい要素にチェックをいれよう。

詳細設定はとくにいじる必要ないので、右の「更新」ボタンを押して設定を完了しよう。

ElementorでWP Show Postsを設置しよう

WP Show Postsの設置は「ショートコード」で設定可能だ。

WordPress(ワードプレス)には「ショートコード」という便利な機能があって、コードを記載した箇所にプラグインで設定した内容を呼び出すことができるぞ。

Elementorに移る前に、WP Show Postsのショートコードをコピーしておこう。

ショートコードは、先ほどのWP Show Postsの画面右側にあるぞ。

 
 

ショートコードをコピーしたらElementorでトップページを編集しよう。

Elemetorのウィジェット一覧のなかから「ショートコード」のウィジェットを選択して、ウィジェット追加エリアにドラッグしよう。

左側にショートコードを記入するボックスが表示させるので、先ほどのWP Show Postsのショートコードをペーストしよう。

すると、画面に設定したWP Show Postsの内容が表示されるはずだ。

次にタイトルと区切り線を入れてみよう。

ウィジェットから「見出し」を選んで、WP Show Postsのショートコードウィジェットの上にドラッグしよう。

続いて区切り線を入れてみよう。

ウィジェットから「区切り線」を選択して、先ほどの「見出し」と「WP Show Posts」の間にドラッグしよう。

見出しと区切り線の間の空きを調整してみた。

区切り線ウィジェットの上マージンを「-15」に設定している。

最後に、上のカラムとの距離が近すぎるので、空きを作りたいと思う。
今回作成したカラムを選択して、詳細画面から上マージンに40と打ち込もう。
カラムの詳細画面には、カラムを選択したときに表示される水色のタブの真ん中のアイコンをクリックするか、Navigatorのセクションを切り換えればいけるぞ。
ちなみに、単純に空きを広げるだけなら、ウィジェットから「スペーサー」を選んで。空きを作りたい場所にドラッグしてもらうでもOKだ。

最後にカラムの幅を少し調整しよう。

ここは好みで問題ないが、WP Show Postsは設定幅に対して自動で拡大縮小するので、900pxぐらいがちょうどいいとは思う。
以上で「WP Show Posts」プラグインを使っての投稿一覧表示が完了した。
 投稿一覧を表示させるのは「WP Show Posts」を使おう
 表示する項目の設定は「WP Show Posts」の設定から
 「WP Show Posts」を表示させるにはショートコードを使おう
表示する種類では固定ページも表示できたり、新規で別カテゴリーのリストを作れば違う投稿の一覧も表示できるので、上手く使い分けてみよう。
では、冒険者諸君、GOOD QUEST !!