تعرف على كيفية إنشاء موقع WordPress بدون رأس باستخدام Vue.js

لقد كان WordPress هو نظام إدارة المحتوى للمطورين وغير المطورين لبناء وإنشاء مواقع ويب مذهلة بسرعة.

يتيح استخدام بنية الخدمات المصغرة ، حيث تكون الواجهة الخلفية لإدارة المحتوى منفصلة عن الواجهة الأمامية ، أقصى قدر من التحكم في كلا "النهايتين". مشكلة الفصل هذه هي ما تحاول أنظمة إدارة المحتوى بدون رأس ، بما في ذلك حلول WordPress بدون رأس ، حلها.

من خلال نهج مقطوعة الرأس ، تتمتع الشركات بمزيد من التحكم الدقيق في خلفية إدارة المحتوى. كما أنهم أحرار في استخدام أي واجهة أمامية من اختيارهم ، بما في ذلك React و Vue و Angular وما إلى ذلك.

سوف يستكشف هذا الدليل بالتفصيل WordPress بدون رأس ، وما يدور حوله ، ومتى ولماذا يجب أن تفكر في استخدامه. أخيرًا ، سوف نستكشف إنشاء بيئة WordPress بدون رأس ، وبناء الواجهة الأمامية باستخدام Vue.js ، ونشر WordPress بدون رأس باستخدام Kinsta.

ما هو وورد بلا رأس؟

WordPress هو تطبيق مترابط حيث يتم ربط أجزاء الواجهة الخلفية والواجهة بإحكام معًا. الواجهة الخلفية هي المكان الذي تأتي فيه الإدارة ، حيث يمكنك إنشاء المحتوى وتعديله وإضافته وحذفه ، بما في ذلك تغيير تكوينات المظهر. في المقابل ، الواجهة الأمامية مسؤولة عن عرض المحتوى للمستخدم.

WordPress بدون رأس هو المصطلح المستخدم لوصف WordPress المنفصل. الجزء الخلفي (الإدارة) منفصل عن الجزء الأمامي من WordPress CMS. يمكنك تطوير الواجهة الأمامية وإدارتها كتطبيق مستقل مع أي إطار أمامي من اختيارك.

إيجابيات وسلبيات WordPress مقطوعة الرأس

بعد ذلك ، سوف نستكشف إيجابيات وسلبيات WordPress بدون رأس لمنحك فهمًا أفضل للمفهوم.

الايجابيات

أولاً ، سنبدأ باستكشاف المحترفين.

أداء فائق السرعة

في عصر التطبيقات فائقة السرعة ، يجب ألا يستغرق موقع الويب الخاص بك أكثر من بضع ثوانٍ للتحميل وتجنب فقدان الزوار. نظرًا لأن الواجهة الأمامية منفصلة عن WordPress ويمكن تطويرها بأداء عالٍ وقابلية للتوسع في الاعتبار باستخدام أدوات الواجهة الأمامية الحديثة ، فإن استخدام نهج WordPress بدون رأس له فائدة كبيرة لتجربة المستخدم الإجمالية لموقعك على الويب.

التحكم الحبيبي

يمنحك اختيار البنية بدون رأس مزيدًا من التحكم في تخطيط التصميم وعرض المحتوى وكيفية تفاعل المستخدمين مع الواجهة الأمامية لتطبيقك. كما يسمح بتأمين محتوى الواجهة الخلفية والوصول إليه من موقع مركزي.

زيادة قابلية التوسع

قد يكون تحجيم WordPress معقدًا في بعض الأحيان لأنك لا تملك السيطرة الكاملة على جميع المكونات والأكواد التي تشغل WordPress ، خاصة إذا لم تكن مطورًا. ولكن مع فصل WordPress ، يكون من السهل قياس كل جزء بمعزل عن الآخر ، ويمكنك بسهولة اكتشاف الجزء الذي يحتاج إلى توسيع.

تشديد الأمن

لا يمكننا التأكيد على الفوائد الأمنية لـ WordPress بدون رأس بما يكفي لأن WordPress المنفصل له مزايا أمان عالية ضد المتسللين وهجمات DDoS. يجعل نهج WordPress بدون رأس من الصعب على المتسللين الوصول إلى بياناتك الخلفية الحساسة نظرًا لأنها منفصلة عن الواجهة الأمامية ، موقع الويب الذي يواجه المستخدم.

