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

Elementor Pro特有のテーマビルダーでアーカイブページのレイアウトを作ることができます。

アーカイブページとは、カテゴリーページやタグページのことで、通常表示のされ方は1つのページにいくつもの投稿ページが連なる様に表示されます。

こちらの記事では以下の『ねこ』のカテゴリーページをサンプルに使用してテーマビルダーでのレイアウトを作り方を説明していきます。

テーマビルダーの初歩的な部分から学びたい方はElementor Pro 『テーマビルダー』の基本の記事もありますのでどうぞご覧くださいね!

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

Elementor Pro テーマビルダーでアーカイブページのレイアウトの作り方を動画でご覧になりたい方はこちらからどうぞ!

こちらは『ねこ』のカテゴリーページです。
『ねこ』のカテゴリーがついたページがこの様に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: ねこ』に変更されました。

タイトルから『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 >』という様に、数字・文字・記号全てが表示されます。

Pagination(ページネーション)についての詳しい情報は【Elementor Pro『ポストウィジェット』の使い方】の記事内の同セクションをご覧下さい!

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

『公開』をクリック

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

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】の設定の仕方』の記事をご覧ください。

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

TOFUラボ・アーカイブ記事に関するメンバー質問

TOFUラボ内のメンバーからの質問に

という質問がありました。

※上記のリンクにアクセスすると、その解決方法がご覧いただけます。

また、この他にもTOFUラボのメンバーによるQ&Aをまとめた『質問と回答』のページがありますので、サイト制作に迷った時の答えや、新しいヒントがもしかしたら見つかるかもしれません!

TOFUラボに入会するとサイト制作で何かしら困った時、自分で調べても限界がある時などラボ内で質問することができます。

たくさんの有識メンバーがその答えを共有してくれ、早期解決、より良いWeb制作に貢献できます!


この様に、テーマビルダーを使えばアーカイブページも簡単にかっこよく、統一感を持たせてサイトに表示させることができます。

ぜひElementor Pro・テーマビルダーのアーカイブも活用して見てはいかがでしょうか?

NocodeWebではこの記事の他に、テーマビルダーについて詳しく紹介した

の記事もありますので是非参考にしてくださいね!

Naomi Suzuki

このサイトを運営してるナオミです。エンジニア歴13年、海外在住歴20年。
WordPressの情報やハッキングを防ぐ脆弱性の情報と自分の海外での生活の一部を無料のメルマガで配信しています。

目次

コメントする

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

Elementorの無料ウェブサイトテンプレート
新規追加されました。

WordPressの最新情報が
毎週届く無料メールマガジン

DiviやElementorの情報だけでなく、脆弱性が見つかったプラグインやテーマのリストも毎週届きます。セキュリティの強化につながります。 

管理人のナオミが書くメルマガ
海外でエンジニア歴10年以上
DiviとElementorに精通