サイト制作をしていく中で、レイアウトを変えたいと思ったことはありませんか？
WordPressを立ち上げて少したった頃…
自分のトップページが大変なことになっている事に気がつきました。
全ての記事が一覧になっていたんですよね。
記事タイトル一覧ではなく。
記事の一覧。
ツラツラと記事が新着順に並んでいるんです。
トップページなのになんて見にくいんだ！！！
え？何これ？こんなものなの…？？
と調べてみた所、使用しているテーマのXeory Baseはデザインも機能もシンプルで、カスタマイズ前提の為トップページも実にシンプル…というかテンプレート的なものは設定がない。。。
自分でカスタムして作ってね！！という事の様です…
なのでトップページをもっと見やすくする為にカスタマイズする事にしました。
使い方など、忘れないうちに備忘録として残しておきたいと思います。
Page Contents
プラグインでトップページを作成する
トップページをカスタマイズすると言っても、既にある記事一覧のトップページに手を加えるのではなく、新規の固定ページを作成し、をれをトップページとして表示させます。
トップページの作成には、「Page Builder by SiteOrigin」と「SiteOrigin Widgets Bundle」の2つのプラグインを使用しました。
プラグインをインストールして有効化する
・Page Builder by SiteOrigin
ウィジェット（パーツ）を組み合わせて、ページのデザインを作成するプラグイン
・SiteOrigin Widgets Bundle
Page Builder by SiteOriginだけでは使えるウィジェットが限定されている為、その他の高度なウィジェットを追加して使うことができるプラグイン
インストールして有効化しましょう。
プラグインの設定
有効化が完了すると、ダッシュボードの「設定」内に「ページビルダー」、「プラグイン」内に「SiteOrigin Widgets」という項目が追加され、クリックすると設定画面になります。
ページビルダーの設定は、そのままで問題ありません。
SiteOrigin Widgetsの設定では、使用したいウィジェットを「Active」にします。
ページの作成
今回は固定ページでトップページを作成するので、ダッシュボードの「固定ページ」→「新規追加」から作成していきます。
ページビルダータブに切り替える
プラグインの有効化が完了すると、投稿や固定ページの入力画面に「ページビルダー」タブが追加されています。
列を追加する
例えば、その列を3つに区切りたい場合は3カラムと入力し、「設定」→「挿入」をクリックします。
3カラムの列、2カラムの列、1カラムの列をそれぞれ追加してみました。
スパナのアイコンでそれぞれの列を編集、複製、削除ができ、その隣のアイコンで列の上下移動が可能です。
好きなウィジェットを追加する
【新着記事一覧を表示する】
1カラムの列を挿入します。
ウィジェットを配置する枠をクリックすると、濃い青色に選択されます。
それから「ウィジェットを追加」をクリックします。
それを選択して配置します。
これで新着記事一覧が設置されました。
プレビューにて確認してみてください。
ウィジェットにカーソルを合わせると右上に編集、重複、削除のメニューが表示されます。
【カテゴリー別新着記事一覧を表示する】
ウィジェットを追加するところから説明します。
「Newpost Catch」を選択します。
ウィジェットが挿入されたら、「編集」を選択します。
タイトル：カテゴリー別記事一覧のタイトル、カテゴリー名などを記入
サムネイルの設定：挿入画像のサイズの設定
投稿件数：表示したい記事の件数
特定のカテゴリーを指定して表示：※IDを入力
※IDは、カテゴリー別のIDを調べます。下記に記載しています。
全て記載したら「終了」を選択します。
これでカテゴリー別新着記事一覧が設置されました。
ーーーーーーーーーーーーIDの調べ方ーーーーーーーーーーーー
ダッシュボード→「投稿」→「カテゴリー」を選択します。
カテゴリーの編集画面を表示させます。
その画面URLの真ん中ほどに、「ID=◯」と記載されています。
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ページを公開する
ページが出来上がったら、分かりやすいタイトルを付けて保存し、公開しましょう。
今回は固定ページタイトルをHOMEとしました。
作成したページをトップページに設定する
ダッシュボードの「設定」→「表示設定」を開きます。
「固定ページ」にチェック→「ホームページ」で作成したページタイトル（ここではHOMEとしています）を選択→「変更を保存」をクリックで設定が完了です。
サイトのトップページで表示されているか確認してみてください！
まとめ
WordPressを立ち上げてふとした時に、トップページが見にくい！事に気がつく方は私だけではないはず。
「Page Builder by SiteOrigin」と「SiteOrigin Widgets Bundle」の2つのプラグインを使うだけで超絶初心者でも好みのトップページを作成することができます！
トップページが見にくいと気がついた時からのザワつき感が、これでようやくスッキリです！
簡単なので、トップページが気になり出したらカスタマイズしてみてはいかがでしょうか。
