WordPressのテーマビルダープラグイン「Elementor」のファンブログ

検索
Close this search box.

ポストウィジェットの使い方 (Query編)

ポストウィジェットの使い方 (Query編)として、前回のレイアウト編の続きとなります。レイアウト編をまだご覧になられていない方は是非、合わせてお読み下さい。

ポストウィジェットの使い方 (レイアウト編)

ポストウィジェットの使い方 Query編のクエリーって?

Queryを直訳すると「問い合わせ」「要求」などという意味になります。これは投稿データが保存されているデータベースに要求するイメージとなります。どの様な条件でデータベースに問い合わせるのか?を設定する事が出来ます。

おじさん
おじさん

やけに難しい角度で来たな・・・

失礼しました・・・実は自分もQueryの意味を知らなかったので、調べた結果をまとめたら、なんか難しい感じになっちゃいました。

身の丈ね、身の丈。

おばさん
おばさん

何を要求する?(取得方法)

まず設定したいのは、取得方法です。 何を並べる?の「何を」に当たる部分です。

  • 投稿(投稿を並べるよー)
  • 固定ページ(固定ページを並べる!)
  • ランディングページ(Elementorのランディングページを並べる)
  • Manual Selection(自分で何を並べるか決めるぞー)
  • Current Query(今見ているページの・・・)
  • Related (関連しているページを並べます。)

ざっくりこんな感じです。それでは1つ1つ見て参りたいと思います。

投稿

これは文字通りWordPressの投稿を並べるという意味になります。固定ページなどは含まれません。

取得方法|投稿の場合

固定ページ

これも文字通り、WordPressの固定ページを並べるという意味になります。投稿などは含みません。

取得方法|固定ページの場合

ランディングページ

これはElementorの機能の1つ「ランディングページ」を指します。

Elementorのランディングページ

WordPress(ダッシュボード)の「テンプレート」の中に「ランディングページ」があります。もし出ていない方で使ってみたい!という方は、WordPress>Elementor>設定>実験中タブの中で設定が出来ます。

ランディングページ機能を有効にする

そのランディングページを並べる設定となります。

取得方法|ランディングページ

「サンプルLP」というのが、先ほどElementorのランディングで作成したページとなります。

ランディングページを並べる事ある?

おばさん
おばさん

頻度は高くないですが、例えばサービスをLP化して、それをサービス一覧として表示する的な・・・くらいですかね?

Manual Selection

マニュアルセクションは指定したコンテンツを並べる事が出来ます。つまり並べたい物を選びたい時にこれを選択します。これは固定ページでも投稿でもランディングページでもなんでも指定出来ます。

取得方法|Manuel Selection

Current Query

直訳すると「現在のクエリ(Google翻訳より)」つまり、見ているページを表示します。

post_x
取得方法|Current Query
おじさん
おじさん

ん?それって意味あるのか?見ているページの中に見ているページのブロックが表示されるって事は、そのブロックをクリックすると見ているページがまた表示されて・・・それで、またその中の・・・

ちょっと待って下さい・・・(汗)落ち着きましょう。

なかなか利用条件が限られてきますが、アイデア1つで使えそうなクエリーだと思います。

Related

直訳すると「関連している(Google翻訳)」となり、見ているページと関連する投稿を並べてくれます。

取得方法|Related

取得条件を指定する

