Diviを使用してブログ投稿テンプレートにメタデータを含める方法

公開: 2022-01-19

メタデータは、読者にコンテンツに関するシンプルで重要な情報を提供します。幸い、メタデータは動的コンテンツを含むDivi投稿テンプレートに簡単に追加できます。この記事では、Diviを使用してブログ投稿テンプレートにメタデータを含める方法を説明します。

始めましょう！

プレビュー

まず、私たちが作っているものを見てみましょう。

デスクトップ上のメタデータを含むブログ投稿テンプレート

デスクトップでメタデータがどのように表示されるかを次に示します。

電話のメタデータを含むブログ投稿テンプレート

メタデータが電話でどのように表示されるかを次に示します。

メタデータとは

メタデータはコンテンツに関する情報です。メタデータにはいくつかの種類があります。ブログ投稿の場合、これは説明的なメタデータです。作者名、投稿カテゴリ、投稿タグ、公開日、コメント数などの情報です。

読者はこのメタデータを使用して、カテゴリに関心があるかどうか、知っている作成者によって作成されたかどうか、コンテンツが最新かどうか、訪問者がコンテンツを操作したかどうかを確認します。このタイプのメタデータは、Diviブログ投稿テンプレートに簡単に追加できます。

Diviでメタデータに動的コンテンツを使用する理由

Diviブログ投稿テンプレートにメタデータを追加する方法はいくつかあります。それらには、投稿タイトルモジュールとテキストモジュールが含まれます。両方と、ほとんどのテンプレートにテキストモジュールを推奨する理由を以下に示します。

Diviでメタデータに動的コンテンツを使用する理由

投稿タイトルモジュールにはメタデータが含まれています。これには、使用する特定のメタデータを有効にするためのトグルが含まれています。これは、メタデータを含むタイトルを表示するのに最適です。このモジュールでは、メタデータを表示するだけの場合は必要ないことがたくさんあります。また、メタデータは隣り合って配置されており、それらの順序や配置を制御することはできません。

Diviでメタデータに動的コンテンツを使用する理由

テキストモジュールは、ほとんどの制御と機能を提供します。テキストモジュールには、テキスト本文の動的コンテンツが含まれています。これにより、テキストモジュール内に表示する任意のタイプのメタデータを選択できます。複数のテキストモジュールを使用して、すべてのメタデータを個別に表示するか、任意の順序またはレイアウトで一緒に表示します。

Diviテキストモジュールでの動的メタデータのしくみ

動的コンテンツは、表示するコンテンツを手動で入力するのではなく、選択したコンテンツのタイプに基づいてコンテンツを取り込みます。たとえば、投稿のタイトルを選択すると、Diviはその投稿に固有のタイトルを表示します。

Divi Textモジュールには、動的コンテンツを表示するオプションがあります。コンテンツ領域にカーソルを合わせると、右隅に小さなアイコンが表示され、表示する動的コンテンツのタイプを選択できます。

Diviテキストモジュールでの動的メタデータのしくみ

各モジュールは、1つのタイプの動的コンテンツを表示します。複数のタイプのメタデータを含む、選択可能なコンテンツのリストが表示されます。モジュールごとに1つ選択できます。複数のタイプのメタデータを表示するには、テキストモジュールをさらに追加する必要があります。

動的コンテンツオプション

特定の種類のコンテンツには、追加のオプションが含まれています。これらのオプションは動的ではありません。つまり、フィールドに入力した正確なテキスト、または表示する文字数などの入力したパラメーターが表示されます。投稿の抜粋からのこの例には、前、後、単語数、および続きを読むテキストが含まれています。たとえば、[前]フィールドに入力したテキストは、動的コンテンツの前に表示されます。

動的コンテンツオプション

公開日には[前]フィールドと[後]フィールドが含まれ、日付形式を選択できます。

動的コンテンツオプション

コメント投稿数には、前、後、およびコメント領域にリンクするオプションが含まれます。たとえば、[後]フィールドに「コメント」と入力し、投稿に12個のコメントがある場合、このテキストモジュールには「12個のコメント」というテキストが表示されます。

動的コンテンツオプション

[投稿カテゴリ]には、[前]フィールドと[後]フィールド、カテゴリインデックスページにリンクするオプション、カテゴリセパレータ、およびカテゴリタイプが含まれます。

動的コンテンツオプション

選択すると、テキストモジュールに表示される動的コンテンツのタイプが表示されます。通常どおり、設定を編集してモジュールをカスタマイズできます。

Diviを使用してブログ投稿テンプレートにメタデータを含める

まず、 Diviブログ投稿テンプレートを作成するか、Diviテーマビルダーにアップロードする必要があります。 ETは、DiviLayoutPackに一致する無料のブログ投稿テンプレートを多数提供しています。無料のテンプレートを見つけるには、ブログで「無料のブログ投稿テンプレート」を検索してください。テンプレートをダウンロードして解凍します。

例として、無料の企業ブログ投稿テンプレートを使用しています。

Diviを使用してブログ投稿テンプレートにメタデータを含める

次に、JSONファイルをDiviテーマビルダーにアップロードします。 WordPressダッシュボードでDivi > ThemeBuilderに移動します。 [移植性]を選択し、開いたモーダルで[インポート]をクリックします。 [ファイルの選択]をクリックし、JSONファイルに移動して選択します。 [ Diviテーマビルダーテンプレートのインポート]をクリックします。設定を保存します。