ElementorとのWordPressのカテゴリごとにブログ投稿を表示する方法

公開: 2025-09-05

WordPressサイトを実行すると、さまざまな種類のブログ投稿を公開する可能性があります。チュートリアル、その他のニュースアップデート、製品レビュー、または個人的なストーリーなどもあります。しかし、すべてが混ざっている場合、読者がアーカイブページで探しているものを見つけるのは難しい場合があります。

そこでカテゴリが登場します。WordPressのカテゴリを使用すると、ブログ投稿をさまざまなセクションに整理できます。たとえば、旅行ブログには「アジア」、「ヨーロッパ」、「ヒント」などのカテゴリがあります。オンラインストアのブログでは、「製品ガイド」、「顧客ストーリー」、「更新」などのカテゴリを使用できます。

コンテンツをグループ化することにより、訪問者がサイトを閲覧しやすくなり、興味のある投稿のみを読みやすくなります。このブログ投稿では、Elementorプラグインを使用してWordPressのカテゴリごとにブログ投稿を表示する方法に関する詳細なガイドについて説明します。

なぜエレメンタル?

Why use Elementor to display blog posts by categories

Elementorは、WordPressで最も人気のあるページビルダーの1つであり、1,000万件以上のアクティブなインストールがあります。単一のコードを書くことなく、完全なデザインの自由を提供するからです。ドラッグアンドドロップエディターを使用すると、カスタムレイアウトを簡単に作成し、ブログの投稿を必要な場所に正確に配置できます。

したがって、複雑なWebレイアウトを作成するための最も簡単なソリューションを探しているコードなしのユーザーである場合、Elementorはリストの一番上にいる必要があります。 Elementorを使用するもう1つの大きな理由は、幅広いウィジェットと柔軟性です。ポストグリッド、投稿リスト、アーカイブなどのウィジェットを使用して、さまざまなスタイルのカテゴリごとにブログ投稿を表示できます。

この柔軟性は、ホームページの特定のカテゴリを強調したり、カテゴリベースのランディングページを作成したり、すべてコードに触れずに完全にカスタムブログアーカイブを設計できることを意味します。これが、Elementorプラグインを使用して、このチュートリアルのプロセスを説明する理由です。

WordPressのカテゴリ別のブログ投稿を表示する方法:ステップバイステップガイド

人々は通常、アーカイブページにカテゴリごとにブログ投稿を表示します。これを行う方法は複数あります。ただし、このためには、サイトに次のプラグインが必要です。

Elementor Lite
Elementor Pro

これらのプラグインがサイトで準備が整ったら、以下のプロセスを調べてみましょう。

方法1:カテゴリメニューの作成

この方法には、次のウィジェットが必要です。投稿ウィジェットを使用すると、ポストグリッドを作成します。その後、NAVメニューを使用して、カテゴリメニューを作成します。これにより、ユーザーはカテゴリを切り替えて投稿を探索できます。

  • 投稿
  • WordPressメニュー

ステップ01:テーマビルダーからアーカイブページを開く

前述のように、人々は通常、アーカイブページにカテゴリごとにブログ投稿を表示することを楽しんでいます。また、アーカイブページを作成するには、テーマビルダーが必要です。

テーマビルダーを開く方法をすでに知っていることを願っています。テンプレート>テーマビルダーに移動します。

Go to the Theme Builder

アーカイブオプションをご覧ください[新しいボタンを追加]をクリックして、アーカイブページを作成します。

Open an archive page editor

ステップ02:投稿ウィジェットをコンテナにドラッグアンドドロップする

投稿ウィジェットを見つけます。 Elementorキャンバスの目的のコンテナにドラッグアンドドロップします。

Drag and Drop the Posts Widget to Your Container

投稿ウィジェットが追加されると、ブログ投稿がデフォルトのレイアウトで表示されます。

Posts widget is added to the Elementor Canvas

ステップ03:投稿ウィジェットをスタイライズします

次に、投稿のレイアウトをカスタマイズして様式化して、必要に応じて見栄えを良くします。肌、タイポグラフィ、間隔、その他多くのオプションを変更しました。

Stylize the Posts Widget

ステップ04:カテゴリメニューを作成します

WordPressダッシュボードに移動します。外観>メニューに移動します。すでにメニューを持っている場合、心配はありません。

この場合、新しいメニューを作成する必要があります。 [新しいメニュー]オプションの作成をクリックします

Go to the WordPress Menu option

メニューの名前を書きます。次に、メニューの作成ボタンを押します

Write a name for the category

メニューに表示するカテゴリを選択します。その後、メニューに追加ボタンを押します