تصميم خفيف الوزن

سيكون لديك المزيد من التحكم في هيكل وتصميم الواجهة الأمامية الخاصة بك. بالإضافة إلى ذلك ، يمكنك العمل على الواجهة الأمامية بمزيد من الحرية والتصميم المخصص ؛ بفضل استدعاءات REST API ، ستتمكن من الاستفادة من أدوات الويب الحديثة ونشرها في الواجهة الأمامية.

نشر محتوى متعدد القنوات

نظرًا لأن WordPress بدون رأس يستخدم نظامًا قائمًا على واجهة برمجة التطبيقات لإيصال المحتوى الخاص بك إلى الواجهة الأمامية ، يمكنك عرض المحتوى الخاص بك في أي مكان وعلى أي نظام أساسي ، بما في ذلك سطح المكتب وموقع الويب وتطبيقات الهاتف المحمول وشاشة اللمس. من الممكن أيضًا الاستفادة الكاملة من أجهزة الواقع المعزز والواقع الافتراضي وإنترنت الأشياء لعرض وتقديم المحتوى الخاص بك من النظام القائم على واجهة برمجة التطبيقات.

السلبيات

سنستكشف سلبيات مقطوعة الرأس بمزيد من العمق مع تقدمنا ​​، لكن عيوبها الرئيسية هي:

1. يمنحك الفصل بين الواجهة الخلفية والواجهة الأمامية عبئًا إضافيًا عند إدارة حالات موقع الويب المختلفة.
2. قد يكون التنفيذ مكلفًا نظرًا لأنه يحتاج إلى أعضاء إضافيين في فريقك ورأس مال إضافي لتشغيل مثيلات مختلفة.
3. يمكن أن يتسبب إتاحة المحتوى الخاص بك على أنظمة أساسية مختلفة في تجربة غير متسقة للمستخدمين إذا لم يتم تقديم المحتوى بشكل متسق عبر جميع الأنظمة الأساسية.

عندما لا يكون WordPress مقطوع الرأس هو الخيار الأفضل

نظرًا لأن WordPress بدون رأس هو ابتكار مذهل له فوائد كبيرة ، فهناك بعض الأشياء التي تستخدمها لتتذكرها عند اتخاذ قرار بشأن ما إذا كان يجب عليك اتباعها أم لا.

1. تعد صيانة WordPress مقطوعة الرأس مكلفة للغاية. ستحتفظ بنسختين مختلفتين من موقع ويب واحد بدءًا من البنية التحتية إلى عدة مطورين.
2. لا يدعم WordPress بدون رأس كل ميزات WordPress. على سبيل المثال ، لن تعمل ميزات WordPress الرائعة مثل محرر WYSIWYG والمعاينة المباشرة عند استخدام واجهة أمامية منفصلة.
3. يعد إعداد WordPress مقطوع الرأس أكثر تكلفة. ومن ثم ، ضع دائمًا في الاعتبار التكلفة المتزايدة.

من يجب أن يستخدم WordPress مقطوعة الرأس؟

فيما يلي أفضل الحالات المناسبة التي قد تحتاج فيها إلى WordPress بدون رأس:

1. يجب أن تستخدم WordPress بدون رأس إذا كان أمان موقع الويب الخاص بك هو أهم اهتماماتك وأهميته لشركتك.
2. بعد ذلك ، إذا كان موقع الويب الخاص بك لا يحتاج إلى ترقية وتحديث منتظمين ، فستكون هذه علامة رائعة على أنك بحاجة إلى استخدام إعداد بدون رأس.
3. بعد ذلك ، إذا كنت ترغب في الحصول على تصميم مخصص لا يمكن لموضوع WordPress القيام به بسهولة ، فأنت تريد إضفاء لمسة مميزة على الواجهة الأمامية لموقع الويب الخاص بك بتصميم فريد. إذن ، WordPress بدون رأس هو خيارك التالي.
4. أخيرًا ، إذا كنت تقوم ببناء موقع ويب قصير العمر أو موقعًا تجريبيًا للعروض التقديمية والبرامج التعليمية ، فيمكنك تجربة نهج مقطوعة الرأس.

