next wp
1.0.0
Посмотрите демо -видео
Это стартовый шаблон для создания приложения Next.js, который получает данные с сайта WordPress, используя API WordPress REST. Шаблон включает в себя функции для извлечения постов, категорий, тегов, авторов и представленных носителей с сайта WordPress и рендеринг их в приложении Next.js.
next-wp построен с Next.js 14, React, TypeScript, Tailwind, Shadcn/UI и Brijr/Craft. Он прекрасно сочетается с Brijr/компонентами для быстрого опыта разработки. Построен Кэмероном и Бриджером на 9d8.
lib/wordpress.ts -> Функции для извлечения WordPress CMS через REST APIlib/wordpress.d.ts -> Декларации типа для WP REST APIcomponents/posts/post-card.tsx -> Компонент и стиль для сообщенийapp/posts/filter.tsx -> компонент для обработки фильтрации постов/menu.config.ts -> Конфигурация меню навигации сайта для настольных и мобильных/site.config.ts -> Конфигурация для sitemap.tsapp/sitemap.ts -> динамически сгенерированная карта сайта Существует две переменные env , необходимо установить в .env.local файл:
WORDPRESS_URL= " https://wordpress.com "
WORDPRESS_HOSTNAME= " wordpress.com " Вы можете найти пример файла .env.local в файле .env.example (и в Vercel):
Файл lib/wordpress.ts содержит несколько функций для извлечения данных с сайта WordPress, используя API WordPress REST. Вот краткий обзор каждой функции:
getAllPosts(filterParams?: { author?: string; tag?: string; category?: string; }) Необязательно, вы можете передать параметры фильтра, чтобы фильтровать сообщения по автору, тегу или категории.
getPostById(id: number) : получает один пост по его идентификатору.
getPostBySlug(slug: string) : извлекает один пост за его слизняком.
getAllCategories() : извлекает все категории с сайта WordPress.
getCategoryById(id: number) : получает одну категорию по его идентификатору.
getCategoryBySlug(slug: string) : получает одну категорию по ее слизняку.
getPostsByCategory(categoryId: number) : извлекает все сообщения, принадлежащие конкретной категории по его идентификатору.
getPostsByTag(tagId: number) : выбирает все сообщения, с меткой конкретной тег по его идентификатору.
getTagsByPost(postId: number) : избирает все теги, связанные с конкретным сообщением с помощью его идентификатора.
getAllTags() : извлекает все теги с сайта WordPress.
getTagById(id: number) : получает один тег по его идентификатору.
getTagBySlug(slug: string) : извлекает один тег за его слизняком.
getAllPages() : извлекает все страницы с сайта WordPress.
getPageById(id: number) : извлекает одну страницу по его идентификатору.
getPageBySlug(slug: string) : выбирает одну страницу за ее слизняком.
getAllAuthors() : извлекает всех авторов с сайта WordPress.
getAuthorById(id: number) : получает одного автора по своему идентификатору.
getAuthorBySlug(slug: string) : выбирает одного автора по своему слизняку.
getPostsByAuthor(authorId: number) : избирает все сообщения, написанные конкретным автором их идентификатором.
getPostsByAuthorSlug(authorSlug: string) : извлекает все сообщения, написанные конкретным автором их слизняком.
getPostsByCategorySlug(categorySlug: string) : извлекает все сообщения, принадлежащие конкретной категории по ее слизняку.
getPostsByTagSlug(tagSlug: string) : избирает все сообщения, теги с определенным тегом по его слизняку.
getFeaturedMediaById(id: number) : извлекает избранные медиа (например, изображение) по его идентификатору.
Эти функции обеспечивают удобный способ взаимодействия с API WordPress REST и извлечь различные типы данных с вашего сайта WordPress. Они могут быть использованы в вашем приложении Next.js для получения и отображения контента WordPress.
Файл lib/wordpress.d.ts содержит определения типа типа для различных объектов WordPress и связанных с ними структур данных. Вот обзор основных типов:
Post : представляет пост WordPress со свойствами, такими как id , title , content , excerpt , author , categories , tags и многое другое.
Category : представляет категорию WordPress со свойствами, такими как id , name , slug , description , parent и count .
Tag : представляет тег WordPress со свойствами, похожими на Category , включая id , name , slug , description и count .
Page : представляет страницу WordPress со свойствами, такими как id , title , content , excerpt , author , parent и template .
Author : представляет автора WordPress со свойствами, такими как id , name , slug , description , avatar_urls и meta .
BlockType : представляет тип блока WordPress со свойствами, такими как name , title , description , icon , category , attributes и многое другое.
EditorBlock : представляет блок в редакторе WordPress со свойствами, такими как id , name , attributes , innerBlocks и innerHTML .
TemplatePart : представляет шаблонную часть в WordPress со свойствами, такими как id , slug , theme , type , content , title и status .
SearchResult : представляет результат поиска из WordPress со свойствами, такими как id , title , url , type и subtype .
FeaturedMedia : представляет избранные носители (например, изображение) в WordPress со свойствами, такими как id , title , caption , alt_text , media_details и source_url .
FilterBarProps : представляет реквизиты для компонента фильтра с authors свойств, tags , categories и выбранных значений для каждого.
Эти определения типа обеспечивают безопасность типа и автозаполнение при работе с данными WordPress в вашем приложении Next.js. Они гарантируют, что вы получаете доступ к правильным свойствам и передаете ожидаемые типы данных при взаимодействии с API WordPress REST.
Файл components/posts/post-card.tsx содержит компонент PostCard , который отвечает за рендерирование одной почтовой карты в приложении. Вот обзор компонента:
post : объект Post , представляющий пост WordPress, который будет представлен. Компонент получает избранные средства массовой информации, автора и категорию, связанную с постом, используя функции getFeaturedMediaById , getAuthorById и getCategoryById от lib/wordpress.ts .
Он форматирует дату поста, используя метод toLocaleDateString с указанными параметрами.
Компонент отображает ссылку на отдельную страницу поста, используя слизняк сообщения.
Внутри ссылки он отображает изображение Post, заголовок, выдержка, категория и дата.
Название POST и выдержка отображаются с использованием атрибута dangerouslySetInnerHTML для обработки контента HTML.
Компонент применяет различные классы CSS для стилирования почтовой карты, включая эффекты наклонения и переходы.
Чтобы использовать компонент PostCard , импортируйте его в нужную страницу или компонент и передайте объект Post в качестве post Prop.
Файл components/posts/filter.tsx содержит компонент FilterPosts , который предоставляет интерфейс фильтрации для сообщений на основе тегов, категорий и авторов. Вот обзор компонента:
authors : массив Author объектов, представляющих доступных авторов для фильтрации.tags : массив объектов Tag , представляющих доступные теги для фильтрации.categories : массив объектов Category , представляющих доступные категории для фильтрации.selectedAuthor : необязательная строка, представляющая выбранного в настоящее время идентификатор автора.selectedTag : необязательная строка, представляющая в данный момент выбранное идентификатор тега.selectedCategory : необязательная строка, представляющая в данный момент выбранную идентификатор категории. Компонент использует крюк useRouter от Next.js для обработки навигации и URL -обновлений на основе выбранных фильтров.
Он отдает три Select для фильтрации сообщений по тегу, категории и автору. Каждый компонент Select отображает доступные параметры и позволяет пользователю выбирать определенное значение или выбирать «все» для сброса фильтра.
Когда значение фильтра изменяется, функция handleFilterChange вызывается с типом фильтра и выбранным значением. Он обновляет параметры запроса URL соответственно и перемещается в обновленный URL.
Компонент также включает в себя кнопку «Сбросить фильтры», которая при нажатии вызывает функцию handleResetFilters , чтобы перейти обратно на страницу /posts без каких -либо фильтров.
Выбранные значения фильтра передаются в качестве реквизита для компонента и используются для установки начальных значений компонентов Select .
Выбранные значения фильтра передаются в качестве реквизита для компонента и используются для установки начальных значений компонентов Select .
Выбранные значения фильтра передаются в качестве реквизита для компонента и используются для установки начальных значений компонентов Select .
Карта сайта для next-wp генерируется по адресу @/app/sitemap.ts и появится в прямом эфире на вашем сайте по адресу yourdomain.com/sitemap.xml . Чтобы правильно настроить карту сайта, обязательно обновите site_domain в site.config.ts , чтобы стать доменом вашего фронта (не ваш экземпляр WordPress).
Построен Bridger Tower и Cameron Youngblood на 9d8
