next wp

Starter next.js untuk wordpress cms tanpa kepala

Tonton video demo

Ini adalah templat pemula untuk membangun aplikasi selanjutnya.js yang mengambil data dari situs WordPress menggunakan WordPress Rest API. Templat mencakup fungsi untuk mengambil posting, kategori, tag, penulis, dan media unggulan dari situs WordPress dan menjadikannya dalam aplikasi Next.js.

next-wp dibangun dengan Next.js 14, React, TypeScript, Tailwind, Shadcn/UI, dan Brijr/Craft. Ini berpasangan baik dengan BriJR/komponen untuk pengalaman pengembangan yang cepat. Dibangun oleh Cameron dan Bridger di 9d8.

Daftar isi

• Starter next.js untuk wordpress cms tanpa kepala
  • Daftar isi
  • Ringkasan
  • Fungsi WordPress
  • Jenis WordPress
  • Komponen kartu pos
    • Alat peraga
    • Fungsionalitas
    • Penggunaan
  • Komponen filter
    • Alat peraga
    • Fungsionalitas
  • Sitemap dinamis

Ringkasan

• lib/wordpress.ts -> fungsi untuk mengambil WordPress CMS melalui REST API
• lib/wordpress.d.ts -> ketik deklarasi untuk WP REST API
• components/posts/post-card.tsx -> Komponen dan gaya untuk posting
• app/posts/filter.tsx -> Komponen untuk menangani pemfilteran posting
• /menu.config.ts -> Konfigurasi Menu Nav Situs untuk Desktop dan Seluler
• /site.config.ts -> Konfigurasi untuk sitemap.ts
• app/sitemap.ts -> Sitemap yang Dinyamak Dinamis

Ada dua variabel env yang harus ditetapkan dalam file .env.local :

WORDPRESS_URL= " https://wordpress.com "
WORDPRESS_HOSTNAME= " wordpress.com "

Anda dapat menemukan contoh file .env.local di file .env.example (dan di Vercel):

Fungsi WordPress

File lib/wordpress.ts berisi beberapa fungsi untuk mengambil data dari situs WordPress menggunakan WordPress Rest API. Berikut gambaran singkat dari setiap fungsi:

• getAllPosts(filterParams?: { author?: string; tag?: string; category?: string; }) : mengambil semua posting dari situs WordPress. Secara opsional, Anda dapat melewati parameter filter untuk memfilter posting berdasarkan penulis, tag, atau kategori.

• getPostById(id: number) : Mengambil satu posting dengan ID -nya.

• getPostBySlug(slug: string) : Mengambil satu posting dengan siputnya.

• getAllCategories() : Mengambil semua kategori dari situs WordPress.

• getCategoryById(id: number) : Mengambil satu kategori tunggal dengan ID -nya.

• getCategoryBySlug(slug: string) : Mengambil satu kategori tunggal dengan siputnya.

• getPostsByCategory(categoryId: number) : Mengambil semua posting milik kategori tertentu dengan ID -nya.

• getPostsByTag(tagId: number) : Mengambil semua posting yang ditandai dengan tag tertentu dengan ID -nya.

• getTagsByPost(postId: number) : Mengambil semua tag yang terkait dengan posting tertentu oleh ID -nya.

• getAllTags() : Mengambil semua tag dari situs WordPress.

• getTagById(id: number) : Mengambil satu tag dengan ID -nya.

• getTagBySlug(slug: string) : ambil satu tag dengan siputnya.

• getAllPages() : Mengambil semua halaman dari situs WordPress.

• getPageById(id: number) : Mengambil satu halaman dengan ID -nya.

• getPageBySlug(slug: string) : Mengambil satu halaman dengan siputnya.

• getAllAuthors() : Mengambil semua penulis dari situs WordPress.

• getAuthorById(id: number) : Mengambil satu penulis tunggal dengan ID mereka.

• getAuthorBySlug(slug: string) : Mengambil satu penulis tunggal dengan siput mereka.

• getPostsByAuthor(authorId: number) : Mengambil semua posting yang ditulis oleh penulis tertentu oleh ID mereka.

• getPostsByAuthorSlug(authorSlug: string) : Mengambil semua posting yang ditulis oleh penulis tertentu oleh siput mereka.

• getPostsByCategorySlug(categorySlug: string) : Mengambil semua posting milik kategori tertentu dengan siputnya.

• getPostsByTagSlug(tagSlug: string) : Mengambil semua posting yang ditandai dengan tag tertentu dengan siputnya.

• getFeaturedMediaById(id: number) : Mengambil media unggulan (misalnya, gambar unggulan) oleh ID -nya.

Fungsi -fungsi ini memberikan cara yang nyaman untuk berinteraksi dengan API REST WordPress dan mengambil berbagai jenis data dari situs WordPress Anda. Mereka dapat digunakan di aplikasi berikutnya.js Anda untuk mengambil dan menampilkan konten WordPress.

Jenis WordPress

File lib/wordpress.d.ts berisi definisi tipe tipe naskah untuk berbagai entitas WordPress dan struktur data terkait. Berikut gambaran jenis utama:

• Post : mewakili posting WordPress dengan properti seperti id , title , content , excerpt , author , categories , tags , dan banyak lagi.

• Category : mewakili kategori WordPress dengan properti seperti id , name , slug , description , parent , dan count .

