Diviを使用してWordPress投稿をテンプレート化する方法
公開: 2022-11-04WordPress の投稿に何らかの構造を追加したい場合は、テンプレートを使用すると効果的です。 Divi は、テンプレート システムが組み込まれている人気の WordPress テーマです。 この記事では、Divi を使用して WordPress の投稿をテンプレート化する方法を紹介します。 まず、WordPress で新しいページを作成し、「Divi Page Builder」テンプレートを選択する必要があります。 これにより、作業する空白のキャンバスが作成されます。 次に、いくつかのセクションをページに追加します。 セクションごとに、事前に作成されたさまざまなレイアウトから選択するか、独自のレイアウトを作成できます。 セクションの設定が完了したら、コンテンツの追加を開始できます。 Divi Builder を使用して、テキスト、画像、ビデオなどを追加できます。 投稿に満足したら、WordPress サイトに公開できます。 それだけです! Divi を使用すると、WordPress の投稿を簡単にテンプレート化して、構造とスタイルを追加できます。
この記事では、Divi の Theme Builder を使用してブログ投稿テンプレートをデザインする方法を紹介します。 ブログ投稿テンプレートは、ブログ投稿のすべて (または一部) に使用する Web サイト全体のテンプレートです。 Divi Theme Builderを使用すると、何百もの視覚的に魅力的なデザインを簡単に作成できます (また、テンプレート全体で静的コンテンツと動的コンテンツの組み合わせを変更できます)。 ブログ投稿テンプレートは、動的コンテンツを含む事前に設計されたテンプレートであるため、新規または既存の投稿はレイアウトとデザインを自動的に継承します。 Divi Theme Builder の組み込みの動的コンテンツ機能を使用して、ブログ投稿テンプレートを使用してブログを作成できます。 プロジェクトの作業を開始する前に、まず、使用するモジュールと、動的コンテンツをテンプレートに組み込む方法を理解する必要があります。 ブログ投稿テンプレートは、Divi Theme Builder を使用して作成されます。
WordPress に移動し、Divi、テーマ ビルダーを選択すると、新しいテンプレートを作成できます。 [カスタム ボディの追加] ボタンをクリックすると、投稿テンプレートのボディ用の新しい領域を作成できます。 Build From Scratch オプションを選択すると、独自のソフトウェアを作成するプロセスを開始できます。 宣伝文句の設定で、動的コンテンツ アイコンをクリックし、続いて [タイトル] 入力ボックスをクリックします。 投稿者動的コンテンツ要素は、タイトル コンテンツに追加できます。 次に、デザイン設定を変更する手順を示します。 動的コンテンツ機能としてコメント数を Blurb モジュールに追加します。
動的コンテンツとして、投稿者のプロフィール画像をモジュールの画像として含めることができます。 投稿コンテンツ モジュールには、投稿のメイン コンテンツが含まれます。 投稿コンテンツ モジュールの設定は、他のモジュールと同じ方法で更新できます。 どのカテゴリに適用するかを決定するため、この機能は不可欠です。 これにより、投稿テンプレートから同じカテゴリの以前のすべての投稿を引き出すことができます。 コメントは、このブログ投稿テンプレートの最後のセクションに追加されます。 コメント モジュールは、1 列の行のコメント フィールドに配置できます。
レイアウトまたはテーマ ビルダーへの変更を保存する場合は、デザイン設定を更新してください。 投稿テンプレートをデザインするときは、利用可能な優れたオプションをすべて念頭に置いてください。 ご覧のとおり、このチュートリアルが、Divi Builder を使用して独自のブログ投稿テンプレートを作成する際の開始点として適していることを願っています. 投稿テンプレートがどのように構成され、さまざまなツールが利用できるかを理解することが重要です。 美しいテンプレートを使用すると、ブロガーはコンテンツの作成に集中できますが、テンプレートがブロガーのすべての作業を完了することもできます.
Divi でブログ投稿を表示するにはどうすればよいですか?

Divi でブログ投稿を表示する 1 つの方法は、ブログ ページ テンプレートを作成することです。 これを行うには、新しいページを作成し、ページ属性メニューからブログ ページ テンプレートを選択します。 テンプレートが適用されると、ブログの投稿がページのメイン コンテンツ エリアに表示されます。
ブログは、ブログ投稿を表示するためのDivi Builder モジュールにあります。 ブログ モジュールは、ページに追加するときに、より興味深いものにするためにスタイルを設定できます。 Divi Builder のブログ モジュールは、限られた量のスタイル オプションを提供します。 たとえば、ブログ投稿をリストとして表示する場合は、モジュールを無効にする必要があります。 ブログ設定パネルのデザインブロックから全幅オプションを選択します。 CSS ID は Classes ブロックの下に表示されます。 left-blog-image CSS クラス フィールドを使用して、左のブログの CSS ID をコピーします。 上記のコードは必要に応じて変更できます。
Divi を使用する場合、Gutenberg エディターが必要ですか?

Divi テーマを使用している場合、Gutenberg エディターは必要ありません。 Divi は、コードを使用せずにカスタム ページや投稿を作成できるページ ビルダー ツールを含む WordPress テーマです。
WordPress 5.0 では、まったく新しいブロック エディター (別名 Gutenberg) がプラットフォームに導入されました。 新しい Divi Builder Experienceは、デザイン エクスペリエンスを向上させるだけでなく、新しい機能も含まれています。 このチュートリアルでは、WordPress のオプション、新しい Divi Builder エクスペリエンスを正常に統合するために必要な手順、および WordPress サイトでそれを使用する方法について学習します。 WordPressダッシュボードに移動すると、Diviメニューのテーマオプションにアクセスできます. クラシック (WordPress) エディターを有効にするには、[ビルダー オプション] タブに移動し、[詳細設定] タブを選択します。 次に、利用可能な 3 つのオプションからページのデザインを開始する方法を選択します。 フロント エンド ボタンのビルドは、従来のビジュアル ビルダー ボタンの代わりに使用されます。

