はじめに
今回は、トップページのコンテンツ作成の後編です。
「最新の投稿」機能を使って投稿記事をトップページに表示するための設定を行っていきます。
これが終われば完成まであと一歩なので頑張りましょう！
完成イメージの以下の部分を作成していきます↓
具体的には「イベント」「ニュース」「レポート」の3つのカテゴリーを作って、それぞれのカテゴリーごとトップページに表示されるように設定をしていきます。
作業手順はこちらです。
少しボリュームが多いように感じられますが、ほぼ同じ作業の繰り返しなので頑張って進めていきましょう！！
1.投稿記事の新規カテゴリー追加
まずはじめに、投稿記事用のカテゴリーの作成を行います。
管理画面のメニュー「投稿」から「カテゴリー」を選択します。
名前に「イベント」、スラッグに「event」と入れて「新規カテゴリーを追加」を押す。
(同様に名前「ニュース」、スラッグ「news」と、名前「レポート」、スラッグ「report」も作っておきましょう。)
2.投稿記事の作成
次にトップページに表示するための投稿記事をいくつか作っていきます。
管理画面のメニューで「投稿」→「新規投稿を追加」をクリックします。
今回のサンプルサイトの場合は、タイトルに「住宅ローン相談会のお知らせ」と入れて、段落に「〇月〇日より無料で相談会実施中です。お気軽にお越しください！」と入れておきます。
そして画面右側にあるメニューで「アイキャッチ画像を設定」し、その下の方にあるカテゴリーで今回の場合は「イベント」に☑をいれます。
同じ手順で、サンプル用に以下の記事をそれぞれ作成しておきます。
（タイトル/説明文/カテゴリー）
- インテリア相談会開催/〇月〇日～〇月〇日の期間中はご予約がなくてもインテリアコーディネーターとの相談が可能です。/イベント
- 現場見学会を開催中です/〇月〇日10：00～実際に建設中の現場見学会を行います。/イベント
- 20XX年12月1日 年末年始休業について/20XX年12月28日～20XX年1月3日までは年末年始休業とさせていただきます。/ニュース
- 20XX年7月25日 お盆・夏季休業について/20XX年8月14日～8月16日まで夏季休業とさせていただきます。/ニュース
- 20XX年8月20日 施工事例をアップしました/20XX年7月に完成した住宅の施工事例をアップしました。/ニュース
- 着工開始しました！/20XX年4月1日XX市にて着工を開始した現場の様子です/レポート
- お引き渡しが完了しました！/20XX年6月1日着工から約5カ月でお引き渡しが完了しました！/レポート
3～5.各投稿記事をトップページに表示
情報量が多いため、イベント情報、新着情報、現場レポートの設定方法をそれぞれまとめてあります。
以下のボタンをクリックして開き、作業を進めてください。
イベント情報の投稿記事を表示する方法
それでは、先ほど作成したイベントカテゴリーの投稿記事をトップページに表示するための設定を行っていきたいと思います！
完成イメージはこちらです↓
早速はじめていきましょう！
まず、イベント情報部分の背景色を変えたいのでカバーブロックを利用して設定していきます。
ブロックに追加を押して「カバー」を選びます。
背景色を選択します。今回は事前に設定してあるキーカラー（明）を選択しました。
背景色を全幅にしたいので、メニューバーから「配置」をクリックし「全幅」を選択します。
ブロックを追加で段落を選択し「イベント情報」と入れます。
右側の設定画面でタイポグラフィを「30px」サイズでマージンの上下を「0px」にします。
次に、ブロックの追加を押して「区切り」を選択します。
設定はスタイル「デフォルト」、色「白」、サイズ「マージン0px」で保存します。
その下にブロック追加で段落を入れて「EVENT」と入力し、設定で文字サイズを「20px」、パディングを「上下0px」にします。
するとこんな感じになると思います。
次に、カテゴリー“イベント”で作成した投稿記事が表示されるよう設定していきます。
ブロックを追加で「最新の投稿」を選択します。
現段階では画像がとても見づらいのですが、投稿記事が以下のように表示されると思います。
右側のメニューで色々いじって細かい設定を行っていきます。
まず、投稿日を表示する場合は「投稿日を表示」を「ON」にします。
投稿画面で設定したアイキャッチ画像を表示したいので「アイキャッチ画像を表示」を「ON」にします。
文字の大きさなども任意で設定してください（サンプルは20pxに設定しました）。
画像の位置は「中央揃え」にしておきます。
項目数をカラムは今回「3」にしておきます。
ここで大事なのが、カテゴリーの設定部分にこの箇所で表示したいカテゴリーを入れる事です。
”イベント”と入れて出て来た候補をクリックします。
入れないと投稿記事がカテゴリー関係なくすべて表示されてしまうので忘れず設定しましょう！
そしてブロックを横並びにするために、リストビューからグリッドビューに変更します。
ここまでの設定により、トップページは以下のようになっていますが、テキストなどが見づらいため、カスタムCSSを追加します。
管理画面に戻ってメニュー「外観」より「カスタム」を選択し、追加CSSを開きます。
そこに、以下のコードをコピペして「公開」を押します。
.whiteblock li {
background-color:#f5f5f5;
}
.wp-block-latest-posts.is-grid li{
padding:20px 10px 60px 10px;
background-color: #f5f5f5;
}するとこんな感じになります。↓
さきほどより見やすくなりましたね。
それでは次に、ボタンを作っていきます。
ブロックを追加して「ボタン」を選択します。
配置を「中央揃え」にしてテキストを追加部分に「もっと見る >>」と入れます。
右側のメニューでスタイル「輪郭」を選択し、文字サイズを「18px」にしておきます。
ここまでの作業でこんな感じになりました。
イベント情報一覧のページを作る
最後に、ボタンを押したときに遷移するイベント情報一覧のページを作ります。
固定ページ自体はchapter4のヘッダー作成のヘッダーメニューの編集（追加と削除）で作ったものを使っていきます。
管理画面のメニューから「固定ページ」を選択します。
一覧が表示されるので、「イベント情報」にカーソルをあわせて「クイック編集」を押してください。
スラッグに「イベント情報」と記載されていると思うので、それを「event」に変更して「更新」を押します。
次に、「編集」ボタンをクリックして編集画面を開きます。
本文にブロック追加で「最新の投稿」を選択します。
先ほどと同じように右側メニューで設定をおこのみで変更していき保存します。
今回のサンプルでは投稿コンテンツを「ON」、投稿全文に☑を入れて、アイキャッチ画像を「表示」、カテゴリー「イベント」、画像の配置「左寄せ」で設定を行い、こんな感じになりました。
リンクボタンを押して遷移先固定ページのスラッグを入れておけばボタンを押した時にリンクに飛ばす事ができます。
新着情報の投稿記事を表示する方法
新着情報ゾーンもイベント情報と同じように”最新の投稿”機能を利用してトップページへの表示設定を行っていきます。
完成イメージはこちらです↓
まずはタイトルですが、イベント情報で作成したものをそのままコピーして使いまわします。
イベント情報、区切り線、eventの３つをコピーして貼り付け、文字をそれぞれ新着情報とNEWSに変更します。
そしてその下にブロックを追加し、「最新の投稿」を選択します。
そのままだとすべてのカテゴリー（イベント・ニュース・レポート）の投稿が表示されてしまうため、右側のメニューでカテゴリーを”ニュース”にしておきます。
次に、投稿記事を画面の中央に配置したいので、投稿記事を選択しメニューから「グループ化」を選択します。
そして右側のメニューで「横並び」を選択し、「中央揃え」をクリックします。
こんな感じになったでしょうか。
次はボタンを作っていきます。
ブロックを追加して「ボタン」を選択します。
”項目の揃え位置を変更”を「中央揃え」にしてテキストを追加部分に「もっと見る >>」と入れます。
右側のメニューでスタイル「輪郭」を選択し、テキストの色「キーカラー（暗）」、背景「#FFFFFF」、文字サイズを「18px」にしておきます。
ここまでの作業でこんな感じになりました。
新着情報一覧のページを作る
次に、ボタンを押したときに遷移する新着情報一覧のページを作ります。
管理画面のメニュー→「固定ページ」→「新規固定ページを追加」を押します。
タイトル部分に「新着情報」と入力し、ブロック追加で「最新の投稿」を選択します。
右側メニューからカテゴリーを「ニュース」に設定するとニュース記事のみが表示されます。
その他の設定はお好みで変更し、保存します。
今回のサンプルでは項目数を5から「30」に変更しただけなので、こんな感じです。
固定ページ一覧に戻って、クイック編集でスラッグを「新着情報」から「news」に変更して「更新」を押しておきましょう。
そして新着情報のボタン→リンクボタンを押して遷移先固定ページのスラッグ（news）を入れておけばボタンを押した時にリンクに飛ばす事ができます。
これで新着情報ゾーンの設定は完了です！
現場レポートの投稿記事を表示する方法
現場レポートゾーンもこれまでと同じように”最新の投稿”機能を利用してトップページへの表示設定を行っていきます。
現場レポートゾーンはイベント情報ゾーンと比べ、表示している情報の数が違うだけなので、設定方法はほとんど同じです。
完成イメージはこちら↓
それでは始めていきましょう！
まず、イベント情報部分の背景色を変えたいのでカバーブロックを利用して設定していきます。
ブロックに追加を押して「カバー」を選びます。
背景色の選択で、キーカラー（明）を選択しました。
背景色を全幅にしたいので、メニューバーから「配置」をクリックし「全幅」を選択します。
タイトルは、イベント情報で作成したものをそのままコピーして使いましょう。
ブロックを追加で「段落」を選択し、そこにイベント情報、区切り線、eventの３つをコピーして貼り付け、文字をそれぞれ現場レポートとREPORTに訂正します。
そしてその下にブロックを追加し、「最新の投稿」を選択します。
画像がとても見づらいですが、投稿記事が以下のように表示されると思います。
右側のメニューで細かい設定を行っていきます。
まず、現段階ではすべてのカテゴリー記事が表示されてしまっていると思うのでカテゴリーで「レポート」を選択し、現場レポート記事のみを表示させます。
そして、投稿画面で設定したアイキャッチ画像を表示したいので「アイキャッチ画像を表示」を「ON」にします。
画像の位置は「中央揃え」にしておきます。
項目数をカラムは今回「2」にしておきます。
こまでの設定により、トップページは以下のようになっていますが項目２つが左に寄ってしまっているため、これもカスタムCSSで少し手を加えます。
管理画面に戻ってメニュー「外観」より「カスタム」を選択し、追加CSSを開きます。
そこに以下のコードをコピペで追加して「公開」を押します。
.wp-block-latest-posts.is-grid {
justify-content:center;
}するとこんな感じになります。↓
ここまで来ればあとひといきです！
ボタンを作っていきます。
ブロックを追加して「ボタン」を選択します。
配置を「中央揃え」にしてテキストを追加部分に「もっと見る >>」と入れます。
右側のメニューでスタイル「輪郭」を選択し、文字サイズを「18px」にしておきます。
下に少しスペースを空けたいのでブロックを追加で「スペーサー」を選択し、プレビューを見ながらちょうどいい大きさにしてください。
ここまでの作業でこんな感じになりました。
現場レポート一覧のページを作る
ボタンを押したときに遷移するイベント情報一覧のページを作ります。
管理画面のメニューから「固定ページ」を選択します。
一覧が表示されるので、「現場レポート」にカーソルをあわせて「クイック編集」を押してください。
スラッグに「現場レポート」と記載されていると思うので、それを「report」に変更して「更新」を押します。
次に、「編集」ボタンをクリックして編集画面を開きます。
本文にブロック追加で「最新の投稿」を選択します。
先ほどと同じように右側メニューで設定をおこのみで変更していき保存します。
今回のサンプルでは投稿コンテンツを「ON」、投稿全文に☑を入れて、アイキャッチ画像を「表示」、カテゴリー「レポート」、画像の配置「左寄せ」で設定を行い、こんな感じになりました。
リンクボタンを押して遷移先固定ページのスラッグを入れておけばボタンを押した時にリンクに飛ばす事ができます。
2.追加CSSでスマホ版の画面を整える
現場レポートとイベント情報の固定ページのカスタムCSSに以下のコードを書き加えておくと、スマホで見た時の画面が良い感じに調整されます。（そのままだと画像と文字が横並びのままで個人的にあまり好ましくないため）
@media screen and (max-width: 600px){
li { display: grid;}
.wp-block-latest-posts__featured-image.alignleft{text-align: center;}
img.attachment-thumbnail.size-thumbnail.wp-post-image{width: 60%;}
a.wp-block-latest-posts__post-title{text-align: center;}
.wp-block-latest-posts li>a{color: #485469; font-weight: bolder;}
}まとめ
今回は、「最新の投稿」機能を使って投稿記事をトップページに表示する設定を行いました。
これまでの作業により、トップページはここまで完成しました！
次回はフッターの作成を行います。
>>Lightningを使って企業サイトを作ろう【chapter8】フッター編