Select categories for the menu

カテゴリが右側に移動したことがわかります。ドラッグして、位置/階層を再配置できます。完了したら、 [メニューの保存]ボタンをクリックして、すべての変更を保存します。

Save the category menu

ステップ05:投稿ウィジェットにカテゴリメニューを表示する

Elementorで編集しているページに来てください。 WordPressメニューウィジェットを見つけます。投稿ウィジェットの上にドラッグアンドドロップします。

Display the Category Menu over the Posts Widget

メニューオプションの横に、少し前にバックエンドで作成したカテゴリメニューを選択します。メニューを保存するために使用した名前を選択してください。

カテゴリメニューは、すぐに投稿ウィジェットの上に表示されます。

Select the menu

ステップ06:カテゴリメニューをスタイライズします

コンテンツとスタイルのタブから、見栄えが良く、サイトのブランドアピールに合わせてカテゴリメニューを設計します。

Stylize your Category Menu

ステップ07:クエリ設定を設定します

投稿ウィジェットをカテゴリメニューにリンクする時が来ました。これを行うには、投稿ウィジェットを選択しクエリセクションを展開し、現在のクエリオプションを選択します。

これで、カテゴリオプションをクリックすると、ブログの投稿がそれに応じて変更されます。

Set Query Settings

ステップ08:条件を設定します

[パブリッシュ]ボタンの横にあるドロップダウン矢印アイコンをクリックします。リストから表示オプションを押します

Set Conditions for the displaying blog posts by categories

検索結果条件としてカテゴリを選択します。

Choose categories as the condition

状態を保存します。

Save the condition

ステップ09:カテゴリごとに投稿をプレビューします

プレビューページにご覧ください。カテゴリメニュー項目を1つずつクリックします。それに応じて投稿が変更されていることがわかります。

したがって、Elementorプラグインを使用して、WordPressのカテゴリごとにブログ投稿を作成および表示できます。

方法2:分類リストの使用

Elementorには分類リストウィジェットがあります。これにより、投稿アーカイブの上にカテゴリを追加し、ユーザーがカテゴリごとに投稿を探索できるようになります。以下のプロセスを確認してください。

ステップ01:テーマビルダーからアーカイブページを開く

少し前に示したように、あなたがすでにプロセスを知っていることを願っています。 WordPressダッシュボードにログインします。次に、テンプレート>テーマビルダーに移動します。

Go to the theme builder

[アーカイブ]オプションに移動し[新しいボタンの追加]クリックしてページを開きます。

Open an archive page

ステップ02:アーカイブ投稿ウィジェットをドラッグアンドドロップします

アーカイブ投稿ウィジェットを見つけます。 Elementorキャンバスにドラッグアンドドロップします。

Drag and Drop the Post Archive Widget

すべての投稿がキャンバスに表示されていることがわかります。

Posts are displayed on the canvas

さて、アーカイブの投稿ウィジェットをあなたに似合うような方法で様式化します。 2列のアーカイブ投稿セクションを作成しました。

Stylize the Archive Posts widget

ステップ03:分類リストウィジェットを追加します

分類リストウィジェットを配置する前に、アーカイブ投稿の上にコンテナを配置します。コンテナは、分類リストウィジェットを簡単に管理し、様式化できるためです。

Add a container to place the Taxonomy List widget

コンテナが追加されたら、分類リストウィジェットを見つけて、コンテナの上に置きます

Place the Taxonomy List widget

分類リストウィジェットが追加された後、このようなセクションが表示されます。これで、カテゴリを追加する必要があります。

Taxonomy List widget is added

ステップ04:カテゴリを追加します

カテゴリの追加は非常に簡単です。 [コンテンツ]タブ> [リスト]に移動します。ソースオプションの横には、ドロップダウンリストが表示されます。そこから、カテゴリを選択します

その後、アイテムを追加しますこれにより、必要な数のカテゴリを追加できるスペースが開きます。

Select the Category option

カテゴリの名前を書きます。次に、 Selectカテゴリの検索ボックスから、必要なカテゴリを入力します。たとえば、Gutenbergを入力してカテゴリを取得して選択しました。

注:ブログの投稿を作成しながら、バックエンドにカテゴリを既に保存していることを確認してください。それ以外の場合は、SELECTカテゴリの検索ボックスに入手することはありません。

Select and add a category

必要な数のカテゴリを追加できます。 4つのカテゴリを追加しましたが、見た目は良くありません。あなたはあなたのページの魅力に従ってそれらを様式化する必要があります。

Categories added

ステップ05:カテゴリを様式化します

