Diviでカスタムフィールドと動的コンテンツを使用して説教レイアウトを構築する方法

説教にアクセスして聞く能力は、教会のウェブサイトの重要な部分です。 そして、Diviの新しいChurch Layout Packのリリースで、動的コンテンツを使用して説教レイアウトを構築する方法を示すことが役立つと思いました。 これを行うには、Advanced Custom Fieldsプラグインを使用して、投稿のバックエンドで更新できるグループカスタムフィールドを作成します。 また、Diviの動的コンテンツ機能を使用して、これらのカスタムフィールドを取得して投稿のコンテンツに入力するレイアウトを設計する方法を紹介します。 それがすべて言われ、完了すると、ビジュアルビルダーを展開することなく、カスタムフィールドの直感的なUIを使用してバックエンドで更新できる動的コンテンツを備えた素晴らしい説教レイアウトが得られます。

始めましょう。

何が必要

このチュートリアルでは、次のものが必要になります。

• ディビのテーマ
• Advanced CustomFieldsプラグイン
• Church LayoutPackのChurchBlog Layout（Divi Builderからアクセス可能）

説教レイアウトスニークピーク

これが私たちが構築するレイアウトのピークです。 このレイアウトの利点は、ほとんどのコンテンツが動的コンテンツを使用してバックエンドのカスタムフィールドから生成されていることです。

Advanced CustomFieldsプラグインを使用したカスタムフィールドの作成

Advanced Custom Fields（ACF）プラグインを使用すると、カスタムフィールドを簡単にグループ化して、投稿やページの動的コンテンツとして使用できます。 カスタムフィールドの更新を非常に簡単にする多くのフィールドタイプ（日付ピッカー、Wysiwygエディター、oEmbedなど）をサポートしています。 これは、クライアントがカスタムフィールドを使用してサイトを更新するためのより直感的なUIを提供するのに非常に役立ちます。

ACFプラグインをインストールしてアクティブ化したら、WordPressダッシュボードとカスタムフィールド>新規追加に移動します。

新しいフィールドグループを追加します

新しいグループを設定するには、新しいフィールドグループにタイトルを付けます。

場所セクション（またはトグル）の下で、投稿タイプが投稿ではなく「プロジェクト」と等しくなるように設定を変更します。 これは基本的に、Diviに組み込まれているプロジェクトの投稿タイプにのみこのカスタムフィールドグループを表示するようにプラグインに指示します（必要に応じて投稿のままにしておくこともできます。選択してください）。

次に、設定セクションまで下にスクロールして、以下を更新します。

位置：高（コンテンツ後）

この位置設定は、投稿またはページのバックエンドエディタでのカスタムフィールドグループの場所を決定します。

フィールドグループにカスタムフィールドを追加する

グループが作成および設定されたので、次はグループへのカスタムフィールドの追加を開始します。

スピーカーカスタムフィールド

最初のカスタムフィールドには、ユーザーが説教のスピーカーを入力する場所を追加しましょう。 新しいフィールドを追加するには、[フィールドの追加]ボタンをクリックして、次のように入力します。

フィールドラベル：スピーカー
フィールド名：スピーカー
フィールドタイプ：選択
選択肢（新しい行にそれぞれ入力してください）：シニア牧師、アソシエイト牧師、ユース牧師、ゲストスピーカー

説教タイトルカスタムフィールド

次に、説教タイトルのカスタムフィールドを追加します。

フィールドラベル：説教のタイトル
フィールド名：sermon_title
フィールドタイプ：テキスト
プレースホルダーテキスト：説教のタイトル

説教日カスタムフィールド

次に、説教日のカスタムフィールドを追加します。 これは、新しい日付を追加するのがバックエンドで簡単になるように、日付ピッカーフィールドタイプを持つように設定します。

フィールドラベル：説教日
フィールド名：sermon_date
フィールドタイプ：日付ピッカー
表示形式：F j、Y
戻り形式：F j、Y
週の始まり：月曜日

説教の説明カスタムフィールド

次に、説教の説明のためのカスタムフィールドを追加します。 これにより、ユーザーはビジュアルビルダーを開かなくても、Wysiwygエディターを使用して投稿のコンテンツを更新できます。

フィールドラベル：説教の説明
フィールド名：sermon_description
フィールドタイプ：Wysiwygエディター

サーモンオーディオ埋め込みカスタムフィールド

次に、oEmbedフィールドタイプを使用して、サーモンオーディオ埋め込みのカスタムフィールドを追加します。 これにより、バックエンドに埋め込まれたオーディオURLを更新するだけで、説教のオーディオ埋め込みを埋め込むことができます。

