お知らせやブログの記事を挿入できる「ポスト」ウィジェットをご存じでしょうか。
Elementor Proには、WordPressの投稿機能で追加した記事一覧を表示するウィジェットが用意されています。
本記事では、Elementor Pro を利用して投稿記事を表示する手順を説明していきます！
本記事を読むことで、Elementor Proを使用して様々なページに投稿記事一覧を表示することができるようになります。
ポストウィジェットの使い方
ポストウィジェットは投稿記事の一覧を表示することができる、Elementor Proの中でも使用頻度の高い機能です。ここでは、Elementor Proのポストウィジェットを使用して、プロフェッショナルなページを作成する方法を紹介します。
まず最初に、「ポスト」ウィジェットを挿入します。
ポストウィジェットを追加すると、ウィジェットの設定画面が表示されます。ポストウィジェットには、「コンテンツ」と「スタイル」を設定を行うことができます。
ここからは、「コンテンツ」の具体的な設定方法を説明していきます！
コンテンツ
コンテンツタブでは、レイアウト・Query・Paginationを選択することができます。
- 「レイアウト」： Elementor Proで用意された、様々なデザインテンプレートを設定することができます。
- 「Qery」： 表示したい投稿を設定することができます。
- 「Pagination」： 投稿のページの送りを細かく設定することができます。
レイアウト
「レイアウト」では、Elementorで用意された様々なレイアウトを設定することができます。
レイアウトの各設定について説明していきます！
スキン
「スキン」は、投稿を表示するためのデザインテンプレートのことで、投稿一覧をどのように表示するかを決定します。３種類のデザインテンプレートがあり、テンプレートによって設定できる内容が変わります。
①Classic：最もシンプルな投稿の表示形式です。
②Card：カード形式で投稿を表示します。
③Full Content：投稿を１カラムで表示します。
※以下、スキン毎に使用可能な設定に番号を付けています。
「カラム」①②
投稿を表示するカラムの数を選択することができます。カラム数は、1～6列で選択できます。
「Post Per Page」①②③
１ページに表示する投稿の数を指定することができます。指定した投稿数を超えた場合、Pagenationが表示されます。（Pagenationを設定した場合）
「画像」①②③
画像の位置(①)、画像のサイズ(①②③)、Masonry(①②)を設定することが出来ます。
Masonryは、一定の高さのコンテナ内に、画像をサイズに応じて自動で配置する方式で、美しいデザインを実現することができます。
「タイトル」①②③
投稿のタイトルを表示するか非表示にするか選択することができます。
タイトルHTMLタグでタイトルのタグを設定することができます。
「抜粋」①②
投稿の抜粋を表示するか非表示にするか選択することができます。
Expert lingthで表示する抜粋の文字数を設定することができます。
ここで注意してほしいのですが、投稿の「抜粋」に入力すると、”Expert lingth”の文字制限は効かなくなってしまいます。
そこで、Apply to custom Excerptオプションを選択することで、WordPressの投稿編集画面で入力されたカスタムな抜粋の文字数を制限することが出来ます。
ここで、１つ目の記事は、投稿編集画面でカスタム抜粋を入力しているのですが、文字数が制限されていません。Apply to custom Excerptでは、日本語は適応されず、英語の単語数のみに適用されます。
「Meta Data」①②③
Auther（著者）、Date（投稿日時）、Time（投稿時刻）、コメント、Date Modified（更新日時）を表示することができます。
Separator Betweenでは、メタデータ間の区切りを設定することができます。
ここで、日時の表示形式は、WordPressの設定にある、日時形式を変更することでカスタムできます。
「Read More」①②
投稿の詳細ページへのリンクを追加することができます。
Read More Text では、リンクテキストを設定することが出来ます。
Open in new Window では、リンククリック時に、新しいタブが開くように設定することが出来ます。
「Badge」②
Cardスキンでのみ、右上に投稿のカテゴリーやタグを表示することができます。
“Badge Taxonomy”で、カテゴリー、タグ、フォーマットを選択することができます。
フォーマットは、投稿ページの「投稿フォーマット」を設定することで、バッジに設定したフォーマットが表示されます。
「Avatar」②
アバターを表示するか非表示にするか選択することができます。
以上が「レイアウト」の設定方法です。次に、「Query」の設定方法を説明していきます！
Query
「Query」では、表示する投稿のタイプ、投稿の数、表示順序などを指定することができます。
取得方法
取得方法を選択することによって、表示する投稿を設定することができます。
まずは、投稿、固定ページ、ランディングページについて説明します。
- 「投稿」：投稿一覧ページの内容を表示します。
- 「固定ページ」：固定ページの内容を表示します。
- 「ランディングページ」：ランディングページの内容を表示します。（テンプレート内のランディングページ内）
INCLUDE
特定のカテゴリーやタグ、投稿者などを設定することで、表示する投稿を設定することができます。
「Include By」 ：Term（カテゴリー、タグ、フォーマット）とAuthor（投稿者）を選択することができます。例えば、カテゴリーが”季節”、投稿者が”utty”の投稿のみを表示したい場合は以下のように設定します。
EXCLUDE
特定のカテゴリーやタグ、投稿者などを設定することで、表示しない投稿を設定することができます。
「Exclude By」：Current Post（現在の投稿）、Manual Selection、Term（カテゴリー、タグ、フォーマット）とAuthor（投稿者）を選択することができます。
「Current Post」： 編集中の自身のページを表示しない設定にすることができます。
「Manual Selection」 ： Search ＆ Select に投稿のタイトルを設定することで、表示しない投稿を自由に設定することができます。
「Avoid Duplicates 」：同じページ内で複数のPostウィジェットを使用する際に、同じ投稿が複数回表示されることを防止することができます。
例えば、カテゴリーが①”季節”、②”未分類”、③”未分類”の３つの投稿があります。
１つ目のPostウィジェットには、①”季節”を表示しない、②③”未分類”を表示します。そして、Avoid Duplicates をオンに設定します。
２つ目のPostウィジェットには、①②③全ての投稿を表示します。そして、Avoid Duplicates をオンに設定します。
ここで、設定をまとめます。
１つ目のポストウィジェット：②③”未分類”を表示（①はExcludeで非表示）
２つ目のポストウィジェット：①”季節”を表示（②③はAvoid Duplicatesで非表示）
この設定は、編集画面では適用されないため、プレビュー画面で確認します。
同じ投稿が複数回表示されていないことが分かります。
Pagination
「Pagination」では、表示する投稿の数やページネーションのデザインを設定することができます。
ここでは、Paginationの各設定方法の説明をしていきます！
Numbers
「Numbers」では、Pagenationが全て数字のみで表示されます。
Page Limit
Paginationに表示させるページ数を設定します。
例えば、「2」を設定すると、最大2ページまでしか表示されなくなります。
Shorten
ページ数が多い場合に、Paginationの数字の一部を「・・・」で飛ばして表示させる設定です。
例えば、6ページある場合は、「123…6」という様に数字を飛ばして表示されます。
配置
ページネーションを表示する配置を「左 / 中央 / 右」に設定することができます。
Previous/Next
「Previous / Next」は、前後のみのPaginationを表示することができます。
Page Limit
Previous / Nextに設定した場合、「Page Limit」を設定しても何も変わりません。
Previous Label / Next Label
「« Previous」「Next »」の表示を変更することができます。
Numbers+Previous/Next
「Numbers+Previous/Next」は、数字と前後のPagenation両方を表示することができます。
各設定は、「Numbers」「Previous/Next」で説明した設定と同様です。
以上で、Elementpr Pro「ポスト」ウィジェットを使った投稿記事一覧を表示が完了です！
ポストウィジェットを利用することで、ブログサイトに記事一覧を簡単に組み込むことができます。ぜひ、ポストウィジェットを利用してブログサイトを構築してみてください！
