next wordpress starter
1.0.0
ปรับสเกล WordPress ด้วยพลังของ Next.js และเว็บคงที่!
yarn create next-app -e https://github.com/colbyfayock/next-wordpress-starter
# or
npx create-next-app -e https://github.com/colbyfayock/next-wordpress-starter เพิ่มไฟล์ .env.local ไปยังรูทด้วยสิ่งต่อไปนี้:
WORDPRESS_GRAPHQL_ENDPOINT="http://wordpressite.com/graphql"
ในบางกรณีข้างต้นอาจไม่ทำงาน เปลี่ยนเป็นดังนี้:
WORDPRESS_GRAPHQL_ENDPOINT="http://yourhost.com/index.php?graphql
เป้าหมายของโครงการนี้คือการใช้ WordPress เป็น CMS ที่ไม่มีหัวและใช้ Next.js เพื่อสร้างประสบการณ์แบบคงที่โดยไม่ต้องใช้บริการบุคคลที่สามที่สามารถนำไปใช้งานได้ทุกที่
ความหวังคือการสร้างฟีเจอร์ให้มากที่สุดเท่าที่จะทำได้เพื่อสนับสนุนสิ่งที่คาดหวังจากชุดรูปแบบนอกกล่องบน WordPress ปัจจุบันคุณสมบัติเหล่านั้นรวมถึง:
นอกจากนี้ธีมคาดว่าจะเป็นมิตรกับ SEO และนักแสดงนอกกรอบรวมถึง:
นอกจากนี้คุณยังสามารถเปิดใช้งานการรองรับปลั๊กอิน Yoast SEO เพื่อเติมเต็ม SEO ของคุณ! (ดูด้านล่าง)
ตรวจสอบปัญหาสำหรับสิ่งที่อยู่บนดาดฟ้า!
ต้องการอะไร พื้นฐาน อีกเล็กน้อยหรือไม่? ตรวจสอบผู้เริ่มต้นคนอื่นของฉันด้วยการตั้งค่า MVP เพื่อให้ได้และทำงานด้วย wpgraphql ใน WordPress: https://github.com/colbyfayock/next-wpgraphql-basic-starter
โครงการนี้ใช้ WPGRAPHQL เพื่อค้นหา WordPress ด้วย graphQL เพื่อที่จะทำการร้องขอนั้นไปยังจุดสิ้นสุดที่เหมาะสมเราจำเป็นต้องตั้งค่าตัวแปรสภาพแวดล้อมเพื่อให้ next.js ทราบว่าจะขอข้อมูลไซต์ได้ที่ไหน
สร้างไฟล์ใหม่ที่เรียกว่า .env.local และเพิ่มสิ่งต่อไปนี้:
WORDPRESS_GRAPHQL_ENDPOINT= " [WPGraphQL Endpoint] " แทนที่เนื้อหาของตัวแปรด้วยจุดสิ้นสุด WPGRAPHQL ของคุณ โดยค่าเริ่มต้นควรมีลักษณะคล้าย [Your Host]/graphql
หมายเหตุ: ตัวแปรสภาพแวดล้อมสามารถกำหนดค่าแบบคงที่ใน next.config.js
| ชื่อ | ที่จำเป็น | ค่าเริ่มต้น | คำอธิบาย |
|---|---|---|---|
| wordpress_graphql_endpoint | ใช่ | - | จุดสิ้นสุดของ WordPress WPGRAPHQL (เช่น: host.com/GRAPHL) |
| wordpress_menu_location_navigation | เลขที่ | หลัก | กำหนดค่าเมนูการนำทางส่วนหัว |
| wordpress_plugin_seo | เลขที่ | เท็จ | เปิดใช้งานการสนับสนุนปลั๊กอิน SEO (จริง, เท็จ) |
โปรดทราบว่าธีมบางอย่างไม่มีที่ตั้งเมนูหลัก
ในการเริ่มต้นโครงการในพื้นที่ให้เรียกใช้:
yarn dev
# or
npm run devตอนนี้โครงการควรมีให้ที่ http: // localhost: 3000!
เป็นไปได้ที่จะใช้ประโยชน์จากส่วนขยายนี้เพื่อปรับปรุงประสบการณ์การพัฒนา ในการตั้งค่าส่วนขยาย ESLINT ในรหัส Visual Studio ให้เพิ่มโฟลเดอร์ใหม่ลงในรูท .vscode ภายในเพิ่ม settings.json ไฟล์ json ด้วยเนื้อหาต่อไปนี้:
{
"editor.formatOnSave" : false ,
"editor.codeActionsOnSave" : {
"source.fixAll.eslint" : true
}
}ด้วยไฟล์นี้ ESLINT จะแก้ไขและตรวจสอบข้อผิดพลาดทางไวยากรณ์โดยอัตโนมัติและจัดรูปแบบรหัสบนบันทึก (ขึ้นอยู่กับการกำหนดค่าที่สวยงามกว่า)
มีสองตัวเลือกเกี่ยวกับวิธีที่คุณสามารถปรับใช้โครงการนี้เพื่อ netlify:
next exportEssential Next.js ปลั๊กอิน ควรได้รับเป็นตัวเลือกเมื่อคุณนำเข้าโครงการแรกตามตัวเริ่มต้นนี้ หากไม่เป็นเช่นนั้นคุณสามารถติดตั้งปลั๊กอินนี้โดยใช้ไดเร็กทอรีปลั๊กอิน NetLify สิ่งนี้จะช่วยให้โครงการสามารถใช้ประโยชน์อย่างเต็มที่จากคุณสมบัติ Next.js Next.js ทั้งหมดที่ NetLify รองรับกับปลั๊กอินนี้
การส่งออกโครงการ ช่วยให้ next.js รวบรวมโครงการเป็นสินทรัพย์คงที่รวมถึงไฟล์ HTML สิ่งนี้ช่วยให้คุณสามารถปรับใช้โครงการเป็นไซต์คงที่โดยตรงเพื่อให้เป็นไปได้เช่นเดียวกับเว็บไซต์อื่น ๆ คุณสามารถทำได้โดยการเพิ่ม next export ในตอนท้ายของคำสั่ง build ภายใน package.json (เช่น: next build && next export )
ไม่ว่าคุณจะเลือกตัวเลือกใดคุณสามารถกำหนดค่าตัวแปรสภาพแวดล้อมของคุณได้ทั้งเมื่อสร้างไซต์ใหม่ของคุณหรือนำทางไปยังการตั้งค่าไซต์> build & ปรับใช้> สภาพแวดล้อมและเรียกใช้การปรับใช้ใหม่เมื่อเพิ่ม
ให้ Next.js เป็นโครงการที่ได้รับการสนับสนุนจาก Vercel คุณสามารถนำเข้าโครงการเป็นไซต์ใหม่และกำหนดค่าตัวแปรสภาพแวดล้อมของคุณโดยเพิ่มทั้งในระหว่างการนำเข้าหรือโดยการนำทางไปยังการตั้งค่า> ตัวแปรสภาพแวดล้อมและกระตุ้นการสร้างใหม่เมื่อเพิ่ม
เพื่อหลีกเลี่ยงไฟล์การกำหนดค่าเพิ่มเติมเราใช้ประโยชน์จากคุณสมบัติในตัวของ package.json เพื่อกำหนดค่าบางส่วนของเว็บไซต์
| ชื่อ | ที่จำเป็น | คำอธิบาย |
|---|---|---|
| หน้าแรก | ใช่ | หน้าแรกหรือชื่อโฮสต์ที่ใช้ในการสร้าง URL เต็มรูปแบบ (Ex Open Graph) |
homepage จะอัปเดตอินสแตนซ์ที่จำเป็นต้องใช้ URL แบบเต็มเช่นแท็กกราฟเปิดโครงการนี้มีจุดมุ่งหมายเพื่อใช้ประโยชน์จากคุณสมบัติ WordPress ในตัวที่เป็นค่าเริ่มต้นเช่นธีม WordPress ทั่วไป เหล่านั้นรวมถึง:
| ชื่อ | การใช้งาน |
|---|---|
| ภาษาไซต์ | แอตทริบิวต์ lang บนแท็ก <html> |
| ชื่อไซต์ | ส่วนหัวหน้าแรกเมตาดาต้าหน้า |
| สโลแกน | คำบรรยายหน้าแรก |
มีการกำหนดค่า WordPress ที่เฉพาะเจาะจงที่จำเป็นเพื่อให้สามารถใช้งานได้ดีที่สุดของผู้เริ่มต้นนี้
ผู้เริ่มต้นนี้ไม่ได้ให้กลไกใด ๆ สำหรับการจัดการกับเนื้อหาภาพจาก WordPress รูปภาพเชื่อมโยงกับ "ตามที่เป็นอยู่" ซึ่งหมายความว่าหากอัพโหลดรูปภาพผ่านอินเตอร์เฟส WordPress ภาพจะถูกเสิร์ฟจาก WordPress
เพื่อให้บริการภาพแบบคงที่คุณมีตัวเลือกเล็กน้อย
ด้วยการเปิดใช้งานตัวเร่งภาพจาก Jetpack รูปภาพของคุณจะถูกเสิร์ฟโดยอัตโนมัติและแคชผ่าน WP.com CDN คุณลักษณะนี้มาพร้อมกับการติดตั้ง Jetpack ขั้นพื้นฐานซึ่งต้องการเพียงการเชื่อมต่อไซต์ WordPress เข้ากับบริการ Jetpack
jetpack cdn
ปลั๊กอิน SEO Yoast ได้รับการสนับสนุนบางส่วนรวมถึงคุณสมบัติที่สำคัญที่สุดเช่นข้อมูลเมตาและการปรับแต่งกราฟแบบเปิด
ในการเปิดใช้งานปลั๊กอินกำหนดค่า WORDPRESS_PLUGIN_SEO ให้เป็น true ไม่ว่าจะเป็นตัวแปรสภาพแวดล้อมหรือภายใน next.config.js
ตัวอย่างของเว็บไซต์ที่เริ่มต้นด้วย next.js WordPress Starter
WordPress โฮสติ้งสำหรับโครงการที่หันหน้าเข้าหาสาธารณะโดย WP Engine
ขอบคุณไปที่คนที่ยอดเยี่ยมเหล่านี้ (คีย์อีโมจิ):
Colby Fayock | เควินคันนิงแฮม | Guillermo Angulo | Hein Snyman | ตะลุมบอน - | Jatin Rathee | เดฟ |
แบรดการ์โรปี้ | ยอดขายfábio | Leonardo Losoviz | Avneesh Agarwal | Phattarapol L. | Peter Cruckshank | Shane O'Grady |
Nick Gaswirth | Alexandruvisan19 | Ritik Chourasiya - | Rick Knowlton | Jedidiah Amaraegbu |
โครงการนี้เป็นไปตามข้อกำหนดทั้งหมดของผู้เข้าร่วม การมีส่วนร่วมทุกชนิดยินดีต้อนรับ!
