next wp 다운로드 - next wp 소스 코드 다운로드

next wp

AI 소스 코드

1.0.0

다운로드

WordPress 헤드리스 CMS 용 JS 스타터

데모 비디오를 시청하십시오

WordPress_next_js 스타터의 9d8

WordPress REST API를 사용하여 WordPress 사이트에서 데이터를 가져 오는 Next.js 응용 프로그램을 구축하기위한 스타터 템플릿입니다. 템플릿에는 게시물, 카테고리, 태그, 저자 및 WordPress 사이트에서 추천 미디어를 가져 오는 기능이 포함되어 있으며 Next.js 응용 프로그램에서 렌더링합니다.

next-wp Next.js 14, React, Typescript, Tailwind, Shadcn/UI 및 Brijr/Craft로 구축됩니다. 빠른 개발 경험을 위해 Brijr/구성 요소와 잘 어울립니다. 9D8에서 Cameron과 Bridger가 제작했습니다.

개요

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 파일로 설정 해야하는 두 가지 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) : 슬러그로 단일 게시물을 가져옵니다.
getAllCategories() : WordPress 사이트에서 모든 범주를 가져옵니다.
getCategoryById(id: number) : ID로 단일 카테고리를 가져옵니다.
getCategoryBySlug(slug: string) : 슬러그로 단일 카테고리를 가져옵니다.
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) : 슬러그로 단일 페이지를 가져옵니다.
getAllAuthors() : WordPress 사이트에서 모든 저자를 가져옵니다.
getAuthorById(id: number) : ID로 싱글 저자를 가져옵니다.
getAuthorBySlug(slug: string) : 슬러그로 싱글 저자를 가져옵니다.
getPostsByAuthor(authorId: number) : 특정 저자가 id로 작성한 모든 게시물을 가져옵니다.
getPostsByAuthorSlug(authorSlug: string) : 특정 저자가 슬러그로 작성한 모든 게시물을 가져옵니다.
getPostsByCategorySlug(categorySlug: string) : 슬러그에 의해 특정 범주에 속하는 모든 게시물을 가져옵니다.
getPostsByTagSlug(tagSlug: string) : 슬러그로 특정 태그로 태그가 지정된 모든 게시물을 가져옵니다.
getFeaturedMediaById(id: number) : ID로 특집 미디어 (예 : 특집 이미지)를 가져옵니다.

이러한 기능은 WordPress REST API와 상호 작용하고 WordPress 사이트에서 다양한 유형의 데이터를 검색하는 편리한 방법을 제공합니다. WordPress 컨텐츠를 가져오고 표시하기 위해 Next.js 응용 프로그램에서 사용될 수 있습니다.

WordPress 유형

lib/wordpress.d.ts 파일에는 다양한 WordPress 엔티티 및 관련 데이터 구조에 대한 TypeScript 유형 정의가 포함되어 있습니다. 다음은 주요 유형에 대한 개요입니다.

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 객체.

기능

이 구성 요소는 lib/wordpress.ts 의 getFeaturedMediaById , getAuthorById 및 getCategoryById 함수를 사용하여 게시물과 관련된 특집 미디어, 저자 및 카테고리를 가져옵니다.
지정된 옵션과 함께 toLocaleDateString 메소드를 사용하여 사후 날짜를 형식화합니다.
구성 요소는 게시물 슬러그를 사용하여 개별 게시물 페이지에 대한 링크를 렌더링합니다.
링크 안에 게시물의 주요 이미지, 제목, 발췌, 카테고리 및 날짜가 표시됩니다.
게시물 제목 및 발췌문은 HTML 컨텐츠를 처리하기 위해 dangerouslySetInnerHTML 속성을 사용하여 렌더링됩니다.
구성 요소는 호버 효과 및 전환을 포함하여 엽서를 스타일링하기 위해 다양한 CSS 클래스를 적용합니다.

용법

PostCard 구성 요소를 사용하려면 원하는 페이지 또는 구성 요소로 가져 와서 Post 객체를 post 소품으로 전달하십시오.

필터 구성 요소

components/posts/filter.tsx 파일에는 FilterPosts 구성 요소가 포함되어 있으며 태그, 카테고리 및 저자를 기반으로 게시물에 대한 필터링 인터페이스를 제공합니다. 다음은 구성 요소에 대한 개요입니다.

소품

authors : 사용 가능한 저자를 대표하는 Author 개체 배열.
tags : 사용 가능한 태그를 나타내는 Tag 객체 배열을 필터링합니다.
categories : 필터링 할 수있는 범주를 나타내는 Category 개체 배열.
selectedAuthor : 현재 선택된 저자 ID를 나타내는 선택적 문자열입니다.
selectedTag : 현재 선택된 태그 ID를 나타내는 선택적 문자열입니다.
selectedCategory : 현재 선택된 범주 ID를 나타내는 선택적 문자열입니다.

기능

구성 요소는 Next.js의 useRouter 후크를 사용하여 선택한 필터를 기반으로 탐색 및 URL 업데이트를 처리합니다.
태그, 카테고리 및 저자별로 게시물을 필터링하기위한 세 가지 Select 구성 요소를 렌더링합니다. 각 Select 구성 요소는 사용 가능한 옵션을 표시하고 사용자가 특정 값을 선택하거나 "모두"를 선택하여 필터를 재설정 할 수 있습니다.
필터 값이 변경되면 handleFilterChange 함수는 필터 유형 및 선택한 값으로 호출됩니다. 그에 따라 URL 쿼리 매개 변수를 업데이트하고 업데이트 된 URL로 탐색합니다.
구성 요소에는 클릭 할 때 handleResetFilters 함수를 호출하여 필터가 적용되지 않고 /posts 페이지로 다시 탐색하는 "필터 재설정 필터"버튼도 포함되어 있습니다.
선택된 필터 값은 구성 요소에 소품으로 전달되며 Select 구성 요소의 초기 값을 설정하는 데 사용됩니다.
선택된 필터 값은 구성 요소에 소품으로 전달되며 Select 구성 요소의 초기 값을 설정하는 데 사용됩니다.
선택된 필터 값은 구성 요소에 소품으로 전달되며 Select 구성 요소의 초기 값을 설정하는 데 사용됩니다.

동적 사이트 맵

next-wp 의 사이트 맵은 @/app/sitemap.ts 에서 생성되며 귀하의 사이트에서 yourdomain.com/sitemap.xml 에서 라이브로 나타납니다. Siteemap을 올바르게 설정하려면 site.config.ts 의 site_domain Frontend의 도메인으로 업데이트하십시오 (WordPress 인스턴스가 아님).

Bridger Tower와 Cameron Youngblood가 9D8에서 제작했습니다

확장하다

추가 정보