next wp
1.0.0
Mira el video de demostración
Esta es una plantilla de inicio para construir una aplicación Next.js que obtiene datos de un sitio de WordPress utilizando la API REST de WordPress. La plantilla incluye funciones para obtener publicaciones, categorías, etiquetas, autores y medios destacados de un sitio de WordPress y hacerlas en una aplicación Next.js.
next-wp está construido con Next.js 14, React, TypeScript, Tailwind, Shadcn/UI y Brijr/Craft. Se combina muy bien con Brijr/componentes para una experiencia rápida de desarrollo. Construido por Cameron y Bridger en 9d8.
lib/wordpress.ts -> Funciones para obtener WordPress CMS a través de REST APIlib/wordpress.d.ts -> Tipo de declaraciones para WP REST APIcomponents/posts/post-card.tsx -> componente y estilo para publicacionesapp/posts/filter.tsx -> componente para manejar el filtrado de publicaciones/menu.config.ts -> Configuración del menú NAV del sitio para escritorio y móvil/site.config.ts -> Configuración para sitemap.tsapp/sitemap.ts -> Sitemap generado dinámicamente Hay dos variables env para establecerse en el archivo .env.local :
WORDPRESS_URL= " https://wordpress.com "
WORDPRESS_HOSTNAME= " wordpress.com " Puede encontrar el ejemplo de archivo .env.local en el archivo .env.example (y en Vercel):
El archivo lib/wordpress.ts contiene varias funciones para obtener datos de un sitio de WordPress utilizando la API REST de WordPress. Aquí hay una breve descripción de cada función:
getAllPosts(filterParams?: { author?: string; tag?: string; category?: string; }) : obtiene todas las publicaciones del sitio de WordPress. Opcionalmente, puede pasar los parámetros de filtro para filtrar publicaciones por autor, etiqueta o categoría.
getPostById(id: number) : obtiene una sola publicación por su ID.
getPostBySlug(slug: string) : obtiene una sola publicación por su babosa.
getAllCategories() : obtiene todas las categorías del sitio de WordPress.
getCategoryById(id: number) : obtiene una sola categoría por su ID.
getCategoryBySlug(slug: string) : obtiene una sola categoría por su babosa.
getPostsByCategory(categoryId: number) : obtiene todas las publicaciones que pertenecen a una categoría específica por su ID.
getPostsByTag(tagId: number) : obtiene todas las publicaciones etiquetadas con una etiqueta específica por su ID.
getTagsByPost(postId: number) : obtiene todas las etiquetas asociadas con una publicación específica por su ID.
getAllTags() : obtiene todas las etiquetas del sitio de WordPress.
getTagById(id: number) : obtiene una sola etiqueta por su ID.
getTagBySlug(slug: string) : obtiene una sola etiqueta por su babosa.
getAllPages() : obtiene todas las páginas del sitio de WordPress.
getPageById(id: number) : obtiene una sola página por su ID.
getPageBySlug(slug: string) : obtiene una sola página por su babosa.
getAllAuthors() : obtiene todos los autores del sitio de WordPress.
getAuthorById(id: number) : obtiene un solo autor por su identificación.
getAuthorBySlug(slug: string) : obtiene un solo autor por su babosa.
getPostsByAuthor(authorId: number) : obtiene todas las publicaciones escritas por un autor específico por su identificación.
getPostsByAuthorSlug(authorSlug: string) : obtiene todas las publicaciones escritas por un autor específico por su babosa.
getPostsByCategorySlug(categorySlug: string) : obtiene todas las publicaciones que pertenecen a una categoría específica por su babosa.
getPostsByTagSlug(tagSlug: string) : obtiene todas las publicaciones etiquetadas con una etiqueta específica por su babosa.
getFeaturedMediaById(id: number) : obtiene los medios destacados (por ejemplo, imagen destacada) por su ID.
Estas funciones proporcionan una forma conveniente de interactuar con la API REST de WordPress y recuperar varios tipos de datos de su sitio de WordPress. Se pueden usar en su aplicación Next.js para obtener y mostrar contenido de WordPress.
El archivo lib/wordpress.d.ts contiene definiciones de tipo TypeScript para varias entidades de WordPress y estructuras de datos relacionadas. Aquí hay una descripción general de los tipos principales:
Post : representa una publicación de WordPress con propiedades como id , title , content , excerpt , author , categories , tags y más.
Category : Representa una categoría de WordPress con propiedades como id , name , slug , description , parent y count .
Tag : representa una etiqueta de WordPress con propiedades similares a Category , incluyendo id , name , slug , description y count .
Page : representa una página de WordPress con propiedades como id , title , content , excerpt , author , parent y template .
Author : Representa a un autor de WordPress con propiedades como id , name , slug , description , avatar_urls y meta .
BlockType : representa un tipo de bloque de WordPress con propiedades como name , title , description , icon , category , attributes y más.
EditorBlock : representa un bloque en el editor de WordPress con propiedades como id , name , attributes , innerBlocks e innerHTML .
TemplatePart : representa una parte de plantilla en WordPress con propiedades como id , slug , theme , type , content , title y status .
SearchResult : representa un resultado de búsqueda de WordPress con propiedades como id , title , url , type y subtype .
FeaturedMedia : Representa medios destacados (por ejemplo, imagen destacada) en WordPress con propiedades como id , title , caption , alt_text , media_details y source_url .
FilterBarProps : representa los accesorios para un componente de la barra de filtro con authors de propiedades, tags , categories y valores seleccionados para cada uno.
Estas definiciones de tipo proporcionan seguridad y autocompleto al trabajar con datos de WordPress en su aplicación Next.js. Se aseguran de que esté accediendo a las propiedades correctas y pase los tipos de datos esperados al interactuar con la API REST de WordPress.
El archivo components/posts/post-card.tsx contiene el componente PostCard , que es responsable de representar una sola tarjeta postal en la aplicación. Aquí hay una descripción general del componente:
post : Un objeto Post que representa la publicación de WordPress que se representará. El componente obtiene los medios destacados, el autor y la categoría asociado con la publicación utilizando las funciones getFeaturedMediaById , getAuthorById y getCategoryById de lib/wordpress.ts .
Formatea la fecha de publicación utilizando el método toLocaleDateString con las opciones especificadas.
El componente convierte un enlace a la página de publicación individual utilizando la babosa de la publicación.
Dentro del enlace, muestra la imagen, el título, el extracto, la categoría y la fecha de la publicación de la publicación.
El título de la publicación y el extracto se representan utilizando el atributo dangerouslySetInnerHTML para manejar el contenido HTML.
El componente aplica varias clases de CSS para diseñar la tarjeta postal, incluidos los efectos y las transiciones de desplazamiento.
Para usar el componente PostCard , importárelo a su página o componente deseado y pasar un objeto Post como post Prop.
El archivo components/posts/filter.tsx contiene el componente FilterPosts , que proporciona una interfaz de filtrado para publicaciones basadas en etiquetas, categorías y autores. Aquí hay una descripción general del componente:
authors : una variedad de objetos Author que representan a los autores disponibles para filtrar.tags : una matriz de objetos Tag que representan las etiquetas disponibles para filtrar por.categories : una matriz de objetos Category que representan las categorías disponibles para filtrar.selectedAuthor : una cadena opcional que representa la ID del autor seleccionada actualmente.selectedTag : una cadena opcional que representa la ID de etiqueta seleccionada actualmente.selectedCategory : una cadena opcional que representa la ID de categoría seleccionada actualmente. El componente utiliza el gancho useRouter de Next.js para manejar actualizaciones de navegación y URL en función de los filtros seleccionados.
Rendera tres componentes Select para publicaciones de filtrado por etiqueta, categoría y autor. Cada componente Select muestra las opciones disponibles y permite al usuario seleccionar un valor específico o elegir "todos" para restablecer el filtro.
Cuando se cambia un valor de filtro, la función handleFilterChange se llama con el tipo de filtro y el valor seleccionado. Actualiza los parámetros de consulta de URL en consecuencia y navega a la URL actualizada.
El componente también incluye un botón "Restablecer filtros" que, cuando se hace clic, llama a la función handleResetFilters para navegar de regreso a la página /posts sin ningún filtros aplicado.
Los valores de filtro seleccionados se pasan como accesorios para el componente y se usan para establecer los valores iniciales de los componentes Select .
Los valores de filtro seleccionados se pasan como accesorios para el componente y se usan para establecer los valores iniciales de los componentes Select .
Los valores de filtro seleccionados se pasan como accesorios para el componente y se usan para establecer los valores iniciales de los componentes Select .
El Sitemap para next-wp se genera en @/app/sitemap.ts y aparecerá en vivo en su sitio en yourdomain.com/sitemap.xml . Para configurar su mapa del sitio correctamente, asegúrese de actualizar el site_domain en el site.config.ts para que sea el dominio de su frontend (no su instancia de WordPress).
Construido por Bridger Tower y Cameron Youngblood en 9d8