• Tag : mewakili tag WordPress dengan properti yang mirip dengan Category , termasuk id , name , slug , description , dan count .

• Page : mewakili halaman WordPress dengan properti seperti id , title , content , excerpt , author , parent , dan template .

• Author : Mewakili penulis WordPress dengan properti seperti id , name , slug , description , avatar_urls , dan meta .

• BlockType : mewakili tipe blok WordPress dengan properti seperti name , title , description , icon , category , attributes , dan banyak lagi.

• EditorBlock : Merupakan blok di editor WordPress dengan properti seperti id , name , attributes , innerBlocks , dan innerHTML .

• TemplatePart : mewakili bagian template dalam WordPress dengan properti seperti id , slug , theme , type , content , title , dan status .

• SearchResult : mewakili hasil pencarian dari WordPress dengan properti seperti id , title , url , type , dan subtype .

• FeaturedMedia : Merepresentasikan media unggulan (misalnya, gambar unggulan) di WordPress dengan properti seperti id , title , caption , alt_text , media_details , dan source_url .

• FilterBarProps : mewakili alat peraga untuk komponen batang filter dengan authors properti, tags , categories , dan nilai yang dipilih untuk masing -masing.

Definisi tipe ini memberikan jenis keamanan dan pelengkapan otomatis saat bekerja dengan data WordPress di aplikasi berikutnya.js Anda. Mereka memastikan bahwa Anda mengakses properti yang benar dan melewati tipe data yang diharapkan saat berinteraksi dengan WordPress REST API.

Komponen kartu pos

File components/posts/post-card.tsx berisi komponen PostCard , yang bertanggung jawab untuk membuat kartu pos tunggal dalam aplikasi. Berikut gambaran komponen:

Alat peraga

• post : Objek Post yang mewakili posting WordPress yang akan diterjemahkan.

Fungsionalitas

1. Komponen mengambil media unggulan, penulis, dan kategori yang terkait dengan posting menggunakan fungsi getFeaturedMediaById , getAuthorById , dan getCategoryById dari lib/wordpress.ts .

2. Ini memformat tanggal posting menggunakan metode toLocaleDateString dengan opsi yang ditentukan.

3. Komponen membuat tautan ke halaman posting individual menggunakan siput pos.

4. Di dalam tautan, ini menampilkan gambar, judul, kutipan, kategori, dan tanggal yang ditampilkan.

5. Judul posting dan kutipan diterjemahkan menggunakan atribut dangerouslySetInnerHTML untuk menangani konten HTML.

6. Komponen ini menerapkan berbagai kelas CSS untuk menata kartu pos, termasuk efek hover dan transisi.

Penggunaan

Untuk menggunakan komponen PostCard , impor ke halaman atau komponen yang Anda inginkan dan lewati objek Post sebagai prop post .

Komponen filter

File components/posts/filter.tsx berisi komponen FilterPosts , yang menyediakan antarmuka penyaringan untuk posting berdasarkan tag, kategori, dan penulis. Berikut gambaran komponen:

Alat peraga

• authors : Array objek Author yang mewakili penulis yang tersedia untuk disaring.
• tags : Array objek Tag yang mewakili tag yang tersedia untuk difilter.
• categories : Array objek Category yang mewakili kategori yang tersedia untuk disaring.
• selectedAuthor : String opsional yang mewakili ID penulis yang saat ini dipilih.
• selectedTag : String opsional yang mewakili ID tag yang saat ini dipilih.
• selectedCategory : String opsional yang mewakili ID kategori yang saat ini dipilih.

Fungsionalitas

1. Komponen menggunakan kait useRouter dari Next.js untuk menangani pembaruan navigasi dan URL berdasarkan filter yang dipilih.

2. Ini membuat tiga komponen Select untuk memfilter posting berdasarkan tag, kategori, dan penulis. Setiap Komponen Select menampilkan opsi yang tersedia dan memungkinkan pengguna untuk memilih nilai tertentu atau memilih "Semua" untuk mengatur ulang filter.

3. Ketika nilai filter diubah, fungsi handleFilterChange dipanggil dengan jenis filter dan nilai yang dipilih. Ini memperbarui parameter kueri URL yang sesuai dan menavigasi ke URL yang diperbarui.

4. Komponen juga menyertakan tombol "Reset Filter" yang, ketika diklik, memanggil fungsi handleResetFilters untuk menavigasi kembali ke halaman /posts tanpa filter apa pun yang diterapkan.

5. Nilai filter yang dipilih dilewatkan sebagai alat peraga ke komponen dan digunakan untuk mengatur nilai awal komponen Select .

6. Nilai filter yang dipilih dilewatkan sebagai alat peraga ke komponen dan digunakan untuk mengatur nilai awal komponen Select .

7. Nilai filter yang dipilih dilewatkan sebagai alat peraga ke komponen dan digunakan untuk mengatur nilai awal komponen Select .

Peta Situs Dinamis

Sitemap untuk next-wp dihasilkan di @/app/sitemap.ts dan akan muncul secara langsung di situs Anda di yourdomain.com/sitemap.xml . Untuk mengatur sitemap Anda dengan benar, pastikan untuk memperbarui site_domain di site.config.ts untuk menjadi domain frontend Anda (bukan instance WordPress Anda).

Dibangun oleh Bridger Tower dan Cameron Youngblood di 9d8