لقد كان وورد بريس هو نظام إدارة المحتوى للمطورين وغير المطورين لبناء وإنشاء مواقع ويب مذهلة بسرعة.
يسمح استخدام بنية الخدمات المصغرة ، حيث تكون الواجهة الخلفية لإدارة المحتوى منفصلة عن الواجهة الأمامية ، بأقصى قدر من التحكم في كلا “النهايتين”. مشكلة الفصل هذه هي ما تحاول أنظمة إدارة المحتوى بدون رأس ، بما في ذلك حلول وورد بريس بدون رأس ، حلها.
من خلال نهج مقطوعة الرأس ، تتمتع الشركات بمزيد من التحكم الدقيق في خلفية إدارة المحتوى. كما أنهم أحرار في استخدام أي واجهة أمامية من اختيارهم ، بما في ذلك React و Vue و Angular وما إلى ذلك.
سوف يستكشف هذا الدليل بالتفصيل وورد بريس بدون رأس ، وما يدور حوله ، ومتى ولماذا يجب أن تفكر في استخدامه. أخيرًا ، سوف نستكشف إنشاء بيئة وورد بريس بدون رأس ، وبناء الواجهة الأمامية باستخدام Vue.js ، ونشر وورد بريس بدون رأس باستخدام Kinsta.
وورد بريس هو تطبيق مترابط حيث يتم ربط أجزاء الواجهة الخلفية والواجهة بإحكام معًا. الواجهة الخلفية هي المكان الذي تأتي فيه الإدارة ، حيث يمكنك إنشاء المحتوى وتعديله وإضافته وحذفه ، بما في ذلك تغيير تكوينات المظهر. في المقابل ، الواجهة الأمامية مسؤولة عن عرض المحتوى للمستخدم.
وورد بريس بدون رأس هو المصطلح المستخدم لوصف وورد بريس المنفصل. الجزء الخلفي (الإدارة) منفصل عن الجزء الأمامي من وورد بريس CMS . يمكنك تطوير الواجهة الأمامية وإدارتها كتطبيق مستقل مع أي إطار أمامي من اختيارك.
بعد ذلك ، سوف نستكشف إيجابيات وسلبيات وورد بريس بدون رأس لمنحك فهمًا أفضل للمفهوم.
أولاً ، سنبدأ باستكشاف المحترفين.
في عصر التطبيقات فائقة السرعة ، يجب ألا يستغرق موقع الويب الخاص بك أكثر من بضع ثوانٍ للتحميل وتجنب فقدان الزوار. نظرًا لأن الواجهة الأمامية منفصلة عن وورد بريس ويمكن تطويرها بأداء عالٍ وقابلية التوسع في الاعتبار باستخدام أدوات الواجهة الأمامية الحديثة ، فإن استخدام نهج وورد بريس بدون رأس له فائدة كبيرة لتجربة المستخدم الشاملة لموقعك على الويب.
يمنحك اختيار البنية بدون رأس مزيدًا من التحكم في تخطيط التصميم وعرض المحتوى وكيفية تفاعل المستخدمين مع الواجهة الأمامية لتطبيقك. كما يسمح بتأمين محتوى الواجهة الخلفية والوصول إليه من موقع مركزي.
قد يكون تحجيم وورد بريس أمرًا معقدًا في بعض الأحيان لأنك لا تملك السيطرة الكاملة على جميع المكونات والأكواد التي تشغل وورد بريس ، خاصة إذا لم تكن مطورًا. ولكن مع فصل وورد بريس ، يكون من السهل قياس كل جزء بشكل منفصل ، ويمكنك بسهولة اكتشاف الجزء الذي يحتاج إلى توسيع.
لا يمكننا التأكيد على الفوائد الأمنية لـ وورد بريس بدون رأس بما يكفي لأن وورد بريس المنفصل له فوائد أمان عالية ضد المتسللين وهجمات DDoS . يجعل نهج وورد بريس بدون رأس من الصعب على المتسللين الوصول إلى بياناتك الخلفية الحساسة نظرًا لأنها منفصلة عن الواجهة الأمامية ، موقع الويب الذي يواجه المستخدم.
سيكون لديك المزيد من التحكم في هيكل وتصميم الواجهة الأمامية الخاصة بك. بالإضافة إلى ذلك ، يمكنك العمل على الواجهة الأمامية بمزيد من الحرية والتصميم المخصص ؛ بفضل استدعاءات REST API ، ستتمكن من الاستفادة من أدوات الويب الحديثة ونشرها في الواجهة الأمامية.
نظرًا لأن وورد بريس بدون رأس يستخدم نظامًا قائمًا على API لتوصيل المحتوى الخاص بك إلى الواجهة الأمامية ، يمكنك عرض المحتوى الخاص بك في أي مكان وعلى أي نظام أساسي ، بما في ذلك سطح المكتب ، وموقع الويب ، وتطبيقات الجوال ، وشاشة اللمس. من الممكن أيضًا الاستفادة الكاملة من أجهزة الواقع المعزز والواقع الافتراضي وإنترنت الأشياء لعرض وتقديم المحتوى الخاص بك من النظام القائم على واجهة برمجة التطبيقات.
سنستكشف سلبيات مقطوعة الرأس بمزيد من العمق مع تقدمنا ، لكن عيوبها الرئيسية هي:
نظرًا لأن وورد بريس بدون رأس هو ابتكار مذهل له فوائد كبيرة ، فهناك بعض الأشياء التي تستخدمها لتتذكرها عند اتخاذ قرار بشأن ما إذا كان يجب عليك اتباعها أم لا.
فيما يلي أفضل الحالات المناسبة التي قد تحتاج فيها إلى وورد بريس بدون رأس:
فيما يلي العديد من الحالات التي لا يعد فيها استخدام وورد بريس بدون رأس خيارًا جيدًا:
سيستكشف هذا القسم إنشاء مدونة إخبارية وتطويرها باستخدام وورد بريس بدون رأس للواجهة الخلفية و Vue 3 كواجهة أمامية مواجهة للمستخدم.
سنقوم بتطوير وورد بريس بدون رأس باستخدام DevKinsta ، وهي بيئة تطوير محلية مشهورة في وورد بريس لتصميم مواقع وورد بريس وتطويرها ونشرها من جهازك المحلي المريح.
DevKinsta مجاني إلى الأبد ويقدم لك مزايا وراحة كبيرة في تطوير وبناء وورد بريس معه.
يمكنك تنزيل DevKinsta وتثبيته من الموقع الرسمي واتباع التعليمات الواردة في الوثائق للبدء.
نظرًا لأن لدينا DevKinsta مثبتًا بالفعل ، فسنفتحه ونتبع الخطوة أدناه لإعداد أول وورد بريس بدون رأس.
في لوحة معلومات DevKinsta ، أنشئ موقع وورد بريس جديدًا باستخدام Nginx و MySQL وأي إصدار متاح من وورد بريس. أيضًا ، يمكنك استيراد مثيل وورد بريس موجود أو إنشاء مثيل وورد بريس مخصص من لوحة القيادة.
بعد ذلك ، امنح مثيل وورد بريس الذي تم إنشاؤه حديثًا اسمًا واسم مستخدم للمسؤول وكلمة مرور ، ثم انقر فوق إنشاء ونسخ التفاصيل بينما ينشئ DevKinsta مثيل وورد بريس جديدًا في جهازك المحلي.
بعد ذلك ، انقر فوق Open Site لفتح مثيل وورد بريس الذي تم إنشاؤه حديثًا على متصفحك الافتراضي.
أخيرًا ، يمكنك تسجيل الدخول إلى لوحة تحكم المسؤول عن طريق الوصول إلى http://headless-وورد بريس-news-blog.local/wp-adminالرابط وكتابة بيانات اعتماد تسجيل دخول المسؤول التي أدخلتها عند إنشاء مثيل جديد.
لاحظ أننا قمنا بإعداد وورد بريس بدون رأس محليًا مع عنوان URL http://headless-وورد بريس-news-blog.localمع الواجهة الأمامية مستضافة محليًا في http://news-blog.local، وسنستخدمه طوال البرنامج التعليمي.
بعد ذلك ، بعد تسجيل الدخول بنجاح إلى لوحة معلومات وورد بريس الخاصة بك ، يمكنك المضي قدمًا لتثبيت أي مكونات إضافية وتكوين من اختيارك.
سنقوم بتعطيل السمة بالكامل لهذا البرنامج التعليمي ونصل فقط إلى المحتوى عبر نقطة النهاية المستندة إلى وورد بريس REST API عن طريق تثبيت المكون الإضافي Simple Website Redirect وإعداده.
انتقل إلى المكونات الإضافية> إضافة جديد وابحث عن Simple Website Redirect ، وقم بتثبيته وتنشيطه:
بعد ذلك، انقر على المساعد إعدادات والإدخال URL القائم على الواجهة (على سبيل المثال http://news-blog.local)، انقر على خيارات الإعداد المتقدمة وإضافة المسارات التالية – /wp-admin، /wp-login.phpو /wp-json- إلى قسم مسارات استثناء.
أخيرًا ، قم بتمكين المكون الإضافي عن طريق تحديد ممكّن في القائمة المنسدلة حالة إعادة التوجيه :
بالإضافة إلى ذلك ، إذا لم يتم تمكين واجهة برمجة تطبيقات JSON الخاصة بك عند زيارتك http://headless-وورد بريس-news-blog.local/wp-jsonافتراضيًا ، فيمكنك تمكينها عن طريق فتح الروابط الثابتة ضمن إعدادات وورد بريس وتحديد اسم المنشور أو أي اسم آخر من اختيارك باستثناء عادي :
الآن عند زيارتك http://headless-وورد بريس-news-blog.local/wp-json، يجب أن تقدم لك بيانات JSON كما هو موضح أدناه:
هل تحتاج إلى استضافة من الدرجة الأولى وسريعة وآمنة لموقع التجارة الإلكترونية الجديد الخاص بك؟ توفر Kinsta خوادم فائقة السرعة ودعمًا عالميًا على مدار الساعة طوال أيام الأسبوع من خبراء WooCommerce. تحقق من خططنا
{
"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
}
}
}
],سنستخدم أداة تطوير الويب Vite لإنشاء تطبيق Vue 3 الخاص بنا للتواصل مع وورد بريس بدون رأس. يمكنك قراءة المزيد عن أدوات تطوير Vue 3 و Vite .
في هذه المقالة ، سنبني مدونة إخبارية . سيتم تطوير كل إدارة محتوى الواجهة الخلفية للمشروع واستضافتها باستخدام وورد بريس بدون رأس باستخدام 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 ، ودعنا نتسخ أيدينا بالرموز.
لقد مضينا قدمًا في تطوير الجزء المتبقي من تطبيق Vue لتوفير وقت القراءة ، ولكن يمكنك المضي قدمًا في استنساخ المستودع من GitHub الخاص بي.
يوضح مقتطف الشفرة أدناه كيف نقوم بتنفيذ وورد بريس REST API مع مثيل Vue الخاص بنا لعرض جميع المنشورات من وورد بريس بدون رأس:
<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>يوضح مقتطف الشفرة كيف نسترد منشورًا واحدًا باستخدام وورد بريس REST API باستخدام وورد بريس بدون رأس ونعرضه في مثيل 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>يوجد أدناه المتجر الذي يجعل واجهة برمجة التطبيقات تستدعي واجهة برمجة تطبيقات وورد بريس بدون رأس لمحتويات الواجهة الخلفية:
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
}
},
}أخيرًا ، أصبح نشر وورد بريس بدون رأس أمرًا سهلاً للغاية مع DevKinsta باستخدام خدمة استضافة Kinsta.
لنشر وورد بريس بدون رأس على Kinsta ، انقر فوق الزر Push to Staging على لوحة معلومات DevKinsta وقم بتسجيل الدخول إلى Kinsta باستخدام بيانات اعتماد تسجيل الدخول الخاصة بك. يمكنك إنشاء حساب Kinsta جديد للحصول على بيانات اعتماد تسجيل الدخول الخاصة بك.
يمكنك معرفة كيفية دفع التغييرات إلى بيئة التدريج لنشر وورد بريس بدون رأس على خدمات استضافة Kinsta بنقرة واحدة.
أخيرًا ، يمكنك نشر مثيل Vue.js الخاص بك إلى أي مزود استضافة سحابي من اختيارك. تأكد من تحديث نقطة نهاية وورد بريس بدون رأس وفقًا لذلك لاختبار تطبيقك في بيئة إنتاج حية.
وورد بريس مقطوعة الرأس والمزايا التي تأتي بها موجودة لتبقى لفترة من الوقت. ستستمر شعبيتها في النمو فقط حيث يتعرف المزيد من المطورين ومالكي المواقع على مزايا خيار مقطوعة الرأس.
في هذا الدليل ، قدمنا لك مزايا وإيجابيات وسلبيات وورد بريس بدون رأس ، وقد أوضحنا لك كيفية إنشاء ونشر أول وورد بريس بدون رأس باستخدام DevKinsta. أنت الآن في طريقك إلى تطبيق وورد بريس بدون رأس.
