ما هو ووردبريس بدون رأس؟ كيفية إنشاء واحد؟ [درس تعليمي]

ما هي إيجابيات وسلبيات WordPress CMS بدون رأس؟

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

هل WordPress بدون رأس جيد؟

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

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

كيف يعمل WordPress بدون رأس؟

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

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

ولكن عندما تقوم بفصل WordPress، يمكنك الاستمتاع بأفضل ما في العالمين. ولجعل الأمر ممكنًا، يحتوي WordPress على واجهة برمجة تطبيقات تسمى WordPress REST API.

إنها واجهة برمجة تسمح للمطورين بالوصول إلى بيانات موقع WordPress والتفاعل معها باستخدام طرق HTTP القياسية.

فهو يسمح للمطورين باسترداد محتوى WordPress وإنشائه وتحديثه وحذفه عن بُعد، مما يسهل دمج WordPress مع منصات التطبيقات الأخرى أو تقنيات الواجهة الأمامية الأخرى مثل React.js وAngular.js وما إلى ذلك لإنشاء موقع ويب مخصص.

كيف أجعل WordPress بدون رأس؟ (دروس ووردبريس مقطوعة الرأس)

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

لكن في الوقت الحالي، سنختار الطريقة الأبسط نظرًا لأن غالبية الأفراد مبتدئين. تحقق من الخطوات الواردة أدناه:

الخطوة 1: إعداد ووردبريس

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

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

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

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

لذلك، يصبح من الضروري اختيار مضيف يوفر أداء Blazing Fast Server وأمانًا مشددًا.

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

• على وجه التحديد، توفر WPOven استضافة مُدارة على مزود السحابة من المستوى الأول Linode مما يضمن الأداء عالي السرعة وقابلية التوسع.
• توفر المنصة تثبيتًا مسبقًا لـ WordPress، مما يجعل إعداد WordPress والأدوات الأخرى خاليًا من المتاعب.
• بالإضافة إلى ذلك، بفضل نظام التخزين المؤقت المتقدم المدمج وشبكة توصيل المحتوى (CDN) الخاصة بـ Cloudflare، يتم تسليم المحتوى الخاص بك بشكل أسرع، بغض النظر عن موقع المستخدم.
• بالإضافة إلى ذلك، يضمن WPOven أمانًا قويًا على مستوى المؤسسة من خلال جدران الحماية المضمنة لحماية الويب وتثبيت SSL، مما يساعد على حماية بياناتك وتفاعلاتك الخلفية.
• توفر النسخ الاحتياطية التلقائية وخيارات الاستعادة السهلة طبقة إضافية من حماية البيانات وراحة البال.
• علاوة على ذلك، يضمن دعم عملاء WPOven على مدار 24 ساعة طوال أيام الأسبوع وقاعدة المعرفة الواسعة معالجة أي مشكلات بسرعة، مما يسمح لك بالتركيز على بناء وإدارة نظام إدارة المحتوى بدون رأس الخاص بك دون أي متاعب متعلقة بالاستضافة.

الخطوة 2: تمكين REST API

الشيء التالي الذي عليك القيام به هو التأكد من تمكين WordPress REST API. افتراضيًا، يتم تمكينه على جميع عمليات تثبيت WordPress الجديدة.

ولكن لا يزال يتعين عليك التحقق مما إذا كان ممكّنًا على موقع الويب الخاص بك أم لا. يمكنك القيام بذلك ببساطة عن طريق تقديم طلب API عن طريق إدخال عنوان URL التالي في متصفحك،

https://example.com/wp-json/wp/v2/

قم بتغيير "example.com" باسم المجال الفعلي الخاص بك وإذا تم تمكين واجهة برمجة التطبيقات، فستعرض استجابة JSON مع بعض المعلومات حول منشورات موقع الويب الخاص بك.

وبدلاً من ذلك، يمكنك الحصول على مساعدة من مكون إضافي مثل المكون الإضافي WP REST API.

اقرأ: واجهة برمجة تطبيقات WordPress REST: دليل البدء

الخطوة 3: جلب بيانات النشر عبر واجهة برمجة التطبيقات

إذا كنت ترغب في جلب بيانات المنشور، فاتبع الخطوات التالية:

