Diviブログモジュールでポストオフセットを使用して、用途の広いブログページを作成する方法

ブログのレイアウトには、ブログの投稿を事前設定するためのさまざまな方法があります。 複数のモジュールを使用して、さまざまな方法でフィードを表示できます。 これらのモジュールが表示する投稿を制御する方法がたくさんあることを忘れがちです。 ブログおよびポストスライダーモジュールを備えたDiviのポストオフセットオプションは、レイアウトを変更せずにブログページの動作を変更できます。 この記事では、Diviブログモジュールでポストオフセットを使用して、用途の広いブログページを作成する方法について説明します。

ポストオフセットについて

ポストオフセットは、あらゆるタイプのポストを表示するDiviのモジュール内のオプションです。 これは、Diviにスキップさせたい投稿の数を入力できるフィールドです。 デフォルト値は0です。これにより、Diviは投稿をスキップしないようになります。

1のオフセットを追加すると、Diviは最新の投稿をスキップするように指示されます。 オフセットまたは2は、Diviに最新の2つの投稿をスキップするように指示します。

複数のブログまたは投稿スライダーモジュールを使用してブログページを作成し、それらに異なる投稿を表示させることができます。 オフセットを使用して、必要な数のブログおよび投稿スライダーモジュールを追加できます。

これにより、ブログページで多くのデザインの可能性が開かれます。 特定の投稿を強調表示できます。 たとえば、シリーズで作業している場合は、ブログモジュールを使用して、シリーズの前半の投稿を表示できます。 また、投稿を特集するための特定の方法や、注目を集めるための別の方法としてそれらを使用することもできます。

5つのブログモジュールを含むブログページ

以下の画像は、Divi内から入手できるBloggerLayoutPackのブログページです。 これは、5つの異なるモジュールを含むブログ投稿を表示する複雑なページです。 それらのモジュールのうちの2つはポストスライダーです。 ブログモジュールの1つに、注目の投稿が表示されます。 もう1つは、次のいくつかの投稿を示しています。 最後は、標準のブログフィードを示しています。

現在、5つのモジュールすべてに同じ投稿が表示されています。 ポストオフセットを使用して、さまざまな投稿をさまざまな方法で表示します。

ポストオフセットの調整

始める前に、ブログページがどのように機能するかを決定する必要があります。 現在、モジュールには次のものが表示されます。

• 最初の投稿スライダー–4つの投稿
• 最初のブログモジュール–1件の投稿
• 2番目の投稿スライダー–4つの投稿
• 2番目のブログモジュール–2つの投稿
• 3番目のブログモジュール–3件の投稿

これにより、14の異なるブログ投稿を表示できる可能性があります。 モジュールは2つの異なる方法でセットアップします。 最初のモジュールには、最初のモジュールから最後のモジュールまでの14の投稿が表示されます。 これは、オフセットがどのように機能するかを確認するのに役立ちます。 2つ目は、モジュール間で重複する投稿を表示します。 より面白くて便利なデザインになります。

最初のブログページの例

最初のオプションでは、5つのモジュールすべてで14件の投稿が新しいものから古いものの順に表示されます。

• 最初の投稿スライダー–最新の4つの投稿を表示します
• 最初のブログモジュール– 4つの投稿をスキップし、1を表示します
• 2番目の投稿スライダー– 5つの投稿をスキップし、4つを表示します
• 2番目のブログモジュール– 9件の投稿をスキップし、2件を表示
• 3番目のブログモジュール– 11の投稿をスキップし、3を表示

また、モジュールを初めて開いたときに、各モジュールの投稿数も確認します。

最初の投稿スライダー

ページ上部の投稿スライダーから始めます。 これは、最新の投稿の投稿1〜4を表示します。 歯車をクリックして設定を開きます。

[コンテンツ]で、投稿数を4に設定します。

• 投稿数：4

次に、[オフセット番号]まで下にスクロールして、0に設定されていることを確認します。モジュールに最新の4つの投稿が表示されます。 モジュールの設定を閉じます。

• オフセット番号：0

最初のブログモジュール

次に、最初のブログモジュールの設定を開きます。 このモジュールは、投稿番号5になる1つの投稿を表示します。

投稿数を1に設定します。

• 投稿数：1

ポストオフセットを4に設定します。これにより、最初のポストスライダーに表示される最初の4つのポストをスキップするようにモジュールに指示します。 モジュールを閉じます。

• ポストオフセット：4

セカンドポストスライダー

次に、2番目のPostSliderモジュールの設定を開きます。 これにより、投稿6〜9が表示されます。

投稿数を4に設定します。

• 投稿数：4

投稿オフセットを5に設定します。これにより、前のモジュールで表示された最新の5つの投稿をスキップするようにDiviに指示します。 設定を閉じます。

• ポストオフセット：5

2番目のブログモジュール

次に、2番目のブログモジュールの設定を開きます。 この例では、投稿10と11が表示されます。

投稿数を2に設定します。

