Elementor Pro テーマビルダーでアーカイブページのレイアウトの作り方

Elementor Pro特有のテーマビルダーでアーカイブページのレイアウトを作ることができます。
アーカイブページとは、カテゴリーページやタグページのことで、通常表示のされ方は１つのページにいくつもの投稿ページが連なる様に表示されます。
こちらの記事では以下の『ねこ』のカテゴリーページをサンプルに使用してテーマビルダーでのレイアウトを作り方を説明していきます。

Elementorのことをもっと学びたい人は、どうぞElementorの使い方完全ガイドを見てください。
様々なElementorに関する情報がまとめられています。

こちらは『ねこ』のカテゴリーページです。
『ねこ』のカテゴリーがついたページがこの様に１列になって表示されています。

テーマビルダー・Archiveの編集ページへの行き方

画面左側の『テンプレート』の中の『Theme Builder』をクリックします。

画面右上の『Try It Now』をクリックします。

するとこちらのテーマビルダーのページに行きますので、画面左側のバーの中の『Archive』にポインターが触れると左側に出てくる＋ボタンをクリックします。

するとこの様にテンプレートの『ライブラリ』が表示されますが、今回のサンプルでは自分でレイアウトを作るため、画面右上の×ボタンをクリックします。

するとこちらのテーマビルダーのアーカイブページの編集画面に行きます。
画面左上のウィジェットに、アーカイブページ用のウィジェットが以下の３つ表示されています。

• Archive Title
• Archive Post
• Author Box

Archive Titleウィジェット

　『Archive Title』ウィジェットをドラッグ＆ドロップで挿入します。

Preview Settingsで実際のカテゴリーページを表示させ編集する

すると、デフォルトで画面左上に『Archives』というタイトルが表示されます。
こちらをPreview Settingsでこのアーカイブページの編集でカテゴリーページの『ねこ』を表示させて編集を行いたいと思います。
画面左下の『設定』をクリックします。

『Preview Settings』が上記画面の様に『Preview Dynamic Content as/ Recent Posts』となっているので『Recent Posts』の左側の▼をクリックします。

出てひたボックスの中の『カテゴリー Archive』を選択します。

『カテゴリー Archive』を選択するとデフォルトで『すべて』になっているので『すべて』の右側の▼をクリックすると検索バーが出るので何か１文字以上入力、またはキーワードを入力し出てきた一覧がら該当するカテゴリーを選択します。

『APPLY & PREVIEW』をクリックします。

すると先ほど『Archives』と表示されていた部分が『Category: ねこ』に変更されました。

タイトルから『Category』を消す方法

コンテンツタブの『タイトル』の『Archive Title』をクリックします。
すると上記画面の様に設定に『Include Context / はい』となっています。

『Include Context』を『いいえ』にすると『ねこ』の手前にあった『Category:』が表示されなくなります。

Archive Postウィジェット

『Archive Post』ウィジェットをArchive Titleの『ねこ』の下に挿入します。

するとこの様に『ねこ』のカテゴリーのページが上記画面の様に表示されます。
※尚、こちらはデフォルトです。

以下でレイアウトの編集の参考例をいくつか紹介します。

カラムの配列を変更する

左側のコンテンツタブの『カラム』が『３』に設定されているのを『４』に変更してみます。

するとこの様に、カラムの配列が４つになります。

画像の位置を変更する

例えば『画像の位置』を『左』に変更すると、

この様に先ほどまで画面下に表示されていた文字はなくなり画像だけの表示になりました。
これは画像と画像の間にスペースがなくなってしまったから表示されない状態です。

Image Width (画像の幅）

『Image Width』（画像の幅）がデフォルトでは100%の値になっているので、値を小さくすると上記画面の様に左側にページタイトルなどの文字が表示されます。

更に『カラム』を『２』にすると、この様に更に表示が見やすくなります。

Pagination（ページネーション）

『Pagination』（ページネーション）とは、ページの下部などに表示されるページめくりの数字やアイコンのことです。

Numbers

デフォルトでは上記画像の様にこの『Numbers』になっています。
こちらは数字のみの記載です。

Previous / Next

『Previous / Next』は数字ではなく、文字と記号で『< Previous Next >』と記載されます。

Numbers+Previous / Next

『Numbers+Previous / Next』は『< Previous 1 2 Next >』という様に、数字・文字・記号全てが表示されます。

こちらの記事では全ての機能の説明は割愛しますが詳しい編集の方法を後日別の記事にて紹介をしていきたいと思います。

テーマビルダーのアーカイブページを公開する

画面左下の『公開』をクリックします。

Display Condition

すると、『Display Condition』の設定画面にいきますので『ADD CONDITIONS』をクリックします。

すると上記画面の様に『INCLUDE/ All Archives』と表示されます。
こちらは『全てのアーカイブページを先ほど作ったテンプレートのレイアウトで表示させる』ということです。
こちらのサンプルではその設定のまま『SAVE & CLOSE』をクリックします。

Display Conditionでは例えばアーカイブページの特定のカテゴリーにのみテーマビルダーのテンプレートを適用させるなど更に細かい設定も可能になります。
詳しくは『Elementor Pro 【Display Condition】の設定の仕方』の記事をご覧ください。

こちらは実際のサイトでの『ねこ』のカテゴリーページを表示した時の動画です。

---

この様に、テーマビルダーを使えばアーカイブページも簡単にかっこよく、統一感を持たせてサイトに表示させることができます。
ぜひElementor Pro・テーマビルダーのアーカイブも活用して見てはいかがでしょうか？