• افتح لوحة تحكم WordPress > الإعدادات > الروابط الدائمة وحدد اسم المشاركة.

• بعد ذلك، تحتاج إلى تنزيل أداة اختبار Postman API.
• الآن داخل أداة Postman API، أدخل عنوان URL كما في التنسيق الموضح أدناه.

https://mydomain.com/wp-json/wp/v2/posts

سيؤدي هذا إلى جلب بيانات المنشور داخل موقع WordPress الخاص بك.

الخطوة 6: إعداد تطبيق React

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

npm create vite@latest my-blog-app
cd my-blog-app
npm install

سيؤدي هذا الأمر إلى إنشاء تطبيق React جديد باستخدام Vite وتثبيت المكتبات أو الحزم الخارجية الضرورية أيضًا.

بالإضافة إلى ذلك، تحتاج أيضًا إلى تضمين Axios للتعامل مع طلبات HTTP. لهذا قم بتشغيل الأمر التالي لتثبيته.

npm install axios

الآن، يمكنك بدء خادم تطوير محلي لتطبيقك عن طريق تشغيل الأمر npm run dev في الجهاز الطرفي أو موجه الأوامر.

عندما تقوم بتشغيل هذا الأمر، فإنه سيبدأ تشغيل خادم على جهازك المحلي، وسيجعل تطبيقك متاحًا على عنوان URL https://127.0.0.1:5173 .

الشيء التالي الذي يتعين عليك القيام به هو فتح مشروعك في محرر التعليمات البرمجية (أيهما تريد، Visual Studio Code، أو Subkline Text، أو Atom، وما إلى ذلك) وكذلك إزالة الملفات غير الضرورية مثل Index.css، وapp.css، وما إلى ذلك.

الخطوة 7: استرداد المشاركات من WordPress

في ملف App.jsx ، في الأعلى، قم باستيراد الخطاف useState من مكتبة React. يتيح لك هذا استخدام الحالة في المكون الوظيفي الخاص بك.

import React, { useState } from 'react';

داخل App المكون الوظيفي الخاص بك، قم بتهيئة جزء من الحالة يسمى posts باستخدام الخطاف useState . ستحتوي هذه الحالة على مجموعة من المشاركات. يقوم useState([]) بتهيئة posts بمصفوفة فارغة كقيمتها الأولية.

const [posts, setPosts] = useState([]);

بعد تهيئة حالة posts بمصفوفة فارغة باستخدام useState([]) ، ستحتاج إلى إضافة كود لجلب المنشورات من WordPress REST API. يتضمن ذلك تقديم طلب HTTP إلى نقطة نهاية API التي تخدم بيانات المنشورات.

تحتاج إلى إضافة الكود اللازم لجلب بيانات المنشورات بعد إعلان الحالة. سيتضمن هذا الرمز عادةً استخدام طريقة مثل fetch() أو مكتبة مثل Axios لتقديم طلب HTTP GET إلى نقطة نهاية WordPress API التي توفر بيانات المنشورات.

بعد ذلك، أضف الكود التالي بعد إعلان الحالة لاسترداد بيانات المنشورات من WordPress REST API وتحديث المنشورات وفقًا لذلك.

const fetchPosts = () => {
// Using axios to fetch the posts
axios
.get("https://yourdomain.com/wp-json/wp/v2/posts")
.then((res) => {
// Saving the data to state
setPosts(res.data);
});
}
// Calling the function on page load
useEffect(() => {
fetchPosts()
}, [])

يجلب هذا الكود المنشورات من واجهة برمجة تطبيقات REST لموقع الويب WordPress عند تثبيت المكون، ويقوم بتحديث حالة المكون بالبيانات التي تم جلبها باستخدام وظيفة setPosts الخاصة بخطاف useState .

الخطوة 8: إنشاء مكون مدونة وعرضه

الآن قم بإنشاء مجلد جديد باسم "المكونات" داخل المجلد src وقم بإنشاء ملفين جديدين Blog.jsx و blog.css (داخل المكونات).

بعد ذلك، أضف الكود التالي إلى ملف Blog.jsx أولاً:

import axios from "axios";
import React, { useEffect, useState } from "react";
import "./blog.css";
export default function Blog({ post }) {
const [featuredImage, setFeaturedImage] = useState();
const getImage = () => {
axios
.get(post?._links["wp:featuredmedia"][0]?.href)
.then((response) => {
setFeaturedImage(response.data.source_url);
});
};

useEffect(() => {
getImage();
}, []);
return (
<div class="container">
<div class="blog-container">
<p className="blog-date">
{new Date(Date.now()).toLocaleDateString("en-US", {
day: "numeric",
month: "long",
year: "numeric",
})}
</p>
<h2 className="blog-title">{post.title.rendered}</h2>
<p
className="blog-excerpt"
dangerouslySetInnerHTML={{ __html: post.excerpt.rendered }}
/>
<img src={featuredImage} class="mask" />
</div>
</div>
);
}

يقوم هذا المكون بجلب وعرض العنوان والتاريخ والمقتطف والصورة المميزة لمنشور مدونة تم تمريره كدعم.

بعد ذلك أضف النمط التالي إلى ملف blog.css،

@import url("https://fonts.googleapis.com/css?display=swap&family=Poppins");
.blog-container {
width: 400px;
height: 322px;
background: white;
border-radius: 10px;
box-shadow: 0px 20px 50px #d9dbdf;
-webkit-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
img {
width: 400px;
height: 210px;
object-fit: cover;
overflow: hidden;
z-index: 999;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}

.blog-title {
margin: auto;
text-align: left;
padding-left: 22px;
font-family: "Poppins";
font-size: 22px;
}

.blog-date {
text-align: justify;
padding-left: 22px;
padding-right: 22px;
font-family: "Poppins";
font-size: 12px;
color: #c8c8c8;
line-height: 18px;
padding-top: 10px;
}

.blog-excerpt {
text-align: justify;
padding-left: 22px;
padding-right: 22px;
font-family: "Poppins";
font-size: 12px;
color: #8a8a8a;
line-height: 18px;
margin-bottom: 13px;
}

وأخيرًا، أدخل مقتطف التعليمات البرمجية التالي داخل عبارة return لملف App.jsx . هذا هو المكان الذي تحدد فيه بنية واجهة المستخدم الخاصة بالمكون الخاص بك باستخدام بناء جملة JSX.

<div>
{posts.map((item) => (
<Blog post={item} />
))}
</div>;

Here's the final version of your "App.jsx":
import React, { useEffect, useState } from 'react'
import axios from "axios"
import Blog from './components/Blog';
export default function App() {
const [posts, setPosts] = useState([]);
const fetchPosts = () => {
axios
.get("https://my-awesome-website.local/wp-json/wp/v2/posts")
.then((res) => {
setPosts(res.data);
});
}

useEffect(() => {
fetchPosts()
}, [])
return (
<div>
{posts.map((item) => (
<Blog
post={item}
/>
))}
</div>
)
}

احفظ الملف وقم بتحديث المتصفح الخاص بك. ستتمكن الآن من رؤية منشورات المدونة المعروضة على الشاشة.

أمثلة على WordPress بدون رأس

كمرجع لك ولبناء الثقة، نقدم لك هنا بعض أمثلة WordPress بدون رأس:

1. تك كرانش

إذا كنت من عشاق التكنولوجيا، فيجب أن تكون على دراية بـ TechCrunch. وهو موقع إعلامي رائد في مجال التكنولوجيا وموقع إخباري. لقد أعادوا تصميم الواجهة الأمامية لموقعهم الإلكتروني لتوفير تجربة مستخدم سلسة.

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

2. مركز موارد العلامة التجارية لفيسبوك

يُعرف Facebook الآن باسم Meta، وهو أحد عمالقة وسائل التواصل الاجتماعي يستخدم أسلوب Headless WordPress هذا في موقع مركز موارد العلامة التجارية الخاص به كدليل أسلوب لأصول علامته التجارية.

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

خاتمة

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

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

تتيح لك هذه التقنية الاستمتاع بالقوة الكاملة لكل تقنية إلى جانب فوائد المرونة وقابلية التوسع وتحسين محركات البحث.

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

أسئلة مكررة

راهول

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