時間を節約するには、スタイリライゼーションのプリセットを選択できます。

Select a preset for the categories

[スタイル]タブからさらに様式化し、下の画像で表示できるように、タブに似たように見せることができます。

Stylize the Taxonomy Lists widget

ステップ06:条件を設定し、ページを公開します

必要なスタイリゼーションが完了したら、表示条件オプションに移動します

Go to Display Conditions

条件のカテゴリを選択します。

Select Categories for the condition

状態を保存します。

Save the Categories condition

ステップ07:カテゴリ機能をプレビューします

プレビューページにご覧ください。カテゴリを1つずつクリックします。カテゴリに従って投稿が変更されていることがわかります。

したがって、分類リストウィジェットを使用してカテゴリごとにアーカイブページに投稿を表示できます。

ボーナス:HappyAddonsを試してテーマビルダーを無料で使用してください

HappyAddonsは、Webサイトのデザインを次のレベルに引き上げるために、 130以上のウィジェット24+の機能を備えたElementor向けの強力なプラグインです。創造的なデザインツール、高度な機能、およびElementorだけで得られるものを超えた多くのカスタマイズオプションを提供します。

Try HappyAddons to Use the Theme Builder for Free

無料バージョンとプレミアムバージョンの両方が利用可能です。無料バージョンでさえ、Webデザインをより速く簡単にする便利なツールが搭載されています。

#ハッピーアダンズテーマビルダー(無料)

HappyAddonsの傑出した機能の1つはテーマビルダーで、完全に自由に使用できます。これにより、ヘッダー、フッター、シングルポスト、アーカイブページなど、WordPressサイトのカスタムテンプレートを設計できます。これは、テーマのデフォルトデザインに制限されていないことを意味します。

ブログアーカイブに関しては、ブロググリッド、投稿リスト、または投稿ウィジェットをアーカイブに追加したり、分類法やカテゴリメニューを上に配置することもできます。これにより、カテゴリごとにスタイリッシュでユーザーフレンドリーな方法でブログ投稿を表示できます。そのため、HappyAddonsプラグインでは、アーカイブページにカテゴリごとにブログ投稿を表示することができます。

Happy Addons Introduces Free Theme Builder for Elementor Users

HappyAddonsを使用してブログ投稿テンプレートを作成する方法を確認してください。

#コスト節約ソリューション

HappyAddonsのテーマビルダーを使用することも、コスト削減ソリューションです。通常、Elementorでは、PROユーザーにテーマビルダー機能のみを許可します。これにはプレミアムライセンスが必要です。しかし、HappyAddonsを使用すると、無料の選択肢があります。

これにより、初心者、ブロガー、または中小企業のオーナーが、余分なお金を使わずにカテゴリベースのアーカイブページを作成することができます。同じレベルのカスタマイズをゼロコストで取得するため、HappyAddonsは予算に配慮したユーザーにとって賢明な選択肢になります。

HappyAddons Lite
HappyAddons Pro

カテゴリベースのブログレイアウトを超えて、HappyAddonsはさらに多くのことを行うことができます。高度なスライダー、価格設定テーブル、証言カルーセル、ロゴカルーセル、多くの創造的な効果などの高度なウィジェットが含まれています。これらを使用すると、モダンで魅力的に見えるプロのウェブサイトを設計することができます。

ディスプレイ条件、クロスドメインのコピーパステ、プリセットデザインなどの機能も、設計プロセスの時間と労力を節約します。

エンディングノート!

WordPressのカテゴリ別のブログ投稿を表示することは、コンテンツを整理し、読者を望むものに導く最良の方法の1つです。 ElementorまたはHappyAddonsを使用するかどうかにかかわらず、カテゴリベースのレイアウトを備えたクリアなアーカイブページを作成すると、サイトのナビゲートが簡単になります。また、ユーザーエクスペリエンスが向上し、訪問者がより長く関与し続けます。

カテゴリページを設定するときは、いくつかのベストプラクティスに従ってください。読者が一目でそれらを理解するように、明確でシンプルなカテゴリ名を使用してください。あまりにも多くのカテゴリを作成しないでください。それらを集中して意味のあるものに保ちます。ブログレイアウトの上部にカテゴリメニューまたはフィルターオプションを追加して、ユーザーが投稿をすばやく探索できるようにします。

最後に、訪問者がデスクトップデバイスとモバイルデバイスの両方でカテゴリをスムーズに閲覧できるように、デザインが応答性が高いことを確認してください。これらのヒントに従うことで、ブログをよりユーザーフレンドリー、適切に構造化し、視覚的に魅力的にすることができます。