next wp

WordPressヘッドレスCMSのnext.jsスターター

デモビデオをご覧ください

これは、WordPress REST APIを使用してWordPressサイトからデータを取得するnext.jsアプリケーションを構築するためのスターターテンプレートです。テンプレートには、投稿、カテゴリ、タグ、著者、およびWordPressサイトからの機能メディアを取得するための関数が含まれており、next.jsアプリケーションでそれらをレンダリングします。

next-wpは、next.js 14、React、TypeScript、Tailwind、Shadcn/UI、およびBrijr/Craftで構築されています。迅速な開発体験のために、Brijr/コンポーネントとうまくペアを組みます。 9d8にキャメロンとブリッジャーによって建設されました。

目次

• WordPressヘッドレスCMSのnext.jsスターター
  • 目次
  • 概要
  • WordPress関数
  • WordPressタイプ
  • ポストカードコンポーネント
    • 小道具
    • 機能
    • 使用法
  • フィルターコンポーネント
    • 小道具
    • 機能
  • 動的サイトマップ

概要

• lib/wordpress.ts > rest apiを介してwordpress cmsを取得するための関数
• lib/wordpress.d.ts > WP REST APIのタイプ宣言
• components/posts/post-card.tsx - >投稿のコンポーネントとスタイリング
• app/posts/filter.tsx >投稿のフィルタリングを処理するためのコンポーネント
• /menu.config.ts >デスクトップとモバイル用のサイトNAVメニュー構成
• /site.config.ts > sitemap.tsの構成
• app/sitemap.ts >動的に生成されたサイトマップ

.env.localファイルに設定する必要がある2つのenv変数があります。

WORDPRESS_URL= " https://wordpress.com "
WORDPRESS_HOSTNAME= " wordpress.com "

.env.localファイルの例を.env.exampleファイル（およびvercel）で見つけることができます。

WordPress関数

lib/wordpress.tsファイルには、WordPress REST APIを使用してWordPressサイトからデータを取得するためのいくつかの機能が含まれています。各関数の簡単な概要は次のとおりです。

• getAllPosts(filterParams?: { author?: string; tag?: string; category?: string; }) ：WordPressサイトからすべての投稿を取得します。オプションで、フィルターパラメーターを渡して、著者、タグ、またはカテゴリによる投稿をフィルタリングできます。

• getPostById(id: number) ：IDで単一の投稿を取得します。

• getPostBySlug(slug: string) ：SLUGで1つの投稿を取得します。

• getAllCategories() ：WordPressサイトからすべてのカテゴリを取得します。

• getCategoryById(id: number) ：IDで単一のカテゴリを取得します。

• getCategoryBySlug(slug: string) ：SLUGで単一のカテゴリを取得します。

• getPostsByCategory(categoryId: number) ：IDで特定のカテゴリに属するすべての投稿を取得します。

• getPostsByTag(tagId: number) ：IDで特定のタグでタグ付けされたすべての投稿を取得します。

• getTagsByPost(postId: number) ：特定の投稿に関連付けられたすべてのタグをIDで取得します。

• getAllTags() ：WordPressサイトからすべてのタグを取得します。

• getTagById(id: number) ：IDで単一のタグを取得します。

• getTagBySlug(slug: string) ：スラグで単一のタグを取得します。

• getAllPages() ：WordPressサイトからすべてのページを取得します。

• getPageById(id: number) ：IDで単一ページを取得します。

• getPageBySlug(slug: string) ：SLUGで1ページをフェッチします。

• getAllAuthors() ：WordPressサイトからすべての著者を取得します。

• getAuthorById(id: number) ：IDで1人の著者を取得します。

• getAuthorBySlug(slug: string) ：単一の著者をナメクジでフェッチします。

• getPostsByAuthor(authorId: number) ：特定の著者によって書かれたすべての投稿をIDで取得します。

• getPostsByAuthorSlug(authorSlug: string) ：特定の著者によって書かれたすべての投稿をスラッグで取得します。

• getPostsByCategorySlug(categorySlug: string) ：SLUGによって特定のカテゴリに属するすべての投稿を取得します。

• getPostsByTagSlug(tagSlug: string) ：SLUGで特定のタグでタグ付けされたすべての投稿を取得します。

• getFeaturedMediaById(id: number) ：IDで注目のメディア（特集画像など）をフェッチします。

これらの機能は、WordPress REST APIと対話し、WordPressサイトからさまざまな種類のデータを取得するための便利な方法を提供します。次の.jsアプリケーションで使用して、WordPressコンテンツを取得および表示できます。

WordPressタイプ

lib/wordpress.d.tsファイルには、さまざまなWordPressエンティティおよび関連データ構造のタイプスクリプトタイプ定義が含まれています。主なタイプの概要は次のとおりです。

• Post ： id 、 title 、 content 、 excerpt 、 author 、 categories 、 tagsなどのプロパティを備えたWordPress投稿を表します。

• Category ： id 、 name 、 slug 、 description 、 parent 、 countなどのプロパティを備えたWordPressカテゴリを表します。

• Tag ： id 、 name 、 slug 、 description 、 countなど、 Categoryに似たプロパティを備えたWordPressタグを表します。

