「投稿一覧を表示したいをけどElementorで出来るの？」
「Elementor Proのポストウィジェットで出来るみたいだけども、ちょっと複雑で使い方がわからない！」
こんな風に思ったことありませんか？
Elementor Proのポストウィジェットを使えば簡単に投稿一覧をサイトに追加することが可能です。
Elementor Proをまだ持ってない方はこちらでElementorとElementor Proの違いを説明しています。
投稿一覧を表示させる
まずはこのポストウィジェットをページに挿れます。
このように皆さんの投稿が追加されます。
ですが『Read More』の部分が英語だったり、何列で表示させるかなどカスタマイズしたいですよね。
カスタマイズするために設定画面の使い方を見てみましょう。
投稿一覧のレイアウトを変える方法(ポストウィジェットのレイアウト)
このElementor Proのポストウィジェットはカスタマイズ性が高く、設定項目が多いので順に説明していきます。
スキン
スキンと言うのはそれぞれの投稿のスタイルです。
この三つから選べます。
- Classic
- Cards
- Full Content
それぞれ試してみるとわかると思いますが、ClassicとCardsは似ていて、Full Contentは完全にただ投稿を表示します。
今回はClassicをカスタマイズしていきます。
カラム
カラムは何列で投稿を表示させるかをコントロールします。上の例ではカラムを『５』に設定してるので、投稿一覧が５列で表示されています。
Post Per Page
上の画像の通り、Posts Per Pageを10に設定すると表示される投稿の数が10に増えました。
画像の位置
投稿の画像の位置を設定する項目ですが、『左』と『右』は後で説明する『Image Width』のセクションで説明します。
『なし』はそのまま画像を表示しないと言う意味です。
『上』はデフォルトの状態で、画像が上にきます。
Masonry
このMasonryと言うオプションは画像の位置を『上』にしないと出てきません。
Masonryは画像を『高さで合わせるのではなく、横幅で統一する』と言う設定です。
画像サイズ
これはロードする画像のサイズです。画像を大きく表示しないのなら、変える必要はありません。
Image Ratio
画像の縦と横の比率です。画像のように『１』にすると縦と横の比率が１になり、画像は正方形になります。
Image Width
Image Widthとは画像の幅の意味で、ディフォルトで画像の幅を%で設定可能です。PXにすることもできます。
画像の位置と組み合わせる
画像の位置の設定を『左』か『右』に設定し、Image Widthの値を小さくするとこのように左右に画像を持ってくることができます。
Image Widthを小さくしないと表示がおかしくなるので注意です。
タイトル
このタイトル設定を非表示にすると、タイトルが消えます。
タイトルHTMLタグ
タイトルのHTMLタグを設定する項目です。
H1〜H6とdivとspanとpから選べます。
よくわからない人はH3で問題ないです。
抜粋
この抜粋の設定で非表示にすると、抜粋を消せます。
Excerpt Length
Excerpt Lenghtは抜粋の文字数を設定します。
Meta Data
Meta Dataはタイトルの下に表示出来る、投稿の情報です。
- Author(投稿者)
- Date(投稿日)
- Time(時間)
- コメント
- Date Modified(更新日)
これらを追加したり削除することが可能です。
Separator Between
Separator Betweenで複数のMeta Dataの間の文字を設定できます。
Read More
この設定を非表示にするとRead Moreのリンクを消すことができます。
Read More Text
Open in new window
これを『はい』に設定すると、投稿の画像かRead Moreのテキストをクリックした時に新しいタブで開きます。
投稿一覧フィルターして特定の投稿だけ表示させる方法(Query)
Elementor ProのポストウィジェットのQueryの設定を変えると、特定のカテゴリなどで投稿一覧をフィルターして表示することが可能です。
その設定の仕方を説明していきます。
取得方法
取得方法を設定することで、まず何を表示するのか決定します。
- 投稿
- 固定ページ
- Manual Selection(手動で選択)
- Current Query
- Related(関連した)
色々な種類がありますが、この記事では『投稿』のみを詳しく説明していきます。
IncludeとExclude
Includeは含むと言う意味で、Excludeは除外すると言う意味です。
投稿一覧のフィルターをする時に『次に設定する項目を含む(除外する)』と言う意味合いです。
Include/Exclude By
Includeを設定すると『Include By』と出てきます。
何でフィルターするのかと言う設定です。
『Term』はカテゴリやタグを示し、Authorは投稿者
この例では、Termを選択した後にカテゴリの一つである『イチゴ』を入力しました。
すると『カテゴリー:イチゴ』と出てくるのでそれを選択します。
これでカテゴリーがイチゴの記事だけ表示されます。
複数のカテゴリーを設定することも可能
Date
Dateでは投稿された記事の投稿日によってフィルターすることが可能です。
- Past Day(過去一日)
- Past Week(過去1週間)
- Past Month(過去1ヶ月)
- Past Quarter(過去3ヶ月)
- Past Year(過去一年)
- カスタム
カスタムに設定すると『どの日からどの日までの間に投稿された記事だけ』のように期間を設定することが可能です。
Order By
Order Byで投稿一覧の記事の順番を何で決めるのか設定します。
- Date(投稿順)
- タイトル(タイトルの文字順、例えば『A』の方が『B』より先に来る)
- Menu Order(投稿ではなく『ページ』の場合、『順序』と言う項目がありここに入力する数で順番が決まる)
- ランダム
これらの値で記事の順番を決定することができます。
Order
投稿一覧を表示する時に、順番を先頭から表示するか一番後ろから表示するかを決定する項目です。
ASCは一番後ろからで、DESCは一番前からです。
Ignore Sticky Post
WordPressの投稿にはStickyと言う設定があって、ホームページを初期設定のままにした場合、Stickyに設定された投稿は常に一番上に表示されるようになります。Ignore Sticky Postを『はい』に設定すると、これを無視します。
Query ID
これはサーバー側で更にリストに何かする時に使うIDです。何も挿れる必要はありません。
投稿一覧にページネーションを追加する(Pagination)
投稿の数が多いと、全てページに表示するのは見栄えが良くないですし、見にくいです。
投稿一覧にページネーションを追加すると、その長いリストを分けてページのように表示することが可能です。
ページネーションのタイプです。
Numbers
PaginationをNumbersに設定すると、このように投稿一覧の下に数が出てきて、これらをクリックすることで違う投稿のリストを表示できます。
そしてNumbersを設定するとこのように新しいメニュー項目が出てきます。
Page Limit
これは何ページまで表示するかを設定する項目です。
例えばこれを3に設定すると、5ページまであっても3ページまでしか表示されません。
ユーザーは3ページ以降は見ることができなくなるので注意です。
Shorten
Shortenを設定するとこのように、多くのページがあっても途中が省略されます。
配置
これはページネーションの位置を左寄りか、真ん中か、右寄りに変えることができます。
Previous/Next
次にPaginationをPrevious/Nextに設定してみます。
このように『Previous』と『Next』と言うリンクが出てきます。
Previousを押せば前のページへ、そしてNextを押せば次のページへいきます。
Previous LabelとNext Labelでリンクの文字を変える
このようにPrevious LabelとNext Labelを変えると、リンクの文字が変わります。
Numbers + Previous/Next
二つのページネーションのタイプを同時に表示するわけですね。
これが一番一般的なのではないでしょうか。
まとめ
このElementor Proのポストウィジェットを使えば、簡単に綺麗な投稿一覧ページが出来てしまいます。
しかもフィルターをかけて自分が表示したいものだけ表示することが可能です。
是非かっこいい投稿一覧ページを作って見てください。
もっとElementorのことを知りたい方が、Elementorの使い方を見てください。