next wp

Next.js Starter สำหรับ WordPress Headless CMS

ดูวิดีโอสาธิต

นี่คือเทมเพลตเริ่มต้นสำหรับการสร้างแอปพลิเคชัน next.js ที่ดึงข้อมูลจากไซต์ WordPress โดยใช้ WordPress REST API เทมเพลตประกอบด้วยฟังก์ชั่นสำหรับการดึงโพสต์หมวดหมู่แท็กผู้แต่งและสื่อที่โดดเด่นจากไซต์ WordPress และแสดงผลในแอปพลิเคชันถัดไป JS

next-wp ถูกสร้างขึ้นด้วย next.js 14, React, typeScript, tailwind, Shadcn/UI และ Brijr/Craft มันจับคู่กับ Brijr/ส่วนประกอบเพื่อประสบการณ์การพัฒนาอย่างรวดเร็ว สร้างโดยคาเมรอนและบริดเกอร์ที่ 9d8

สารบัญ

• Next.js Starter สำหรับ WordPress Headless CMS
  • สารบัญ
  • ภาพรวม
  • ฟังก์ชั่น WordPress
  • ประเภท WordPress
  • โพสต์การ์ดส่วนประกอบ
    • อุปกรณ์ประกอบฉาก
    • ฟังก์ชั่น
    • การใช้งาน
  • ส่วนประกอบตัวกรอง
    • อุปกรณ์ประกอบฉาก
    • ฟังก์ชั่น
  • แผนผังไซต์แบบไดนามิก

ภาพรวม

• lib/wordpress.ts -> ฟังก์ชั่นสำหรับการดึง WordPress CMS ผ่าน REST API
• lib/wordpress.d.ts -> การประกาศประเภทสำหรับ WP REST API
• components/posts/post-card.tsx -> ส่วนประกอบและสไตล์สำหรับโพสต์
• app/posts/filter.tsx -> ส่วนประกอบสำหรับการจัดการการกรองของโพสต์
• /menu.config.ts -> การกำหนดค่าเมนูเมนู NAV ไซต์สำหรับเดสก์ท็อปและมือถือ
• /site.config.ts -> การกำหนดค่าสำหรับ sitemap.ts
• app/sitemap.ts -> Sitemap ที่สร้างขึ้นแบบไดนามิก

จำเป็นต้องตั้งค่าตัวแปร env สองตัวในไฟล์ .env.local :

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

คุณสามารถค้นหาตัวอย่างของไฟล์ .env.local ในไฟล์ .env.example (และใน vercel):

ฟังก์ชั่น WordPress

ไฟล์ lib/wordpress.ts มีฟังก์ชั่นหลายอย่างสำหรับการดึงข้อมูลจากไซต์ WordPress โดยใช้ WordPress REST API นี่คือภาพรวมโดยย่อของแต่ละฟังก์ชั่น:

• getAllPosts(filterParams?: { author?: string; tag?: string; category?: string; }) : ดึงโพสต์ทั้งหมดจากไซต์ WordPress ทางเลือกคุณสามารถผ่านพารามิเตอร์ตัวกรองไปยังตัวกรองโพสต์โดยผู้แต่งแท็กหรือหมวดหมู่

• getPostById(id: number) : ดึงโพสต์เดียวด้วย ID

• getPostBySlug(slug: string) : ดึงโพสต์เดียวโดยกระสุน

• getAllCategories() : ดึงข้อมูลทั้งหมดจากไซต์ WordPress

• getCategoryById(id: number) : ดึงหมวดหมู่เดียวด้วย ID

• getCategoryBySlug(slug: string) : ดึงหมวดหมู่เดียวโดยกระสุน

• getPostsByCategory(categoryId: number) : ดึงโพสต์ทั้งหมดที่เป็นของหมวดหมู่เฉพาะด้วย ID

• getPostsByTag(tagId: number) : ดึงโพสต์ทั้งหมดที่ติดแท็กด้วยแท็กเฉพาะโดย ID

• getTagsByPost(postId: number) : ดึงแท็กทั้งหมดที่เกี่ยวข้องกับโพสต์เฉพาะโดย ID

• getAllTags() : ดึงแท็กทั้งหมดจากไซต์ WordPress

• getTagById(id: number) : ดึงแท็กเดียวด้วย ID

• getTagBySlug(slug: string) : ดึงแท็กเดียวด้วยกระสุน

• getAllPages() : ดึงข้อมูลทั้งหมดจากไซต์ WordPress

• getPageById(id: number) : ดึงหน้าเดียวด้วย ID

• 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) : ดึงข้อมูลสื่อที่โดดเด่น (เช่นภาพเด่น) ด้วย ID

ฟังก์ชั่นเหล่านี้เป็นวิธีที่สะดวกในการโต้ตอบกับ WordPress REST API และดึงข้อมูลประเภทต่าง ๆ จากไซต์ WordPress ของคุณ พวกเขาสามารถใช้ในแอปพลิเคชัน next.js ของคุณเพื่อดึงและแสดงเนื้อหา WordPress

ประเภท WordPress

ไฟล์ lib/wordpress.d.ts มีคำจำกัดความประเภท typeScript สำหรับเอนทิตี 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 ของคุณ พวกเขามั่นใจได้ว่าคุณกำลังเข้าถึงคุณสมบัติที่ถูกต้องและผ่านประเภทข้อมูลที่คาดหวังเมื่อมีปฏิสัมพันธ์กับ WordPress REST API

โพสต์การ์ดส่วนประกอบ

