Elementor ProのリカーリンググリッドでWordPressのカテゴリーページを作成する方法

WordPressでは、円形グリッドや円形回転を使用することで、美しくパワフルなカテゴリーページを作成することが可能です。この記事では、これらのツールの使い方を詳しく説明します。

I. なぜ円形グリッドや円形ローテーションを使ってカテゴリーページを作るのですか？

サイクリックグリッドとサイクリックローテーションは、現代のウェブデザインにおいて非常に便利なツールです。グリッドや回転形式でページ上にコンテンツを表示することができ、美的にも実用的にも優れています。カテゴリページを作成するために使用することで、記事、製品、画像などの異なるカテゴリのコンテンツを動的に表示することができ、ユーザーエクスペリエンスを向上させることができます。

主な強みは以下の通り：

• ダイナミック・ディスプレイ： 分類されたコンテンツを自動的に表示するため、手作業による更新の手間が省けます。
• 柔軟性： レイアウト、スタイル、コンテンツ表示は簡単に調整できます。
• ユーザー・エクスペリエンス： より良いビジュアルとナビゲーション体験を提供し、ユーザーのサイト滞在時間を増やします。

II.カテゴリーページの作成手順

このガイドでは、例を使ってエレメンタル・プロ環状格子(ループグリッド) を使って、記事のカテゴリを表示するカテゴリページを作成します。ここでは記事を例にしていますが、製品や他のコンテンツタイプにも同じアプローチが使えます。

1.ループグリッドの設定とドラッグ＆ドロップ

まず、コンテンツ・カテゴリーを表示するために、ページ上に円形のグリッドを設定する必要があります。

ループグリッドをドラッグ＆ドロップします：

• WordPressのダッシュボードにログインします。
• 新しいページを作成するか、既存のページを編集します。
• Elementorエディタでループグリッドウィジェットをクリックし、ページのキャンバスにドラッグ＆ドロップします。

テンプレートの種類を選択します：

• 左側のパネルで、「テンプレートタイプの選択」ドロップダウンメニューを見つけます。

• 選択 "分類学「をテンプレートタイプとして指定します。WooCommerceがインストールされている場合、"製品分類「オプション

テンプレートを作成します：

• テンプレートの作成ボタンをクリックします。これにより、動的コンテンツを追加できるカテゴリページの新しいテンプレートが作成されます。

2.動的タグによるテンプレートの構築

テンプレートがカテゴリの内容を自動的に表示するためには、ダイナミックタグを使用する必要があります。これにより、カテゴリ名や説明などの情報を手動で入力する必要がなくなります。

タイトルウィジェットを追加します：

• カテゴリ名を表示するために、タイトルウィジェットをテンプレートにドラッグ＆ドロップします。

動的タグを使用します：

• タイトル」ウィジェットの「設定」パネルで、「タイトル」フィールドの隣にある「ダイナミック・ラベル」アイコンをクリックします。

• ドロップダウンメニューから「ファイルタイトル」を選択します。こうすることで、手動で入力しなくても、テンプレートが自動的に現在のカテゴリー名を表示します。

不要なテキストを削除します：

• 通常、WordPressは自動的にカテゴリ名を"ポストなどこれらの無関係なテキストを削除するには、ヘッダーウィジェットの設定に行き、"コンテキストを含める "オプションを見つけ、"いいえ "に設定します。

カテゴリの説明を追加します：

• カテゴリの説明を表示するには、テキストエディタウィジェットを使用します。

• テキストエディタウィジェットのコンテンツフィールドで、ダイナミックラベル「アーカイブの説明」を選択すると、現在のカテゴリの説明が自動的に表示されます。

3.カテゴリー項目をクリック可能に

ユーザーエクスペリエンスを向上させるために、カテゴリーページの項目をクリック可能にし、ユーザーがカテゴリーのタイトルや画像をクリックすることで、直接カテゴリーの詳細ページに移動できるようにすることができます。

