はい みなさん こんにちは今日のオンラインワークショップ ようこそ きてくださいました今日はクエイリループブロックで ブログページを作ろうというテーマで用意させていただいています簡単に私の自己紹介ですが 私 ベント言いますベント ぜひ読んでください1992年から日本に住んでいますちょっと北海道なんですけれども 顔はこうなんですが中身はほぼ日本人だと思ってますので よろしくお願いしますワードプレイスは2014年から 開い始めています最初は色々なサイト 自分のサイトや少し団体のサイトを作ったりしていたんですが3、4年前からワードプレイスの カッサマサポートもしばらくしていましたその後 今年は ワードプレイスのコミュニティの方にフルタイムで貢献するようになり今はトレーニングチームというチームでワードプレイスの学習教材を作ったり学習教材を作る人のサポートをしたり ということをやっていますそれが なるほどと理解する瞬間が好きですので毎回のワークショップで行ってるんですが何か今日学んでる中で なるほどとも瞬間があればぜひ ルームのチャットに なるほどと言えてください私もそれを見て 原動力をいただいていきますのでよろしくお願いしますこのオンラインワークショップなんですけれどもワードプレイスのオフィシャルの トレーニングチームが主催していますコンセプトとしては 共に学びましょうということですいつでも質問していいですしどなたが質問に答えても構いません私が食べ立派なしなども面白くないのでぜひ皆さんお互いに質問したり 答えあったりしていただけたらなと思います英語のワークショップはほぼ毎日 開催されているんですけれども今 日本語は主催者私だけなので1 2 くらいのインドで開催していますもし 他にも開催したいという方がいれば大歓迎ですので ぜひ教えてくださいまた このセッションは録画されて後日 ワードプレイス.tvにアップされます参加できなかった人にもぜひ内容を見ていただきたいと思ってますのでご了承くださいここまでで特に質問とかないでしょうか大丈夫ですかねありがとうございますでは 最初に皆さん一つお尋ねします皆さんのブロックエディター経験はどれくらいですかと先ほど自己紹介でも簡単にお話いただいたんですけど1番 今日が全く初めての初心者です10番 ベテランで例えばブロックをカスタムブロックを自分でコードで 書いたりしていますというベテランその1から10で表現すると皆さんのブロックエディター経験 大体何くらいでしょうか少しそれを参考に私も話を包めますのでズームのチャットとか音声で教えていただけたらと思います2段階以外ですか2位くらいですね石原さんと矢岐さんを3番くらいとありがとうございます少し丁寧に今日もお見せしようと思いますので何か早かったとか今それ何やったんですかっていうのがあったらぜひ止めて尋ねていただけたらと思いますちなみに私は個人的に6か7かそれくらいかなと思っていますさすがにコードでオリジナルのブロックを来ることはちょっとやったことないんですけれどもこういうセッションの中でいろいろブロックエディターにあふれているのでいろいろ皆さんにお見せできたらなと思っていますさて今日の内容はブロックエディターの中でももしかしてと一番協力かもしれないクエリループブロックというブロックについて紹介していきますおまかにまずクエリループブロックの紹介をした後パターンを使ってクエリループの作成が可能になってますのでそのパターンを使った場合そして最終的にはもう1からクエリループブロックを自分で組み立てていってブログページとかアーカイブページといったものを編集する流れを実演で皆さんにお見せしたいなと思いますよろしいでしょうかでは内容に入っていこうと思いますまずクエリループブロックの紹介クエリという単語は正直英語でもあまり日常的に使う単語ではないと思うんですね問い合わせるという自処的な意味がありますがプログラミング言語の世界ではプログラムやデータベースに対して何々が欲しいとか何々して頂戴と命令を出すときその命令をクエリと言うんですね例えば検索エンジングーグルなどに皆さんが単語を入れて検索って押すとあるいはグーグルにこの単語に関する結果を頂戴と命令を出しているので実は検索の単語はクエリなんです私たちがクエリをグーグルに送ってグーグルが答えの検索結果を返してくれるとそういったように命令を出すことをクエリと言いますなので今回のクエリループブロックは何か命令が関わってるわけですねワードプリスのオフィシャルのサイトにはクエリループブロックは指定したパラメータに基づいて投稿を表示することができる高度なブロックですという説明がありますつまりですね自分のサイトに対してこれこれの条件に合う投稿を表示してと私たちが命令を出すとそれに合った投稿を返してくれるというそういう仕組みのブロックになっていますなのでブロックを設定した後にいろいろ条件を私たちの方で指定しなければいけません条件を指定するとその条件に合わせた投稿が返ってくるというブロックです今思い出したんですけれども今日のスライドのリンクを皆さんにお送りしますもちろん終わった後に見ていただいてもいいですしご自分のパソコンでこれを開いてもし私が進むの早かったり遅かったりした場合復習していただけるかなと思いますので今ズームのチャットにスライドのリンクを送りましたはいクエリルブブロックテクニカルの話はこの辺にして実際に見ていきたいと思いますサイトでクエリルブブロックがどう機能しているかこれから私がお見せするサイトはローカルで立ち上げたサイトで自分のパソコンをサーバに見立てて立ち上げたサイトになります11月1日にワードプレス6.1配信のワードプレスが配信されて先週か今週ですね6.1.1というアップデートがさされましたのでこの最新のワードプレスを使っていますで テーマも今月からデフォルトのテーマが新しくなりました20232023年用のテーマが配信されましたので早速このテーマを使っていますであ 大丈夫ですかねはいサンプルデータに自分でいろいろサンプルデータを作ってもいいんですけどちょっと時間活用のためにワードプレステーマユニットテストデータというオフィシャルなサンプルデータがワードプレスから出されていますなので今回はそれを利用しましたサイトのこれが今日使うテストサイトですこれフロントページで2023のデフォルトテーマは割とシンプルなレイアウトになっていますここに今投稿がいろいろ出てましてアイキャッチ画像が付いている投稿もいくつかありますねこれになりますで ポイントは他のプラグインを使っていないということですインポートプールはテストデータもインポートのために入れたんですけれども今日はプラグインなしテーマもデフォルト本当にコアのワードプレスだけの機能を使ってますのでワードプレスだけでここまでできるということを皆さんに見ていただけたらなと思いますはいでは イーザン ガッてみましょうクエリーユープブロック今 新しい固定ページを作りました新規固定ページで早速 クエリーユープブロックを導入しますで 左上のプラスマークを押すとブロックの挿入ができますこちらの黒いプラスマークでも構いませんこれを押しまして検索もできるクエリーあれ?クエリー 肩かんじゃなくてクエリーだと検索かけでこの出てきますし探される場合はここにそのグループ名が出てるので下の方にテーマというグループがあるんですねテーマというグループの中にクエリーブブロックがありますのでこれをページに導入します導入した後 選択と新規と2つあるのでこの説明はこれからしますけれどもとりあえず選択をします選択をして選択を押すととりあえずこれでブロックがページに入りましたクエリーブブロックがページに入りましたで これをプレビューしてみましょう新しいタブでプレビューするとあれはクエリーブブロックがプレビューがうまくいかないのはもう早速失敗ですねこの実験が公開してみますか公開して固定ページを表示するとあららららららちょっとお待ちください実験するとこういう失敗が表示かねないのであれなんですけどあららなんか来ましたとりあえずはいクエリーブブクエリーというのは何か命令を出すとそれにアームドが書いてくれた話でクエリーブの命令条件というのが右のブロックの設定の中にありますで これをちょっと今簡単に見ていきますけれども設定の下にまず投稿タイプというのがありますワードプレイスにはデフォルトで投稿そして固定ページという2種類の投稿タイプがありますこのクエリーブブロックはどちらかを指定してそれに該当する投稿だったり該当する固定ページも表示することができますもしカスタム投稿タイプを導入されていればここでカスタム投稿タイプを選択することも可能です例えばオンラインショップを持っていて商品という投稿タイプがあればそれを商品っていうのをここで選んで表示させることも可能です並び順投稿順だったりアルファベット順表示させる順番を指定できますし戦闘固定表示の投稿を含めるか除外するかという設定もありますこれはワードプレイスの投稿の中にいつも上に置きたい戦闘に固定するという設定があるんですね戦闘に固定すると指定された投稿を含めるか含めないかといった設定になりますでもう一つここの絞り込みっていうのが結構鍵になるんですね最初は何も表示されてないんですけどプラスマークを押すことによってさらに条件をここに出すことができます卓損みこれまたなんかよく意味のわからないあの方々なんですけど要するにカテゴリーとタグのことを卓損みと言います例えばここに何かカテゴリーを指定してこのカテゴリーの投稿だけ表示してほしいとかこのタグの投稿だけ表示してほしいという指定ができるんですねここがそのクエリになります例えばHTMLというタグがこのサンプルデータにはあるのでこれを選択すると今左に表示されている投稿が変わったことに気づいていただけたでしょうか今HTMLというタグのついた投稿だけを表示するということになったんですねもしこれを消すともう一度すべての投稿を表示する設定なのでこういう形でタグをここで指定して投稿をさらに絞り込むことができますあとの絞り込みとして調査例えば複数人で投稿を描いているサイトであれば特定の調査に関する投稿をここで絞ったりあるいはキーワードキーワードはもうタグとかと関係なくその投稿に含まれている単語で絞って表示させることができますそして今は1個、2個、3個の投稿が表示されているんですけれどもここの表示設定というボタンを押すとここで表示する投稿の数を増やすことができます例えば5個にするとここに出ている投稿も1、2、3、4、5個と増えたりオフセットというのは最初何個、最初いくつかの投稿を飛ばした後の5個を表示する例えば最初3つを飛ばしてその次の投稿から数えて5個を表示するというような設定ができますこれはサイトのデザインをする時に少し使える設定なので後でどういった時に使えるかお見せしようと思いますあともう1つここにある設定としてグリット表示が可能です今投稿は縦に並べているんですけどこれをグリットにして3×3の列で表すといったこともできますここにカラムの数の変更が表示できるのでカラムを例えば2列にして2列で投稿表示するとかもっと増やすといったこともここでは可能ですとりあえずクエリループブロックの大枠どこで条件を設定してどうやって導入するかという話をしましたが一旦ここで止まって皆さんから質問とかないかお尋ねしたいと思いますとりあえず今までの内容で分かりにくかったところとかここもう1回見せてほしいといったそういうところはないでしょうか今矢木さんミュートになってますよ何か話されました実は自分の使ってるテーマで先生のやられたことを真似しようと思ってやってたんですけどクエリループブロック右側のクエリループというのは出たんだけど細かい設定が出てこなかったんですけどやっぱりこれは使うテーマの問題ですかねたぶんですけど私無意識に実はやったことがあったのでちょっともう1回お見せしますクエリループを足しまして選択でとりあえず導入した後にここの設定がもしかすると付いてるかもしれないですテンプレートからクエリを継承これ何になってますですよねこれがオンの状態だとテーマの方で設定したクエリ条件を引き継ぐという意味なんですよこれをオフにしていただくとさっき話したいろんな条件が出てきます確かにオフにしたら出ましたあ、はい良かったですなるほどはい石原さんからも質問が来てますオフセットをもう一度お願いできますかという設定ですはい、質問ですオフセット、ここの設定ですねオフセットというのは最初いくつかの投稿を飛ばしたその飛ばした後から何個表示してっていうその最初いくつかを飛ばす設定なんです例えば今この設定だとHello Worldがあってやたあとタイトルの長い投稿があってMarkup, HTML, Tag, Formatという順番になってますもしクエリループのオフセットで位置にすると最初1個の投稿を飛ばした後から表示するという設定ですで、こっちを見ていただくとHello Worldがなくなりましたさっきまで一番上にHello Worldがあったんですけどそれを飛ばしてこのタイトルが長い投稿から3つ表示されるようになったんです例えばオフセットをもう1個増やすとHello Worldもタイトルの長いあの投稿も消えてHTML, Tag, Formatという投稿から3つ表示されるようになりました石原さんどうでしょうかオフセットどういう使い方をするのでしょうかはいちょっとじゃあ使い方は後でお見せしますのでもうちょっと待っていただいていいですか後で実際にブログページを作るというところでオフセットの使い方をお見せしますはいでは一旦いいでしょうかとりあえずクエリループブログの概要という内容ですで、クエリループは結構強力なブログですのでパターンが凝いされていますなので最初導入する時にはパターンを買って導入してそれを編集していくのがいいかなと思います先ほどクエリループブログを導入するとこの画面になりましたこの日本語がちょっと難しいので補足をしますけれども左の選択というのは依存パターンから選択するという意味でいくつかパターンが凝いされていてパターンの中から選んで買うという時には選択をします新規というのは自分で新しい位置からクエリループブログを組み立てるという時に使うボタンですなので選択をしていただくといいと思いますそうするともう一個画面が表示されるんですこの画面もちょっと分かりにくいので補足説明なんですけど上に見えているこの部分はそのパターンのプレビューですお使いのサイトの方向を自動的に引き込んでプレビューを見ててくれますけどこのパターンじゃないか他のパターンが欲しいなという時は左下のこの矢印を押すことで次のパターンを見る次のパターンを見るということができるそして中央にもう一つパターンプレビューの表示切り替えというボタンがあるのでこれはちょっとの実際にお見せして説明しようと思いますもう一回このクエリルプブロックをちょっと削除しまして新しくここに導入します今バックスラッシュ入力するとブロックの追加もできるのでバックスラッシュとここからクエリルプを選択しますこの画面ですね左の選択はこれパターンを選択するという意味なので選択をしますとこの画面になりますここの矢印でパターンの切り替えができるんですねどのパターンかいいかなと見ていくことができますがここのグリート表示にするとここにもう複数のパターンを並べて見せることができるんで個人的にはこっちの方が選びやすいかなとも思いますこの点線で見えますかね点線で区切られているここまでがまず一つ目のパターンで右側のこの黒いのも二つ目のパターンでここから三つ目のパターンがあって四つ目のパターンがあってというふうに今グリート表示でいろいろなパターンが表示されていますここでパターンを選ぶと例えばこのパターンがいいと押すとそれが導入される形になっていますとりあえずこのパターンはどこから選ぶかという説明なんですけどとりあえず大丈夫でしょうかはい大丈夫のようですねありがとうございますではいざパターンを入れた後どうやって編集をするかということなんですねでクエリループブロックの構造まあこちらも開いてみますけれどもクエリループというブロックの中には必ず一つ投稿テンプレートというブロックがあります他にも他のブロックが入ってる可能性はあるんですけど投稿テンプレートというのが必ず一つ入ってますで投稿テンプレートの中がまたいろいろブロックが入ってるんですねここのブロックの入れ方がテンプレートごとに変わってきますパターンごとに変わってきますなのでクエリループブロックの構造としてクエリループという親ブロックがありその中に必ず投稿テンプレートというブロックがありそしてその下にもう一つあのモロモロのパーツが入っているとこの三段階なんですでなぜ三段階になっているかというとクエリループの中であっても投稿テンプレートの中なのか外なのかでブロックの挙動が変わってくるんですこれいずれもクエリループの中なんですけど投稿テンプレートというブロックの外に入れられたブロックは一度しか表示されません投稿テンプレートというブロックの中に入れられたブロックは方向の数だけ表示が繰り返されますこれがちょっとややこしいんですけどこれがクエリループブロックの強力な点なんで実演してお見せしたいと思いますもう一度クエリループを入れましてちょっと見やすくするためにグリッと表示にしてこのタイトルの長い投稿が少し邪魔なのでタグを指定しますちぼり込みでタグhtmlという投稿を表示するようにしましょう今ここに3つの投稿が出てます今使っているパターンはここに区切りブロックというブロックが入ってますこれですね各投稿の下に区切り線が入っているんですこの区切り線は投稿テンプレートの中にあるので各投稿について区切り線が表示されますこの区切りブロックを例えばここに移動した場合これまだクエリループの中なんですけど投稿テンプレートの外になりましたこうした場合この区切り線はここに出るんですこの一番上にちょっと広くしてこれですねここに区切り線が一個やってきて各投稿の区切り線はこれでなくなりましたこういった形で投稿テンプレートの外にあるブロックは一度のみ表示されて投稿テンプレートの中にあるブロックはこの投稿ごとに表示される例えばこれを下に移動した場合もそうですねこれ投稿テンプレートの下に区切り線がありいずれも区切りループの中のブロックなんですけれどもここに一個だけ区切り線が表示されて各投稿に区切り線はなくなるこの区切り線どこに移動してもこれは投稿テンプレートの中なので各投稿について区切り線が表示されている状態ですひとまずこの投稿テンプレートというブロックの役割わかってもらえたでしょうか大丈夫ですかねさてはい石原さんなるほどありがとうございますはいでは今はこれパターンを使って区切りを導入した例なんですけれどもパターンを使わない場合をお見せしたいと思いますねえーとこうですね区切りループにして今度は新規の方を選びます新規を選ぶとパターンではないんですけれどもさっきのパターンはもう出来上がっているパターンなんですけどこっちは大指示のパターンを選択しますちょっとまぎらわしいんですけどまあ出来上がってないパターンと思ってくださいあの本当に最低限のあの要素をいくつか入れている形ですまあリーマータイトルと日付をとりあえず選択しますけれどももう一度ちょっとタクソの右でHTMLというタグに限定しますがこれでとりあえずシンプルな区切りループが入りましたここからが区切りループのすごいところだと思うんですねえーと従来は例えばブログページとかアーカイブページこのカテゴリーページとかはデザインを編集しようと思うとプログラミングスキルが必要だったんですあのだいたいテーマの方でもうブログページとかアーカイブページのデザインは決まっていてあの私たちユーザーがエディターの中でそれを変更することはできなかったんですがこの区切りループグロックを使うとそのデザイン部分を結構自由自在に変更することができます投稿テンプレートというのは先ほど話したその投稿ごとの表示ですね例えば今投稿タイトルと投稿日だけ表示されているんですけれどもここに他の情報も足したいなと思うことがあるかもしれません例えば投稿タイトルの下に後に挿入しますがもう一度ここのテーマに来ると例えばですねその投稿の抜粋を入れるとかあの投稿のコンテンツを丸ごと入れるということもできますし投稿のアイキャッチ画像とかあとは投稿者その投稿者人のアバターとかを表示させることができますで例えば今ここでは投稿者を選択して今私ここに1個だけ投稿者を入れたんですけれども1 2 3と各投稿について投稿者が表示されるようになりましたでこれがこれは投稿テンプレートの中にあるから投稿テンプレートブロックの中に投稿者を入れたので全部の投稿について表示されました例えばここ名前が出るようになったんでアバターは別にいいかなと思ったら投稿者ブロックのこの設定でアバターを消すとか例えば投稿者の名前の色を赤にしようとかこういった感じでこの編集ができます従来のワードフェスだとこの辺りは全部あのテーマで決まっている部分なので自分で色を変えるとか投稿者を見せるとか見せないといったそういう編集はできなかったんですがクエリループだとできる例えば投稿者と今日付上下になってるんですがこれを横に表示したいといった場合にその編集も可能です2つのものを横に見せるブロックはカラムブロックというのがあります例えばここでカラムというのがここにあるんでカラムを導入し左と右にこのカラムにします投稿者を左のカラムに入れて日付を右のカラムに持ってくると全部の投稿に対してその編集が今聞いたわけですね例えばここの文字を右寄せにするとかこういった編集が可能ですここがクエリループブロックの強いところかなと思うんですねこのこういった投稿の表示を自分で編集できる一旦ここまでで質問とかないでしょうかよろしいですかはいどうぞ先生の画面で画面左側にリスト表示でクエリループとか回送構造で表示されている部分が私が試すと出てこないんですけれどもこれは何か何が見えてますか今こういう状態ですか左側は空欄ですね空欄ダブルのマークの右側にプラスじゃなくて追加ボタンという日本語のボタンが入っていてその右側にツール元に戻すやり直す詳細リスト表示とはいリスト表示かそうですね出ましたありがとうございます良かったですあともう一つよろしいですかいいですよ今色を変えるというところで右側のブロックで色のところを見せていただいたじゃないですかはいであのでこのテーマのカラーがあるんですけど下の方に行くとなんかの拡張色A拡張色Bとかなんかの未定義の色の部分があるかと思うんですけどはいはい今打ちているやつももっと下の方ですねはいこの辺りですねこのあたりに多分この拡張色は自分で色を定義できるんですかねあのちょっとクエリーループの話から飛びすぎてるようであれは大丈夫ですけど私は実はこの下にはもう出てこないです今テーマとデフォルトだけなのでおそらくお使いのテーマかプラグインが導入している機能だと思います普通はないのかあの標準だとないので多分そうですで例えば色をそこの拡張の色もちょっとわかんないですけど押した後にここの上の長方形を押すと色の設定ができるんですよあああのはいはい私のやつの上にそういう長方形が出ないですねあ、ないですかじゃあこれはもうテーマというかはい私の導入したテーマかプラグインの関係でそういうのが出て出なくなってるってことなんでしょうかと思います多分ですねテーマの設定であればあのテーマの設定画面が多分どこか別のところにあるのでもしかしたらそこで色の設定とかできるかもしれないですそうですねあのその観点からああじゃあ標準ではそういうのはなさそうということわかりましたはいありがとうございますはいえー今石原さんからも質問がきました投稿日の表示を最終交進日にしたら並び順の日付もこの日付順に変わりますかとなるほどちょっとあの私すぐにはわからないのでちょっとやってみましょう今投稿日がこれですね投稿日の表示を最終交進日を表示ですこれですね最終交進日えーとでえー並び順の日付もこの順番になりますかじゃあ今ちょっと特殊記号を含むタイトルこれの投稿を私更新します今2013年になってるのでえーとですねちょっと私これを更新してでもし更新して上に来たら石原さんの言ってるとおりですねあの最終交進日で変わるとなんだこれですねこれを今ちょっと私編集して更新これで更新してみましょうでこちらに戻って多分ちょっとこれ更新しなきゃいけないですねページの再読み込みをしますするとここの日付は確かに今日の日付になったんですが投稿の場所は変わらなかったですのでえー残念ということですね投稿のえーとこれですね今表示順が投稿順なんですけど編集順ではないということですね編集をしてもやっぱり一番最初の投稿の日付で決まっちゃうとじゃあもう一個ちょっとやってみましょうこれの水気を変えましょう今これこの投稿ですねこれをクイップ編集でもうこの日付を今日の日付に変えちゃいましょう2012年の11月の今日は今日何日でしたきょうは19日19日で更新をして予約済みあーもう1個ちょっとやってみましょうこれの予約済みあー昨日の日付にしましょう昨日の日付にして更新をするとこちらに戻ってきてこれはおそらく変わると思うんですけどこれは上に来ましたねうんなのでもし順番を変えたければもう本当にその投稿の日付を変える必要があるということになりますはいいいでしょうかもうちょっとじゃあ説明をしますはい今クエリループの中に他に2つブロックがあるんですページ送りと結果なしページ送りというのはここですこの前のページに戻るとか次のページに進むでもうここは従来のワードクレースだったら絶対にユーザーが変えることはできなかったんですねこれはもうテーマのほうでこれをプエリループブロックだとユーザー自身が変更することができます例えば今左予選なのを中央に持ってくるとかブロックの設定でですね今横方向になっているのを縦にするもう前のページページ番号次のページにするとか矢印をここに足すあるいはシェブロンシェブロンというのをこの三角角個2つのことを言うらしいですけれども足すとか例えば文字を大きくする小さくするといった設定あるいはテキストの色を変えるリンクの色を変えるこういったこともブロックの中で編集が可能になりましたこれもともとですねこれを編集した結果がこうなっています次のページに進むと前のページに戻るというのがあったりこれで選択ができるここもクエリルプブロックだとユーザー自身が編集可能ですもう一つ結果なしというブロックがありますこれはクエリに対してこれこれの投稿を表示してと命令を出してその投稿がなかった場合に書いてくる結果ですブロックページとかを通常作るときはこれは必要ないんですけれども例えばカテゴリー別のカテゴリーページを作ったりタグページを作ったりして後々カテゴリーを編集したりタグを編集したりすることがあればそのカテゴリーの投稿がなくなっちゃうということもあり得るんですよねそういった時にユーザーがサイトに来てただただ真白い画面になって何も表示されないよりかは万が一結果がなかった時の文字をここで決めることができます残念ホームに戻る戻るとか言ってこのホームに戻るというのを自分でニーニーリンクを貼ったりすることも可能ですもう一つさっきお見せするのがあってたんですよこの前のページという文字も編集ができるんですよ戻りましょうとかこういった感じで編集ができますこれもフェリループの強いところかなと思います石原さんもテキストの色が色が変わるのはわかりやすくなっていいですねとはい色とか大きさとか色々に入れ替えれるのは本当にブロックエリタの強いところだと思いますもう一つ何か質問とかありましたかもう一つ先ほどオフセットの使い道に関する質問があったので少しそれをお話ししたいと思うんですけど大丈夫でしょうかこれを更新して新しい投稿を私ページを作ります今私固定ページにクエリブロック入れてるんですけどどのページあるいは投稿にも入れることができます投稿にも入れることができますしカスタム投稿を持っている場合はカスタム投稿にクエリループを入れることも可能なのでサイトのどこにでも入れることが可能ですさてオフセットの例ここにもう一度クエリループを入れてオフセットを使う例をお見せします例えばサイトのデザインとしてたまに見かけるのはサイトの一番上に最新の投稿が例えば横に3つ並びでアイキャッチ画像があってそれより古い投稿はページの下の方に別な形で表示するということがあるんですねこのオフセットを使うと同じようなことができます例えばクエリループの中に今ちょっと見出しを入れますか前に挿入でここに見出し見出しで最新最新の投稿でここら辺は50人変更可能なんですけど最新の投稿ここは3つだけにしたいで3つだけにして例えば今ページ送りが入ってるんですけど3つだけにしたいからページ送りはなし結果なしもいらないかなと必ずここに3つ表示されるようにしたいでそれ以降の投稿は改めて下に2つ目のクエリループブロックを表示させることができます例えば2つ目のクエリループこっちはパターンを使ってみようと2つ目のクエリループの中に例えばここに見出しでもっと古い投稿というのを入れてでこのままだとここに1 2 3と出てる投稿がこちらのクエリループにも1 2 3と2回表示されるんですねでこれはもう3つ飛ばしていいのでここでオフセットを使うことができますクエリループ2つ目のクエリループのあれクエリループのこれか今設定がここにこれが出てないのはおさくこれこれがついてたので設定がなかったんですけどこれを消すと設定が出てきますこれで最新の投稿3つはもう上に表示してるからその3つは飛ばしてその後から投稿表示するという設定にできますあとにここに今度はページ贈りがあったほうがいいたくさんの投稿があり得るのでこちらにページ贈りブロックを追加しましたこれをちょっと見てみましょうこれを公開してページを見てみるとこれはだから同じページにクエリループブロックを2個使った場合です上の最新の投稿には1 2 3と表示されていてあれ戦闘固定表示が何が出てますね戦闘固定表示が戦定固定表示の投稿今含めるになっているのでこれを除外しましょう除外すると3つになりました1 2 3個の投稿を上に見せてもっと古い投稿はその3個を飛ばした1 2 34 5 6と表示してここにページ贈りがあると次のページを表示すると最新の投稿はまだ上にあるんですけど古い投稿が次の投稿たちが表示されるオフセットの使い方としてこういうのがあるかなと思うんですけど石原さんでしたっけ質問いただいたの説明になったでしょうかこういう使い方があるんだなというのが分かっていただけたでしょうか古い投稿に戦闘固定表示は出ますか見てみましょうクエリループの今戦闘固定表示の投稿ありになっているんですね出てます出てますだから私設定6にしているのに1 2 3 4 51 2 34 5 6ある出てます出てますけど答えになったでしょうか新しい戦闘固定表示でも大丈夫なんですね新しく戦闘固定表示の投稿を出しても大丈夫かということですかね大丈夫ですクエリループブロックは投稿をどんどん私たちが投稿して公開して追加していっても必ずその時一番新しい密とかその時の固定表示させる投稿を計算して出してくれるブロックになりますだいぶまた私話を続けてしまったんですよ皆さんの方で質問とかこれをもう一回見せてほしいとか最後ちょっとこれやってみてくださいみたいなのないでしょうかすいませんちょっとミュート解除しました今の例だと新しい投稿のところは戦闘固定表示除外してますよねそれでそれを古い投稿のほうでもし戦闘固定表示が新しいの入れちゃった場合に上では出てないけど下ではオフセットを3にしておくとそれが入ってくるから新しい投稿の3番目に出たやつは見えちゃうのかなっていうのが気になってあーなるほどもし新しい投稿をここで作り戦闘固定戦闘固定としてこれを投稿したこれを特に固定して私の作り方これを作ったときにどうなるかっていう話ですねこの最新の投稿は除外してるから出ないけれど見てみましょうそうですね最新の投稿は除外してるから出てないですがあっ古いほうは除外しないかに来ちゃうという感じですねそうですねん?でもここはオフセットをゼロでしたっけ今オフセット3ですオフセットは3なのでえーとあの不思議ですね言いたことわかりますよ最新はこれなのにそれがここで除外されてここに無視を出ているとうんあのはいなんかちょっと不思議ですね最新だけどまあちょっとじゃあこれをオフセットをゼロにしてみましょうオフセットをゼロにしてもう一回ちょっとページを更新すると上は変わってないんですけどこちらが一個2結構続いているのでこれをここに出て大丈夫ですよねクエリループをオフセットを3にすると本当は最新のこれを飛ばすはずなのにどうしても出てきちゃうからあっおそらくオフセットは今固定表示を含めているので固定表示は必ず出してっていうそういうことなんじゃないでしょうか例えば今私6つページごとに6つ表示するにしてるんですけど実際何個出ているかというと1,2,3,4,5,6,7,8個出ているので固定表示を含めたらそれはオフセットに関係なく出てくるんですねということですねだから固定表示2個と3個飛ばした後の6つっていう形になっていますありがとうございましたあのなのでこの条件組み合わせると結構複雑なことできちゃうですけどなんか迷っちゃいそうな気もしますねあのどうなってるんだろうとなるほどはいちょっと時間がもうあれなので一旦ここでスライド最後お見せしたいと思いますけど6が終わった後にももし質問とかあれば引き続き私いますので皆さんの対応したいと思いますまず今日ありがとうございました1時間クエリループブロックについてたくさん知っていただくことができたでしょうか2回また12月にこのオンラインワークショップを企画しています今年11月1日にワールドプレイス6.1が公開されたんですけれども結構ここで新機能が加わったんですね特にその色とか形とかデザインに関する機能がたくさん増えましたしまた今日あまり詳しくは見なかったんですけどその2023年の新テーマもカラーバリエーションがあるからだけじゃなくてタイプグラフィー文字とか配列に関するバリエーションがたくさん含まれた新テーマなので来月はこの6.1のアップデート内容を皆さんで見てみるそういうのを企画していますもし興味がありましたら今からここのリンクから参加登録ができますのでぜひお集まりください今日は長い間見ました私ベンでしたスラックあるいはツイッターでの連絡先をここに載せてますので続き質問とかあればここからでも連絡いただけますまたワードプレースはこのランドとワードプレース登録というサイトで教育協裁をたくさん公開しています今は大部分英語なんですけれども徐々に翻訳作業なども進めてますのでぜひこちらも参照の上他の教材も見ていただけたらなと思いますまずこのセッションご参加くださりありがとうございましたありがとうございましたありがとうございます