フロントエンドでは、Divi Builder を使用して、視覚的に説得力のあるデザイン エクスペリエンスを作成します。 新しいDivi Builderには、すべての機能とVisual Builderがバックエンドに含まれています. ビジュアル ビルダー エクスペリエンスは、ビルダーの上部にあるビュー モードを選択することで、バックエンドでアクティブ化できます。 Divi の最新バージョンでページを編集している場合、非常に簡単にClassic Divi Builderに戻ることができます。 Divi Builder には、以前は Visual Builder でしか利用できなかった強力な新機能がすべて含まれるようになりました。 バックエンドでも Classic Divi Builder が有効になっていることを確認する必要があります。 さらに、WordPress 5.0 の更新と、Divi の互換性修正が必要です。
WordPress バックエンドで新しい Divi Builder を使用して、ページ エディターからClassic Divi ページ ビルダーに戻すことができます。 両方を同時に使用できますが、どちらが優先されるかを決定する必要があります。 まもなく、Gutenberg 内でお気に入りの Divi モジュールを使用したり、Divi Builder 内で Gutenberg ブロックを登録したりできるようになります。
Divi と Gutenberg を併用する
Gutenberg エディターを使用する必要がありますか? ディビの使い方は?
Gutenberg と Divi の両方をエディターとして使用する場合、使用するエディターを使用する必要がなくなりました。 Divi と Elementor はどちらもユーザーフレンドリーで、幅広いデザイン オプションを提供します。 Elementor は、Gutenberg の動作方法を好むが、より柔軟性が必要な場合に適しています。 ディビを使用すると、最適なオプションとデザイン オプションを選択できます。
Gutenberg エディターをどのように使用しますか?
インストールしてアクティブ化したら、設定に移動し、[ユーザーがエディターを切り替えることを許可する] オプションで [はい] をクリックします。 クラシックとグーテンベルクのどちらかを選択したら、それらを切り替えることができます。
ディビブログ投稿テンプレート

ブログ投稿テンプレートを作成するには、さまざまな方法があります。 1 つの方法は、WordPress テーマ フォルダーに新しいファイルを作成し、「blog-post.php」のような名前を付けることです。 次に、既存の WordPress テーマの「single.php」ファイルからコードをコピーして、この新しいファイルに貼り付けることができます。 これにより、作業するための基本的なテンプレートが提供されます。 ブログ投稿テンプレートを作成するもう 1 つの方法は、WordPress カスタマイザーなどのプラグインを使用することです。 このプラグインを使用すると、新しいテンプレート ファイルを作成し、新しい投稿を作成するときにドロップダウン メニューから選択できます。 テンプレートを作成したら、独自のコードを追加して好みに合わせてカスタマイズできます。 たとえば、ブログ投稿テンプレートに注目の画像を追加することができます。 これを行うには、次のコードをテンプレート ファイルに追加します。このコードは、現在の投稿に注目の画像セットがあるかどうかを確認します。 その場合、投稿の上部にアイキャッチ画像が表示されます。 テンプレートに他のコードを追加して、さらにカスタマイズすることもできます。 たとえば、ブログ投稿テンプレートに「続きを読む」リンクを追加するとします。 php the_content( '続きを読む' ); ? > このコードは、投稿の全コンテンツを表示し、その後に「続きを読む」リンクを表示します。 ブログ投稿テンプレートのカスタマイズに関しては無限の可能性があります。 これらは、できることのほんの一例です。 実験して、何ができるか見てみましょう!
今週の毎週のDiviデザインイニシアチブの一環として、無料のブログ投稿テンプレートを提供しています. WordPress サイトのバックエンドにある Divi テーマ ビルダーにアクセスして、テンプレートをダウンロードできます。 新しいテンプレートをアップロードすると、すべての投稿という新しい本文エリアがテンプレートに表示されます。 テンプレートの要素の変更を開始する前に、まずそれを開く必要があります。 このブログ投稿テンプレートには、インストールするとすぐにブログ投稿で機能する動的要素がぎっしり詰まっています。 電子メール Optin モジュールを設計に含めるには、電子メール アカウントをリンクする必要があります。 テキスト、ボタンのリンク URL、オプトイン メール アドレスなど、独自のコンテンツをサイドバーに簡単に追加できるようにします。
Divi: 最も強力なブログ ソリューション
強力なブログ プラットフォームである Divi は、ブログ ソリューションを探している人に最適です。 強力なブログ モジュールを使用して、さまざまなページにコンテンツを表示することを選択できます。 アーカイブ機能を使用すると、投稿を特定のページに追加して、それらを単一の投稿または複数の投稿に表示できます。 さらに、Diviにはさまざまな追加機能があり、素晴らしいブログプラットフォームになります.
ディビシングルポストレイアウト
Divi Builder のビジュアル エディターを使用すると、ドラッグ アンド ドロップできる単一の投稿をすばやく作成できます。 HTML または CSS の 1 行を操作する必要はありません。 サイト全体に単一の投稿レイアウトを作成するか、タグやカテゴリなどの基準に基づいて特定の投稿/ページを作成するかに関係なく、表示されます.