フィールドラベル：説教オーディオ埋め込み
フィールド名：sermon_audio_embed
フィールドタイプ：oEmbed

サーモンオーディオURLカスタムフィールド

次に、サーモンオーディオURLのカスタムフィールドを追加して、URLを使用してモジュール内のリンクにデータを入力し、ファイルへのダウンロードリンクを作成できるようにします。

フィールドラベル：説教オーディオURL
フィールド名：sermon_audio_url
フィールドタイプ：URL

大丈夫。 カスタムフィールドがフィールドグループに追加されたら、フィールドグループを保存することを忘れないでください。 これで、投稿全体で動的コンテンツとして使用されるカスタムフィールド説教コンテンツの説教レイアウトの作成を開始できます。

新しいプロジェクトを作成する

WordPressダッシュボードから、[プロジェクト]> [新規追加]に移動します。 次に、説教のタイトルでもあるプロジェクトのタイトルを入力します（ただし、それはあなた次第です）。 次に、クリックしてDiviBuilderを使用します。 diviビルダーの上部に表示されるカスタムフィールドのグループが表示されます。

次に、この投稿に固有の説教情報をカスタムフィールドに入力します。

スピーカー：シニア牧師（ドロップダウンメニューから選択）
説教のタイトル：新しい創造物（ま​​たはあなたが望むもの）
説教日：日付ピッカーから日付を選択
説教の説明：WYSIWYGエディターを使用して説教の説明を入力します
Sermon Audio Embed：メディアプレーヤーに埋め込むメディアファイルのURLを入力します
説教オーディオURL：メディアファイルのURLを入力します（クリックするとすぐにダウンロードする場合はzipファイルである必要があります）

次に、プロジェクトの注目画像を追加します。 これは、説教レイアウトのオーディオプレーヤーに使用される画像として機能します。

プロジェクトに新しい既成のレイアウトを追加する

次に、クリックしてVisualBuilderを使用します。

（注：現在、バックエンドビルダーは動的コンテンツをサポートしていないため、ビジュアルビルダーを展開する必要があります。より多くのバックエンドビルダー機能を使用してレイアウトをカスタマイズする場合は、ビジュアルビルダーを展開してワイヤーフレームモードをクリックするだけです。）

次に、[既成のレイアウトを選択する]オプションをクリックします。 ライブラリからの読み込みポップアップから、Church Layout Packを選択し、クリックしてChurch BlogPageレイアウトを使用します。

レイアウトがページに読み込まれたら、レイアウトから2番目、4番目、5番目のセクションを削除します。 これで、レイアウトには、上部ヘッダーセクション、「最新の説教」セクション、および下部フッターセクションの3つのセクションのみが含まれるはずです。

次に、2番目のセクションのブログモジュールを削除します。

「最新の説教」テキストモジュールを更新して、次の内容になるようにします。

<h3>Description</h3>

次に、そのテキストモジュールを複製し、コンテンツを更新して「今すぐ聞く」と言います。

説教レイアウトの動的コンテンツの追加

説教の説明

これで、セクションの動的な説教オーディオコンテンツの構築を開始する準備が整いました。 手始めに、「説明」というタイトルのテキストモジュールのすぐ下に説教の説明を追加します。 これを行うには、新しいテキストモジュールを追加します。 コンテンツ入力ボックスにカーソルを合わせ、動的コンテンツアイコンをクリックします。

次に、ドロップダウンリストから[説教の説明]カスタムフィールドを選択します。

設定を保存する。

これで、説教の説明が動的コンテンツとして表示されます。 これは、バックエンドエディタ画面の説教の説明入力ボックスに追加したものはすべて、プロジェクトページに動的に更新されることを意味します。

オーディオモジュールとオーディオ埋め込み

「ListenNow」というタイトルのテキストモジュールの下に、新しいオーディオモジュールを追加します。 次に、テキストコンテンツを次の動的コンテンツで更新します。

タイトル：説教タイトル（カスタムフィールド）
アーティスト名：スピーカー（カスタムフィールド）
アルバム名：説教日（カスタムフィールド）

オーディオモジュール内の動的コンテンツの配置に主に関係しているため、ラベルは実際には重要ではありません。 説教のタイトル、話者、説教の日付は、オーディオモジュール内にうまく表示されます。

オーディオモジュールのカバーアート画像の場合、画像プレビュー領域にカーソルを合わせたときに動的コンテンツアイコンをクリックして動的コンテンツを追加し、[注目の画像]を選択します。

これで、バックエンドで注目の画像として設定したものはすべて、説教オーディオのカバーアート画像に自動的に入力されます。

