next wp
1.0.0
Regardez la vidéo de démonstration
Il s'agit d'un modèle de démarrage pour la création d'une application Next.js qui obtient les données d'un site WordPress à l'aide de l'API WordPress REST. Le modèle comprend des fonctions pour récupérer des publications, des catégories, des balises, des auteurs et des supports en vedette d'un site WordPress et de les rendre dans une application suivante.js.
next-wp est construit avec Next.js 14, React, TypeScript, Tailwind, Shadcn / UI et Brijr / Craft. Il se marie bien avec Brijr / Composants pour une expérience de développement rapide. Construit par Cameron et Bridger à 9d8.
lib/wordpress.ts -> Fonctions pour récupérer WordPress CMS via l'API RESTlib/wordpress.d.ts -> Déclarations de type pour l'API WP RESTcomponents/posts/post-card.tsx -> Composant et style pour les publicationsapp/posts/filter.tsx -> Composant pour gérer le filtrage des publications/menu.config.ts -> Configuration du menu de navigation de site pour le bureau et mobile/site.config.ts -> Configuration pour sitemap.tsapp/sitemap.ts -> Sitemap généré dynamiquement Il existe deux variables env doivent être définies dans .env.local Fichier:
WORDPRESS_URL= " https://wordpress.com "
WORDPRESS_HOSTNAME= " wordpress.com " Vous pouvez trouver l'exemple du fichier .env.local dans le fichier .env.example (et dans Vercel):
Le fichier lib/wordpress.ts contient plusieurs fonctions pour récupérer les données d'un site WordPress à l'aide de l'API WordPress REST. Voici un bref aperçu de chaque fonction:
getAllPosts(filterParams?: { author?: string; tag?: string; category?: string; }) : récupére tous les messages du site WordPress. Facultativement, vous pouvez transmettre des paramètres de filtre pour filtrer les publications par auteur, tag ou catégorie.
getPostById(id: number) : récupére un seul message par son identifiant.
getPostBySlug(slug: string) : récupére un seul post par sa limace.
getAllCategories() : récupère toutes les catégories du site WordPress.
getCategoryById(id: number) : récupère une seule catégorie par son identifiant.
getCategoryBySlug(slug: string) : récupère une seule catégorie par sa limace.
getPostsByCategory(categoryId: number) : récupère tous les messages appartenant à une catégorie spécifique par son identifiant.
getPostsByTag(tagId: number) : récupère tous les messages marqués avec une balise spécifique par son identifiant.
getTagsByPost(postId: number) : récupère toutes les balises associées à un message spécifique par son identifiant.
getAllTags() : récupère toutes les balises du site WordPress.
getTagById(id: number) : récupére une seule balise par son identifiant.
getTagBySlug(slug: string) : récupère une seule balise par son limace.
getAllPages() : récupére toutes les pages du site WordPress.
getPageById(id: number) : récupére une seule page par son identifiant.
getPageBySlug(slug: string) : récupére une seule page par son limace.
getAllAuthors() : récupère tous les auteurs du site WordPress.
getAuthorById(id: number) : récupère un seul auteur par leur identifiant.
getAuthorBySlug(slug: string) : Répondance à un seul auteur par leur limace.
getPostsByAuthor(authorId: number) : Répondance à tous les articles écrits par un auteur spécifique par leur identifiant.
getPostsByAuthorSlug(authorSlug: string) : Répondance à tous les articles écrits par un auteur spécifique par leur lissonne.
getPostsByCategorySlug(categorySlug: string) : récupère tous les messages appartenant à une catégorie spécifique par sa litthe.
getPostsByTagSlug(tagSlug: string) : Répondance à tous les messages marqués avec une balise spécifique par sa lisson.
getFeaturedMediaById(id: number) : Répondance aux médias en vedette (par exemple, image en vedette) par son identifiant.
Ces fonctions fournissent un moyen pratique d'interagir avec l'API WordPress REST et de récupérer divers types de données de votre site WordPress. Ils peuvent être utilisés dans votre application Next.js pour récupérer et afficher le contenu WordPress.
Le fichier lib/wordpress.d.ts contient des définitions de type de type pour diverses entités WordPress et structures de données connexes. Voici un aperçu des principaux types:
Post : représente un message WordPress avec des propriétés telles que id , title , content , excerpt , author , categories , tags , etc.
Category : représente une catégorie WordPress avec des propriétés comme id , name , slug , description , parent et count .
Tag : représente une balise WordPress avec des propriétés similaires à Category , y compris id , name , slug , description et count .
Page : représente une page WordPress avec des propriétés comme id , title , content , excerpt , author , parent et template .
Author : Représente un auteur WordPress avec des propriétés telles que id , name , slug , description , avatar_urls et meta .
BlockType : représente un type de bloc WordPress avec des propriétés comme name , title , description , icon , category , attributes , etc.
EditorBlock : représente un bloc dans l'éditeur WordPress avec des propriétés comme id , name , attributes , innerBlocks et innerHTML .
TemplatePart : représente une partie de modèle dans WordPress avec des propriétés telles que id , slug , theme , type , content , title et status .
SearchResult : représente un résultat de recherche de WordPress avec des propriétés comme id , title , url , type et subtype .
FeaturedMedia : Représente les médias en vedette (par exemple, image en vedette) dans WordPress avec des propriétés comme id , title , caption , alt_text , media_details et source_url .
FilterBarProps : représente les accessoires pour un composant de barre de filtre avec authors de propriétés, tags , categories et des valeurs sélectionnées pour chacune.
Ces définitions de type fournissent la sécurité et la complétion automatique de type lorsque vous travaillez avec les données WordPress dans votre application Next.js. Ils s'assurent que vous accédez aux propriétés correctes et que vous passez les types de données attendus lorsque vous interagissez avec l'API WordPress REST.
Le fichier components/posts/post-card.tsx contient le composant PostCard , qui est responsable du rendu d'une seule carte postale dans l'application. Voici un aperçu du composant:
post : Un objet Post représentant le message WordPress à rendre. Le composant récupère le support, l'auteur et la catégorie des supports en vedette associés au message en utilisant les fonctions getFeaturedMediaById , getAuthorById et getCategoryById de lib/wordpress.ts .
Il formate la date de post à l'aide de la méthode toLocaleDateString avec les options spécifiées.
Le composant rend un lien vers la page de publication individuelle à l'aide de la limace du post.
À l'intérieur du lien, il affiche l'image, le titre, l'extrait, la catégorie et la date du post du post.
Le titre de publication et l'extrait sont rendus en utilisant l'attribut dangerouslySetInnerHTML pour gérer le contenu HTML.
Le composant applique diverses classes CSS pour styliser la carte postale, y compris les effets de survol et les transitions.
Pour utiliser le composant PostCard , importez-le dans la page ou le composant souhaité et passez un objet Post comme accessoire post .
Le fichier components/posts/filter.tsx contient le composant FilterPosts , qui fournit une interface de filtrage pour les publications basées sur des balises, des catégories et des auteurs. Voici un aperçu du composant:
authors : Un tableau d'objets Author représentant les auteurs disponibles à filtrer.tags : un tableau d'objets Tag représentant les balises disponibles à filtrer.categories : un tableau d'objets Category représentant les catégories disponibles à filtrer.selectedAuthor : une chaîne facultative représentant l'ID d'auteur actuellement sélectionné.selectedTag : une chaîne facultative représentant l'ID de balise actuellement sélectionné.selectedCategory : une chaîne facultative représentant l'ID de catégorie actuellement sélectionné. Le composant utilise le crochet useRouter de Next.js pour gérer les mises à jour de navigation et d'URL en fonction des filtres sélectionnés.
Il rend trois composants Select pour filtrer les publications par tag, catégorie et auteur. Chaque composant Select affiche les options disponibles et permet à l'utilisateur de sélectionner une valeur spécifique ou de choisir "All" pour réinitialiser le filtre.
Lorsqu'une valeur de filtre est modifiée, la fonction handleFilterChange est appelée avec le type de filtre et la valeur sélectionnée. Il met à jour les paramètres de requête URL en conséquence et navigue vers l'URL mise à jour.
Le composant comprend également un bouton "Réinitialiser les filtres" qui, lorsqu'il est cliqué, appelle la fonction handleResetFilters pour revenir à la page /posts sans aucun filtre appliqué.
Les valeurs de filtre sélectionnées sont passées sous forme d'accessoires au composant et utilisées pour définir les valeurs initiales des composants Select .
Les valeurs de filtre sélectionnées sont passées sous forme d'accessoires au composant et utilisées pour définir les valeurs initiales des composants Select .
Les valeurs de filtre sélectionnées sont passées sous forme d'accessoires au composant et utilisées pour définir les valeurs initiales des composants Select .
Le plan du site pour next-wp est généré sur @/app/sitemap.ts et apparaîtra en direct sur votre site sur yourdomain.com/sitemap.xml . Afin de configurer correctement votre plan du site, assurez-vous de mettre à jour le site_domain dans le site.config.ts pour être le domaine de votre frontend (pas votre instance WordPress).
Construit par Bridger Tower et Cameron Youngblood à 9d8
