Elementor ProでWordPressの投稿一覧ページテンプレートをカスタマイズする方法（フルチュートリアル）

ある ワードプレス 真ん中。記事一覧ページ(記事カテゴリーページやタグアグリゲーターページとも呼ばれる）は、通常次のように分類される。 アーカイブページ タイプのページがあります。このようなページのデフォルトのスタイルは、ほとんどの場合、現在のごかんけいせいぼおんその結果、柔軟性に欠け、個々のニーズを満たさないスタイルになってしまう可能性がある。この記事では エレメンタル・プロ テンプレート作成、要素追加、スタイル調整、表示条件設定のステップを含む、カスタム記事一覧ページテンプレートを作成します。

まず、なぜカスタム記事一覧ページなのか？

デフォルト ワードプレスの記事一覧ページとはいえオートメーションしかし、そのスタイルや機能は非常に基本的なものであることが多く、個々のニーズを満たすことは難しい。参考までに エレメンタル・プロ のパワフルな機能で、あなたのビジネス・ニーズにお応えします。

自由設計ページレイアウト、色、フォント、余白、その他のスタイルを完全にカスタマイズできます。
ユーザーエクスペリエンスの向上ページの構造を最適化し、訪問者が探しているものを見つけやすくする。
個人用テンプレートカテゴリ、タグ、その他のページごとに異なるスタイルテンプレートを指定できます。
動的コンテンツ表示: Elementorのダイナミックコンテンツ機能で記事データをより柔軟に表示。

II.準備作業

始める前に、以下の準備をしておく必要がある：

1.ワードプレスをインストールする サポート エレメンタ テーマ（推奨） こんにちはエレメンタール (件名）。

2.インストールとアクティベーションエレメンタル・プロプラグイン(テンプレート機能は無料版ではサポートされていません）。

3.投稿カテゴリー、タグ、その他の関連コンテンツを準備する。表示するコンテンツがあることを保証する。

Elementor Proを使ってカスタム記事一覧ページ・テンプレートを作成する

1. テンプレート作成画面へ

ワードプレスのバックエンドにログインし Elementor → テンプレート → 新しいテンプレートの追加.

テンプレートタイプで アーカイブ(アーカイブされたテンプレート）。

テンプレートの名前、例えば "カスタム投稿リストページ "を入力して テンプレート作成 ボタン。

2. プリセットのテンプレートから選ぶか、ゼロからデザインするか

Elementorは記事一覧ページをデザインする2つの方法を提供します：

プリセットテンプレートの使用::

Elementorには、初心者がすぐに始められるように、様々な美しい記事カテゴリーテンプレートが組み込まれています。
クリック "プリセットテンプレートのライブラリ"をクリックし、好きなテンプレートを選んで"スティック"はテンプレートをインポートできる。

カスタムデザイン::
- ゼロからデザインしたい場合は、白紙のキャンバスに自由にレイアウトしてください。

3. コアウィジェットの追加

デザインをカスタマイズするにしても、プリセットのテンプレートを修正するにしても、次の2つのウィジェットは記事一覧ページを作るために必須です：

アーカイブタイトル

Elementorエディタで アーカイブタイトル ウィジェットをページにドラッグ・アンド・ドロップする。

このウィジェットは、現在のカテゴリー、タグ、または「ニュース」や「商品」などのアーカイブページのタイトルを自動的に表示します。

スタイル設定では、タイトルのフォント、サイズ、色、間隔、その他のスタイルを自由に調整できます。

アーカイブ投稿

エディターで アーカイブ投稿 ウィジェットを作成し、ページにドラッグ・アンド・ドロップする。

このウィジェットは、デフォルトではグリッドレイアウトで、現在のカテゴリまたはタグの下にあるすべての投稿のリストを表示します。

設定パネルで表示スタイルをカスタマイズできます：
- オープニンググリッド、リスト、カードスタイル
- 1ページに表示される記事数1ページに表示される記事の数をコントロールします。
- 順番に並べる時間順、タイトル順、ランダム順。
- メタデータ投稿日、作者、カテゴリー、その他の情報の表示/非表示。
- ページング機能ページングを有効にして、より多くの記事を閲覧できるようにする。

4. ページスタイルの調整

Elementorは、あなたのページをパーソナライズするための豊富なスタイリングオプションを提供します：

背景とスペーシングレイアウトパネルで背景色や画像を設定し、内側と外側の余白を調整します。

タイトル・スタイルフォント、フォントサイズ、色などをカスタマイズし、ページスタイルがサイトのテーマと一致するようにします。

記事カードのスタイル::
- 投稿画像、タイトル、説明文のカスタムボーダー、シャドウ、ホバー効果。

記事カードのアニメーション効果を追加
- アニメーション効果を追加して、ユーザー体験を向上させる。

レスポンシブ最適化: Elementorのレスポンシブモードを使えば、デスクトップ、タブレット、モバイルでページのレイアウトを微調整し、異なるデバイスで完璧に表示させることができます。

IV.テンプレートの表示条件設定

デザインが完了したら、WordPressがどのページでテンプレートを使用するかを知るために、テンプレートの表示条件を設定する必要がある。

Publishボタンの右側にある矢印をクリックします。セレクション 表示条件(表示条件）。

表示条件の選択::
- このテンプレートをすべての記事カテゴリーページに適用させたい場合は、次のように選択します。 すべてのアーカイブ.
- 特定のカテゴリーページにのみ表示させたい場合は カテゴリー別アーカイブそしてカテゴリー名を指定する。
- タグ付けされたアーカイブページでは、次のように選択できます。 タグアーカイブ.

設定の保存クリック 保存して閉じる テンプレートを保存して公開する。

V. ベストプラクティスとヒント

テンプレートの再利用デザインしたテンプレートをグローバルテンプレート他のページで再利用するのも簡単だ。
読み込み速度の最適化画像を圧縮し、コンテンツをスリム化することで、スムーズなページ読み込みを可能にします。
動的コンテンツElementorの動的タグ関数を使ってリアルタイムで更新されたデータを表示する。
カテゴリー別グループ表示カテゴリーごとに異なるテンプレートを作成し、プレゼンテーションのニーズに応えます。
インタラクティブ・エフェクトの追加CSSアニメーションとホバー効果で、ページをより生き生きと魅力的に。

まとめ

とおす エレメンタプロ Elementor Proを使えば、コードを書くことなく、ウィジェットをドラッグ＆ドロップするだけで、WordPressの投稿一覧ページのレイアウトやスタイルを簡単にカスタマイズし、動的なコンテンツ表示を行うことができます。Elementor Proのパワーは、カテゴリーページやタブに、より柔軟でパーソナライズされたデザインオプションを提供し、あなたのウェブサイトをよりプロフェッショナルで魅力的なものにします。

お問い合わせ
チュートリアルが読めない？無料でお答えします！個人サイト、中小企業サイトのための無料ヘルプ！	カスタマーサービス WeChat
① 電話：020-2206-9892
② QQ咨询：1025174874
三 Eメール：info@361sale.com
④ 勤務時間: 月～金、9:30～18:30、祝日休み