レイアウトのデザインに合わせて、設定を保存し、セクション設定の[背景]カテゴリのテキストを右クリックして[背景をコピー]を選択して、下部セクションの背景をコピーします。

次に、オーディオモジュール設定を開き、背景カテゴリのテキストを右クリックして、[背景を貼り付け]オプションをクリックして、背景をオーディオモジュールの背景設定に貼り付けます。

次に、設計設定にジャンプして、以下を更新します。

テキストの向き：左
カスタムマージン：0px下

これで、サーモンオーディオプレーヤーを完成させるために残されたのは、実際のオーディオプレーヤーの埋め込みだけです。 現在、オーディオモジュールに組み込まれているオーディオ入力ボックスは動的コンテンツをサポートしていません（将来的にはサポートされると確信しています）ので、小さな回避策を実行します。 新しいテキストモジュールを作成し、動的コンテンツを使用して埋め込まれたオーディオファイルを追加します。 また、WordPressがカスタムフィールドによって生成されたショートコードを認識する方法のため、デフォルトのオーディオプレーヤーが表示されます。

これを行うには、オーディオモジュールの下にテキストモジュールを追加してから、動的コンテンツとしてカスタムフィールド「SermonAudioEmbed」を追加します。 ショートコードが機能するように、必ずRawHTMLを有効にしてください。

これで、オーディオプレーヤーをオーディオモジュール内にカスタムマージンを付けて配置できます。 [デザイン]タブに移動し、以下を更新します。

カスタムマージン（デスクトップ）：上-40px、左280px、右60px
カスタムマージン（タブレット）：0px左、0px右

ダウンロードリンク

ユーザーがオーディオファイルをダウンロードすると便利な場合があります。 これを簡単にするために、音声ファイルへのリンクを投稿に追加できます。 これを行うには、動的コンテンツを使用して、説教のタイトルと音声のURLを宣伝文句モジュールに入力します。

オーディオモジュールの下に宣伝文モジュールを追加し、次のようにコンテンツを更新します。

タイトル：説教タイトル（カスタムフィールド）
アイコン：スクリーンショットを参照
タイトルリンクURL：Sermon Audio Url（カスタムフィールド）

クリック可能なリンクのように宣伝文をスタイル設定するには、以下を更新します。

アイコンの色：rgba（33,50,94,0.86）
画像/アイコンの配置：左
タイトルフォントスタイル：U
タイトル下線の色：rgba（33,50,94,0.86）
タイトルテキストの色：rgba（33,50,94,0.86）
タイトルラインの高さ：2em
コンテンツの幅：100％

リンクをダウンロードとしてさらに認識しやすくするために、宣伝文のタイトルを占める説教タイトルの動的コンテンツを編集して、「（ダウンロード）」と書かれた後の入力ボックスに追加のテキストを追加できます。

説教のタイトルとメタを見出しに追加する

最後のステップとして、プロジェクト/投稿の見出しセクションで、投稿のタイトルにスピーカー名と説教日とともに動的コンテンツが使用されていることを確認しましょう。 これを行うには、全幅ヘッダーモジュール設定を開き、以下を更新します。

タイトル：説教タイトル（カスタムフィールド）
小見出しテキスト：スピーカー（カスタムフィールド）
（注：スピーカーの動的コンテンツの場合、入力前に「by：」と入力します）
ボタン＃1リンクテキスト：削除
ボタン＃2リンクテキスト：削除
内容：説教日（カスタムフィールド）

次に、[デザイン]タブに移動し、使用されているカスタムパディングを取り出します。

これが最終結果です。

これで、今後行う必要があるのは、将来の説教の投稿に使用するために、レイアウトをDiviライブラリに保存することだけです。 また、カスタムフィールドグループをすべてのプロジェクトに使用する準備ができているため、Visual Builderを開かなくても、バックエンドでカスタムフィールド情報を更新するだけで済みます。

また、説教をプロジェクトとして保存すると、フィルター可能なポートフォリオを簡単に作成して説教を表示できます。

最終的な考え

このチュートリアルが、動的コンテンツと、それをAdvanced Custom Fieldsプラグインとともに使用して、説教の強力なレイアウトを作成する方法について、もう少し詳しく説明するのに役立つことを願っています。 すべてをセットアップするのに少し時間がかかるかもしれませんが、見返りは間違いなくそれだけの価値があります。 もちろん、これと同じプロセスを使用して、さまざまな投稿タイプのあらゆる種類の動的コンテンツを作成できます。 以下のコメントで質問があれば教えてください。 あなたからの便りを楽しみにしています。

乾杯！