ไฟล์ components/posts/post-card.tsx มีส่วนประกอบ PostCard ซึ่งรับผิดชอบในการแสดงผลบัตรโพสต์เดียวในแอปพลิเคชัน นี่คือภาพรวมขององค์ประกอบ:

อุปกรณ์ประกอบฉาก

• post : วัตถุ Post ที่แสดงโพสต์ WordPress ที่จะแสดงผล

ฟังก์ชั่น

1. ส่วนประกอบจะดึงสื่อที่โดดเด่นผู้แต่งและหมวดหมู่ที่เกี่ยวข้องกับการโพสต์โดยใช้ getFeaturedMediaById , getAuthorById และฟังก์ชั่น getCategoryById จาก lib/wordpress.ts

2. มันจัดรูปแบบวันที่โพสต์โดยใช้วิธี toLocaleDateString พร้อมตัวเลือกที่ระบุ

3. ส่วนประกอบแสดงลิงก์ไปยังหน้าโพสต์แต่ละหน้าโดยใช้กระสุนของโพสต์

4. ภายในลิงก์จะแสดงภาพที่โดดเด่นของโพสต์ชื่อเรื่องข้อความที่ตัดตอนมาหมวดหมู่และวันที่

5. ชื่อโพสต์และข้อความที่ตัดตอนมานั้นแสดงผลโดยใช้แอตทริบิวต์ dangerouslySetInnerHTML เพื่อจัดการเนื้อหา HTML

6. ส่วนประกอบนี้ใช้คลาส CSS ต่างๆเพื่อจัดสไตล์การ์ดโพสต์รวมถึงเอฟเฟกต์โฮเวอร์และการเปลี่ยนผ่าน

การใช้งาน

ในการใช้ส่วนประกอบ PostCard นำเข้าสู่หน้าหรือส่วนประกอบที่คุณต้องการและส่งผ่านวัตถุ Post เป็นเสา post

ส่วนประกอบตัวกรอง

ไฟล์ components/posts/filter.tsx มีส่วนประกอบ FilterPosts ซึ่งให้อินเทอร์เฟซการกรองสำหรับโพสต์ตามแท็กหมวดหมู่และผู้แต่ง นี่คือภาพรวมขององค์ประกอบ:

อุปกรณ์ประกอบฉาก

• authors : อาร์เรย์ของวัตถุ Author ที่เป็นตัวแทนของผู้เขียนที่มีอยู่เพื่อกรองโดย
• tags : อาร์เรย์ของวัตถุ Tag ที่แสดงแท็กที่มีอยู่เพื่อกรองโดย
• categories : อาร์เรย์ของวัตถุ Category ที่แสดงหมวดหมู่ที่มีอยู่เพื่อกรองโดย
• selectedAuthor : สตริงเสริมแสดงรหัสผู้เขียนที่เลือกในปัจจุบัน
• selectedTag : สตริงเสริมที่แสดงถึง ID แท็กที่เลือกในปัจจุบัน
• selectedCategory : สตริงเสริมแสดงรหัสหมวดหมู่ที่เลือกในปัจจุบัน

ฟังก์ชั่น

1. ส่วนประกอบใช้ hook useRouter จาก next.js เพื่อจัดการการนำทางและการอัปเดต URL ตามตัวกรองที่เลือก

2. มันแสดงผลสามองค์ประกอบ Select สำหรับการกรองโพสต์โดยแท็กหมวดหมู่และผู้แต่ง แต่ละองค์ประกอบ Select จะแสดงตัวเลือกที่มีอยู่และอนุญาตให้ผู้ใช้เลือกค่าเฉพาะหรือเลือก "ทั้งหมด" เพื่อรีเซ็ตตัวกรอง

3. เมื่อมีการเปลี่ยนแปลงค่าตัวกรองฟังก์ชัน handleFilterChange จะถูกเรียกด้วยประเภทตัวกรองและค่าที่เลือก มันอัปเดตพารามิเตอร์ URL แบบสอบถามตามและนำทางไปยัง URL ที่อัปเดต

4. ส่วนประกอบยังมีปุ่ม "รีเซ็ตตัวกรอง" ซึ่งเมื่อคลิกโทรฟังก์ชัน handleResetFilters เพื่อนำทางกลับไปที่หน้า /posts โดยไม่ต้องใช้ตัวกรองใด ๆ

5. ค่าตัวกรองที่เลือกจะถูกส่งผ่านเป็นอุปกรณ์ประกอบฉากไปยังส่วนประกอบและใช้เพื่อตั้งค่าเริ่มต้นของส่วนประกอบ Select

6. ค่าตัวกรองที่เลือกจะถูกส่งผ่านเป็นอุปกรณ์ประกอบฉากไปยังส่วนประกอบและใช้เพื่อตั้งค่าเริ่มต้นของส่วนประกอบ Select

7. ค่าตัวกรองที่เลือกจะถูกส่งผ่านเป็นอุปกรณ์ประกอบฉากไปยังส่วนประกอบและใช้เพื่อตั้งค่าเริ่มต้นของส่วนประกอบ Select

แผนที่ไซต์แบบไดนามิก

SiteMap for next-wp ถูกสร้างขึ้นที่ @/app/sitemap.ts และจะปรากฏขึ้นสดบนเว็บไซต์ของคุณที่ yourdomain.com/sitemap.xml ในการตั้งค่าแผนผังไซต์ของคุณอย่างถูกต้องโปรดตรวจสอบให้แน่ใจว่าได้อัปเดต site_domain ใน site.config.ts เป็นโดเมนของส่วนหน้าของคุณ (ไม่ใช่อินสแตนซ์ WordPress ของคุณ)

สร้างโดย Bridger Tower และ Cameron Youngblood ที่ 9d8