• Page ： id 、 title 、 content 、 excerpt 、 author 、 parent 、 templateなどのプロパティを備えたWordPressページを表します。

• Author ： id 、 name 、 slug 、 description 、 avatar_urls 、 metaなどのプロパティを持つWordPressの著者を表します。

• BlockType ： name 、 title 、 description 、 icon 、 category 、 attributesなどのプロパティを備えたWordPressブロックタイプを表します。

• EditorBlock ： id 、 name 、 attributes 、 innerBlocks 、 innerHTMLなどのプロパティを備えたWordPressエディターのブロックを表します。

• TemplatePart ： id 、 slug 、 theme 、 type 、 content 、 title 、 statusなどのプロパティを備えたWordPressのテンプレートパーツを表します。

• SearchResult ： id 、 title 、 url 、 type 、 subtypeなどのプロパティを使用したWordPressの検索結果を表します。

• FeaturedMedia ： id 、 title 、 caption 、 alt_text 、 media_details 、 source_urlなどのプロパティを備えたWordPressの注目メディア（特徴的な画像）を表します。

• FilterBarProps ：それぞれのプロパティのauthors 、 tags 、 categories 、および選択された値を備えたフィルターバーコンポーネントのプロップを表します。

これらのタイプ定義は、next.jsアプリケーションでWordPressデータを操作する際に、タイプの安全性と自動完了を提供します。 WordPress REST APIと対話するときに、正しいプロパティにアクセスし、予想されるデータ型に合格することを保証します。

ポストカードコンポーネント

components/posts/post-card.tsxファイルには、アプリケーションに単一のポストカードをレンダリングする責任のあるPostCardコンポーネントが含まれています。コンポーネントの概要は次のとおりです。

小道具

• post ：レンダリングするWordPress Postを表すPostオブジェクト。

機能

1. このコンポーネントは、 lib/wordpress.tsのgetFeaturedMediaById 、 getAuthorById 、およびgetCategoryById関数を使用して、投稿に関連付けられた注目のメディア、著者、およびカテゴリを取得します。

2. 指定されたオプションを使用して、 toLocaleDateStringメソッドを使用してポスト日付をフォーマットします。

3. コンポーネントは、投稿のスラグを使用して個々の投稿ページへのリンクをレンダリングします。

4. リンク内には、投稿の特徴的な画像、タイトル、抜粋、カテゴリ、日付が表示されます。

5. 投稿タイトルと抜粋は、HTMLコンテンツを処理するためにdangerouslySetInnerHTML属性を使用してレンダリングされます。

6. コンポーネントは、さまざまなCSSクラスを適用して、ホバーエフェクトや遷移など、ポストカードをスタイルします。

使用法

PostCardコンポーネントを使用するには、目的のページまたはコンポーネントにインポートし、 post PropとしてPostオブジェクトを渡します。

フィルターコンポーネント

components/posts/filter.tsxファイルには、タグ、カテゴリ、および著者に基づいた投稿のフィルタリングインターフェイスを提供するFilterPostsコンポーネントが含まれています。コンポーネントの概要は次のとおりです。

小道具

• authors ：ろ過する利用可能な著者を表すAuthorオブジェクトの配列。
• tags ：フィルタリングする利用可能なタグを表すTagオブジェクトの配列。
• categories ：フィルタリングする利用可能なカテゴリを表すCategoryオブジェクトの配列。
• selectedAuthor ：現在選択されている著者IDを表すオプションの文字列。
• selectedTag ：現在選択されているタグIDを表すオプションの文字列。
• selectedCategory ：現在選択されているカテゴリIDを表すオプションの文字列。

機能

1. コンポーネントは、next.jsのuseRouterフックを使用して、選択したフィルターに基づいてナビゲーションとURLの更新を処理します。

2. タグ、カテゴリ、および著者で投稿をフィルタリングするための3つのSelectコンポーネントをレンダリングします。 Selectコンポーネントは、使用可能なオプションを表示し、ユーザーが特定の値を選択するか、「すべて」を選択してフィルターをリセットできるようにします。

3. フィルター値が変更されると、 handleFilterChange関数がフィルタータイプと選択された値で呼び出されます。それに応じてURLクエリパラメーターを更新し、更新されたURLに移動します。

4. コンポーネントには、「リセットフィルター」ボタンも含まれています。このボタンでは、クリックしたときにhandleResetFiltersフィルターを呼び出して、フィルターを適用せずに/postsページにナビゲートします。

5. 選択したフィルター値は、コンポーネントにプロップとして渡され、 Selectコンポーネントの初期値を設定するために使用されます。

6. 選択したフィルター値は、コンポーネントにプロップとして渡され、 Selectコンポーネントの初期値を設定するために使用されます。

7. 選択したフィルター値は、コンポーネントにプロップとして渡され、 Selectコンポーネントの初期値を設定するために使用されます。

動的サイトマップ

next-wpのサイトマップは@/app/sitemap.tsで生成され、 yourdomain.com/sitemap.xml sitemap.xmlのサイトでライブで表示されます。サイトマップを正しくセットアップするには、Site_domainをsite.config.tsのsite_domainフロントエンドのドメインに更新してください（WordPressインスタンスではなく）。

9d8にブリッジャータワーとキャメロンヤングブラッドによって建設されました