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

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

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

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

テーマビルダーのページへの行き方・テンプレート・Theme Builder

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

『Try It Now』をクリック

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

Archiveの左側の+ボタンをクリック

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

テンプレートライブラリを閉じる

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

テーマビルダー・Archiveの編集画面

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

  • Archive Title
  • Archive Post
  • Author Box

Archive Titleウィジェット

『Post Title』ウィジェットの挿入

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

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

タイトルのデフォルト表示『Archives』

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

Preview Settings

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

Preview Settings/カテゴリーArchiveを選択

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

『ねこ』のカテゴリーを選択

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

『APPLY & PREVIEW』をクリック

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

タイトルが『Category: ねこ』に変更

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

タイトルを『ねこ』だけにする方法

タイトル表示を『ねこ』に変える方法・編集タブのタイトル『Archive Title』をクリック

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

設定の『Include Context』を『いいえ』に変更する

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

Archive Postウィジェット

『Archive Posts』を挿入

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

『Archive Posts』挿入後の表示画面

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

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

カラムの配列を変更する

カラム数の変更

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

カラム数を『4』にした時の表示画面

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

画像の位置を変更する

画像位置を『左』に変更

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

画像位置を『左』に変更した後の表示画面

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

Image Width (画像の幅)

Image Width(画像の幅)の値を変更

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

カラムを『2』に変更した後の表示画面

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

Pagination(ページネーション)

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

Numbers

『Pagination』について

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

Previous / Next

Pagination・『Previous/Next』

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

Numbers+Previous / Next

Pagination・『Numbers+Previous/Next』

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

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

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

『公開』をクリック

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

Display Condition

 Display Conditions・『ADD CONDITION』をクリック

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

『INCLUDE/ All Archives』でSAVE&CLOSE

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

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

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


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

目次

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

そのElementorの質問
実際に使ってる人に聞いてみませんか?

TOFUラボはElementorを使う人が集まるサロンです。
メンバーは170人を超えます。