動的コンテンツを使用して WordPress サイトをデザインする方法

ウェブサイトをプロフェッショナルに見せるにはどうすればよいですか?これは、多くの意欲的な Web サイトビルダーがプロジェクトを計画するときに自問する質問です。明らかな答えには、デザインを改善するか、多くの派手な機能を追加することが含まれます。

しかし実際には、基本的な Web サイトを真に強化し、プロフェッショナルなカスタム Web サイトにする最も効果的な方法の 1 つは、動的なコンテンツを追加することです。動的コンテンツは、Web サイト上でユーザーにさらに充実したエクスペリエンスを提供します。

動的コンテンツとは正確には何ですか?

動的コンテンツとは、時間、場所、ユーザーに応じて変化するインタラクティブな Web コンテンツを指します。ユーザーが動的な Web サイトに移動すると、WordPress はデータベースから正しい情報を取得し、ユーザーがどのページにいるかに応じてユーザーに表示します。

静的コンテンツの場合、フロントエンドに表示される内容は変わりません。実際、変更を加えたい場合は、開発者の助けが必要になる可能性が高くなります。ただし、動的コンテンツを使用すると、Web サイトの所有者はコーディングを行わずにバックエンドのすべてを即座に編集できます。これは、ユーザーが見ているものに応じて情報が変化し、よりインタラクティブなエクスペリエンスを提供できることを意味します。

たとえば、ジムの Web サイトを閲覧している場合は、利用可能なさまざまなジムを確認するとよいでしょう。もちろん、ジムごとに名前や住所、施設一覧などの情報は異なります。したがって、各ジムをクリックすると、他のページでは見つからない、それに関連したさまざまなコンテンツが表示されます。

動的コンテンツの利点

動的コンテンツは、静的コンテンツでは提供できない多くの利点を Web サイトにもたらします。

ユーザーエクスペリエンスが向上します。 ユーザーは、行動に応じて変化するさまざまなオファーなど、自分に合わせたコンテンツを見ることができます。
KPI を改善します。 動的コンテンツを使用して、カスタマイズされたコンテンツを作成することで、ウェブサイトでのコンバージョンを向上させ、直帰率を減らすことができます。
スムーズなナビゲーション。 動的コンテンツは、探しているコンテンツを簡単に見つけることができるため、静的コンテンツと比較して Web サイトを通じてシームレスなエクスペリエンスを提供します。
更新が簡単。 専門の開発者を雇わなくても、WordPress バックエンドでページを編集するだけで済みます。
画面サイズに応答します。 動的 Web サイトは、静的な Web サイトと比較して、さまざまな画面サイズに簡単に適応します。

動的コンテンツを作成するには 2 つの方法をお勧めします。以下では、2 つのオプションと、両方を使用して Web サイトを作成する方法を正確に説明します。

1. ツールセットブロックと Gutenberg を使用して動的コンテンツを作成する

Toolset Blocks のリリースにより、ブロックエディターである Gutenberg を使用して WordPress 上で動的コンテンツを作成する新しい方法が提供されます。

1 年前の発売以来、Gutenberg は大幅に改善され、Web サイトを設計および実装するためのシンプルかつ直感的な方法を提供しました。最も良い点は、プログラマーでなくても、Gutenberg と統合プラグインを使用して、思い描いたものを正確に簡単に構築できることです。

これには、Web サイトビルダーが Toolset Blocks のおかげで Gutenberg で作成できる動的コンテンツが含まれます。

ツールセットブロックはどのように機能しますか?

Toolset Blocks は、次の 2 つの面で使用できる新しいプラグインです。

コンテンツテンプレート、アーカイブ、ビューなどのカスタムの高度な機能を作成します。
ブロックの動的ソースをサポートし、カスタムフィールドと分類法をページに表示できるようにします。

したがって、ツールセットブロックを使用すると、コーディングなしで動的コンテンツを投稿、ページ、またはテンプレートに簡単に追加できます。

以下に、ジムのデモ Web サイト用のコンテンツテンプレートの例を作成しました。これにより、ダイナミックコンテンツのおかげで、すべてのジムの投稿が同じデザインで異なるコンテンツになることが保証されます。

ツールセットブロックを使用して動的コンテンツを含むコンテンツテンプレートを作成する方法

Web サイトでジムのカスタム投稿タイプのテンプレートを作成しましょう。

開始する前に Toolset Blocks をインストールし、Gutenberg エディターの使用の基本を理解していることを確認する必要があります。

ツールセットブロックを使用して動的コンテンツを描画できる主なソースは 2 つあります。現在の投稿またはカスタムフィールドのソースを使用できます。以下では、両方のオプションを詳しく説明し、いつそれらを使用する必要があるかを示します。

現在の投稿からの動的コンテンツの表示

[ツールセット] > [ダッシュボード]に移動し、コンテンツテンプレートを作成する投稿タイプの横にある [コンテンツテンプレートの作成] オプションをクリックします。

ブロックを追加してコンテンツテンプレートを作成できるようになりました。画像を追加したいと考えてみましょう。まず、左上の + オプションを選択してブロックを追加します。

