【WordPress】「WP GraphQL」でページネーションを設定する
2022/12/25
2022/12/25
WordPressヘッドレスCMSを作る時に「WP GraphQL」を使用してページネーションを実装したかったので、その時のやり方をまとめておきます。
プラグイン「WPGraphQL Offset Pagination」を追加する
「WPGraphQL Offset Pagination」のgithubページからzipファイルをダウンロードして、WordPressにプラグインとして追加します。
ページごとの記事一覧データを取得する
プラグインを追加したら、「取得したいページ番号」や「1ページごとの記事数」に合わせてクエリを指定することができます。
offsetPagination内のsize
は「1ページあたりの記事数」、offset
は「取得開始位置」です。
(offset: 0
では記事一覧の1記事目〜、offset: 10
は記事一覧の10記事目〜、offset: 20
は記事一覧の20記事目〜、で取得されます)
「1ページ10記事」取得するクエリ
// 1ページ目
posts(where: {offsetPagination: { size: 10, offset: 0 }}){
nodes {
title
}
}
// 2ページ目
posts(where: {offsetPagination: { size: 10, offset: 10 }}){
nodes {
title
}
}
// 3ページ目
posts(where: {offsetPagination: { size: 10, offset: 20 }}){
nodes {
title
}
}
「1ページ20記事」取得するクエリ
// 1ページ目
posts(where: {offsetPagination: { size: 20, offset: 0 }}){
nodes {
title
}
}
// 2ページ目
posts(where: {offsetPagination: { size: 20, offset: 20 }}){
nodes {
title
}
}
// 3ページ目
posts(where: {offsetPagination: { size: 20, offset: 40 }}){
nodes {
title
}
}
最近の記事
![](/_next/image?url=https%3A%2F%2Fcraft-time.jp%2Fwp-content%2Fuploads%2F2023%2F11%2F%E7%94%BB%E5%83%8F%E4%BD%9C%E6%88%90-7.png&w=3840&q=75)
音楽生成AI「Suno」の使い方まとめ!作詞作曲が簡単にできる?
簡単に曲が作れるAIということでよく聞く「Suno(Chirp)」についてまとめました。
目次「Suno」とはテキストからさまざまな音声を生成する「Bark」歌詞から曲を生成する「Chirp」...
2023/11/24
2023/11/24
![](/_next/image?url=https%3A%2F%2Fcraft-time.jp%2Fwp-content%2Fuploads%2F2023%2F11%2F%E7%94%BB%E5%83%8F%E4%BD%9C%E6%88%90-5.png&w=3840&q=75)
【Open AI】APIの料金まとめ|GPT・DALL·E・Whisperなど
Open AIのAPI(一部)の料金をまとめました。
参考のために日本円は「1ドル150円」で換算をしています。
目次Text generation: テキスト生成Assistants ...
2023/11/22
2023/11/22
![](/_next/image?url=%2Fimages%2Fnoimage.png&w=3840&q=75)
【Next.js】Assistants APIの基本的なコードまとめ。
Open AIの「Assistants API」をNext.jsで使用する時の基本的なコードをまとめました。
目次Open AIのAPIセットアップ基本の使い方Threads: スレッドを作る...
2023/11/21
2023/11/21
![](/_next/image?url=https%3A%2F%2Fcraft-time.jp%2Fwp-content%2Fuploads%2F2023%2F11%2F%E7%94%BB%E5%83%8F%E4%BD%9C%E6%88%90-1-1.png&w=3840&q=75)
【Next.js】Open AIのAPIでファイルをアップロードする方法。
今回は、Next.jsサイトからOpen AIのAPI(Upload file)で、ファイルをアップロードする方法を実装するのに時間がかかったのでその過程と最終コードをまとめます。(Vercelにデ...
2023/11/21
2023/11/22
![](/_next/image?url=%2Fimages%2Fnoimage.png&w=3840&q=75)
「生成系AIのWEBプロダクトTOP50」をまとめてみる。
Andreessen Horowitzが出している記事で紹介されている「AIプロダクトの月間訪問者数ランキングTOP50」のサービスをまとめました。
目次ChatGPTcharacter.ai...
2023/10/3
2023/10/3
![](/_next/image?url=%2Fimages%2Fnoimage.png&w=3840&q=75)
【Next.js 13】NextAuth+FireStoreにユーザー情報を保存する。
今回は、以下の3つをNext.js 13で実装するためのメモです。
Googleアカウントでログインできる
アカウント、セッション情報をFirestoreに保存する
サーバーサイ...
2023/7/12
2023/7/12