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 بشكل اختياري لتوسيع Supercharge 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 endpoint (على سبيل المثال: Host.com/graphl) |
| WordPress_Menu_location_navigation | لا | أساسي | تكوين موقع قائمة التنقل في الرأس |
| WordPress_Plugin_seo | لا | خطأ شنيع | يتيح دعم المكون الإضافي SEO (صحيح ، خطأ) |
يرجى ملاحظة أن بعض السمات ليس لديها موقع القائمة الأساسي.
لبدء المشروع محليًا ، قم بتشغيل:
yarn dev
# or
npm run devيجب أن يكون المشروع متاحًا الآن على http: // localhost: 3000!
من الممكن الاستفادة من هذا الامتداد لتحسين تجربة التطوير. لإعداد امتداد ESLINT في رمز Visual Studio ، أضف مجلد جديد إلى Root .vscode . إضافة داخل settings.json الملف. json مع المحتوى التالي:
{
"editor.formatOnSave" : false ,
"editor.codeActionsOnSave" : {
"source.fixAll.eslint" : true
}
}باستخدام هذا الملف ، ستقوم ESLINT تلقائيًا بإصلاح أخطاء بناء الجملة والتحقق منها وتنسيق الرمز الموجود على الحفظ (استنادًا إلى التكوين الأثري).
هناك خياران حول كيفية نشر هذا المشروع على NetLify:
next exportيجب توفير البرنامج المساعد Essential Next.js كخيار عندما تقوم أولاً باستيراد مشروع استنادًا إلى هذا المبتدئ. إذا لم يكن الأمر كذلك ، فيمكنك تثبيت هذا البرنامج المساعد باستخدام دليل NetLify Plugins. سيسمح ذلك للمشروع بالاستفادة الكاملة من جميع ميزات Next Next.js التي يدعمها NetLify مع هذا البرنامج المساعد.
يتيح تصدير المشروع Next.js تجميع المشروع في أصول ثابتة بما في ذلك ملفات HTML. يتيح لك ذلك نشر المشروع كموقع ثابت مباشرة إلى NetLify تمامًا مثل أي موقع آخر. يمكنك القيام بذلك عن next build && next export إضافة next export إلى نهاية أمر build Inside package.json
بغض النظر عن الخيار الذي تختاره ، يمكنك تكوين متغيرات البيئة الخاصة بك إما عند إنشاء موقعك الجديد أو عن طريق التنقل إلى إعدادات الموقع> إنشاء ونشر> البيئة وتشغيل نشر جديد بمجرد إضافته.
بالنظر إلى Next.js هو مشروع مدعوم من Vercel ، يمكنك ببساطة استيراد المشروع كموقع جديد وتكوين متغيرات البيئة الخاصة بك إما عن طريق إضافتها أثناء الاستيراد أو عن طريق التنقل إلى المتغيرات البيئية وتشغيل بناء جديد بمجرد إضافته.
لتجنب ملف تكوين إضافي ، نستفيد من بعض الخصائص المضمنة لـ package.json لتكوين أجزاء من الموقع.
| اسم | مطلوب | وصف |
|---|---|---|
| الصفحة الرئيسية | نعم | الصفحة الرئيسية أو اسم المضيف المستخدمة لبناء عناوين URL كاملة (الرسم البياني المفتوح) |
homepage بتحديث الحالات التي يلزم فيها عنوان URL الكامل مثل علامات الرسم البياني المفتوحيهدف هذا المشروع إلى الاستفادة من العديد من ميزات WordPress المدمجة افتراضيًا مثل موضوع WordPress النموذجي. وتشمل تلك:
| اسم | الاستخدام |
|---|---|
| لغة الموقع | سمة lang على علامة <html> |
| عنوان الموقع | رأس الصفحة الرئيسية ، بيانات البيانات الوصفية |
| سطر الوصف | ترجمة الصفحة الرئيسية |
هناك بعض تكوين WordPress المحدد المطلوب للسماح بأفضل استخدام لهذا المبتدئ.
لا يوفر هذا المبدئ حاليًا أي آليات للتعامل مع محتوى الصورة من WordPress. ترتبط الصور بـ "كما هي" ، وهذا يعني إذا تم تحميل الصورة عبر واجهة WordPress ، سيتم تقديم الصورة من WordPress.
لخدمة الصور بشكل ثابت ، لديك بعض الخيارات.
من خلال تمكين مسرع الصور من JetPack ، سيتم تقديم صورك تلقائيًا بشكل ثابت وتخزين مؤقت عبر WP.com CDN. تأتي هذه الميزة مجانًا مع التثبيت الأساسي لـ JetPack ، مما يتطلب فقط توصيل موقع WordPress بخدمة JetPack.
Jetpack CDN
يتم دعم البرنامج المساعد Yoast SEO جزئيًا بما في ذلك معظم الميزات الرئيسية مثل البيانات الوصفية وتخصيص الرسم البياني المفتوح.
لتمكين المكون الإضافي ، قم بتكوين WORDPRESS_PLUGIN_SEO ليكون true إما كمتغير للبيئة أو داخل next.config.js.
أمثلة على مواقع الويب التي بدأت مع Next.js WordPress Starter
استضافة WordPress للمشروع الذي يواجه الجمهور الذي يوفره WP Engine.
شكراً لهؤلاء الأشخاص الرائعين (مفتاح الرموز التعبيرية):
كولبي فايوك | كيفن كننغهام | Guillermo Angulo | هاين سنيمان | غريشي ؟ | جاتين رثي | ديف |
براد غاروبي | مبيعات Fábio | ليوناردو لوسوفيز | Avneesh Agarwal | Phattarapol L. | بيتر كروكشانك | شين أوجرادي |
نيك جاسويرث | Alexandruvisan19 | ريتيك تشوراسيا ؟ | ريك نولتون | جيديا أماريغبو |
يتبع هذا المشروع مواصفات جميع المساهمين. مساهمات من أي نوع ترحيب!