取得するモノについてみてきました。  「投稿」「固定ページ」「ランディングページ」「Manual Selection(選択したコンテンツ)」「Current Query(見ているページの情報)」「Related(関連するコンテンツ」の6つありました。 次は「どの様な条件で」を設定します。

INCLUDEとEXCLUDE

注意:「Manual Selection」と「Current Query」を選択した場合は、表示されません。

おじさん
おじさん

どれが出来て、どれが出来ないっていうのが面倒だな・・・

説明する上で注意書きとさせて頂きましたが、実際使う上では、画面に表示されたものが選択可能な項目となるので、覚えておく必要もなく、そこまで難しくはないですよ。

早速ですが、INCLUDEは「何を含める」、EXCLUDは「何を除外する」の意味となります。これは同時に使う事が出来ます。まずは「include(含める)」を見ていきましょう。

include|設定画面

include By

include Byは「Term(カテゴリーやタグを指します)」と「Author(著者・ライターを指します)」の2種が選択できます。

INCLUDE|設定画面

Termを選択した場合は、次に出てくる「Term」という設定項目で具体的なカテゴリーやタグを指定する事で、上記のスクリーンショット画像の様に、指定された「カテゴリーA」の投稿が一覧に表示されます。例えば、ご自身のブログで「旅行」というカテゴリの投稿だけを表示したい場合は、include Byは「Term」を選択し、「Term」で「カテゴリー:旅行」を選択すると、カテゴリー:旅行の投稿だけを並べる事ができます。

Termは複数指定るする事が出来ます。例えば、「カテゴリー:A」「カテゴリー:D」と設定した場合、カテゴリーAの投稿と、カテゴリーDが付いた投稿が表示されます。

AとかDとじゃなくて、なんか具体的に言ってもらえない?

おばさん
おばさん

す、すみません・・・では気を取り直して

例えば「カテゴリー:旅行」と「カテゴリー:夏」と設定した場合、「旅行」の投稿と「夏」の投稿が表示される事になります。

むすこ
むすこ

ANDではなく、ORしか出来ないんですか?

なかなか鋭いご質問ですね!実は2種以上のカテゴリーを設定した場合は、OR条件(いづれかの条件1つでも該当するもの)となるのですが、カテゴリーとタグの場合は、AND条件(両方の条件に該当するもの)となります。

分かりそうでわからんな。

おじさん
おじさん

例えば、カテゴリーが「旅行」とタグが「北海道」設定したとします。その場合、カテゴリーとタグの組み合わせとなる為、AND条件になります。つまり、「旅行のカテゴリーで、北海道というタグの付いた投稿」が一覧に表示される事になります。

Exclude By

Exclude Byは「Current Post(表示している投稿やページ)」「Manuel Selection(指定した投稿やページ)」「Term(カテゴリーやタグ)」「Author(著者)」の4種類を除外対象として扱えます。

Exclude By|選択項目

例えば、「このページとこの投稿は一覧から除外したい」となった場合、Manuel selectionを選択し、表示させたく無いものを指定するだけです。

Exclude By|設定画面

INCLUDEとEXCLUDEの同時利用

ちょっと応用ですが、INCLUDEとEXCLUDEを同時に設定した場合の例を見てみます。

INCLUDEの設定

まずはINCLUDEの設定です。カテゴリーの複数はAND条件ではなく、OR条件になるので「カテゴリーAかカテゴリーBが付いている投稿」という指定になります。

次にEXCLUDEの設定です。

EXCLUDEの設定

こちらは除外するものを指定します。この場合、タグBが付いた投稿を除外する設定となります。

INCLUDEとEXCLUDEを合わせると、下記の条件指定にて投稿一覧が表示されます。

「カテゴリーAまたはBの投稿で、タグBが付いていない投稿を表示」

おばさん
おばさん

あームリ

この部分は説明を理解するより、実際お試し頂く方が分かりますので、是非ご自身の環境で色々とテストして見て下さい。

EXCLUDEのOffset指定

少々マニアックなのですが、EXCLUDEを選択すると「投稿」「固定ページ」「ランディングページ」に限り、Offsetという項目が表示されます。

Offsetの設定画面①

このOffsetを1にしてみます。すると1番上に表示されていたブログ⑨が消え、ブログ⑦が先頭になります。

Offsetの設定画面②

つまり、Offsetは「先頭から何番目まで」という指定となり、EXCLUDE(除外)条件なので、「先頭から何番目までを除外する」という指示になります。

Avoid Duplicates(重複を避ける)

これは説明が難しいのですが、まずはこちらをご覧下さい。

Avoid Duplicatesの設定画面

黄色枠部分でAvoid Duplicatesをはいにしています。次に赤枠にポストウィジェットを配置(無条件で投稿を表示させています)そして青枠にも別のポストウィジェットを配置(これも無条件で投稿を表示させていたます)※区別しやすい様に、レイアウトは変えております。

おじさん
おじさん

つまりポストウィジェットを2つ設置しているって事だね。

そうです!ケースバイケースにはなりますが、ポストウィジェットを2つ同じ画面で使う場合がAvoid Duplicatesが機能する条件となります。

ここで注意が必要です。Avoid Duplicatesの設定の下に「Set to Yes to avoid duplicate posts from showing up. This only effects the frontend.」と、注釈があります。直訳すると「重複する投稿が表示されないようにするには、[はい]に設定します。 これはフロントエンドにのみ影響します。」つまり、フロントエンドなので、編集画面では機能せず、プレビューまたは実際のページで機能する事になります。

Avoid Duplicatesのフロントエンド画面

お分かり頂けただろうか・・・ひと言で言えば、2つ以上のポストウィジェットで同じ投稿が表示されない様にする事が出来るという事です。

お分かり頂けませんね!

おばさん
おばさん

そんなぁ〜。

と言っても仕方がないですよね。これもやはり実際ご自身の環境でやってみて「おー!」となった方が分かるかもしれません。

並び順を設定しよう!

クエリー編も最終局面を迎えております!最後は並び順を設定しましょう。並び順に関係する項目は「Date(何日以内に投稿されたか)」「Order By(何順に並べるか)」「Order(昇順と降順)」の3つとなります。それでは1つ1つ見て行きましょう!

「Date(何日以内に投稿されたか)」

選択可能なのは、以下となります。

  • すべて:投稿日に関係なく
  • Past Day:1日以内に投稿されたもの
  • Past Week:1週間以内に投稿されたもの
  • Past Month:1ヶ月以内に投稿されたもの
  • Past Quarter:四半期以内に投稿されたもの
  • Past Year:1年以内に投稿されたもの
  • カスタム :指定の期間に投稿されたもの

例えば、Past Weekを選択した場合、1週間以内に投稿されたもの、つまり1週間経過するとその一覧からは消えます。そのため「新着のお知らせ」や「新着ニュース」と言ったページにマッチしそうですね。更に言えば、先ほどの「Avoid Duplicates」を活用して、2つのポストウィジェットを設置、上には「新着ニュース」と題して「Past Week」を設定します。もう1つのポストウィジェットは「過去ニュース」と題し、「Avoid Duplicates」をオン!そうする事で、1週間「新着ニュース」に表示されたのち、1週間後には自動的に「過去ニュース」に移動する形となります。

おじさん
おじさん

なるほど〜これでポストウィジェットを2つ使う理由がわかったよ。

まだまだ活用方法はありそうですね!

むすこ
むすこ
おばさん
おばさん

なによ、理解してるわよ・・・

ほんとですか〜?

もう1つアイデアとしては、カスタムを設定します。カスタムは「いつからいつまでの間に投稿された」または「いつまでに投稿された」、「何日以降に投稿された」という条件設定が出来ます。それを活かす事で、手作業にはなりますが「今月の投稿」「今週の投稿」など、期間で区切る事も出来ます。

Order By(何順?)

  • Date:日付順
  • タイトル:あいうえお順
  • Menu Order:投稿に順番のデータを付与(※)
  • ランダム Order:ランダムに並べる

Dateとタイトルとランダムはおそらく説明なくとも大丈夫かと思います。問題は「Menu Order」です。これはデフォルトのままでは使えない為、コードを追加する必要があります。(プラグインとかあるのかな?)ここでは申し訳ございませんが割愛させて頂き、どうしても分からないよーという場合は、お手数ではございますが、質問センターよりご連絡下さい。

おばさん
おばさん

ちょっと何出し惜しみしてるのよ!

出し惜しみではなくて、コードを追加する事によってWordPressがエラー起こしたりするリスクがあるので・・・

Order(昇順・降順)

ASC(昇順)とDESC(降順)の2択。当たり前ちゃー当たり前ですが。

Ignore Sticky Posts(固定投稿を無視する)

これはまずWordPressの機能である投稿固定機能を説明します。投稿一覧上で常にトップに表示する機能で、設定はWordPress側で行います。

トップに固定|設定画面

チェックを入れ保存(更新)し、投稿一覧に戻ると・・・

トップに固定|一覧画面

タイトルの横に「先頭固定表示」と出ます。これで通常であればブログ一覧(ポストウィジェット)のトップに表示されます。確認してみましょう!

トップに固定|検証画面

そこで・・・実はこれは本題ではなく、Ignore Sticky Posts(固定投稿を無視する)です。まぁもうお分かりですよね?この設定をオンにするとたちまち「トップに固定」は無視され、ポストウィジェットの設定されたルールに従います。

ここで注意なのが、編集画面では反映されないという事です。この設定はフロントエンド(プレビューや実際の公開されたページ)で確認する必要があります。トップに固定されない!!と慌てず、更新してプレビュー画面などで確認しましょう。

おばさん
おばさん

私が忘れそう・・・って思ったでしょ!!

いえいえ、そんなまさかっ・・・

Query ID

これは投稿一覧のルールを、プログラミングで作る際、(紐づける為の)IDを設定します。例えば、作ったルール(プログラム)の名前が「favorite」の場合、このQuery IDに「favorite」と入れると、そのプログラムが反映される仕組みとなります。

が、、、上級者向けの項目のため、どうしても!という場合を除き、使う事はあまりありません。

まとめ

いかがでしたでしょうか? ポストウィジェットの使い方 (クエリー編)一気に説明するとなんだか難しそうに感じるかもしれませんが、やりたい事に向けて必要な箇所だけ参考にして頂ければ、そこまで難しくないと思います。ので、、、是非とも1度ブログ一覧を作ってみて下さい!

なかなか自分じゃ覚えられないよ・・・出来ないなぁ〜という方にオススメなのが、マンツーマンオンライン講座の「Elementor Fan School」です!講座の1つに「ブログの作り方講座」があります。この講座ではポストウィジェットの使い方をはじめ、ブログの作り方をまるっとお教え致します!ElementorProを導入されたばかりの方や、ホームページに「お知らせブログ」や「会社のブログ」などを実装されたい方にオススメの講座となっておりますので、是非ご覧下さい!

Elementor Proをご検討の方は公式サイトでチェック

Elementor Proに関するご質問がある方は質問センターへ!

気軽に仲間に質問したい方はElementor Fan Clubへ!

この記事の関連講座

Elementorを使うためのWordPress講座
ブログの作り方講座

author

Picture of ITKA / 加藤 誠

ITKA / 加藤 誠

Elementorを使い始めて6年目、好き過ぎてファンブログを始めて4年。Elementorを使って年間約30サイトを制作しております。主にWebマーケティング支援事業を中心とし、現在5社の顧問・コンサルティングとして携らさせて頂いております。Elementorのご相談からWeb集客のご相談はお気軽にお問い合わせ下さい。

こちらもご覧下さい

ポップアップ!

こんな感じで横スライドイン!
なんてことも出来ます。