• 投稿数：2

ポストオフセットを9に設定します。これにより、他のモジュールによって表示される9つのポストを無視するようにDiviに指示します。 モジュールの設定を閉じます。

• ポストオフセット：9

3番目のブログモジュール

最後に、3番目のブログモジュールの設定を開きます。 このモジュールは、3つのブログ投稿を含むブログフィードを表示します。

投稿数を3に設定します。

• 投稿数：3

投稿オフセットを11に設定します。これにより、ブログモジュールは最新の11件の投稿をスキップし、12〜14件の投稿を表示するようになります。 最新の11件の投稿は、他の4つのモジュールに表示されます。

• ポストオフセット：11

オフセット調整の確認

複数の投稿と異なるオフセットを持つこの数の投稿モジュールを表示すると、非常に速く混乱する可能性があります。 正しい方向に進んでいるかどうかを知る簡単な方法は、前のモジュールの最後の投稿を表示するようにオフセットを設定してから、その数を1つ増やすことです。

たとえば、2番目のモジュールのオフセットを8に変更し、投稿スライダーの最後の投稿と比較することで、これら2つを同じ投稿を表示するように設定しました。 次の投稿を表示するために、オフセットを9に変更することがわかりました。

最初のブログページの結果の例

これで、ブログページに5つの異なる投稿モジュール内の投稿1〜14が表示されます。 同じ投稿を表示するものはありません。 1つの問題は、いくつかの投稿が投稿スライダー内に隠されていることです。 次の例では、ページ上で投稿が失われることなく投稿スライダーを使用できることがわかります。

2番目のブログページの例

次に、同じ投稿数で同じレイアウトを使用しますが、オフセットを変えて、もう少し面白いものを作成しましょう。 これを使用して、特定の投稿を強調表示します。

最新の4つの投稿を表示する最初の投稿スライダーがあります。 最初のブログモジュールは、それを特集するための最新の投稿を表示します。 2番目のブログモジュールは、注目の投稿のコンパニオンとして2番目と3番目の最新の投稿を表示します。 2番目の投稿スライダーには投稿5〜8が表示されます。 ブログフィードには、投稿4から6が表示されます。

これにより、同じ投稿が異なる場所に数回表示され、戦略的に使用できます。

チャートは次のようになります。

• 最初の投稿スライダー–最新の4つの投稿を表示します
• 最初のブログモジュール– 0件の投稿をスキップし、1件を表示
• 2番目の投稿スライダー– 4つの投稿をスキップし、4つを表示します
• 2番目のブログモジュール– 1つの投稿をスキップし、2つを表示します
• 3番目のブログモジュール– 3つの投稿をスキップし、3つを表示

投稿数は変更しません。 各モジュールのオフセット設定を表示します。

最初の投稿スライダー

最初の投稿スライダーモジュールには、最新の4つの投稿が表示されます。 ポストオフセットは0に設定する必要があります。

• ポストオフセット：0

最初のブログモジュール

最初のブログモジュールは最新の投稿を表示します。 投稿オフセットが0の投稿が1つ表示されます。

• ポストオフセット：0

セカンドポストスライダー

2番目の投稿スライダーは最新の4つの投稿をスキップし、次の4つの投稿を表示します。 そのポストオフセットは4に設定する必要があります。

• ポストオフセット：4

2番目のブログモジュール

2番目のブログモジュールは最初の投稿をスキップし、次の2つの投稿を表示します。 そのポストオフセットは1に設定する必要があります。

• ポストオフセット：1

3番目のブログモジュール

3番目のブログモジュールは最初の3つの投稿をスキップし、投稿4〜6を表示します。 2番目のポストスライダーモジュールとオーバーラップします。 ポストオフセットは3である必要があります。

• ポストオフセット：3

2番目のブログページの結果の例

これで、ブログページに最新の8つの投稿が表示されます。 最初の投稿スライダーには最新の4が表示されます。最初と2番目のブログモジュールには1〜3が表示されます。 2番目の投稿スライダーには投稿5〜8が表示されます。 ブログフィードには投稿4〜6が表示されます。

複雑そうに聞こえますが、一度見たら意味のあるシンプルなプランを立てました。 ブログモジュールは投稿1〜6を順番に表示するため、投稿スライダーモジュールを無視して、最後の6つの投稿をすばやく確認できます。 投稿スライダーは、最後の8つの投稿に注意を向けるための別の方法として使用できます。

終わりの考え

これが、Diviブログモジュールでポストオフセットを使用して、用途の広いブログページを作成する方法を示しています。 Diviのオフセットオプションは、多くのデザインの可能性を提供します。 私の例では、表面を引っかいただけです。 複数のブログモジュールと投稿スライダーモジュールを一緒に使用して、ほぼ無限の投稿表示オプションを作成できます。

私たちはあなたから聞きたい。 DiviBlogおよびPostSliderモジュールでPostOffsetを使用していますか？ コメントで教えてください。