من الذي يجب عليه تجنب استخدام WordPress مقطوعة الرأس

في ما يلي العديد من الحالات التي لا يعد فيها استخدام WordPress بدون رأس خيارًا جيدًا:

1. عندما يعتمد موقع الويب الخاص بك فقط على مكونات إضافية ووظائف معينة تتحكم وتعمل بشكل أفضل مع الواجهة الأمامية لتطبيقك ، يجب عليك الالتزام بـ WordPress ما لم تقدم المكونات الإضافية خيارات قائمة على واجهة برمجة التطبيقات لاستهلاك البيانات.
2. لنفترض أنك غير مهتم بتشفير موقع الويب الخاص بك ، أو أن موقع الويب الخاص بك يتطلب صيانة يومية ، ولا تقوم بتعيين متخصص للصيانة الروتينية بسبب ميزانيتك المنخفضة. في هذه الحالة ، يعد WordPress خيارًا مناسبًا لك.
3. إذا لم تكن مطورًا متمرسًا وترغب في إنشاء موقع الويب الخاص بك وإدارته بمفردك ، فيجب أن تستخدم WordPress.

كيفية جعل WordPress بلا رأس (إنشاء تطبيق)

سيستكشف هذا القسم إنشاء مدونة إخبارية وتطويرها باستخدام WordPress بدون رأس للواجهة الخلفية و Vue 3 كواجهة أمامية مواجهة للمستخدم.

إعداد WordPress مقطوعة الرأس باستخدام Devkinsta

سنقوم بتطوير WordPress بدون رأس باستخدام DevKinsta ، وهي بيئة تطوير محلية مشهورة في WordPress لتصميم مواقع WordPress وتطويرها ونشرها من جهازك المحلي المريح.

DevKinsta مجاني إلى الأبد ويقدم لك مزايا وراحة كبيرة في تطوير وبناء WordPress معه.

يمكنك تنزيل DevKinsta وتثبيته من الموقع الرسمي واتباع التعليمات الواردة في الوثائق للبدء.

نظرًا لأن لدينا DevKinsta مثبتًا بالفعل ، فسنفتحه ونتبع الخطوة أدناه لإعداد أول WordPress بدون رأس.

في لوحة تحكم DevKinsta ، أنشئ موقع WordPress جديدًا باستخدام Nginx و MySQL وأي إصدار متاح من WordPress. أيضًا ، يمكنك استيراد مثيل WordPress موجود أو إنشاء مثيل WordPress مخصص من لوحة القيادة.

بعد ذلك ، امنح مثيل WordPress الذي تم إنشاؤه حديثًا اسمًا واسم مستخدم للمسؤول وكلمة مرور ، ثم انقر فوق إنشاء وانسخ التفاصيل بينما ينشئ DevKinsta مثيل WordPress جديدًا في جهازك المحلي.

بعد ذلك ، انقر فوق Open Site لفتح مثيل WordPress الذي تم إنشاؤه حديثًا على متصفحك الافتراضي.

أخيرًا ، يمكنك تسجيل الدخول إلى لوحة تحكم المسؤول عن طريق الوصول إلى الرابط http://headless-wordpress-news-blog.local/wp-admin وكتابة بيانات اعتماد تسجيل دخول المسؤول التي أدخلتها عند إنشاء مثيل جديد.

لاحظ أننا قمنا بإعداد WordPress بدون رأس محليًا باستخدام عنوان URL http://headless-wordpress-news-blog.local مع الواجهة الأمامية مستضافة محليًا على http://news-blog.local ، وسنستخدمه طوال الوقت البرنامج التعليمي.

تكوين وورد بلا رأس

بعد ذلك ، بعد تسجيل الدخول بنجاح إلى لوحة معلومات WordPress الخاصة بك ، يمكنك المضي قدمًا لتثبيت أي مكونات إضافية وتكوين من اختيارك.

سنقوم بتعطيل السمة بالكامل لهذا البرنامج التعليمي ونصل فقط إلى المحتوى عبر نقطة النهاية المستندة إلى WordPress REST API عن طريق تثبيت المكون الإضافي Simple Website Redirect وإعداده.

