next wp
1.0.0
Sehen Sie sich das Demo -Video an
Dies ist eine Starter -Vorlage zum Erstellen einer nächsten.js -Anwendung, die Daten von einer WordPress -Site mit der WordPress -REST -API abreißt. Die Vorlage enthält Funktionen zum Abrufen von Beiträgen, Kategorien, Tags, Autoren und vorgestellten Medien von einer WordPress -Site und das Rendern in einer nächsten. Js -Anwendung.
next-wp ist mit Next.js 14, React, Typecript, Rückenwind, Shadcn/UI und Brijr/Craft gebaut. Es passt gut zu Brijr/Komponenten für eine schnelle Entwicklungserfahrung. Gebaut von Cameron und Bridger bei 9d8.
lib/wordpress.ts -> Funktionen zum Abrufen von WordPress CMS über REST -APIlib/wordpress.d.ts -> Typdeklarationen für WP Rest API Typcomponents/posts/post-card.tsx -> Komponente und Styling für Beiträgeapp/posts/filter.tsx -> Komponente zum Handhabungsfilterung von Beiträgen/menu.config.ts -> Site Nav -Menükonfiguration für Desktop und Mobile/site.config.ts -> Konfiguration für sitemap.tsapp/sitemap.ts -> Dynamisch generiertes Sitemap Es sind zwei env -Variablen erforderlich, um in .env.local -Datei festzulegen:
WORDPRESS_URL= " https://wordpress.com "
WORDPRESS_HOSTNAME= " wordpress.com " Sie können das Beispiel von .env.local -Datei in der Datei .env.example (und in Vercel) finden:
Die Datei lib/wordpress.ts enthält mehrere Funktionen zum Abholen von Daten von einer WordPress -Site mit der WordPress -REST -API. Hier ist ein kurzer Überblick über jede Funktion:
getAllPosts(filterParams?: { author?: string; tag?: string; category?: string; }) Optional können Sie Filterparameter übergeben, um Beiträge nach Autor, Tag oder Kategorie zu filtern.
getPostById(id: number) : Abrufen einen einzelnen Beitrag nach seiner ID.
getPostBySlug(slug: string) : Abret einen einzelnen Beitrag durch seine Schnecke.
getAllCategories() : Abrufen alle Kategorien von der WordPress -Site.
getCategoryById(id: number) : Abret eine einzige Kategorie nach seiner ID.
getCategoryBySlug(slug: string) : Abrufen Sie eine einzelne Kategorie durch ihre Schlupf.
getPostsByCategory(categoryId: number) : Abret alle Beiträge zu einer bestimmten Kategorie nach seiner ID.
getPostsByTag(tagId: number) : Abret alle Beiträge mit einem bestimmten Tag mit seiner ID.
getTagsByPost(postId: number) : Abrufen alle Tags, die einem bestimmten Beitrag durch seine ID zugeordnet sind.
getAllTags() : holt alle Tags von der WordPress -Site ab.
getTagById(id: number) : Abret ein einzelnes Tag nach seiner ID.
getTagBySlug(slug: string) : Abruft ein einzelnes Tag durch seine Schnecke.
getAllPages() : Abret alle Seiten von der WordPress -Site.
getPageById(id: number) : Abret eine einzelne Seite nach seiner ID.
getPageBySlug(slug: string) : Abrufen Sie eine einzelne Seite durch die Schnecke.
getAllAuthors() : Abret alle Autoren von der WordPress -Site.
getAuthorById(id: number) : holt einen einzelnen Autor durch ihre ID.
getAuthorBySlug(slug: string) : Ruft einen einzelnen Autor durch ihren Schläger ab.
getPostsByAuthor(authorId: number) : Abrufen alle Beiträge, die von einem bestimmten Autor von ihrer ID geschrieben wurden.
getPostsByAuthorSlug(authorSlug: string) : Abret alle Beiträge, die von einem bestimmten Autor von ihrem Slug geschrieben wurden.
getPostsByCategorySlug(categorySlug: string) : Abret alle Beiträge, die zu einer bestimmten Kategorie gehören.
getPostsByTagSlug(tagSlug: string) : Abret alle Beiträge mit einem bestimmten Tag von seiner Schnecke ab.
getFeaturedMediaById(id: number) : Abrufen Sie die vorgestellten Medien (z. B. Bild) nach seiner ID ab.
Diese Funktionen bieten eine bequeme Möglichkeit, mit der WordPress -REST -API zu interagieren und verschiedene Arten von Daten von Ihrer WordPress -Site abzurufen. Sie können in Ihrer nächsten Anwendung verwendet werden, um WordPress -Inhalte abzurufen und anzuzeigen.
Die Datei lib/wordpress.d.ts enthält Definitionen für Typscript -Typ für verschiedene WordPress -Entitäten und verwandte Datenstrukturen. Hier ist ein Überblick über die Haupttypen:
Post : Repräsentiert einen WordPress -Beitrag mit Eigenschaften wie id , title , content , excerpt , author , categories , tags und mehr.
Category : Repräsentiert eine WordPress -Kategorie mit Eigenschaften wie id , name , slug , description , parent und count .
Tag : Repräsentiert ein WordPress -Tag mit Eigenschaften, die Category ähneln, einschließlich id , name , slug , description und count .
Page : Repräsentiert eine WordPress -Seite mit Eigenschaften wie id , title , content , excerpt , author , parent und template .
Author : Repräsentiert einen WordPress -Autor mit Eigenschaften wie id , name , slug , description , avatar_urls und meta .
BlockType : Repräsentiert einen WordPress -Block -Typ mit Eigenschaften wie name , title , description , icon , category , attributes und mehr.
EditorBlock : Repräsentiert einen Block im WordPress -Editor mit Eigenschaften wie id , name , attributes , innerBlocks und innerHTML .
TemplatePart : Repräsentiert einen Template -Teil in WordPress mit Eigenschaften wie id , slug , theme , type , content , title und status .
SearchResult : Repräsentiert ein Suchergebnis von WordPress mit Eigenschaften wie id , title , url , type und subtype .
FeaturedMedia : Repräsentiert vorgestellte Medien (z. B. Bild) in WordPress mit Eigenschaften wie id , title , caption , alt_text , media_details und source_url .
FilterBarProps : Repräsentiert die Requisiten für eine Filterbalkenkomponente mit den Eigenschaften authors , tags , categories und ausgewählten Werten für jeden.
Diese Typdefinitionen bieten die Sicherheit und die Autovervollständigung bei der Arbeit mit WordPress -Daten in Ihrer nächsten.js -Anwendung. Sie stellen sicher, dass Sie auf die richtigen Eigenschaften zugreifen und die erwarteten Datentypen übergeben, wenn Sie mit der WordPress -REST -API interagieren.
Die components/posts/post-card.tsx Datei enthält die PostCard , die für die Rendern einer einzelnen Postkarte in der Anwendung verantwortlich ist. Hier ist ein Überblick über die Komponente:
post : Ein Post , das den WordPress -Beitrag darstellt, der wiedergegeben werden soll. Die Komponente holt den mit dem Beitrag zugeordneten Medien, Autor und Kategorie mit den Funktionen von getFeaturedMediaById , getAuthorById und getCategoryById -Funktionen von lib/wordpress.ts .
Es formatiert das Postdatum mit der toLocaleDateString -Methode mit den angegebenen Optionen.
Die Komponente rendert einen Link zur einzelnen Postseite mithilfe der Post -Slug des Beitrags.
Innerhalb des Links zeigt es das vorgestellte Bild, Titel, Auszug, Kategorie und Datum des Beitrags.
Der Post -Titel und der Auszug werden unter Verwendung des dangerouslySetInnerHTML -Attributs zur Behandlung von HTML -Inhalten gerendert.
Die Komponente wendet verschiedene CSS -Klassen an, um die Postkarte zu stylen, einschließlich Schwebeffekten und Übergängen.
Um die PostCard zu verwenden, importieren Sie sie in die gewünschte Seite oder Komponente und übergeben Sie ein Post als post -Requisite.
Die components/posts/filter.tsx -Datei enthält die FilterPosts -Komponente, die eine Filterschnittstelle für Beiträge basierend auf Tags, Kategorien und Autoren bereitstellt. Hier ist ein Überblick über die Komponente:
authors : Eine Reihe von Author , die die verfügbaren Autoren darstellen, um zu filtern.tags : Ein Array von Tag -Objekten, die die verfügbaren Tags darstellen, die zu filtern sind.categories : Eine Reihe von Category , die die verfügbaren Kategorien darstellen, nach denen sie filtern sollen.selectedAuthor : Eine optionale Zeichenfolge, die die aktuell ausgewählte Autoren -ID darstellt.selectedTag : Eine optionale Zeichenfolge, die die aktuell ausgewählte Tag -ID darstellt.selectedCategory : Eine optionale Zeichenfolge, die die aktuell ausgewählte Kategorie -ID darstellt. Die Komponente verwendet den useRouter -Hook von Next.js, um die Navigations- und URL -Updates basierend auf den ausgewählten Filtern zu verarbeiten.
Es rendert drei Select Komponenten für die Filterung nach Tag, Kategorie und Autor. Jede Select Komponente zeigt die verfügbaren Optionen an und ermöglicht es dem Benutzer, einen bestimmten Wert auszuwählen oder "alle" zum Zurücksetzen des Filters auszuwählen.
Wenn ein Filterwert geändert wird, wird die Funktion handleFilterChange mit dem Filtertyp und dem ausgewählten Wert aufgerufen. Es aktualisiert die URL -Abfrageparameter entsprechend und navigiert zur aktualisierten URL.
Die Komponente enthält außerdem eine Schaltfläche "Filter zurücksetzen", die beim Klicken die Funktion handleResetFilters aufruft, um zur Seite /posts -Seite zurückzukehren, ohne dass Filter angewendet werden.
Die ausgewählten Filterwerte werden als Requisiten an die Komponente übergeben und verwendet, um die Anfangswerte der Select Komponenten festzulegen.
Die ausgewählten Filterwerte werden als Requisiten an die Komponente übergeben und verwendet, um die Anfangswerte der Select Komponenten festzulegen.
Die ausgewählten Filterwerte werden als Requisiten an die Komponente übergeben und verwendet, um die Anfangswerte der Select Komponenten festzulegen.
Die Sitemap für next-wp wird unter @/app/sitemap.ts generiert und wird live auf Ihrer Website unter yourdomain.com/sitemap.xml angezeigt. Um Ihre Sitemap korrekt einzurichten, stellen Sie bitte sicher, dass Sie die site_domain auf der site.config.ts als Domain Ihres Frontends (nicht Ihre WordPress -Instanz) aktualisieren.
Gebaut von Bridger Tower und Cameron Youngblood bei 9d8