ツールセットのブロックのリストが見つかるまで下にスクロールし、画像ブロックを追加します。

動的ソースを使用するかどうかを尋ねる質問が表示されます。 [はい] をクリックします。

画像のソースを選択します。これにより、選択したオプションに応じて WordPress がどのコンテンツを取得するかが決まります。ブロック内の各ジムのアイキャッチ画像を表示したいのでアイキャッチ画像データオプションを選択します。

たとえば、動的コンテンツのソースを変更したり、画像のスタイルを変更したりする場合は、右側のサイドバーで画像をさらに調整できます。

カスタムフィールドからの動的コンテンツの表示

以前と同じコンテンツテンプレートを使用して、カスタムフィールドから動的コンテンツを含むブロックを作成できます。今回は各ジムの評価のカスタムフィールドを動的コンテンツとして追加します。

Toolset ブロックのリストに移動し、Single Field ブロックを追加します。

右側のサイドバーの [フィールドソース] の下で、フィールドタイプ [カスタムフィールド] を選択します。

[カスタムフィールドグループ] ドロップダウンで [ジム] 投稿タイプを選択します。これは、カスタムフィールドの取得元となるカスタム投稿タイプになることに注意してください。

[カスタムフィールド] ドロップダウンで、表示するカスタムフィールドを選択します。評価オプションを選択しました。

フロントエンドでさまざまなジムの投稿を切り替えると、動的コンテンツのおかげで、各投稿にそのジムの正しい価格が表示されることがわかります。動的コンテンツを作成するためにコーディングをまったく使用する必要がなかったことに注目してください。

動的コンテンツを含む他のブロックをコンテンツテンプレートに追加しました。フロントエンドでどのように表示されるかを確認してください。

2. トータルでダイナミックコンテンツを作成する

動的コンテンツを作成する同様に効果的なもう 1 つの方法は、Total テーマを使用して組み込みの動的投稿テンプレートを作成することです。

Total はどのような機能を提供しますか?

Total は WordPress で最も人気のあるテーマの 1 つであり、これらのタスクを実行するために複数のプラグインをダウンロードすることなく簡単にセットアップできる多くの機能が満載されています。

簡単なデモインポーター – Total の 40 以上の事前構築済みデモの 1 つを選択してインポートすると、ワンクリックで空のサイトがコンテンツが満載された完全に機能する Web サイトに変わります。
ドラッグアンドドロップページビルダー – Total は人気のある WPBakery ページビルダーと統合されており、直感的なドラッグアンドドロップビルダーを提供するため、Web サイトを簡単に構築できます。
数百のページビルダー要素 – Total の数百のページビルダー要素を活用して、ページをカスタマイズします。
簡単にカスタマイズ可能 – ライブカスタマイザー設定を使用して、色、フォント、幅など、サイト上のさまざまな要素を変更します。
開発者向け – Total には多数の組み込みフックとフィルターが付属しており、オンラインドキュメントから入手できる 450 以上のスニペットを使用してテーマを簡単に変更できます。

そしてもちろん、Total を使用して動的コンテンツを作成することもできます。以下に、単純なポートフォリオ項目を動的にすることで何が達成できるかの例を示します。

Total を使用して動的コンテンツテンプレートを作成する方法

WPBakery Page Builder > テンプレートに移動し、新規追加をクリックします。次に、テンプレートに名前を付けます。

まず、投稿に追加したメディアを表示する投稿メディア要素を追加します。ポートフォリオの場合、これは注目の画像、ギャラリー、ビデオなどになります。

次に、エディタ内の投稿に追加されたコンテンツを表示する投稿コンテンツ モジュールを組み込みます。

Total を使用すると、動的テンプレートに多数の投稿要素を含めることができます。投稿タイトル、メタデータ、関連アイテム、タグ、ソーシャルリンクなどを追加します。完了したら、[公開] をクリックします。

次に、動的テンプレートをポートフォリオのカスタム投稿タイプに割り当てる必要があります。これを行うには、WordPress のカスタマイザーに移動し、次にポートフォリオに移動し、動的テンプレート (詳細)で作成したばかりのテンプレートを選択します。

メディアの動作を確認できるようになりました。 [保存して公開] をクリックすると、動的コンテンツの準備が整います。

動的テンプレートの作成は、クライアント向けの Web サイトを構築している場合に特に優れたオプションです。これらを使用すると、テンプレートを一度作成して、それをポートフォリオのすべてのアイテムに即座に割り当てることができます。それだけでなく、レイアウトを変更する必要がある場合は、テンプレートを編集するだけでポートフォリオのすべてのアイテムも更新されます。

動的コンテンツの作成に関するあなたの経験を教えてください。これで、動的コンテンツを作成するための 2 つの方法ができました。今すぐ Toolset Blocks または Total Theme をダウンロードして、Web サイトを基本からカスタムに変える作業を始めることができます。

いずれかのツールを使用して動的コンテンツを Web サイトに追加したことがありますか?以下のコメント欄で、どのような効果があったのか教えてください。