انتقل إلى المكونات الإضافية> إضافة جديد وابحث عن Simple Website Redirect ، وقم بتثبيته وتنشيطه:

بعد ذلك ، انقر فوق إعدادات المكون الإضافي وأدخل عنوان URL المستند إلى الواجهة الأمامية (على سبيل المثال ، http://news-blog.local ) ، وانقر فوق خيارات الإعداد المتقدمة وأضف المسارات التالية - /wp-admin ، /wp-login.php و /wp-json - إلى قسم استبعاد المسارات.

أخيرًا ، قم بتمكين المكون الإضافي عن طريق تحديد ممكّن في القائمة المنسدلة حالة إعادة التوجيه :

…وهذا كل شيء!

بالإضافة إلى ذلك ، إذا لم يتم تمكين واجهة برمجة تطبيقات JSON الخاصة بك عند زيارة http://headless-wordpress-news-blog.local/wp-json افتراضيًا ، فيمكنك تمكينها عن طريق فتح الروابط الثابتة الخاصة بك ضمن إعدادات WordPress وتحديد اسم المنشور أو أي خيار آخر من اختيارك باستثناء عادي :

الآن عندما تزور http://headless-wordpress-news-blog.local/wp-json ، يجب أن تقدم لك بيانات JSON كما يلي:

 { "name": "Headless WordPress News Blog", "description": "Just another WordPress site", "url": "http://headless-wordpress-news-blog.local", "home": "http://headless-wordpress-news-blog.local", "gmt_offset": "0", "timezone_string": "", "namespaces": [ "oembed/1.0", "wp/v2", "wp-site-health/v1" ], "authentication": [ ], "routes": { "/": { "namespace": "", "methods": [ "GET" ], "endpoints": [ { "methods": [ "GET" ], "args": { "context": { "default": "view", "required": false } } } ], ...

إعداد Vue.js (الواجهة الأمامية)

سنستخدم أداة تطوير الويب Vite لإنشاء تطبيق Vue 3 الخاص بنا للتواصل مع WordPress بدون رأس. يمكنك قراءة المزيد عن أدوات تطوير Vue 3 و Vite.

في هذه المقالة ، سنبني مدونة إخبارية. سيتم تطوير كل إدارة محتوى الواجهة الخلفية للمشروع واستضافتها باستخدام WordPress بدون رأس باستخدام Devkinsta.

اكتب مع هذه الأوامر البسيطة:

 npm init @vitejs/app news-blog cd news-blog npm install npm run dev

إذا كنت تواجه مشكلات تتعلق بالمسافات في اسم المستخدم الخاص بك ، فحاول استخدام:

 npx create-vite-app news-blog

لاحظ أننا قمنا بتكوين تطبيق Vue 3 الخاص بنا للاستماع إلى http://news-blog.local ، ولكن يمكنك الالتزام بـ http://localhost:3000 الافتراضي.

أخيرًا ، افتح قاعدة كود Vue 3 الخاصة بك مع أي محرر كود من اختيارك. سنذهب مع VSCode ، ودعنا نتسخ أيدينا بالرموز.

تستهلك WordPress API

لقد مضينا قدمًا في تطوير الجزء المتبقي من تطبيق Vue لتوفير وقت القراءة ، ولكن يمكنك المضي قدمًا في استنساخ المستودع من GitHub الخاص بي.

عرض مكون مشاركة التطبيق

يوضح مقتطف الشفرة أدناه كيف نقوم بتنفيذ WordPress REST API مع مثيل Vue الخاص بنا لعرض جميع المنشورات من WordPress بدون رأس:

 <template> <section> <div class="padding-top"> <div class="container inner-padding-top"> <div class="row"> <div class="col-md-12 col-sm-12-col-xs-12 text-center"> <h2 class="lead-title text-uppercase"> Latest Backend Dev. Articles </h2> <h3 class="article-subtitle"> Latest Backend Dev. Articles curated daily by the community. </h3> </div> </div> <div class="row mb-1 mt-5"> <post v-for="(post, i) in posts" :key="i" :post="post" /> </div> </div> </div> <div class="col-md-12 col-sm-12-col-xs-12 text-center mb-5"> <Button link="/posts" class="col p-3">More Articles</Button> </div> </section> </template> <script> import { mapState } from 'vuex' export default { computed: { ...mapState({ posts: (state) => { return [...state.post.posts].slice(0, 22) }, }), }, } </script>

عرض مكون وظيفة واحدة

يوضح مقتطف الشفرة كيف نسترد منشورًا واحدًا باستخدام WordPress REST API باستخدام WordPress بدون رأس ونعرضه في مثيل Vue الخاص بنا:

 <template> <div class="card single"> <div class="card-head pl-3 pr-3 pt-3"> <h1 class="title">{{ post.title || '' }}</h1> <div class="d-flex"> <div class="author d-flex pr-3 pb-4"> <div class="profile mr-2"></div> <a :href="'/authors/' + post.author.slug" class="subtitle is-6"> {{ post.author.name }} </a> </div> <div class="date_created"> <small class="text-muted"> <li class="fa fa-calendar"></li> <time :datetime="$moment(post.date).format('MMMM Do YYYY, h:mm:ss a')" >{{ $moment(post.date).format('MMMM Do YYYY') }}</time > </small> </div> </div> </div> <div class="block-image pl-3 pr-3 pt-2 mb-3"> <img v-lazy-load :data-src="image" class="card-img-top img-fluid" :alt="post.title" /> </div> <div class="tags absolute"> <a v-for="category in post.categories" :key="category.id" :href="'/categories/' + category.slug" class="btn-tag" > {{ category.title }} </a> </div> </div> </template> <script> import Vue from 'vue' export default { name: 'SinglePost', props: { post: { type: [Object, Array], default: () => {}, }, }, } </script>

يوجد أدناه المتجر الذي يجعل واجهة برمجة التطبيقات تستدعي واجهة برمجة تطبيقات WordPress بدون رأس لمحتويات الواجهة الخلفية:

 export const actions = { async getPosts({ commit }, { page, count = 22 }) { try { const response = await fetch( `http://headless-wordpress-news-blog.local/wp-json/wp/v2/posts` ) const data = await response.json() if (data) { commit('setPosts', data) } return data } }, async getPost({ commit }, id) { try { const response = await fetch( `http://headless-wordpress-news-blog.local/wp-json/wp/v2/posts/${id}` ) const data = await response.json() if (data) { commit('setPost', data) } return data } }, }

نشر WordPress مقطوعة الرأس باستخدام Kinsta

أخيرًا ، أصبح نشر WordPress بدون رأس أمرًا سهلاً للغاية مع DevKinsta باستخدام خدمة استضافة Kinsta.

لنشر WordPress بدون رأس على Kinsta ، انقر فوق الزر Push to Staging على لوحة معلومات DevKinsta وقم بتسجيل الدخول إلى Kinsta باستخدام بيانات اعتماد تسجيل الدخول الخاصة بك. يمكنك إنشاء حساب Kinsta جديد للحصول على بيانات اعتماد تسجيل الدخول الخاصة بك.

يمكنك معرفة كيفية دفع التغييرات إلى بيئة التدريج لنشر WordPress بدون رأس على خدمات استضافة Kinsta بنقرة واحدة.

أخيرًا ، يمكنك نشر مثيل Vue.js الخاص بك إلى أي مزود استضافة سحابي من اختيارك. تأكد من تحديث نقطة نهاية WordPress بدون رأس وفقًا لذلك لاختبار تطبيقك في بيئة إنتاج حية.

ملخص

WordPress مقطوعة الرأس والمزايا التي تأتي معها موجودة لتبقى لفترة من الوقت. ستستمر شعبيتها في النمو فقط حيث يتعرف المزيد من المطورين ومالكي المواقع على مزايا خيار مقطوعة الرأس.

في هذا الدليل ، قدمنا ​​لك مزايا وإيجابيات وسلبيات WordPress بدون رأس ، وقد أوضحنا لك كيفية إنشاء ونشر أول WordPress بدون رأس باستخدام DevKinsta. أنت الآن في طريقك لتطبيق WordPress بدون رأس.

ما هي نصائحك لنشر موقع WordPress مقطوع الرأس؟ يرجى مشاركتها في قسم التعليقات!