コンテナをクリック可能にします：

• テンプレートを編集するときは、左上のアイコンをクリックしてコンテナを選択します。

• コンテナの設定パネルで、"追加オプション「パート

• HTMLタグのドロップダウンメニューから、「リンク」オプションを選択します。

• LinkフィールドでDynamic Labelアイコンをクリックし、"Archive URL "を選択します。これにより、コンテナ全体がリンクになり、ユーザーがクリックすると、適切なカテゴリーページにジャンプします。

個々の要素をクリック可能にします：

• タイトルや画像だけをクリック可能にして容器全体ではありませんウィジェットの"エレメント「タブで"リンク「フィールド

• ダイナミック・ラベルのアイコンをクリックし、「アーカイブURL」を選択します。こうすることで、タイトルや画像部分のみがリンクに変更されます。

4.不要なカテゴリの除外

場合によっては、カテゴリーページから特定の不要なカテゴリー（例えば「未分類」）を除外することが望ましい場合があります。以下はその手順です：

クエリ設定を開きます：

• ループするグリッドまたは回転するウィジェットのいずれかを選択します。
• 左側のパネルで、「クエリ」セクションを開きます。

手動でフィルター条件を選択します：

• Filter By］ドロップダウンメニューで、［Manual Selection］を選択します。

• 除外」オプションをクリックし、除外したいカテゴリー名を入力します（例：「ブログショートコード > FAQ」）。

設定を保存します：

• 除外設定が完了したら、「保存」ボタンをクリックします。

III.カテゴリーページへの画像の追加

カテゴリーページに画像を追加すると、ページのビジュアルアピールが大幅に向上します。各カテゴリーに画像を追加したい場合は、以下の手順で行ってください：

1.画像ウィジェットの追加

画像ウィジェットを追加します：

• 画像ウィジェットをテンプレートの適切な場所にドラッグ＆ドロップします。

ダイナミックラベルを使用して画像を選択します：

• 画像]ウィジェットの[コンテンツ]タブで、[画像]フィールドの横にある[ダイナミックラベル]アイコンをクリックします。

• ドロップダウンメニューから選択してください。WooCommerceの商品画像フィールド".これにより、各カテゴリーに関連する画像を自動的に表示することができます。

ダイナミックフィールドの設定

• ダイナミックフィールドで鍵のアイコンをクリックし、ドロップダウンメニューからカテゴリ画像に関連するフィールドを選択します。

保存してプレビュー

• 設定が完了したら、テンプレートを保存してページをプレビューし、カテゴリー画像が正しく表示されていることを確認してください。

カテゴリーページのデザインと最適化

基本的なカテゴリーページを作成した後、ページのデザインと機能をさらに最適化することで、ユーザーエクスペリエンスを向上させることができます。

1.ページスタイルの設定

Elementorのスタイリングツールを使って、ページのレイアウト、色、フォント、その他のビジュアル要素をカスタマイズしましょう。これらの設定を調整することで、ページがサイト全体のスタイルと一貫していることを確認してください。

2.レスポンシブデザイン

カテゴリページが様々なデバイス（携帯電話、タブレット、パソコンなど）でうまく表示されるようにしましょう。Elementorのレスポンシブデザインのページをプレビューして調整するツールです。異なるデバイスが表示されます。

3.パフォーマンスの最適化

軽量な画像とクリーンなコードを使用して、ページの読み込みを速くしましょう。読み込み速度が速いと、ユーザー体験が向上するだけでなく、検索エンジンのランキングも向上します。

はんけつをくだす

円形グリッドや円形ローテーションを使用してWordPressのカテゴリページを作成すると、サイトのコンテンツが整理されるだけでなく、ユーザーにより良い閲覧体験を提供できます。ダイナミックタグ、クリック可能なコンテナ、画像の最適化などの機能により、美しさと機能性を兼ね備えたカテゴリーページを簡単に作成できます。