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

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


しかし、実際には、基本的なWebサイトを本当に強化してプロフェッショナルなカスタムWebサイトにするための最も効果的な方法の1つは、動的コンテンツを追加することです。動的なコンテンツは、ユーザーにあなたのウェブサイトでより充実した体験を提供します.

動的コンテンツの紹介

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

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

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

たとえば、ジムのWebサイトを使用している場合は、利用可能なさまざまなジムを確認することをお勧めします。もちろん、各ジムには、独自の名前、住所、施設のリストなどの異なる情報があります。したがって、各ジムをクリックすると、他のページにはない、それに関連するさまざまなコンテンツが表示されます.

バランスジム

エネルギークラブ

動的コンテンツの利点

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

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

動的コンテンツを作成することをお勧めする方法は2つあります。以下では、2つのオプションと、両方でWebサイトを作成する方法を示します。.

1.ツールセットブロックとグーテンベルクで動的コンテンツを作成する

ツールセット

情報とダウンロード

の発売 ツールセットブロック ブロックエディター、グーテンベルクを使用してWordPressで動的コンテンツを作成する新しい方法を提供します.

1年前のローンチ以来、グーテンベルクは大幅に改善され、Webサイトを設計および実装するためのシンプルで直感的な方法を提供しています。最良の部分は、非コーダーがGutenbergと統合プラグインを使用することで、彼らが考えていたものを正確に簡単に構築できるようになったことです.

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

ツールセットブロックのしくみ?

ツールセットブロックは、2つの面で使用できる新しいプラグインです。

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

したがって、Toolset Blocksを使用して、コーディングなしで投稿、ページ、またはテンプレートに動的コンテンツを簡単に追加できます.

以下に、ジムのデモWebサイトのコンテンツテンプレートの例を作成しました。これにより、すべてのジムの投稿のデザインは同じですが、動的コンテンツのおかげでコンテンツが異なります.

ツールセットコンテンツテンプレート

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

ウェブサイトでGymsカスタム投稿タイプのテンプレートを作成しましょう.

あなたがする必要があります ツールセットブロックをインストールする 始める前に、グーテンベルクエディターの基本的な使用法を理解していることを確認してください。.

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

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

に行く ツールセット>ダッシュボード をクリックして コンテンツテンプレートの作成 コンテンツテンプレートを作成する投稿タイプの横にあるオプション.

コンテンツテンプレートの作成

これで、ブロックを追加してコンテンツテンプレートを作成できます。画像を追加したいとしましょう。まず、 + 左上にあるブロックを追加するオプション.

ツールセットブロックを作成

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

ツールセットイメージブロック

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

ツールセットイメージの動的ソース

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

ツールセットの注目画像データ

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

ツールセットの画像設定

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

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

Toolsetブロックのリストに移動し、 単一フィールドブロック.

ツールセットの単一フィールドブロック

右下のサイドバー フィールドソース, を選択 カスタムフィールド フィールドタイプ.

カスタムフィールドグループ ドロップダウンを選択します ジム 投稿タイプ。これは、カスタムフィールドをプルするカスタム投稿タイプになります。.

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

ツールセットカスタムフィールドの投稿

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

動的コンテンツを含む他のいくつかのブロックをコンテンツテンプレートに追加しました。フロントエンドでの外観を確認する.

ツールセットジムの例

2. Totalを使用した動的コンテンツの作成

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

合計で提供される機能?

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

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

もちろん、Totalを使用して動的コンテンツを作成することもできます。以下では、単純なポートフォリオアイテムを動的にすることで実現できることの例を示します。.

合計を含む動的コンテンツテンプレートを作成する方法

に行く Visual Composer>テンプレート そしてクリック 新しく追加する. 次に、テンプレートに名前を付けます.

ポートフォリオ全体のレイアウト

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

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

投稿メディア合計

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

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

合計動的テンプレート

メディアの動作を確認できます。クリック 保存して公開 動的コンテンツは準備ができている必要があります.

合計動的テンプレートフロントエンド

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


動的コンテンツを作成した経験を教えてください!これで、動的コンテンツを作成するための2つの方法があります。あなたはどちらかをダウンロードすることができます ツールセットブロック またはTotal Theme今日、あなたのウェブサイトをベーシックからカスタムに始めましょう.

どちらかのツールを使用して動的コンテンツをWebサイトに追加しましたか?以下のコメント欄でそれがどのように機能したかをお知らせください!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me