トップページにお知らせ記事を一覧で表示してみよう!トップページに欠かせないのは、お知らせなどのNewsコンテンツだろう。お知らせがあることによって、サイトの更新状況をユーザーに伝えることができるし、見せ方によっては経営者ブログなどを一覧にして表示させることも可能だ。このレベルでは、WordPressの「投稿ページ」とそれを一覧表示させるプラグインを使って攻略を進めていきたいと思う。Sydneyのテーマを使ったデモサイトを公開するので、参考にしてほしい:https://www.dammy.wordpress-quest.com/※サイトの内容は攻略が進むごとに随時変わるのでご了承願いたい。当サイトで記載してある方法以外は使っていない。Posts」ここでは、下記の参考画像ようなお知らせ一覧を目指したいと思う。投稿ページを作成してみよう最初のほうのレベルでも紹介したように、WordPress(ワードプレス)のページコンテンツには「固定ページ」と「投稿ページ」の二種類が存在する。用途によって使い分けるのだが、「固定ページ」はトップページでも設定したように、更新日などの日付が関係ない静的なページの作成に適している。今回は、公開日や更新日などが関係してくるお知らせなどのページを作成したいので「投稿ページ」を使ってコンテンツを作成しよう。「投稿ページ」を作成する流れは「固定ページ」の作成方法とほぼ同じやり方となる。投稿ページの編集画面が表示されるので、タイトルと文章を入力したら、右側の公開メニューを設定しよう。上の「ステータスと公開状況」から設定していこう。「公開状態」では、記事のステータスを設定できる。下書きで編集したときなどは。「非公開」にしておけば、一般ユーザーからは表示されないようになる。パスワード保護は、その記事のページにアクセスするときにパスワードを聞かれるので、パスワードを知らないと入れない。「公開」では、記事をいつ公開するのかが設定できる。ここでは、公開予定だけではなく、過去の日付を入れることも可能だ。記事の一覧を日付順に表示させているときなどは、ここの日付を変更すれば順位が変わる。「投稿フォーマット」は上級者向けの設定なので、「標準」のままでOK。「レビュー待ち」は複数の編集者でサイトを作っている場合に、管理権限を持つ管理者の承認をもらってから投稿する機能だ。編集者が複数いるときなど、必要に応じて設定しよう。「先頭に固定」は日付やその他の属性に関係なく、該当する記事を常に先頭にもってくる機能だ。重要なお知らせや、目立たせたい記事に設定しよう。続いて記事のカテゴリーを設定しよう。カテゴリーを新規で追加するには、「新規カテゴリーを追加」にカテゴリー名を記入して下の追加ボタンを押せばOKだ。カテゴリーは記事のジェンルを区別したり一覧設定の際にも必要なのでしっかり設定しておこう。タグの設定タグの設定はコーポレートサイトなどではそこまで重要ではないが、SEO的には設定しておいたほうがいいだろう。タグ=キーワードなので、記事の内容に合わせてキーワードを設定しよう。タグを設定するには、キーワードを入力して「Enter」を押すだけだ。アイキャッチの設定アイキャッチは記事のアイコン画像みたいなものと考えてOKだ。これは記事一覧などを作成するときに一緒に表示させる画像なので、見栄え的にもぜひ設定しておこう。サイズは正方形をオススメする。最低でも750pxはあったほうがいいだろう。アイキャッチを挿入するには「アイキャッチ画像を設定」から画像を選ぼう。抜粋とは記事一覧の際に表示される本文の内容となる。ここになにも記入しない場合は、記事の冒頭部分が自動的に表示されるので、必要に応じて設定しよう。ディスカッションの設定ここでは、コメントやピンバックなどの設定ができる。必要に応じてチェックを入れよう。コメントのチェックを外さない場合は、記事の下にコメントを入力するフォームが表示される。投稿の属性の設定ここでは投稿ページのフォーマットを選択できる。sidebar」にしておこう。お知らせのページのみサイドバー有りにしたい場合は、「デフォルトテンプレート」のままにすればサイドバーが表示される。設定が終わったら、右上の「公開する」ボタンを押して保存しよう。投稿ページの一覧をトップページに表示させるには、PHPコードをいじる必要があるが、初心者にはハードルが高すぎる。そこで、今回もプラグインを使って対応したい。このプラグインのいいところは、日本語の記事などでもタイトルや抜粋を問題無く表示してくれて、なおかつレイアウトも綺麗なところだ。Posts」はその辺は」きちんと表示してくれる数少ないプラグインと言えるだろう。Posts」の項目が追加させるので、「新規追加」を選択しよう。Posts」は日本語に対応しているので、設定画面はとてもわかりやすくできている。投稿ページか固定ページの表示を選べる。投稿ページを表示させるには「post」を選ぼう。ここではどの分類で表示させるのか選べる。カテゴリーのほかにタグなども選べる。ここでは「category」を選ぼう。先ほど投稿の追加ページで作成したカテゴリー名を選ぼう。記事をいくつ表示するのか選べる。多いとサイトが長くなってしまうので、3〜6ぐらいが適切かと思う。カラムの設定カラムの設定では、一列に何個の記事を表示させるのか選べる。ここは自由に設定してOKだが、数が少ないほど表示が多きなるので、3以上がオススメだ。ちなみに、スマホなど画面のワイドが小さくなると自動的に1列表示になる。その下の「カラムの間隔」では記事同士の空きを調整できる。ここはデフォルトの数値でも問題ないだろう。画像の設定ここではアイキャッチ画像のサイズなどの調整が可能だ。Elementorを使っている場合は画像の高さや幅は自動で調整させるので、記入しなくてOKだ。画像の配置は「中央」、画像の位置は好みで問題無い。コンテンツの設定コンテンツでは一覧で表示させるテキスト部分の設定が可能だ。ここの設定も好みで構わない。element」はタイトルの大きさを決められるがあまり大きいと見た目が悪いので「h5」ぐらいが丁度いいだろう。「コンテンツの種類」は下記を参考にしてほしい。ちなみに、こちらの参考画像では、左が投稿ページの「抜粋」にテキストを設定した場合で、右が「抜粋」になにも設定していない場合だ。「コンテンツの種類」を抜粋に選択しても、抜粋が無い場合は本文が適用されるので注意しよう。メタ情報設定メタ情報の設定では、投稿者名や日付などの設定が可能だ。表示させたい要素にチェックをいれよう。詳細設定はとくにいじる必要ないので、右の「更新」ボタンを押して設定を完了しよう。Postsの設置は「ショートコード」で設定可能だ。WordPress(ワードプレス)には「ショートコード」という便利な機能があって、コードを記載した箇所にプラグインで設定した内容を呼び出すことができるぞ。Postsのショートコードをコピーしておこう。Postsの画面右側にあるぞ。ショートコードをコピーしたらElementorでトップページを編集しよう。Elemetorのウィジェット一覧のなかから「ショートコード」のウィジェットを選択して、ウィジェット追加エリアにドラッグしよう。Postsのショートコードをペーストしよう。Postsの内容が表示されるはずだ。次にタイトルと区切り線を入れてみよう。Postsのショートコードウィジェットの上にドラッグしよう。続いて区切り線を入れてみよう。Posts」の間にドラッグしよう。見出しと区切り線の間の空きを調整してみた。区切り線ウィジェットの上マージンを「-15」に設定している。最後に、上のカラムとの距離が近すぎるので、空きを作りたいと思う。今回作成したカラムを選択して、詳細画面から上マージンに40と打ち込もう。カラムの詳細画面には、カラムを選択したときに表示される水色のタブの真ん中のアイコンをクリックするか、Navigatorのセクションを切り換えればいけるぞ。ちなみに、単純に空きを広げるだけなら、ウィジェットから「スペーサー」を選んで。空きを作りたい場所にドラッグしてもらうでもOKだ。最後にカラムの幅を少し調整しよう。Postsは設定幅に対して自動で拡大縮小するので、900pxぐらいがちょうどいいとは思う。Posts」プラグインを使っての投稿一覧表示が完了した。Posts」を表示させるにはショートコードを使おう表示する種類では固定ページも表示できたり、新規で別カテゴリーのリストを作れば違う投稿の一覧も表示できるので、上手く使い分けてみよう。QUEST管理人兼グラフィックデザイナー。職場で理不尽にもウェブ担当を任され、独学でWordPressを使ったサイト構築を学ぶ。以來、自社サイトを始め、数多のサイトをWordPressで作り上げる。その時に学んだ経験と失敗から、初心者にも分かりやすいサイトを立ち上げようと一念発起。QUEST|初心者冒険者のワードプレス攻略サイト.。