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

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

سنناقش في هذا المقال الأمور التالية:

• لمحة عامة عن بوت المحادثة الذكي شات جي بي تي ChatGPT.
• الطرق المختلفة التي يمكن فيها لشات جي بي تيChatGPT مساعدتك كمطور ووردبريس.

ولنبدأ بمناقشة هذه النقاط بالتفصيل في الفقرات التالية:

لمحة عامة عن ChatGPT

إن مصطلح ChatGPT هو اختصار لعبارة Chat Generative Pretrained Transformer وهو عبارة عن أداة من أدوات الذكاء الاصطناعي طورتها شركة الأبحاث OpenAI لتكون أداة قوية جدًا تستخدم طريقة التعليم المعزز والتعليم الخاضع للإشراف للإجابة على الأسئلة المعقدة بفعالية كبيرة.

يعد ChatGPT أحد تطبيقات الذكاء الاصطناعي التوليدي Generative AI وهذا يعني أنه عندما يتم تدريبه أو تعليمه فسيكون بإمكانه توليد مخرجات مشابهة للأمثلة التي تم تدريبه عليها، وبالتالي يمكنه مساعدتك في كثير من الأمور مثل كتابة الكود، وصياغة المقالات، وكتابة رسائل البريد الإلكتروني وغيرها من المهام.

الطرق التي يساعدك ChatGPT فيها كمطور ووردبريس

يقدم لك ChatGPT العديد من المميزات لمطوري ووردبريس ويساعدهم على تحسين بيئة العمل البرمجي، وفيما يلي نقدم لك أبرز هذه الميزات:

1. توليد الكود البرمجي
2. اختبار الكود
3. التوثيق التقني
4. تصحيح الأخطاء
5. توليد التعليقات
6. تبسيط الأكواد المعقدة
7. معالجة البيانات
8. هندسة المميزات
9. توليد كود برمجي بديل
10. تطوير عملية النمذجة
11. إجراء عمليات البحث

لنناقش كل ميزة من هذه الميزات بمزيد من التفصيل.

1. توليد الكود البرمجي

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

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

كان السؤال أو المطالبة الموجهة له بالضبط على النحو التالي: اكتب الكود البرمجي اللازم الذي يُمكّن الزبائن من اختيار عناصر متنوعة من الطعام. وهذا هو الجواب الذي حصلنا عليه:

هنا ستجد مثال لكود برمجي مكتوب بلغة HTML يستطيع الزبائن من خلاله اختيار عناصر متنوعة من الطعام

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

ولن يكتفي بكتابة الكود كما ذكرنا بل سيشرح لك الخطوات التي قام بها على النحو التالي:

اقتباس

يتضمن هذا النموذج حقول لاسم المستخدم وبريده الإلكتروني بالإضافة إلى مربعات اختيار من أجل تحديد عناصر الطعام المختلفة وهذا النموذج تم تنسيقه بواسطة لغة CSS لكي يظهر بشكل أجمل للمستخدم. عندما يقوم المستخدم بإرسال النموذج فإن البيانات ستتم معالجتها من قبل المخدم وهذا يتطلب كتابة كود بلغة PHP أو لغة JavaScript.

من خلال هذا المثال يمكن أن نخلص للتالي: يمكنك كمطور ووردبريس أن توفر وقتك في كتابة الأكواد التي تستغرق وقتاً طويلاً وتكلف ChatGpt بهذه المهمة وتتفرغ لحل المشكلات الأخرى التي تواجهك في بناء التطبيق.

2. اختبار الكود البرمجي

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

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

3. التوثيق التقني

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

على سبيل المثال إذا زودنا ChatGPT بجزء من الكود الذي قام هو بتوليده في الفقرة السابقة، ثم طلبنا من أن ينشئ لنا توثيقًا لهذا الكود ستكون النتيجة مشابهة للتالي:

اقتباس

ينشئ الكود نموذجًا عن طريق استخدام الوسم <form> وداخل هذا النموذج يوجد عنوان <h2> نصه "Food order form" وهذا النموذج يحتوي على ثلاثة حقول هي الاسم name، والبريد الإلكتروني Email، وعنصر checkbox لاختيار أنواع الطعام.

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

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

4. معالجة أو تصحيح الأخطاء

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

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

سيعطينا النتيجة التالية:

اقتباس

يوجد هناك خطأ في هذا الكود بسبب طريقة عمل الإغلاق Closure في جافا سكريبت حيث ستظهر الرسالة "Button clicked" في كل مرة يتم فيها الضغط على أي زر من الأزرار حتى ولو كان للزر رسالة مختلفة.

لحل هذا الخطأ أنت بحاجة لإنهاء قيمة المتغير i في نفس وقت إضافة مستمع الحدث event listener. ويمكن حل هذه المشكلة عن طريق استخدام دالة الطريقة الفورية (Immediately Invoked Function Expression - IIFE) للحفاظ على قيمة i في كل تكرار.

وسيعطي اقتراحًا للكود المصحح أيضًا:

إن عملية تصحيح الأخطاء باستخدام ChatGPT يمكن أن توفر الكثير من الوقت والجهد خاصة في التطبيقات الكبيرة والمعقدة.

5. توليد التعليقات

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

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

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

على سبيل المثال عندما طلبنا من ChatGPT أن يضيف تعليقًا يشرح لنا الكود الموضح بالصورة:

كان التعليق على النحو التالي:

// الحصول على جميع العناصر في المستند التي تحتوي على الصنف "my-button"
// وتخزينها في متغير يسمى "buttons".
var buttons = document.getElementsByClassName('my-button');

6. تبسيط الكود المعقد

يسمح ChatGPT للمطورين أن ينشؤوا شروحات بسيطة للكود المعقد، مما يسهل على المطورين الآخرين فهم وصيانة هذا الكود، فيمكن لـGhatGPT إنشاء توثيق وتعليقات للكود كما رأينا ثم يقوم الذكاء الاصطناعي بتبسيط هذا الكود وتوضيحه مما يوفر الكثير من الوقت والجهد على المطور.

بالإضافة إلى ذلك ومع القدرة على تبسيط الكود المعقد غالباً ما يكون الكود الذي يكتبه ChatGPT أكثر دقة من الكود الذي يكتبه المطور نفسه.

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

7. معالجة البيانات

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

كما يمكن إنشاء ميزات جديدة من البيانات الموجودة مثل توليد كود يستخرج المعلومات من البيانات غير المهيكلة (مثل النصوص أو الصور) ثم يحول هذه المعلومات إلى بيانات مهيكلة تستخدم في عملية تعلم الآلة machine learning وهذا يجعل عملية المعالجة المسبقة أبسط وأكثر كفاءة ودقة.

8. هندسة المميزات Feature Engineering

يساعد ChatGPT في تحسين ميزات البيانات المستخدمة في تعلم الآلة. وتحسين الميزات يعني تحسين جودة وكفاءة البيانات التي تستخدمها النماذج لتحقيق نتائج أفضل. فعندما تمتلك نموذج للتعلم الآلي مع بيانات مختلفة يستطيع ChatGPT مساعدتك لدرجة كبيرة وتحسين الأداء. لذا تساعد هندسة المميزات التي يقدمها ChatGPT في تقليل أخطاء مجموعات البيانات وتحسين أداء النموذج وزيادة دقته وموثوقيته.

9. توليد الكود البديل

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

على سبيل المثال طلبنا من ChatGPT إنشاء كود بديل للكود الموضح بالصورة التالية:

فكان جوابه أن قدم لنا الكود الموضح بالصورة التالية:

ملاحظة: هذا جزء من الكود فقط

ثم قدم الشرح التالي:

اقتباس

في هذا التطبيق يمتلك الصنف Client متحول خاص يدعى service ومتحول خاص يدعى name يمكن الوصول إليه من خلال التابع ()getName والتابع ()setName. كما يهيئ التابع ()setName اسم الكائن Service ويمتلك الصنف Service متحولًا خاصًا اسمه name يمكن الوصول إليه أيضاً من خلال التابعين ()getName و ()setName.

10. تطوير عملية النمذجة ونشرها

يستطيع ChatGPT المساعدة في عملية إعداد البيانات النصية وتنظيفها، مما يؤدي إلى تحسين أداء النموذج وجعله ينشئ نصًا يشبه النص الذي ينتجه الإنسان، ويمكن استخدام هذا النص لمحاكاة عملية الاتصال بين الإنسان والحاسوب، وهذا مفيد جدًا عندما نريد تطوير أنظمة محادثة خاصة بالذكاء الاصطناعي مثل نظام رد آلي chatbot.

كما يستطيع ChatGPT إنشاء شروحات باللغة الطبيعية لتنبؤات النموذج وهذا يساعد النموذج ليشرح الأمور بسهولة أكبر. ويمتلك ChatGPT قوة كبيرة لتوليد نص باللغة الطبيعية البشرية والتي تفيد في سياق العمل والتواصل مع الآخرين.

11. عمليات البحث

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

على سبيل المثال طلبنا من ChatGPT إنشاء مكتبة تضيف ميزة منبثقة pop-up لموقع الويب فكان جوابه كما يلي:

اقتباس

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

ملاحظة: هذا جزء فقط من الإجابة التي قدمها ChatGPT لتوضيح الفكرة.

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

هل يمكننا الوثوق بأجوبة ChatGPT؟

يجب أن نعلم كمطورين ووردبريس أن ChatGPT أداة قوية ومفيدة ولكن يوجد فيها بعض العيوب التي يجب علينا فهمها والدراية بها وأولها أن ChatGPT ليس دقيقًا دائماً فهو يعتمد على الأسئلة الموجهة له فعندما تكون الأسئلة غير منطقية ستكون الإجابات غير منطقية كذلك!

وتتكون بيانات التدريب الخاصة بالنموذج من مجموعة واسعة من المحتوى المكتوب من قبل البشر وبالتالي يمكن أن تكون أجوبة ChatGPT أحياناً غير دقيقة وغير موضوعية حسب المحتوى المكتوب وبمعنى آخر الدخل الخاطئ يؤدي إلى نتائج خاطئة.

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

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

لماذا نستخدم الذكاء الاصطناعي؟

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

ويمكن أن يكون ChatGPT أداة قيمة لمطوري ووردبريس (على الرغم من أنها ليست مثالية) من خلال الاستفادة من إمكانياتها المشروحة سابقًا لتوفير الوقت والتركيز على الجوانب الأخرى في بيئة تطوير ووردبريس الخاصة بك.

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

ترجمة وبتصرف للمقال 11Ways ChatGPT Can Help You As a WordPress Developer لكاتبيه N. Fakes & Martin Aranovitch

اقرأ أيضًا

• دليل استخدام ChatGPT API لتحسين خدماتك عبر الإنترنت
• تطوير تطبيق 'اختبرني' باستخدام ChatGPT ولغة جافاسكربت مع Node.js
• بناء تطبيق بايثون يجيب على أسئلة ملف PDF باستخدام الذكاء الاصطناعي
• تدريب بوت المحادثة ChatGPT وتعليمه كيف يتحدث ويتعلم

يستخدم كل من ووردبريس بدون رأس Headless WordPress وواجهات برمجة التطبيقات REST API ضمن بيئة تطوير ووردبريس بشكل كبير مؤخرًا، ويحتاج المطورون لامتلاك مجموعة من الأدوات القياسية التي يرغبون في استخدامها عند العمل على هذه النوع من المشاريع. سسنشرح في مقال اليوم طريقة التعامل مع مفهوم ووردبريس مقطوع الرأس (بلا رأس) باستخدام مجموعة من الأدوات وعلى الرغم أننا لا نؤكد أن مجموعة الأدوات التي سنستخدمها ينبغي أن تكون قياسية إلا أننا نرى أن هذه الادوات ستكون مناسبة للاستخدام عند بناء تطبيقاتنا باستخدام REST API، وهذه الأدوات هي :

• MailHog: وهي أداة اختبار SMTP تعتمد على الويب وواجهة برمجة التطبيقات.
• Insomnia: هو عميل REST قوي متعدد الأنظمة يستخدم لاختبار واجهات برمجة التطبيقات.
• JWT Auth: هي أداة شائعة الاستخدام لتأمين واجهات برمجة التطبيقات.

تطبيقات ووردبرس بدون رأس Headless WordPress باستخدام REST API

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

المتطلبات

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

• خادم ويب يدعم لارافيل مثل Valet
• نظام إدارة قواعد البيانات مثل MariaDB
• لغة البرمجة PHP (أي إصدار أعلى من 7.4.33 حسب نوع الخادم الذي تشغل المشروع عليه) ولمزيد من المعلومات حول إعداد بيئة تطوير محلية يمكنك الاطلاع على مقال تثبيت وضبط تطبيق لارافيل مع خادم Nginx على حزمة LEMP من أوبنتو ومقال دليل إعداد خادم ويب محلي خطوة بخطوة

سنستخدم أيضاً الأدوات التالية بالنسبة لبيئة التطوير الخاصة بنا:

• Visual Studio Code Insiders: لتحرير الأكواد.
• PHPDoc Comment: لتوثيق الأكواد.
• PHP Sniffer & Beautifier مع PSR12: لتحليل وتنسيق كود PHP والتأكد من مطابقته للمعايير والقواعد البرمجية.
• PHP Debug: لمراقبة تطبيقات PHP وتتبع أخطائها.
• Ray: أداة تسهل تصحيح الأخطاء البرمجية. عملياً إذا كنت على معرفة بكل الأدوات والتقنيات السابقة وكان لديك الإعدادات الخاصة بك أو كنت معتاد على بناء التطبيقات أو الحلول باستخدام ووردبرس فقد يكون كل ما سبق لا يعنيك. وإلا يجب عليك أن تأخذ بعض الوقت لتتعرف على كل ما ورد أعلاه.

دراسة حالة بسيطة:

بفرض طلب منك تطوير تطبيق ووردبرس بدون رأس Headless WordPress يوفر نقاط نهاية مخصصة endpoints ويمكن لتطبيق iOS الاتصال بها لتسجيل الدخول والقيام بالاستيثاق أو التأكد من صحة البيانات وإرسال واستقبال البيانات. سيقدم تطبيق ووردبريس الوظائف التالية بالتحديد:

1. إنشاء حساب جديد للمستخدم.
2. الحصول على معلومات المستخدم.
3. طلب مفتاح التشفير المساعد token.
4. التحقق من المفتاح المساعد token.
5. ضبط بيانات المستخدم. إن هذه البنود ليست كاملة ولكنها كافية لتوضيح طريقة استخدام الأدوات المختلفة في بناء تطبيقات مماثلة.كما أن الوظائف المذكورة في التطبيق يمكنها أن توفر عبر نقاط الوصول endpoints التالية:
6. /acme/v1/getUser
7. /acme/v1/createUser
8. /jwt-auth/v1/token
9. /jwt-auth/v1/token/validate
10. /acme/v1/setData

ملاحظة: إن acme هنا عبارة عن قيمة مؤقتة placeholder تعبر عن اسم التطبيق. أما jwt-auth فهو اسم المكتبة الخاصة بعملية المصادقة (اسم المستخدم وكلمة المرور) التي نقوم باستخدامها وهذا ما سيتم مناقشته لاحقاً في هذه المقالة

توثيق واجهة برمجة التطبيقات API:

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

• الاتصال الجيد بين نقاط الوصول والوسطاء والخرج المتوقع.
• سهولة تواصل المطورين الجدد مع الواجهة.
• سهولة العودة لتصحيح الأخطاء في حال ظهورها في التطبيق المقدم للعميل.
• وجود عدة إصدارات من واجهة برمجة التطبيق API يمنح للمطورين المرونة باختيار الإصدار المناسب لتطبيقاتهم ومعرفة المميزات الموجودة في كل إصدار. لذا من المفيد أن تأخذ هذه الأسباب بعين الاعتبار عندما تقوم بإنشاء وتنفيذ أي تطبيق في المستقبل.

الأداة MailHog

إذا قمت سابقاً بتثبيت برنامج ووردبريس فمن المؤكد أنك رأيت كمية رسائل البريد الإلكتروني المرسلة لك وذلك إما عبر واجهة التطبيق أو عبر واجهة سطر الأوامر Command Line Interface فعندما تعمل في بيئة التطوير الخاصة بك سيكون هناك اختلاف بسيط في التعامل وإدارة رسائل البريد الإلكتروني (سواء في طريقة استلامها أو تخصيصها) وهنا يمكنك استخدام تقنية MailHog وهي عبارة عن تطبيق ويب مفيد جداً عندما تصل إلى مراحل متقدمة في تطوير واختبار مشروعك حيث تقوم هذه التقنية بدور خادم SMTP وهمي وتقوم بشكل أساسي بدور خادم بريد إلكتروني وهمي لمساعدتك في اختبار وظائف البريد الإلكتروني وتصحيح الأخطاء.

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

• الموضوع (عنوان الرسالة)
• المرسل
• المستقبل (مستلم الرسالة)
• الرسالة (نص الرسالة)

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

الأداة Insomnia

الأداة Insomnia هي تطبيق عميل API مفتوح المصدر متوافق مع مختلف الأنظمة، لكن إذا كنت معتادًا على التعامل مع تطبيقات REST API مثل تطبيق Postman أو تطبيق Paw (المسمى حالياً RapidAPI) فإنك لن تكون مهتماً بالعمل على هذه التقنية بالرغم من أنها أبسط نوعاً ما من التطبيقات المذكورة أعلاه

بالنسبة للمطورين الذين لا يعملون على البرامج المذكورة أعلاه فإن هدفهم الأول هو تبسيط عملية التفاعل مع واجهة برمجة التطبيق REST API واختبارها. تنشئ الأداة Insomnia طلبات بروتوكول HTTP وتحللها وترسلها إلى نقاط وصول واجهة برمجة التطبيق API باستخدام الأوامر GET و POST و PUT و DELETE القياسية وتجعل التعامل معها أكثر سهولة.

كما أنها تسهل التعامل مع ملفات JSON, XML وبيانات النماذج أو الاستمارات forms. وإن كان هذا الأمر غير مهم عند إنشاء التطبيقات لأنه يمكنك التحكم بنوع ملفات الخرج التي سيتم استرجاعها ولكنه أساسي عندما تتعامل API آخر لأن تحتاج لتغيير تنسيق البيانات قبل إرسالها أو استقبالها.

ومن أهم ميزات هذه الأداة هي قدرتها على تنظيم الطلبات requests في مجلدات ومساحات عمل workspaces وهذا يسمح للمطورين بتنظيم وإدارة مشاريع اختبار واجهة برمجة التطبيق API الخاصة بهم ويسهل عملية التنقل والتبديل بين نقاط الوصول المختلفة. بالإضافة إلى ذلك فإن الطريقة التي يسمح لنا التطبيق بها في هذه الأداة بتوثيق وتنظيم كل نقطة وصول تجعل عملية مشاركة التطبيق مع المطورين الآخرين أسهل وبالتالي يمكنهم اختبار التطبيق على تطبيق واجهة برمجية API آخر على سبيل المثال بمجرد إنشاء REST API لموقع مبني بواسطة ووردبريس يمكنك مشاركته بواسطة الأداة Insomnia مع مطوري تطبيقات iOS ليتمكنوا من معرفة ما يلي:

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

الأداة JWT-Auth

قبل البدء في معرفة أهمية الأداة JWT-Auth فإنه من المفيد جداً معرفة ما هي JWT ومدى فائدتها في تطوير واجهة برمجة التطبيقات REST API بشكل عام يمكن تعريف JWT على أنه طريقة آمنة لنقل المعلومات بين المطورين بصيغة JSON وبعبارة أبسط هي عبارة عن آلية مصادقة معتمدة على المفتاح المساعد token وتستخدم بشكل كبير في تطبيقات الويب ملاحظة: على الرغم من صحة ما سبق فإنك إن لم تكن على دراية بآلية عمل مصادقة REST API لن تستطيع بناء المصادقة التي تحتاج إليها. عند إجراء مقارنة بين طريقة تفاعلنا مع الووردبريس من خلال المتصفح، وطريقة تفاعلنا مع الوورد بريس من خلال JWT فإنه يجب الانتباه إلى النقاط التالية:

• أولا نقوم بإرسال بيانات الاستيثاق (اسم المستخدم وكلمة السر) إلى المتصفح ومن ثم يطابق التطبيق تلك البيانات ويرسلها إلى المتصفح وبعد ذلك نكون قادرين على العمل والتنقل ضمن الوورد بريس (إدارة المستخدمين - كتابة وتحرير المنشورات وما إلى ذلك وأحياناً يكون عبارة عن مراجعة للمنشورات فقط) وهذه الأمور تتم فقط من خلال مدير نظام ووردبريس.
• أما عندما تتم المصادقة عبر واجهة برمجة التطبيقات REST APIs فيجب أن يكون هناك طريقة أخرى للمصادقة يستطيع التطبيق من خلالها معرفة بيانات استيثاق المستخدم وهنا يأتي دور المفتاح المساعد token حيث ستقوم آلية المصادقة المعتمدة على JWT بإنشاء مفتاح مساعد token ثم تقوم بتضمين هذا المفتاح المساعد token مع كل طلب وفي انتهاء صلاحية المفتاح المساعد token ستقوم واجهة برمجة التطبيق API بإعلامك من أجل أن تقوم بتحديث المفتاح المساعد token من الواضح بأنك بحاجة إلى عمل كثير عند تطبيق JWT في ووردبريس ولكن عند استخدام إضافة JWT-Auth فإن ستصبح الأمور أسهل بكثير.

وكما توضح الصورة أعلاه المأخوذة من توثيق الإضافة فإن استيثاق ووردبريس باستخدام JSON Web Token يسمح بإجراء مصادقة واجهة REST API باستخدام المفتاح المساعد token وهي عملية بسيطة وغير معقدة وسهلة الاستخدام وهذه الإضافة مناسبة جداًَ لعمل مصادقة JWT ضمن ووردبريس.

وللتعامل معها عليك القيام بما يلي:

1. ضع مفتاح سري في الملف wp-config.php
2. حدد فيما إذا كنت تريد من الإضافة أن تدعم خاصية CROS (وهو موضوع مهم إذا كنت تريد تمكين الاتصال الآمن بين تطبيقات الويب)
3. بعد الانتهاء من تثبيت الإضافة يمكنك ان تقوم بعمل طلب request إلى wp-json/jwt-auth/v1/token/ متضمنا اسم المستخدم وكلمة السر للحساب بتنسيق JSON كما في المثال التالي:

{
  "username": "John@appleseed.com",
  "password": "kn6oLrcW0\/D1M"
}

وبعدها سوف تستقبل الرد التالي:

{
  "success": true,
  "statusCode": 200,
  "code": "jwt_auth_valid_credential",
  "message": "Credential is valid",
  "data": {
    "token": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJodHRwczovL3NjYXJpZi50ZXN0IiwiaWF0IjoxNjg0MzU1MzA5LCJuYmYiOjE2ODQzNTUzMDksImV4cCI6MTY4NDk2MDEwOSwiZGF0YSI6eyJ1c2VyIjp7ImlkIjoyNTksImRldmljZSI6IiIsInBhc3MiOiJiMWM3OTBhMmJhYzExNzNlYzI4ZTQxZGUxMDYyYzIwZiJ9fX0.q3-DRC_DQvezy1w-XV0CYNQYyKC3X8iSs7GKy86zjbg",
    "id": 259,
    "email": "John@appleseed.com",
    "nicename": "johnappleseed-com",
    "firstName": "John",
    "lastName": "Appleseed",
    "displayName": "John@appleseed.com"
}

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

الخاتمة

تعرفنا في مقال اليوم على أهم الأدوات التي سنحتاجها لبناء تطبيقات ووردبريس بدون رأس Headless WordPress باستخدام واجهة برمجة التطبيق REST API والتي يمكنك من خلالها الاستفادة من مرونة الووردبريس كنظام إدارة محتوى. نتمنى لكم الاستفادة الجيدة من هذا المقال وفي حال كان لديكم أي تساؤل حول ما ورد فيه فيمكن تركه في قسم التعليقات أسفل المقال أو كتابته في قسم الأسئلة والأجوبة في أكاديمية حسوب.

ترجمة وبتصرف للمقال How To Build Headless WordPress Applications with a REST API لكاتبه Tom McFarlin

اقرأ أيضًا

• مُقدّمة إلى برمجة إضافات Wordpress
• مدخل إلى برمجة قوالب ووردبريس
• أفضل طريقة للتّعديل على ووردبريس وإضافة نص برمجي إليه
• استقبال وحفظ خيارات الإضافة في ووردبريس من خلال التعامل مع Setting API وOptions API

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

هذا المقال هو المقال الأخير من سلسلة المقالات التالية:

• مدخل إلى برمجة قوالب ووردبريس
• أساسيات تطوير قالب ووردبريس
• إنشاء الملفات الأساسية لبرمجة قالب ووردبريس
• إضافة تنسيقات CSS لقالب ووردبريس
• إضافة المميزات لقالب ووردبريس باستخدام جافا سكريبت

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

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

أولاً. ميزة عرض قائمة تنقل متجاوبة في قالب ووردبريس

أول ميزة نريد تحقيقها هي تحويل قائمة التنقل الرئيسية إلى قائمة ذات تصميم متجاوب Responsive design عند تغير حجم الشاشة حيث سنغير تصميم القائمة وطريقة عرض عناصرها بناءً على حجم شاشة العرض.

فعندما يكون يكون حجم الشاشة كبيرًا تعرض عناصر القائمة بشكل أفقي بجانب بعضها البعض، وعندما يصبح عرض الشاشة صغيرًا (أصغر من أو يساوي 600 بكسل) ستختفي عناصر القائمة وتظهر على شكل ثلاث خطوط أفقية فوق بعضها البعض وهو ما يعرف بزر الهمبرغر Hamburger Button وسيؤدي النقر عليه إلى عرض عناصر القائمة بشكل عمودي كما هو موضح في الصورة التالية:

لتحقيق هذه الميزة نحتاج للعمل على ثلاث ملفات الأول هو ملف ترويسة القالب header.php حيث سنضيف له الخطوة التالية هي أيقونة تمثل زر القائمة ثم سنربط حدث النقر فوق هذا الزر مع ربط دالة سنسميها hamFunction سنشرح وظيفتها بعد قليل.

دورة تطوير تطبيقات الويب باستخدام لغة PHP

احترف تطوير النظم الخلفية والووردبريس وتطبيقات الويب من الألف إلى الياء دون الحاجة لخبرة برمجية مسبقة

اشترك الآن

fa fa-bars الذي يمثل أيقونة الهمبرغر وهي أحد أيقونات Font Awesome التي استوردناها لقالبنا في مقال إنشاء الملفات الأساسية لبرمجة قالب ووردبريس ضمن القسم rtl-Primary-nav، ستكون مخفية في الشاشات الكبيرة وظاهرة في الشاشات الصغيرة ثم نستدعي الدالة hamFunction عند وقوع حدث النقر فوق هذا الرابط كما يلي:

<section class="rtl-Primary-nav">
  <?php
  if (has_custom_logo()) : {
      $custom_logo_id = get_theme_mod('custom_logo');
      $image = wp_get_attachment_image_src($custom_logo_id, 'full');
    }  ?>
    <nav id="myTopnav" class="topnav">
      <div class="logo">
        <a href="<?php echo esc_url(home_url('/')); ?>" class="logo-link">
          <img src="<?php echo $image[0]; ?>"> </a>
      </div>

      <?php wp_nav_menu(array('theme_location' => 'Primary')); ?> <a href="javascript:void(0);" class="icon" onclick="hamFunction()">
        <i class="fa fa-bars"></i>
      </a>
    </nav>
  <?php else : ?>
    <nav id="myTopnav" class="topnav">
      <h2> <a href="<?php echo esc_url(home_url('/')); ?>" rel="home" class="logo-link"><?php bloginfo('name'); ?></a> </h2>
      <?php wp_nav_menu(array('theme_location' => 'Primary')); ?> <a href="javascript:void(0);" class="icon" onclick="hamFunction()">
        <i class="fa fa-bars"></i>
      </a>
    </nav>
  <?php endif; ?>
</section>

الخطوة التالية هي إضافة تنسيقات لملف style.css حيث سنضيف له استعلام وسائط Media query للتحقق من أن الجهاز الذي نتصفح من خلاله الموقع هو جوال ونطبق عليه تنسيقات عرض الأيقونة بالشكل المطلوب.

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

.topnav {
  overflow: hidden;
  z-index: 10;
  position: relative;
}


.topnav .icon {
  display: none;
}


@media screen and (max-width: 600px) {
  .topnav a:not(.logo-link) {
    display: none;
  }
  nav.topnav ul {
    display: block;
    background-color: #f6c86c;
  }
  nav.dnnav ul {
    display: block;
    float: right;
    background-color: #F9B01B;
  }
  nav.dnnav ul li {
    display: inline-block;
    margin: 5px;
    background: #f6c86c;
    padding: 10px;
  }

  .topnav a.icon {
    float: left;
    display: block;
  }
  .post-qwe {
    width: 90%;
    text-align: center;
  }
  .topnav .icon {
    position: absolute;
    left: 0;
    top: 25px;
  }
  .topnav.responsive {
    position: relative;
  }

  .topnav.responsive ul li a {
    float: none;
    display: block;
    text-align: right;
  }
}

الآن سوف نكتب كود جافا سكريبت للتبديل بين التنسيقات من خلال إنشاء ملف جافا سكريبت باسمhamburger-menu.js نضعه في في مجلد فرعي باسم js ننشؤه داخل مجلد القالب، ثم نربط هذا الملف مع قالب ووردبريس الخاص بنا.

وهنا نذكر بأن لدينا عدة طرق من بينها الطريقة التقليدية من خلال إضافة الوسم <script> في تذييل الموقع أي قبل الوسم <‎/body> في الملف footer.php كما في الكود التالي:

<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/hamburger-menu.js"></script>

لكن الطريقة الأفضل لإضافة السكربتات في قالب ووردبريس والموصى بها من قبل نظام ووردبريس هي باستخدام الدالة wp_enqueue_script()‎ لذا سنكتب الكود التالي في ملف وظائف القالب fumctions.php بدل الكود السابق لربط ملف hamburger-menu.js مع قالب ووردبريس الخاص بنا

function modawanaty_scripts()
{
//..
    wp_enqueue_script( 'hamburger-menu', get_template_directory_uri() . '/js/hamburger-menu.js', array(), '1.0', true );
}
//..
add_action('wp_enqueue_scripts', 'modawanaty_scripts');

تأخذ الدالة wp_enqueue_script عدة وسطاء وهي:

1. ‎$handle‎: اسم فريد يمثل الملف الذي تريد تضمينه لتمييزه الملف عن غيره من الملفات.
2. ‎$src: مسار الملف الذي تريد تضمينه.
3. ‎$deps: dependencies التي يحتاج الملف إلى تحميلها قبل تحميل الملف. على سبيل المثال، إذا كنت تستخدم مكتبة jQuery في ملف جافا سكريبت الخاص بك فيجب أن تضيفها ضمن مصفوفة الاعتماديات.
4. ‎$ver: إصدار الملف يمكنك تحديد رقم الإصدار للملف الخاص بك للتحكم في التخزين المؤقت والتحديثات.
5. ‎$in_footer: قيمة بوليانية تأخذ بشكل افتراضي القيمة true وتحدد ما إذا كنت تريد تحميل الملف في تذييل الصفحة أي قبل الوسم <‎/body> ولاستدعائه في ترويسة الصفحة أي قبل الوسم <‎/head> يمكنك عندها تمرير القيمة false لهذا الوسيط.

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

الآن نفتح الملف hamburger-menu.js في محرر الأكواد ونكتب بداخله الكود التالي الذي ينفذ عند النقر فوق أيقونة القائمة:

const hamFunction = () => {
    // استهداف القائمة
    var hamburger = document.getElementById("myTopnav");
    if (hamburger.className === "topnav") {
      hamburger.className += " responsive";
    } else {
      hamburger.className = "topnav";
    }
  };

عرفنا في الكود أعلاه دالة باسم ()hamFunction مهمتها التحكم بعرض وإخفاء عناصر القائمة، بداية عرفنا متغير باسم hamburger يستهدف القائمة ثم اختبرنا إن كان صنف التنسيق لها يساوي topnav وذلك يعني أن القائمة ليست مرئية حاليًا وفي هذه الحالة، يتم إضافة الصنف responsive ليصبح تنسيقها topnav responsive مما يؤدي لتطبيق تصميم مختلف للقائمة هو التصميم المتجاوب.

أما إذا كانت القيمة المخزنة في الصنف لا تساوي topnav فإن ذلك يعني أن القائمة بالفعل مرئية وفي هذه الحالة يتم إعادة تعيين القيمة topnav لاستعادة التصميم الأصلي للقائمة وإخفائها.

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

ثانيًا. تضمين ميزة عرض شريط منزلق للمقالات في قالب ووردبريس

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

إنشاء ملف جافا سكريبت للتنقل بين الشرائح لعرض منزلق الصور

بداية سننشئ ملف جافا سكريبت نسميه slideshow.js ونضعه ضمن المجلد js في مجلد القالب ونكتب ضمنه كود جافا سكريبت اللازم لعرض مجموعة من الصور أو الشرائح بشكل منزلق.

سننشئ الملف ونربطه مع قالبنا كما ربطنا الملف السابق من خلال استدعاء الدالة wp_enqueue_script()‎ في ملف وظائف القالب functions.php

/**
 * Enqueue scripts and styles.
 */
function modawanaty_scripts()
{
//..
    wp_enqueue_script( 'hamburger-menu', get_template_directory_uri() . '/js/slideshow.js', array(), '1.0', true );

//..
}
add_action('wp_enqueue_scripts', 'modawanaty_scripts');

ملاحظة: عند استدعاء أكثر من ملف جافا سكريبت ضمن الدالة wp_enqueue_script()‎ يجب الانتباه لترتيب استدعاء الملفات ومراعاة أولوية تحميل وتنفيذ الملفات في صفحات قالب ووردبريس الخاصة بك، على سبيل المثال إذا كنت تعتمد على ملفات جافا سكريبت معينة في ملفات أخرى يجب أن يتم تحميل الملفات التي تعتمد عليها أولاً.

بعد ربط الملف مع قالب ووردبريس الخاص بنا سنحرر ملف جافا سكريبت الذي أنشأناه ونكتب بداخله كود جافا سكريبت مهمته الحصول على العنصر الذي يملك الصنف slides-qwe وهو عنصر الحاوية التي تعرض منزلق الصور ونخزنه في متغير slides، كما نحصل على العنصر dot وهو عبارة عن عنصر يعرض ثلاث أيقونات دائرية تعبر عن الشريحة الحالية في المنزلق ونخزنه ضمن متغير dots ثم نعرف مجموعة من الدوال للتبديل بين الشرائح المختلفة.

let slideIndex = 1;
showSlides(slideIndex);

function currentSlide(n) {
  showSlides((slideIndex = n));
}

function showSlides(n) {
  let i;
  let slides = document.getElementsByClassName("Slides-qwe");
  let dots = document.getElementsByClassName("dot");
  if (n > slides.length) {
    slideIndex = 1;
  }
  if (n < 1) {
    slideIndex = slides.length;
  }
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
  for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex - 1].style.display = "block";
  dots[slideIndex - 1].className += " active";
}

عرفنا في هذه الدالة متغير slideIndex قيمته 1 يشير للشريحة الأولى، ثم استدعينا الدالة showSlides مع الوسيط n لتعرض هذه الشريحة وتتحكم بعرض النقاط المرتبطة مع الشرائح.

كما عرفنا الدالة currentSlide(n)‎ لتعيين الشريحة الحالية مباشرةً إلى القيمة n وعرضها من خلال الدالة showSlides()‎.

إنشاء ملف slideshow.php لعرض منزلق الصور

الخطوة التالية هي إنشاء ملف slideshow.php يجلب بيانات المقالات الثلاث الأكثر قراءة ثم يعرضها ويعرض نقطة موافقة لكل مقال ويربط حدث النقر على النقطة بالدالة currentSlide()‎ لعرض الشريحة المرتبطة بها كما يلي:

<!-- Slideshow container -->
<div class="slider-container">
  <!-- Full-width images with number and caption text -->
  <?php
  $county = 0;
  $popularpost_id = array();

$popularpost = new WP_Query( array( 'posts_per_page' => 3, 'meta_key' => 'wpb_post_views_count', 'orderby' => 'meta_value_num', 'order' => 'DESC'  ) );
if ( have_posts() ) :
while ( $popularpost->have_posts() ) : $popularpost->the_post();
      $popularpost_id[$county] = get_the_ID();
      $county++;
    endwhile;
  endif;
  ?>
<p class="mostpop"> الأكثر قراءة </p>
  <div class="Slides-qwe fade">
    <?php $url = wp_get_attachment_url( get_post_thumbnail_id( $popularpost_id[0] ), 'thumbnail' ); ?>
    <img src="<?php echo $url; ?>" />
    <div class="text"> <?php echo get_the_title( $popularpost_id[0] );  ?> </div>
  </div>

  <div class="Slides-qwe fade">
    <div class="numbertext">2 / 3</div>
    <?php $url = wp_get_attachment_url( get_post_thumbnail_id( $popularpost_id[1] ), 'thumbnail' ); ?>
    <img src="<?php echo $url; ?>">
    <div class="text"> <?php echo get_the_title( $popularpost_id[1] ); ?> </div>
  </div>

  <div class="Slides-qwe fade">
    <div class="numbertext">3 / 3</div>
    <?php $url = wp_get_attachment_url( get_post_thumbnail_id( $popularpost_id[2] ), 'thumbnail' ); ?>
    <img src="<?php echo $url; ?>">
    <div class="text"> <?php echo get_the_title( $popularpost_id[2] ); ?> </div>
  </div>
</div>

<br>
<!-- The dots/circles -->
<div class="rel-qwe" >
  <span class="dot" onclick="currentSlide(1)"></span>
  <span class="dot" onclick="currentSlide(2)"></span>
  <span class="dot" onclick="currentSlide(3)"></span>
</div>

نشئ الكود السابق كائن من الصنف WP_Query يستعلم من قاعدة البيانات ويحسب عدد مرات عرض كل مقال ويعيد أكثر 3 مقالات حصلت على زيارات في الموقع من الأكثر للأقل أي وفق الترتيب التنازلي ويخزن هذه المقالات في المتغير ‎$popularpost_id ثم يعرضها ضمن حاوية رئيسية <div> له الصنف slider-container

إذا كان هناك مقالات متاحة سيعرض الكود عنوان وصورة كل مقال من هذه المقالات في حاوية <div> فرعية لها الصنف Slides-qwe، ستظهر العناصر واحدة تلو الأخرى بشكل متتالي كما ستعرض نقاط أو دوائر تمثل الشرائح أو المقالات المختلفة في المنزلق.

وكما شرحنا من قبل سنربط حدث النقر على كل نقطة منها بالدالة currentSlide()‎ التي عرفناها في ملف جافا سكريبت slideshow.js لعرض الشريحة الموافقة.

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

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

<section class="slider">
                <?php
                $args = array(
                    'post_type' => 'post', // Adjust post type if needed
                    'posts_per_page' => 3, // Number of posts to retrieve
                    'meta_key' => 'wpb_post_views_count', // Replace 'post_reads' with the meta key storing the read count
                    'orderby' => 'meta_value_num', // Sort by numeric value
                    'order' => 'DESC' // Order in descending order (from most read to least read)
                );
                $popularpost = new WP_Query($args);
                if ($popularpost->have_posts()) {
                    get_template_part('slideshow');
                } else {
                ?>
                    <img class="slidimg" src="<?php bloginfo('template_url'); ?>/screenshot.png" alt="slider">
                <?php }

                // Restore original post data
                wp_reset_postdata();
                ?>

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

إضافة أكواد CSS لتنسيق عناصر المنزلق

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

/* تنسيق إضافي للمنزلق */
.slidedots,
.Slides-qwe {
  text-align: center;
}

div.caption-text:hover {
  color: #F9B01B;
  font-weight: bold;
}
/* Caption text */
.slide-title {
  text-align: center;
  padding-top: 2rem;
}

mark {
  background: linear-gradient(90deg, rgba(249, 176, 27, 1) 0%, rgba(246, 200, 108, 1) 51%, rgba(249, 176, 27, 1) 100%);
  color: #000;

}

/* Caption text */
div .caption-text {
  font-weight: bold;
  text-align: center;
  padding-top: 2rem;
}

.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 2px 4px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}
.active,
.dot:hover {
  background-color: rgb(255, 145, 0);
}

/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {
    opacity: .4
  }

  to {
    opacity: 1
  }
}

الآن إذا استعرضنا الصفحة سيظهر المنزلق بالشكل التالي

وبهذا نكون انتهينا من إضافة ميزة الشريط المنزلق للمقالات ويمكنك بنفس الطريقة يمكن أن تطبق ما شرحناه لبرمجة القالب المناسب له وإضافة أي ميزات ترغب بها من خلال شيفرات جافا سكريبت المناسبة.

الخلاصة

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

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

كتب المسودة الأولية للمقال هشام حسين.

اقرأ أيضًا

• المقال السابق: إضافة تنسيقات CSS لقالب ووردبريس
• كل ما تحتاجه لتعلم الووردبريس
• تعلم برمجة وتطوير مواقع ووردبريس
• أساسيات لغة جافا سكريبت
• كيفية البدء في تطوير قوالب ووردبريس

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

هذا المقال هو المقال الرابع من سلسلة المقالات التالية:

• مدخل إلى برمجة قوالب ووردبريس
• أساسيات تطوير قالب ووردبريس
• إنشاء الملفات الأساسية لبرمجة قالب ووردبريس
• إضافة تنسيقات CSS لقالب ووردبريس
• إضافة المميزات لقالب ووردبريس باستخدام جافا سكريبت

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

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

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

تكتب تنسيقات CSS للقالب عادة في ملف تنسيق رئيسي باسم style.css وكنا قد أنشأنا هذا الملف داخل مجلد القالب في المقال السابق من السلسلة وكتبنا فيه بعض المعلومات الوصفية حول قالبنا مثل اسم القالب ووصفه وإصداره واسم المؤلف والموقع الخاص بالمؤلف والتي تظهر عند عرض تفاصيل القالب في لوحة تحكم موقع ووردبريس.

كما يمكنك كتابة التنسيقات ضمن عدة ملفات أخرى واستدعاء هذه الملفات الإضافية في قالبك عند الضرورة كما يمكنك بالطبع استيراد أي تنسيقات أو سكربتات خارجية أخرى عند الطلب، على سبيل المثال يمكنك أن تضيف ملفات بوتستراب لقالبك وهو إطار عمل CSS يساعدك على تطوير مواقع ويب متجاوبة مع الجوال والاستفادة من الأصناف التي يوفرها لتنسيق قالبك وفق التصميم المطلوب من خلال كتابة الكود التالي في ملف وظائف القالب functions.php

دورة تطوير تطبيقات الويب باستخدام لغة PHP

احترف تطوير النظم الخلفية والووردبريس وتطبيقات الويب من الألف إلى الياء دون الحاجة لخبرة برمجية مسبقة

اشترك الآن

هناك عدة طرق لاستيراد التنسيقات للقالب لكن الطريقة الأفضل حسب توصيات ووردبريس هي استخدام الدالة wp_enqueue_style لربط ملفات التنسيقات في القالب لأنها فهي تنظم طريقة تحميل الملفات وتضمن تنفيذها بشكل صحيح في صفحات الموقع المختلفة.

نمرر لهذه الدالة عدة وسطاء أهمها ‎$handle وهو معرف فريد يساعدك على تمييز ملف التنسيقات و ‎$src مسار الملف و ‎$dependencies الذي يمثل الاعتماديات أو الملفات التي نحتاج لتحميلها قبل تحميل هذا الملف.

على سبيل المثال لتحميل ملف تنسيقات بوتستراب في قالبنا واستخدامه لتنسيق عناصر الموقع نكتب الكود التالي:

function enqueue_bootstrap_styles() {
    wp_enqueue_style( 'bootstrap', 'https://stackpath.bootstrapcdn.com/bootstrap/5.0.2/css/bootstrap.min.css', array(), '5.0.2', 'all' );
}
add_action( 'wp_enqueue_scripts', 'enqueue_bootstrap_styles' );
);

كما تلاحظ يتم ربط استدعاء الدالة wp_enqueue_style مع الخطاف wp_enqueue_scripts الذي يقع عند تحميل ملفات التنسيقات والسكربتات في صفحات الموقع وبهذا نتمكن من استخدام تنسيقات بوتستراب في القالب مباشرة.

لكننا في هذه السلسلة سنعتمد فقط على تعليمات CSS صرفة لتنسيق قالبنا الحالي بتنسيقات بسيطة لذا سنكتفي فقط بملف التنسيقات الأساسي style.css الذي ربطناه مع القالب في المقال السابق من السلسلة وسنكتب كافة التنسيقات المطلوبة للقالب ضمنه.

خطوات تنسيق قالب ووردبريس

بعد أن انتهينا من إنشاء كافة الملفات اللازمة للقالب وحددنا و وكتبنا الأكواد والدوال اللازمة لعرض المحتوى المطلوب، تأتي مرحلة تنسيق هذا المحتوى بواسطة أكواد CSS لنحوله من هذا الشكل:

إلى هذا الشكل:

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

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

تنسيقات عامة للقالب

بداية سنضع مجموعة تنسيقات عامة لكافة العناصر في المستند من خلال المحدد * ونمرر قيم عامة نريد استخدامها بشكل افتراضي في كامل الموقع مثل نوع الخط ولون الخط والمسافة بين الأسطر line-height وقيم الحواشي الداخلية padding والهوامش الخارجية margin للعناصر

/**  تنسيق عام */
* {
  padding: 0;
  margin: 0;
  font-family: 'Cairo', sans-serif;
  color: #666571;
  line-height: 2;
  box-sizing: border-box
}

ففي هذا الكود أزلنا الهوامش الداخلية بتعليمة padding: 0 لجميع العناصر كما أزلنا الهوامش الخارجية بتعليمة margin: 0 كما عينا نوع الخط لجميع العناصر إلى الخط Cairo والخط البديل sans-serif وحددنا لون النص رمادي داكن ‎#‎‎424149.

بعدها سننسق وسم العنصر الجذر html ووسم الحاوية العامة div التي عرفناها في ملف header.php لتضم المحتوى الأساسي للصفحات والتي كنا قد أسندنا لها الصنف wrapper-container وننسق الروابط العامة في الموقع كما يلي:

html {
  position: relative;
  min-height: 100%;
}

.wrapper-container {
  max-width: 100%;
}

a {
  text-decoration: none;
}

حددنا في الكود أعلاه قيمة الخاصية position للعنصر الجذر html لتكون relative أي نسبي كي نتمكن تحديد موضع العناصر الفرعية لهذا العنصر نسبة لوضعية العنصر الجذر كما حددنا قيمة min-height لتكون 100% كي نعين ارتفاع العنصر html ليكون على الأقل 100٪ من ارتفاع الشاشة لنضمن أن العناصر التي يحتويها لن تظهر خارج الشاشة.

وبالنسبة للعنصر div الذي له الصنف wrapper-container فقد عينا له الخاصية max-width بالقيمة 100% لتحديد الحد الأقصى لعرض العنصر div بنسبة 100% من العنصر الأم الذي يحتوي عليه وهي تساعد في جعل التصميم مرن ومتجاوب Responsive فالعنصر لن يتجاوز في هذه الحالة عرض العنصر الذي يحتوي عليه وبالتالي عند تصغير حجم الشاشة سيتقلص عرض العنصر div ويتكيف مع الحجم الجديد ويمتد ضمن المساحة المتاحة دون أن يتجاوزها.

أخيرًا أزلنا أي زخرفة نصية مطبقة على نصوص الروابط a في صفحات الموقع مثل خاصية التسطير من خلال إعطاء الخاصية text-decoration القيمة none لتوحيد التنسيق بينها وتحسين تجربة المستخدم وبعدها يمكننا أن نطبق تنسيقات مخصصة أخرى على كل رابط في الصفحة حسب الحاجة.

تنسيق القائمة الثانوية والأساسية في ترويسة القالب

تتضمن ترويسة قالبنا كما تعرف ثلاثة أقسام وهي القائمة الثانوية ثم المنزلق ثم القائمة الرئيسية وسنبدأ بتنسيق القوائم والعناصر التي بداخلها واحدًا تلو الآخر.

نبدأ بالقسم section الذي يضم القائمة الرئيسية العلوية ويملك الصنف rtl-Primary-nav والقسم الذي يضم القائمة الثانوية السفلية ويملك الصنف rtl-Secondary-nav ونحدد بعض الخصائص لكل قائمة بما يناسب التصميم.

يلزمنا تخصيص لون الخلفية ليكون من درجات اللون الأصفر، وإلغاء التعداد النطقي أو النقاط الافتراضية التي تظهر بجانب عناصر القائمة من خلال الخاصية list-style:none وتخصيص تنسيقات روابط القوائم وقيم الهوامش والمحاذاة المناسبة ومن الضروري كذلك تحديد طريقة تموضع عناصر القوائم من خلال الخاصية display: inline-flex لجعلها تظهر بجانب بعضها على سطر واحد وللقيام بكل ما سبق نضيف كود التنسيق التالي:

.rtl-Primary-nav,
.rtl-Secondary-nav {
width: 100%;
}

.rtl-Primary-nav {
background: #f6c86c;
padding-top: 20px;
padding-left: 5px;
}

.rtl-Primary-nav img {
max-width: 100px;
max-height: 100px;
width: auto;
height: auto;
padding-top: 20px;
}

.logo-link {
margin: 2% 4%;
}

.rtl-Secondary-nav {
background: #F9B01B;
}

nav ul {
display: inline-flex;
list-style: none;
}

nav ul li {
padding: 0 5%;
}

nav ul li a {
text-decoration: none;
color: black;
font-weight: bold;
font-size: 14pt;
white-space: nowrap;
}

nav ul li a:hover {
  color: #fff;
}

تنسيق المنزلق Slider

بعد الانتهاء من القوائم سننسق القسم المخصص لعرض شريط المقالات المتحرك أو المنزلق وهو عبارة عن عنصر section له الصنف slider وبداخله حاوية div لها الصنف slider-container تتضمن حاليًا صورة واحدة ثابتة فقط واخترنا هنا نفس الصورة screenshot.png التي أضفناها في مجلد القالب.

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

/** تنسيق المنزلق */

.slider {
  background-color: #f1eef6;
  justify-content: center;
  align-items: center;
}

.slider img {
  display: block;
  margin: auto;
  max-width: 60%;
}

كما تلاحظ في هذا الكود فقد غيرنا لون خلفية القسم section الذي يعرض المنزلق للون الرمادي الفاتح ونسقنا محاذاة العناصر ضمنه لتكون في المركز أفقيًا وعموديًا كما نسقنا الصورة المعروضة ضمن القسم لتظهر بشكل كتلة مستقلة وجعلنا هوامشها margin: auto لتكون متساوية من جميع الجهات وجعلنا العرض الأقصى للصورة هو 80 بالمئة من العرض الكلي للقسم الذي يحتويها لتظهر بحجم مناسب.

تنسيق جسم الصفحة الخاصة بقالب ووردبريس

إذا استعرضنا الصفحة الرئيسية للموقع سنلاحظ أن المقالات تعرض فيها تحت بعضها البعض وأن الصور تظهر بحجم كبير والمحتوى ملاصق للهامش الأيمن للصفحة كما في الصورة التالية:

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

نعرض جسم الصفحة كما وضحنا في المقال السابق في حاوية div لها الصنف main ورغم أن العناصر التي تضمها الحاوية قد تختلف من صفحة لأخرى إلا أنها تنسق بنفس الطريقة التي تنسق بها باقي العناصر، في قالبنا أضفنا التنسيقات التالية لعناصر جسم الصفحة:

/** تنسيق محتوى الصفحة */
.main {
  width: 100%;
  display: inline-block;
  padding: 30px 0px;
}

.main a:hover {
  text-decoration: underline;
  color: #F9B01B;
}

.post-qwe {
  display: inline-block;
  width: 30%;
  margin: 0 1.5%;
}

.page-title-qwe {
  font-size: 12pt;
  font-weight: bold;
}

.post-qwe img , .post_thumbnail img{
  max-width: 90%;
  height: auto;
}

.post-qwe p {
  width: 90%;
}

.post-qwe img:hover,
.slider img:hover {
  border: solid 2px #F9B01B;
}

حددنا عرض الحاوية 100% لتكون ممتدة على كامل عرض الصفحة وطريقة عرض العناصر داخلها inline-block لتظهر على نفس السطر واحد لكن كل مقال ضمن بلوك مستقل ثم حددنا الهامش الداخلي لها padding ليكون 30 بكسل في الأعلى والأسفل وصفر على اليمين واليسار اليمنى واليسرى، وأضفنا تأثيرًا على الروابط ليظهر لونها بالأصفر عند مرور الفأرة فوقها

كما حددنا طريقة عرض الحاوية التي لها الصنف post-qwe والخاصة بعرض كل مقال لتكون كذلك inline-block لكن كل حاوية 30% من العرض الكلي للحاوية main وبهذا تظهر كل 3 مقالات على سطر مستقل. أضفنا كذلك تنسيقات للصور المصغرة والعناوين والمقتطفات الخاصة بالمقال لتكون النتيجة بعد إضافات التنسيقات كما يلي

تنسيق شريط التنقل

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

في قالبنا عرضنا روابط شريط التنقل ضمن div لها الصنف pagination بعد عرض أحدث ست مقالات منشورة في المدونة وسوف ننسقها ونغير طريقة عرضها بما يناسب تصميم قالبنا كما يلي:

/* تنسيق قسم التننقل  */

.pagination {
  text-align: center;
  line-height: 5;
}

.pagination a {
  color: #000;
  margin: 10px 20px;
}

nav.pagination a:hover,
nav.pagination a:hover {
  background-color: #f6c86c;
  color: white;
}

من أبرز التنسيقات التي قمنا بها لشريط التنقل هي محاذاة روابط التنقل في الوسط وتحديد ارتفاع السطر لروابط التنقل ليكون 5 أضعاف حجم الخط فإذا كان حجم الخط 10 نقطة سيكون ارتفاع السطر 50 نقطة لتحقيق تباعد أكبر بين الأسطر في قسم التنقل وتسهيل رؤية الروابط فيه، كما حددنا لون نص الرابط ليكون أسود وغيرنا لون الخلفية للأصفر ولون النص للأبيض عند مرور مؤشر الفأرة فوق الرابط.

تنسيق تذييل قالب ووردبريس

أخيرًا حان دور تنسيق تذييل القالب بشكل جميل وجذاب متوافق مع تصميم الموقع العام ومع بقية أجزاء الموقع. يتضمن التذييل الخاص بقالب ووردبريس الخاص بنا قسمين، القسم الأول section يملك الصنف footer-qwe ويعرض بداخلة مجموعة من الودجات كل منها عبارة عن div لها الصنف widget والقسم الثاني هو section يعرض فقرة p لنص حقوق النشر ورابط للموقع وشكل التذييل قبل التنسيق كما يلي:

نضيف له التنسيقات التالية:

.footer-qwe {
  background-color: #f6c86c;
  width: 100%;
  display: flex;
  justify-content: space-around;
}


.footer-qwe li {
  list-style: none;
  color: black;
}

.footer-qwe li a {
  color: black;
  white-space: nowrap;
}

section.footer-qwe .widget {
  margin: 2% 4%;
}

footer a:hover {
  color: white;
}

section.copyright {
  display: flex;
  background-color: #F9B01B;
  width: 100%;
  align-items: center;
  justify-content: center;
}

إليك شرحًا لأهم التنسيقات الواردة في الكود أعلاه؛ ففي البداية عينا لون خلفية القسم الأول من التذييل لتكون أصفر فاتح ‎#f6c86c وعرضه 100‎%‎ من العنصر الحاوي له وحددنا نمط عرض عناصره ليكون من النمط المرن Flexbox مع توزيع المسافات بين العناصر بالتساوي من خلال الخاصية justify-content: space-around.

كما حددنا بعض خواص عناصر القوائم والروابط في التذييل لأن بعض عناصر الودجات تظهر بشكل قوائم كل عنصر فيها رابط لصفحة أخرى وأهمها منع نص كل رابط من الانتقال لسطر جديد كي نحافظ على وضع كلمات الروابط على سطر واحد باستخدام الخاصية white-space: nowrap.

وعينا كذلك خصائص القسم الثاني في التذييل وهو قسم حقوق النشر ليكون بخلفية أصفر داكن ونمط العرض المرن Flexbox ووسطنا عناصره أفقيًا وعموديًا لتظهر العبارة في وسط القسم تمامًا كما تشاهد في الصورة التالية.

الخلاصة

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

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

كتب المسودة الأولية للمقال هشام حسين.

اقرأ أيضًا

• المقال السابق إنشاء الملفات الأساسية لبرمجة قالب ووردبريس
• المقال التالي إضافة المميزات لقالب ووردبريس باستخدام جافا سكريبت
• تعلم ووردبريس
• صف وتسجيل ملفات Javascript و CSS في قوالب ووردبريس
• كيف تحوِّل قالب HTML ساكِن إلى قالب ووردبريس متجاوب: تخصيص الموقع
• كيفية بناء موقع باستخدام CSS

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

هذا المقال هو المقال  الثالث من سلسلة المقالات التالية:

• مدخل إلى برمجة قوالب ووردبريس
• أساسيات تطوير قالب ووردبريس
• إنشاء الملفات الأساسية لبرمجة قالب ووردبريس
• إضافة تنسيقات CSS لقالب ووردبريس
• إضافة المميزات لقالب ووردبريس باستخدام جافا سكريبت

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

إنشاء مجلد خاص بقالب ووردبريس

سنسمي قالبنا الحالي بالاسم modawanty أي مدونتي لذا سننشئ مجلدًا بهذا الاسم على خادم محلي داخلي localhost ولن نحتاج للاتصال بالإنترنت، كما سنعتمد على محرر الأكواد فيجوال ستوديو كود VS Code فهو يحتوي على إمكانيات متعددة لتسهيل العمل فإذا لم تكن قد حولت حاسوبك إلى خادم محلي بعد ولم تنشئ موقع ووردبريس تجريبي بعد لا تقلق يمكنك القيام بذلك من خلال خطوات سهلة وبسيطة مشروحة بالتفصيل في مقال كيفية تثبيت ووردبريس وفي مقال دليلك المصور لتثبيت ووردبريس والبدء بإنشاء متجر ووكومرس.

بعدها سيكون عليك إنشاء مجلد خاص بقالب ووردبريس وتسميه modawanty داخل مجلد القوالب themes الموجود كما شرحنا في الدرس السابق ضمن المجلد wp-content داخل الدليل الجذر لموقع ووردبريس الخاص بك، وبعدها سننشئ في هذا المجلد مجموعة ملفات القالب التالية المبينة في الصورة التالية.

تذكر أن لكل ملف من هذه الملفات استخدامًا مخصصًا فبعضها ملفات templates تستدعى ضمنيًا من قبل نظام ووردبريس لعرض صفحات الموقع المختلفة مثل index.php و page.php و archive.php وبعضها ملفات قالب جزئية تستخدم لتجميع الأكواد المتكررة في أكثر من مكان في الموقع مثل header.php و footer.php وإليك قائمة مختصرة بأسماء ووصف كل ملف من بينها:

1. index.php: ملف عرض الصفحة الرئيسية للموقع وأي صفحة لا تحوي ملف مخصص لعرضها
2. style.css: ملف تنسيقات القالب الأساسي ويحتوي بعض البيانات التعريفية حول القالب
3. header.php: ملف ترويسة القالب ويعرض عادة قوائم التنقل في الموقع والشعار وعناوين الصفحات وما إلى ذلك وقد يحتوي معلومات عن ملفات خارجية يستخدمها القالب مثل ملفات تنسيق CSS إضافية.
4. footer.php: ملف تذييل القالب يعرض معلومات مثل قائمة التذييل وبعض الودجات وعبارة حقوق النشر وقد يستدعي ملفات JS مستخدمة في الموقع.
5. archive.php: ملف عرض صفحات أرشيف مقالات الموقع.
6. page.php: ملف عرض الصفحات الفردية في الموقع.
7. single.php: ملف عرض المقالات الفردية في الموقع.
8. slideshow.php: ملف لعرض أحدث منشورات الموقع بشكل شريط منزلق
9. screenshot.png: ملف الصورة المصغرة الخاصة بالقالب عند عرضه في لوحة التحكم
10. functions.php: ملف لإضافة وظائف وميزات إضافة للقالب
11. مجلد images: لتخزين صور خاصة بالقالب
12. مجلد js: لتخزين أكواد جافا سكريبت الخاصة بالقالب

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

كما تلاحظ ملفاتنا لا زالت فارغة وخالية من أي كود وفي الفقرات التالية سنتعرف على مزيد من التفاصيل سنكتب كافة الشيفرات الضرورية لعمله بالشكل الصحيح في قالبنا.

دورة تطوير تطبيقات الويب باستخدام لغة PHP

احترف تطوير النظم الخلفية والووردبريس وتطبيقات الويب من الألف إلى الياء دون الحاجة لخبرة برمجية مسبقة

اشترك الآن

ملف تنسيقات قالب ووردبريس style.css

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

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

سنفتح ملف style.css في محرر الأكواد فيجوال ستوديو كود VS Code ونضيف هذه البيانات في بدايته بشكل تعليق كالتالي:

/*
Theme Name: modawanty
Theme URI: https://www.example.com
Author: Hsoub Academy
Author URI: https://academy.hsoub.com/
Version: 1.0
Description: هذا قالب لتعليم المبتدئين كيفية برمجة قالب ووردبريس من الصفر
License: GPLv3 or later
License URI:  https://www.gnu.org/licenses/gpl-3.0.html
Tags: rtl-language-support, editor-style
*/

وكما هو واضح فهذه البيانات توضح اسم القالب Theme Name ورابط القالب Theme URI، واسم مطوره Author ورابط المطور Author URI، وإصدار القالب Version ووصف مختصر عن هذا القالب Description ووسوم Tags لأهم مميزاته وخواصه ورخصة استخدامه سواء خاصة أو متاحة للجميع أو أي نوع من التراخيص مثل رخصة GNU وهي رخصة للمشاع الإبداعي وتمكن أي مستخدم للقالب من إعادة استخدامه أو إضافة أكواد له، وفي الدرس التالي من هذه السلسلة سنضيف الكثير من قواعد التنسيق لهذا الملف.

برمجة ملف الصفحة الرئيسية index.php

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

تكتب الأكواد الخاصة بملف index.php بالطريقة المعتادة لكتابة أي ملف PHP حيث يمكن إضافة أكواد PHP إلى كود HTML ضمن وسمي <?php?> أو إضافة أكواد HTML إلى ملف PHP باستخدام echo أو print.

سنبدأ كتابة الأكواد الأساسية في محرر فيجوال ستوديو كود من خلال كتابة html:5 ثم ضغط مفتاح tab على لوحة المفاتيح وهذا الاختصار ينشئ لنا الأكواد الرئيسية لملف HTML بشكل تلقائي وستكون الأكواد الناتجة هي كالتالي:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
</body>
</html>

لاحظ أن الكود أعلاه يتضمن مجموعة من الوسوم الأساسية للصفحة ويحدد لغة الصفحة لتكون الانجليزية بشكل افتراضي كما يحدد عدة وسوم ميتا التي تحدد نوع ترميز الأحرف والنصوص UTF-8، وتجعل قالب ووردبريس متجاوب مع الجوال من خلال تحديد نسبة التكبير الافتراضية عند تصفح الموقع من خلاله.

نحتاج لإجراء مجموعة من التعديلات على الكود السابق، بداية سنعدل العبارة lang="en"‎ السطر الثاني في الكود أعلاه ونستبدلها بالكود التالي:

<html <?php language_attributes(); ?> class="no-js">

تعطي الدالة language_attributes()‎ السماحية لقالب ووردبريس بالتحكم في طريقة العرض حسب لغة الموقع الحالية أما الصنف class="no-js"‎ فهو يفيد في المطور في الكشف عن ما إذا كان محرك جافا سكريبت يعمل في المتصفح أو لا وفي حال تعطيله يمكنه استخدام أكواد HTML و CSS خالصة دون استخدام برمجة نصية من جانب العميل لتحديد مظهر القالب.

الخطوة التالية هي تبديل قيمة charset="UTF-8"‎ بالدالة ‎bloginfo('charset')‎ التي تستعيد ترميز النصوص المستخدم في الموقع بصورة تلقائيًا فالترميز قد يختلف حسب لغة الموقع لذا نكتب التالي:

<meta charset="<?php bloginfo( 'charset' ); ?>" />

وسنستبدل Document بعنوان الصفحة الديناميكي من خلال الدالة wp_title()‎ في ووردبريس كما يلي:

<title><?php wp_title(); ?></title>

بعد ذلك نستدعي دالة مهمة وأساسية في ترويسة الموقع هي wp_head()‎‏‎‎ وهي دالة جاهزة في ووردبريس تستخدم لإحضار أي أكواد مساعدة إلى ترويسة القالب سواء أكواد من نظام وودبريس نفسه أو الإضافات plugins أو أكواد مخصصة مثل أكواد تتبع البيانات والتنسيقات وغيرها من الأكواد الضرورية التي تحتاج لتنفيذها في ترويسة موقعك.

تستدعى هذه الدالة عادة قبل وسم النهاية <‎/head> مباشرة بالشكل التالي:

<?php wp_head(); ?>

ننتقل الآن للقسم الخاص بالوسم <body>، وفيه سنضيف دالة مهمة هي body_class()‎ هذه الدالة جاهزة في ووردبريس مهمتها إضافة أصناف تنسيق خاصة للوسم <body> بشكل ديناميكي من قبل نظام ووردبريس حسب سياق كل صفحة تستعرضها، على سبيل المثال عندما تستعرض صفحة المدونة في موقعك سيأخذ الوسم<body> الصنف blog وعندما تستعرض صفحة ثابتة كصفحة حولنا سيأخذ الصنف page وهذا يساعدك كمطور قوالب على تنسيق موقعك بسهولة واستهداف الصنف المناسب لكتابة تنسيقات CSS أو معالجة محتواها باستخدام جافا سكريبت.

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

تضاف هذه الدالة ضمن وسم <body> كالتالي:

<body <?php body_class(); ?>>

أما الدالة التالية التي سنضيفها فهي wp_body_open()‎ وهي دالة حديثة نوعًا ما فقد تم إدخالها على ووردبريس منذ الإصدار 5.2، وهي مفيدة لإدخال التعليمات البرمجية مباشرة في بداية الصفحة بعد وسم <body> مثل أكواد جوجل أدسنس للإعلانات دون الحاجة إلى تعديل قالب ووردبريس، أضف هذه الدالة لموقعك بعد الدالة السابقة مباشرة كما يلي:

<?php wp_body_open(); ?>

الآن نحتاج لكتابة بعض وسوم HTML داخل الوسم <body> لننظم الأقسام الرئيسية لصفحة الموقع، وهي قسم الترويسة header وجسم الصفحة main وقسم التذييل footer، كل ذلك داخل حاوية div شاملة لجميع العناصر سنعطيها الصنف wrapper-container ليصبح الكود بالشكل التالي:

<!DOCTYPE html>
<html <?php language_attributes(); ?> class="no-js">
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?php wp_title(); ?></title>
</head>
<body <?php body_class(); ?>>
    <?php wp_body_open(); ?>
    <div class="wrapper-container">
        <header>
        </header>
        <div class="main">
        </div>
        <footer>
        </footer>
    </div>
</body>
</html>

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

إذا سنقسم هذا الملف إلى الملفات التالية:

• ملف ترويسة القالب header.php الذي يبدأ من <‎!DOCTYPE html> وينتهي عند الوسم <‎/header>
• ملف تذييل القالب footer.php الذي يبدأ من <footer> وينتهي عند <‎/html>
• ملف index.php الذي يضم المحتوى الأساسي الذي سنضعه بين الوسم <div class="main"‎> و <‎/div>

وللاستعاضة عن قسمي الترويسة والتذييل المنقولين من الملف الرئيسي سنستدعي في بدايته كود الترويسة من خلال الدالة ‎get_header()‎ وفي نهايته كود ملف التذييل من خلال الدالة get_footer()‎ كما يلي:

لنتابع الآن شرح الآن برمجة كل ملف من هذه الملفات بمزيد من التفصيل.

برمجة ملف ترويسة قالب ووردبريس

تمثل ترويسة القالب الجزء العلوي من موقع ووردبريس الخاص بك وهي تتضمن عادة عدة عناصر وتبدأ بمجموعة من الوسوم غير المرئية على الصفحة وأهمها وسم <head> الذي يحتوي على عنوان الصفحة ومعلومات وصفية meta وبعض روابط التنسيقات والشيفرات الأخرى المهمة المتعلقة بالصفحة:

<!DOCTYPE html>
<html <?php language_attributes(); ?> class="no-js">
<head>
    <meta charset="<?php bloginfo('charset'); ?>" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title><?php wp_title(); ?></title>
    <?php wp_head(); ?>
</head>

على سبيل المثال سنحتاج في قالب ووردبريس الخاص بنا لتضمين مجموعة أيقونات خاصة بالمكتبة Font Awesome لعرض أيقونات التواصل الاجتماعي والأيقونات الشائعة الأخرى لذا سأستدعيها ضمن هذا الوسم كما يلي:

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />

بعدها يبدأ القسم المرئي للترويسة بالوسم <body> الذي سنكتب بداخله الوسم <header> لعرض ترويسة موقعنا والتي ستتضمن عدة عناصر وهي شعار الموقع وقائمة تنقل رئيسية وشريط الصور المنزلقة وقائمة تنقل ثانوية.

لذا سنوزع عناصر الترويسة ضمن ثلاث أقسام <section> القسم الأول يعرض الشعار والقائمة الثانوية العلوية كما يلي:

            <section class="rtl-Primary-nav">
                <?php
                if (has_custom_logo()) : {
                        $custom_logo_id = get_theme_mod('custom_logo');
                        $image = wp_get_attachment_image_src($custom_logo_id, 'full');
                    }  ?>
                    <nav id="myTopnav" class="topnav">
                        <div class="logo">
                            <a href="<?php echo esc_url(home_url('/')); ?>" class="logo-link">
                                <img src="<?php echo $image[0]; ?>"> </a>
                        </div>
                        <?php wp_nav_menu(array('theme_location' => 'Primary')); ?> <a href="javascript:void(0);" class="icon" onclick="myFunction()">
                            <i class="fa fa-bars"></i>
                        </a>
                    </nav>
                <?php else : ?>
                    <nav id="myTopnav" class="topnav">
                        <h2> <a href="<?php echo esc_url(home_url('/')); ?>" rel="home" class="logo-link"><?php bloginfo('name'); ?></a> </h2>
                        <?php wp_nav_menu(array('theme_location' => 'Primary')); ?> <a href="javascript:void(0);" class="icon" onclick="myFunction()">
                            <i class="fa fa-bars"></i>
                        </a>
                    </nav>
                <?php endif; ?>
            </section>

والقسم الثاني يعرض الصور المنزلقة Slider لأشهر مقالات الموقع وحاليًا سنكتفي بعرض صورة ثابتة هي الصورة المصغرة للقالب مؤقتًا ضمن هذا القسم ريثما يتم تكويده في الدرس الخامس من هذه السلسلة بواسطة جافا سكريبت:

   <section class="slider">
                <a id="sliderlink" href="https://academy.hsoub.com/" >
                    <img src="<?php bloginfo('template_url'); ?>/screenshot.png" alt="slider">
                </a>
            </section>

أما القسم الثالث فسوف يحتوي على القائمة الثانوية للموقع وكما تلاحظ نستدعي هنا الدالة الجاهزة wp_nav_menu()‎‏ مرة ثانية لكن نمرر لها هذه المرة وسيط القائمة الرئيسية Primary.

 <section class="rtl-Secondary-nav">
                <nav id="mydnnav" class="dnnav"><?php wp_nav_menu(array('theme_location' => 'Secondary')); ?>
                </nav>
            </section>

سيكون الكود الكامل لملف الترويسة كما يلي:

<!DOCTYPE html>
<html <?php language_attributes(); ?> class="no-js">
<head>
    <meta charset="<?php bloginfo('charset'); ?>" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <title><?php wp_title(); ?></title>
    <?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
    <?php wp_body_open(); ?>
    <div class="wrapper-container">
        <header>
            <section class="rtl-Secondary-nav">
                <?php
                if (has_custom_logo()) : {
                        $custom_logo_id = get_theme_mod('custom_logo');
                        $image = wp_get_attachment_image_src($custom_logo_id, 'full');
                    }  ?>
                    <nav id="myTopnav" class="topnav">
                        <div class="logo">
                            <a href="<?php echo esc_url(home_url('/')); ?>" class="logo-link">
                                <img src="<?php echo $image[0]; ?>"> </a>
                        </div>
                        <?php wp_nav_menu(array('theme_location' => 'Secondary')); ?> <a href="javascript:void(0);" class="icon" onclick="myFunction()">
                            <i class="fa fa-bars"></i>
                        </a>
                    </nav>
                <?php else : ?>
                    <nav id="myTopnav" class="topnav">
                        <h2> <a href="<?php echo esc_url(home_url('/')); ?>" rel="home" class="logo-link"><?php bloginfo('name'); ?></a> </h2>
                        <?php wp_nav_menu(array('theme_location' => 'Secondary')); ?> <a href="javascript:void(0);" class="icon" onclick="myFunction()">
                            <i class="fa fa-bars"></i>
                        </a>
                    </nav>
                <?php endif; ?>
            </section>
            <section class="slider">
                <a id="sliderlink" href="https://academy.hsoub.com/" >
                    <img src="<?php bloginfo('template_url'); ?>/screenshot.png" alt="slider">
                </a>
            </section>
            <section class="rtl-Primary-nav">
                <nav id="mydnnav" class="dnnav"><?php wp_nav_menu(array('theme_location' => 'Primary')); ?>
                </nav>
            </section>
        </header>

تسجيل قوائم التنقل في ملف وظائف قالب ووردبريس

لا يكفي استدعاء الدالة wp_nav_menu()‎‏ وحدها في ترويسة القالب لعرض القوائم المطلوبة، بل نحتاج إضافة لذلك إلى كتابة كود مخصص في ملف وظائف القالب functions.php لجعل قوائم التنقل تظهر بشكل صحيح في قالب ووردبريس الخاص بنا، حيث نحتاج لاستدعاء الدالة register_nav_menu()‎ التي يوفرها لنا ووردبريس لتسجيل مواضع القوائم في قالبنا وجعلها تظهر من خلال القائمة الفرعية قوائم ضمن التبويب المظهر.

للقيام بذلك سنفتح ملف وظائف قالب ووردبريس functions.php في محرر الأكواد ونضيف له الشيفرات التالية:

<?php
// menus
function register_nav_menu_primary_qwe(){
    $location='Primary';
    $description='Primary menu';
    register_nav_menu( $location, $description );
}
add_action('after_setup_theme','register_nav_menu_primary_qwe' );
function register_nav_menu_Secondary_qwe(){
    $location='Secondary';
    $description='Secondary menu';
    register_nav_menu( $location, $description );
}
add_action('after_setup_theme','register_nav_menu_Secondary_qwe' );
?>

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

لاحظ هنا أننا مررنا دالة تسجيل القوائم الخاصة كوسيط لدالة اسمها add_action()‎ وهذه هي الطريقة المثلى لاستدعاء الدوال وتنفيذها في ووردبريس وهي تعتمد على ربط الدالة بما يعرف بالخطاف hook.

الخطافات hooks هي نوع معين من الدوال تستخدم في برمجة القوالب والإضافات وهي توفر لك طريقة تمكنك من ربط واستدعاء الأكواد الخاصة بك ما بأي جزء في نظام ووردبريس الرئيسي ولمعرفة المزيد حول الخطافات وآلية عملها أنصح بقراءة مقال برمجة إضافات ووردبريس: الخطافات (Hooks).

إضافة ميزة عرض الشعار المخصص في قالب ووردبريس

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

تتم إضافة هذه الميزة عبر خطوتين الأولى هي باستدعاء الدالة add_theme_support()‎ وتمرير الوسيط custom-logo لها، ويمكن أن نخصص أبعاد الشعار بقيم محددة من خلال كتابة الكود التالي في ملف وظائف القالب functions.php:

add_theme_support( 'custom-logo' );
function themename_custom_logo_setup()
{ $defaults = array( 'height' => 200,
'width'=> 200,
'flex-height' => true,
'flex-width'  => true,
'header-text' => array( 'site-title', 'site-description' ), );
add_theme_support( 'custom-logo', $defaults ); } add_action( 'after_setup_theme', 'themename_custom_logo_setup'); 

بعدها نكتب كود عرض هذا الشعار في الموضع الذي نريد عرضه فيه وهو في حالة قالبنا قبل عرض القائمة الثانوية في القسم header كما يلي:

 <?php
     if ( has_custom_logo() ) {
      $custom_logo_id = get_theme_mod( 'custom_logo' );
      $image = wp_get_attachment_image_src( $custom_logo_id, 'full');
      }  ?>
<img src="<?php echo $image[0]; ?>">

إضافة ميزة الصور المصغرة إلى قالب ووردبريس

لا تتوفر ميزة الصورة المصغرة أو الصورة البارزة للمقال (Post Thumbnail) بشكل تلقائي في ووردبريس ولتنشيط هذه الميزة في قالب ووردبريس الخاص بنا نحتاج من جديد إلى كتابة كود مخصص في ملف وظائف قالب ووردبريس functions.php.

يتم ذلك من خلال استدعاء الدالة add_theme_support()‎ مع الوسيط post-thumbnails كما يمكن أثناء قيامنا بتنشيط الصور المميزة أن نحدد أن يتم تحجيم كل صورة نحملها إلى مكتبة الوسائط في ووردبريس وإنشاء إصدارين أو نسختين مختلفتين بحجم صغير وكبير ويمكن أن نحدد أبعادهما كما يلي:

add_theme_support('post-thumbnails');
add_image_size('small',300,300, true);
add_image_size('large',600,600, true);

هذا يساعدنا على عرض الصورة بالحجم الذي نرغبه والجدير بالملاحظة أن بإمكانك كتابة دالة إضافة الميزات add_theme_support()‎ ضمن ملف وظائف قالب ووردبريس functions.php مباشرة ليضيف الميزة التي تريدها للقالب مباشرة دون الحاجة لربطه بأي خطاف hook، كما يمكنك بشكل اختياري ربطها بدالة الخطاف after_setup_theme الذي يقع أو يحدث بعد تحميل القالب كما شرحنا سابقًا ففي الحالتين ستعمل الدالة بشكل صحيح:

// thumbnile connection
function post_thumbnails_qwe() {
    // add_theme_support( $feature, $arguments );
    add_theme_support( 'post-thumbnails', array( 'post','page') ); 
}
add_action( 'after_setup_theme', 'post_thumbnails_qwe' );

ربط ملف التنسيقات بترويسة القالب

نتجه إلى شيء أخير قبل إنهاء شرح ترويسة القالب وهو ربط ملف التنسيق الرئيسي للقالب style.css مع قالب ووردبريس، هناك عدة طرق للقيام ومنها تضمين رابط هذا الملف في ملف الترويسة لكن الطريقة الأفضل والموصى بها من قبل نظام ووردبريس هي عن طريق استخدام الدالة wp_enqueue_style()‎‏ التي تعمل على وضع ملف التنسيق في قائمة انتظار وريطها بخطاف اسمه wp_enqueue_scripts.

توضع تلك الأكواد في ملف وظائف قالب ووردبريس functions.php بالشكل التالي:

/**
 * Enqueue scripts and styles.
 */
function modawanaty_scripts() {
    wp_enqueue_style( 'modawanaty-style', get_stylesheet_uri(), array(), wp_get_theme()->get( 'Version' ) );
}
add_action( 'wp_enqueue_scripts', 'modawanaty_scripts' );

برمجة ملف الصفحة الرئيسية لقالب ووردبريس index.php

نقوم بعد ذلك باستدعاء دالة the_post()‎ ضمن الحلقة لتعيد لنا المقال الحالي، ثم نستدعي مجموعة من الدوال الجاهزة التي تعيد لنا معلومات كل مقال فهنا سنستدعي الدالة the_title()‎ لعرض عنوان المقال والدالة the_excerpt()‎ لإظهار مقتطفات المقال ودالة the_post_thumbnail()‎ لعرض الصورة المصغرة للمقال، وبما أن هذه الدوال تستدعى ضمن حلقة while loop فسوف تظهر لك كل معلومات المقالات المنشورة في الموقع تباعًا على الصفحة الرئيسية حسب تاريخ نشرها من الأحدث للأقدم. سوف يكون الملف النهائي index.php كالتالي:

<?php
get_header();
?>

<div class="main">
  <?php
  if (have_posts()) {
    while (have_posts()) {
      the_post();
  ?>
      <div class="post-qwe">
        <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
          <?php if (has_post_thumbnail()) {
            echo  '<a href="' . get_permalink($post->ID) . '" >';
            echo  get_the_post_thumbnail($post->ID,);
            echo '</a>';
          } ?>
          <p class="page-title-qwe"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></p>
          <?php the_excerpt(); ?>
        </div>
      </div>
    <?php
    }
    ?>
    <br>
<?php
  }
  get_footer();

بالطبع هناك العديد من المعلومات الأخرى التي يمكن عرضها حول كل مقال من خلال مجموعة دوال مخصصة تسمى وسوم القالب Template tags تجدها في التوثيق الرسمي للوردبريس template tags.

يعتمد عدد المقالات المنشورة الظاهرة على صفحتك على الخيار عدد الموضوعات المعروضة في الصفحة والذي يمكنك تحديده من خلال لوحة التحكم ثم الإعدادات ثم اختيار البند قراءة كما يلي:

ففي حال حددت هنا عدد المقالات ليكون 6 مثلًا، عندها ستظهر لك فقط أحدث ستة مقالات منشورة في الموقع، وكي تتمكن من عرض بقية المقالات عليك إضافة روابط تنقل لنتمكن من رؤية المقالات الأقدم والأحدث من خلال الدالتين previous_posts_link و next_posts_link.

لتحقيق ذلك كل ما عليك هو كتابة الكود التالي في الملف index.php قبل استدعاء الدالةget_footer()‎ كما يلي:

<nav class="pagination">
      <?php
      previous_posts_link('< الصفحة السابقة');
      next_posts_link('الصفحة التالية >'); ?>
    </nav>
</div>

لاحظ أننا أضفنا في الكود العديد من أصناف التنسيقات classes الخاصة بـ CSS حتى نستفيد منها لاحقًا في الجزء الثالث من هذه السلسلة وأضفنا كذلك دالتين the_ID()‎ و post_class()‎ وفائدة الأولى إعادة معرف كل منشور على حدة والثانية إضافة بعض أصناف التنسيق لوسم HTML الذي يعرض المقالات لتساعد على تنسيقها وعرض محتوياتها وهي تعمل بطريقة مشابهة للدالة body_class()‎ التي شرحناها سابقًا.

تعديل طريقة عرض مقتطف المقالات

أخيرًا سنعدل الرابط الذي تعرضه الدالة the_excerpt()‎ فهذه الدالة تعرض بشكل افتراضي نص رابط مكون من ثلاث نقاط … في نهاية المقتطفات التي تزيد عن 55 كلمة وبالنقر فوق النقاط يتم تحويل المستخدم لصفحة قراءة المقال الكامل.

للقيام لذلك سنكتب دالة تعدل على طريقة عمل هذه الدالة وتجعلها تعرض كلمة المزيد بدل النقاط الثلاث وتعدل طول المقتطف ليكون 20 حرفًا فقط، لذا سنكتب دالة خطاف تعديل للدالة excerpt_more()‎ في ملف وظائف قالب ووردبريس functions.php كما يلي:

/**
 * the excerpt "read more"
 */

function new_excerpt_more_qwe($more)
{
    return ' <a class="read-more" href="' . get_permalink(get_the_ID()) . '">' . __('[المزيد]', 'your-text-domain') . '</a>';
}
add_filter('excerpt_more', 'new_excerpt_more_qwe');

function mytheme_custom_excerpt_length($length)
{
    return 20;
}
add_filter('excerpt_length', 'mytheme_custom_excerpt_length', 999);

برمجة ملف تذييل قالب ووردبريس

يتضمن ملف footer.php كافة الشيفرات البرمجية الموجودة في منطقة التذييل بصفحتك وهو يتضمن وسوم فيه علامات الإغلاق <‎/body> و <‎/html> كما يمكنك هنا أيضًا استدعاء ملفات جافا سكريبت مخصصة في حال كنت تريد تحميلها بعد اكتمال تحميل الصفحة واستدعاء أي شيفرات يحتاج ووردبريس لوضعها تلقائيًا في التذييل.

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

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

<footer>
    <section class="footer-qwe">
        <?php dynamic_sidebar('footer 1'); ?>
    </section>

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

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

نحتاج لأمر إضافي لعرض الودجات وهو تعريف مناطق الودجات الخاصة بقالب ووردبريس في ملف وظائف القالب function.php وسنقوم بذلك من خلال تعريف دالة مخصصة باسم qwe_register_footers()‎ نُعرِّف من خلالها وسطاء منطقة عرض الودجات ثم نربطها مع الخطاف widgets_init الذي يقع عند تهيئة الودجات في ووردبريس كما يلي:

function qwe_register_footers() {
$args2 = array('name' =>'footer 1',
'id'=>'footer' ,
'description'=> 'عرض الودجات في التذييل',
'class' => '',
'before_widget' => '<div class="widgeth"><li id="%1$s" class="widget %2$s">',
'after_widget' => '</li></div>',
'before_title' => '<h2 class="widgettitle">',
'after_title'  => '</h2>' ); 
register_sidebars(1,$args2);
}
 add_action('widgets_init','qwe_register_footers');
?>

من المفيد أن نشرح دلالة كل وسيط من الوسطاء التي مررناها لهذه الدالة:

• name وسيط يمثل اسم منطقة عرض الودجات وهي footer 1
• id معرف فريد لمنطقة عرض الودجات
• description وصف منطقة عرض الودجات
• class صنف تنسيق CSS للمنطقة
• before_widget وسم HTML الذي سيتم وضعه قبل كل ودجت
• after_widget وسم HTML الذي سيتم وضعه بعد كل ودجت
• before title وسم HTML الذي سيتم وضعه قبل عنوان كل ودجت
• after_title وسم HTML الذي سيتم وضعه بعد عنوان كل ودجت

في القسم الثاني من التذييل سنكتب جملة جميع الحقوق محفوظة ويليه اسم المدونة الذي نحصل عليه بشكل ديناميكي من خلال الدالةget_bloginfo('name‎‎')‎.

أخيرًا لا ننسى استدعاء الدالة wp_footer()‎ الأساسية لاستدعاء جميع أنواع السكريبتات الخاصة المرتبطة بالإضافات Plugins وكذلك الأكواد الخاصة بنظام ووردبريس والتي تستدعى في تذييل الصفحة لذا نكتب الأكواد التالية نهاية ملف index.php قبل وسم الإغلاق<‎/body‎> مباشرة:

<section class="copyright">
        <p><a href="<?php echo home_url(); ?>">&copy;<?php echo date('Y'); ?> جميع الحقوق محفوظة لـ <?php echo get_bloginfo('name'); ?></a></p>
    </section>
</footer>
</div>
<?php wp_footer(); ?>
</body>
</html>

بهذا نكون قد انتهينا من إنشاء كامل الكود المطلوب لملف index.php وفصلنا أكواد الترويسة والتذييل header.php و footer.php التي تتضمن أجزاء مكررة لنتمكن من استدعائها من خلال الدوال get_header()‎ و get_footer()‎ ضمن الملف index.php أو ضمن أي ملف آخر يحتاجها مثل ملفات page.php و single.php و category.php حيث أن كل الملفات تقريبًا ستحتوي على هذين القسمين.

إذًا سيكون كود ملف footer.php النهائي كالتالي:

<footer>
    <section class="footer-qwe">
        <?php dynamic_sidebar('footer 1'); ?>
    </section>
    <section class="copyright">
        <p><a href="<?php echo home_url(); ?>">&copy;<?php echo date('Y'); ?> جميع الحقوق محفوظة لـ <?php echo get_bloginfo('name'); ?></a></p>
    </section>
</footer>
</div>
<?php wp_footer(); ?>
</body>
</html>

وسيكون الملف النهائي لوظائف القالب بعد أن أضفنا كافة الميزات المطلوبة كما يلي:

<?php

// menus

function register_nav_menu_primary_qwe(){

    $location='Primary';
    $description='Primary menu';
    register_nav_menu( $location, $description );

}
add_action('after_setup_theme','register_nav_menu_primary_qwe' );


function register_nav_menu_Secondary_qwe(){

    $location='Secondary';
    $description='Secondary menu';
    register_nav_menu( $location, $description );

}
add_action('after_setup_theme','register_nav_menu_Secondary_qwe' );

/**
 * Enqueue scripts and styles.
 */
function modawanaty_scripts() {
    wp_enqueue_style( 'modawanaty-style', get_stylesheet_uri(), array(), wp_get_theme()->get( 'Version' ) );
}
add_action( 'wp_enqueue_scripts', 'modawanaty_scripts' );

// thumbnail connection
function post_thumbnails_qwe() {
    // add_theme_support( $feature, $arguments );
    add_theme_support( 'post-thumbnails', array( 'post','page') ); // Posts and pages
    add_image_size('small',300,300, true);
    add_image_size('large',600,600, true);
}
add_action( 'after_setup_theme', 'post_thumbnails_qwe' );

// custom logo
add_theme_support( 'custom-logo' );
function themename_custom_logo_setup()
{ $defaults = array( 'height' => 200,
'width'=> 200,
'flex-height' => true,
'flex-width'  => true,
'header-text' => array( 'site-title', 'site-description' ), );
add_theme_support( 'custom-logo', $defaults ); }

add_action( 'after_setup_theme', 'themename_custom_logo_setup'); 


// the excerpt "read more

function new_excerpt_more_qwe( $more ) {
    return ' <a class="read-more" href="'. get_permalink( get_the_ID() ) . '">' . __('[المزيد]', 'your-text-domain') . '</a>';
}
add_filter( 'excerpt_more', 'new_excerpt_more_qwe' );

function mytheme_custom_excerpt_length( $length ) {
    return 20;
}
add_filter( 'excerpt_length', 'mytheme_custom_excerpt_length', 999 );

// add Footers 
function qwe_register_footers() {
    $args2 = array('name' =>'footer 1',
        'id'=>'footer' ,
        'description'=> 'add another footer',
        'class'  => '',
        'before_widget' => '<div class="widgeth"><li id="%1$s" class="widget %2$s">',
        'after_widget'  => '</li></div>',
        'before_title'  => '<h2 class="widgettitle">',
        'after_title'   => '</h2>' ); 

    register_sidebars(1,$args2);
    }
 add_action('widgets_init','qwe_register_footers');

إنشاء ملف single.php وملف page.php

ذكرنا سابقًا أن الملف single.php هو المسؤول عن عرض المقال المفرد ونحن هنا نقصد المنشور الافتراضي post في ووردبريس أو المنشور المخصص custom post لكن هذا الملف ليس مسؤولًا عن عرض الصفحات الثابتة page فهذه الصفحات لها ملف خاص مسؤول عن عرضها وهو page.php.

سنكتب في كلا الملفين كود مشابه لما كتبناه في ملف index.php مع تغيير طفيف في الشيفرات البرمجية حيث سنعمل على استبدال الدالة the_excerpt()‎ التي تعرض مقتطف من المقال بالدالة the_content()‎ التي تعرض المحتوى الكامل للمقال وتغيير أصناف التنسيقات class الرئيسية وحجم الصورة المصغرة كما يلي:

<?php get_header(); ?>

       <div class="main">
       <?php
            if(have_posts()) {

                while ( have_posts() ) { 

                    the_post();

                    echo '<div id="post-';the_ID();echo '"';post_class();echo '>';

                    echo '<div class="rect">';
                    echo '<h1 class="qwe-page-title"><a href="';
                    the_permalink();    
                    echo'">  ';
                    the_title();
                    echo '</a></h1>';
                    if ( has_post_thumbnail() ) {
                        the_post_thumbnail('large');
                    }
                    the_content();
                    echo '</div>';
                }
            }
        ?>    
       </div>
<?php get_footer(); ?>

إنشاء ملف الأرشيف archive.php

يعرض ملف الأرشيف archive.php المقالات المؤرشفة وفق أي معيار سواء وفق تاريخ نشر المقال أو وفق التصنيف المضاف للمقال أو وفق اسم الكاتب …إلخ. لبرمجة ملف أرشيف قالب ووردبريس سنجعل هذا الملف نسخة طبق الأصل من ملف index.php مع تغيير صغير كذلك وهو عرض التصنيف الخاص بالمقالات أعلى الصفحة من خلال الدالة the_archive_title()‎ التي توضح اسم التصنيف الخاص بأرشفة هذه المقالات كما يلي:

<?php get_header(); ?>

       <div class="main">

<section id="page-title">
<div class="container clearfix">
  <h1><?php echo the_archive_title(); ?></h1>
</div>
</section><!-- #page-title end -->
<?php
            if(have_posts()) {

                while ( have_posts() ) { 

                    the_post();

                    echo '<div id="post-';the_ID();echo '"';post_class();echo '>';

                    echo '<div class="rect">';
                    echo '<h1 class="qwe-page-title"><a href="';
                    the_permalink();    
                    echo'">  ';
                    the_title();
                    echo '</a></h1>';
                    if ( has_post_thumbnail() ) {
                        the_post_thumbnail('small');
                    }
                    the_excerpt('<br/><p class="push_button">المزيد </p>');
                    echo '</div>';
                }
            }
        ?>    
       </div>
<?php get_footer(); ?>

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

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

مصادر إضافية لتعلم برمجة قوالب ووردبريس من الصفر

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

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

الخلاصة

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

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

كتب المسودة الأولية للمقال هشام حسين.

اقرأ أيضًا

• المقال السابق: أساسيات تطوير قالب ووردبريس
• المقال التالي: إضافة تنسيقات CSS لقالب ووردبريس
• كيفية البدء في تطوير قوالب ووردبريس
• استخدام قوالب ووردبريس

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

هذا المقال هو المقال الثاني من سلسلة المقالات التالية:

• مدخل إلى برمجة قوالب ووردبريس
• أساسيات تطوير قالب ووردبريس
• إنشاء الملفات الأساسية لبرمجة قالب ووردبريس
• إضافة تنسيقات CSS لقالب ووردبريس
• إضافة المميزات لقالب ووردبريس باستخدام جافا سكريبت

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

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

طرق تطوير قالب ووردبريس مخصص

قبل البدء بالتعرف على الهيكل التنظيمي لمجلدات وملفات قوالب ووردبريس ومعرفة ما هي الملفات المطلوبة التي ينبغي وجودها في أي قالب تطوره ودور كل ملف منها وهرمية استدعاء هذه الملفات عند تفعيل القالب على موقع ووردبريس فعلي دعنا نتعرف على كافة الطرق والخيارات المتاحة أمامك لتطوير قالب ووردبريس.

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

1. برمجة قالب ووردبريس من الصفر
2. برمجة قالب ووردبريس بالاعتماد على قوالب البدء
3. الحصول على قالب ستاتيكي وتحويله إلى قالب ووردبريس
4. تطوير قالب ووردبريس ابن من قالب أب
5. برمجة قالب ووردبريس بالاعتماد على أطر عمل القوالب
6. تطوير قالب ووردبريس باستخدام أحد إضافات بناء الصفحات
7. توظيف مطور ليصمم قالب ووردبريس مخصص

لنشرح باختصار آلية عمل كل طريقة من هذه الطرق وأهم مميزاتها ومحدوديتها.

1. تطوير قالب ووردبريس من الصفر

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

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

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

2. برمجة قالب ووردبريس بالاعتماد على قوالب بادئة

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

تستخدم قوالب البدء كأساس لإنشاء قوالب ووردبريس مثالية واحترافية مخصصة وهناك العديد من القوالب التي يمكنك الاعتماد عليها كأساس لبرمجة قالب ووردبريس مخصص مثل قالب Underscores المطور من قبل شركة أوتوماتيك Automattic وهي نفس الشركة التي طورت منصة wordpress.com كل ما عليك هو تحميل هذا القالب وإضافة الأكواد الخاصة بك لتخصيص طريقة عمله بما يلائم متطلبات موقعك.

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

لمزيد من التفاصيل حول قالب البدء يمكنك مطالعة مقال مدخل إلى تطوير قوالب ووردبريس باستخدام إطار underscores، كما توفر أكاديمية حسوب في دورة تطوير التطبيقات باستخدام PHP مسار كامل لشرح طريقة تطوير قالب ووردبريس بالاعتماد على قالب underscores.

3. تحويل قالب ستاتيكي إلى قالب ووردبريس ديناميكي

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

وعندما تنتهي من برمجة وتصميم كل ما يتعلق بالواجهة الأمامية الموقع بالكامل تبدأ بتحويله إلى قالب ديناميكي يعرض المحتوى المضاف من لوحة تحكم ووردبريس بالاعتماد على تقسيم الملفات بالشكل المعتمد في ووردبريس واستدعاء الدوال الجاهزة التي يوفرها لك نظام ووردبريس وكتابة دوال php واستعلامات WP_Query لعرض محتوى مخصص عند الحاجة.

تستخدم هذه الطريقة بكثرة لدى مطوري قوالب ووردبريس وتطلب من قبل العديد من العملاء على مواقع العمل الحر فإذا كنت مهتمًا بالتعرف على طريقة تحويل أي قالب HTML ثابت إلى قالب ملائم للعمل على نظام ووردبريس ستجد في دورة تطوير تطبيقات الويب باستخدام لغة PHP التي توفرها أكاديمية حسوب مسارًا متكاملاً يعلمك طريقة تطوير قالب ووردبريس إخباري بالاعتماد على قالب HTML.

4. تطوير قالب ووردبريس ابن من قالب أب

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

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

5. برمجة قالب ووردبريس الاعتماد على أطر عمل القوالب

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

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

5. تطوير قالب ووردبريس باستخدام إضافات بناء الصفحات

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

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

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

6. توظيف مطور ليصمم لك قالبًا

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

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

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

أهم ملفات قالب ووردبريس

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

يتم تخزين كافة قوالب ووردبريس عادة ضمن المجلد themes الموجود داخل المجلد wp-content ضمن المجلد الجذر لموقع ووردبريس. ستجد في المجلد themes جميع القوالب المتاحة على موقع الويب الخاص بك حيث يكون لكل قالب منفصل مجلده الخاص.

إذا فتحت أي مجلد خاص بقالب ووردبريس معين ستلاحظ أنه يتكون بشكل أساسي من مجموعة من ملفات بالامتداد php تعرف باسم هذه الملفات باسم ملفات نماذج القالب template files كما ستجد بعض ملفات التنسيق بالامتداد css أو scss وملفات جافا سكريبت js وبعض ملفات الصور والوسائط وغيرها من الملفات الأخرى المنظمة ضمن مجلدات فرعية والتي تتعاون مع بعضها البعض لتحدد مظهر موقع ووردبريس الخاص بك.

ومن أهم ملفات قالب ووردبريس نذكر:

• index.php: وجود هذا الملف أساسي لأي قالب ووردبريس ويستخدم لعرض الصفحة الرئيسية لموقع ووردبريس التي تعرض افتراضيًا أحدث مقالات موقعك، كما أنه الملف الاحتياطي الذي سيعتمد عليه ووردبريس لعرض أي صفحة لا تملك ملفًا مخصصًا لعرضها وستفهم هذه الجزئية بشكل أفضل عندما نشرح التسلسل الهرمي لملفات قالب ووردبريس.

• style.css: وهو ملف أساسي لعمل قالب ووردبريس ويتضمن معلومات تعريفية حول القالب كما يتضمن تنسيقات عناصر القالب.

• page.php: يعرض هذا الملف الصفحات الداخلية الثابتة للموقع مثل صفحة من نحن وصفحة سياسة الخصوصية.

• single.php: يستخدم هذا الملف لعرض الصفحات التي تعرض مقالًا واحدًا.

• archive.php: يعرض صفحات الأرشيف في الموقع سواء أرشيف التصنيفات أو الوسوم أو التاريخ.

• search.php: هذا الملف مخصص لعرض صفحة نتائج البحث ضمن الموقع.

• front-page.php: ملف لعرض الصفحة الرئيسية للموقع إذا كانت صفحة ثابتة ولم تكن صفحة عرض أحدث المقالات الافتراضية.

• 404.php: ملف مخصص لعرض صفحة الخطأ التي تظهر عند عدم العثور على الصفحة المطلوبة.

• screenshot.png: ملف الصورة الذي يظهر عند عرض قالب ووردبريس في لوحة التحكم والحجم المفضل له هو 1200 × 900 بكسل، يكفي أن تنشئ صورة بهذا الاسم وتضعها في مجلد القالب لتظهر تلقائيًا عن عرض القالب في لوحة التحكم.

• functions.php: ملف وظائف القالب المسؤول عن إضافة العديد من الميزات والإعدادات داخل قالبك مثل دعم الصور المصغرة للمقالات وتحديد أحجام الصور التي يدعمها القالب وتعريف مواضع عرض القوائم في القالب وغيرها من الميزات.

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

التسلسل الهرمي لملفات نماذج قالب ووردبريس

من المفاهيم الأساسية التي يجب فهمها عند برمجة قالب ووردبريس مفهوم التسلسل الهرمي لملفات نماذج القالب template hierarchy وهو طريقة ضمنية يستخدمها ووردبريس لتحديد ما هي ملفات php التي سوف يستخدمها عند عرض كل صفحة من صفحات الموقع وهي تسهل على مطوري قوالب ووردبريس تخصيص مواقع الويب كما يريدون.

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

على سبيل المثال تنقسم المدونة التي سوف ننشئها إلى عدة صفحات منها الرئيسية وهي في حالتنا صفحة المدونة التي تحتوي على المقتطفات الخاصة بالمنشورات أو المقالات معروضة وفق الترتيب التنازلي لتاريخ نشرها من الأحدث للأقدم والمسؤول عن عرضها ملف نموذج القالب الرئيسي index.php.

عندما تنقر على كل رابط من روابط المقالات ستصل لصفحة تعرض المقال فقط وهي صفحة مفردة خاصة به والمسؤول عن عرض هذه الصفحة هو ملف نموذج القالب single.php لكن ماذا لو لم يوجد هذا الملف في مجلد قالبك؟ عندها سيعتمد ووردبريس على ملف نموذج القالب الرئيسي index.php الأكثر عمومية لعرضها.

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

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

عند عرض صفحة المقالات التي تختص بتصنيف البرمجة وليكن اسمه المختصر أو slug هو programming والمعرف الخاص به هو 5 سيبحث ووردبريس عن أكثر ملف مخصص لعرض هذه المقالات وهو في هذه الحالة category-programming.php المخصص لعرض كافة المقالات المنظمة تحت تصنيف برمجة كي يعرض هذه الصفحة، وفي حال لم يجده يبحث عن الملف الأقل تخصيصًا في الهرمية وهو category-5.php ثم عن category.php ثم عن archive.php وهو الملف العام لعرض كافة المقالات المنظمة تحت أي نوع من التصنيفات أو الوسوم أو سواء المقالات المنشورة وفق تاريخ معين أو التي لها تصنيف معين أو كاتب معين وإذا لم يجده سيعود في النهاية للملف الأكثر عمومية وهو index.php لهذا يعتبر هذا الملف أساسي لأي قالب ووردبريس ويجب ان يكون موجود في مجلد كل قالب وإلا فلن يعمل القالب بصورة صحيحة.

الملفات الجزيئة لقالب ووردبريس Template Partials

من الملفات المهمة الأخرى في قالب ووردبريس الملفات الجزئية template partials وهي ملفات مخصصة لبرمجة أجزاء صغيرة من الموقع تظهر في عدة أماكن فهي تستدعى في ملفات النماذج الأخرى مثل ملفات header.php و footer.php و sidebar.php ويوجد ملفات أخرى شبيهه ويمكن معرفتها من خلال الدليل الرسمي لمطوري قوالب ووردبريس.

تكمن فائدة تلك الملفات في تجميع الأكواد المكررة وإعادة استخدامها عند الحاجة، مثلًا في ملف header.php نضع كل الكود المخصص للعرض في ترويسة الموقع مثل شعار الموقع وقائمة التنقل الرئيسية وصندوق البحث وأيقونات التواصل الاجتماعي، وفي ملف footer.php نكتب مثلًا كود عرض عبارة حقوق النشر وبيانات التواصل وقد نضع قائمة تنقل فرعية، وفي ملف sidebar.php نضع الكود الذي نريد عرضه في الشريط الجانبي للموقع وهو عادة يعرض عناصر واجهة مستخدم تسمى الودجات widgets.

بعدها يمكن أن نستورد هذه الملفات الجزئية عند الحاجة لعرضها في أي ملف ضمن قالبنا من خلال دوال جاهزة في ووردبريس تسمى وسوم النموذج أو وسوم القالب template tags.

استخدام وسوم النماذج لتطوير قالب ووردبريس

ستحتاج للتعرف على مفهوم وسوم القالب template tags عند تطوير قالب ووردبريس مخصص وهذه الوسوم هي هي دوال php تستخدم لجلب البيانات ديناميكيًا وعرضها في الملفات التي تحتاجها، على سبيل المثال:

• الدالة get_header: تضمن كود الترويسة في الملف الرئيسي الذي يستدعيها
• الدالة get_sidebar: تضمن كود الشريط الجانبي في الملف الرئيسي
• الدالة get_footer: تضمن كود التذييل في الملف الرئيسي
• الدالة get_search_form: تضمن نموذج البحث الخاص بووردبريس في الملف الرئيسي
• الدالة get_template_part: تستخدم لتضمين أكواد مخصصة في الملف الرئيسي حيث نمرر لها اسم ملف الكود المطلوب كوسيط

وللاطلاع على بكافة دوال الوسوم التي يمكنك استخدامها في تطوير قالب ووردبريس وأمثلة على استخدامها أنصحك بمطالعة التوثيق الرسمي List of Template Tags من ووردبريس.

ملاحظة: هناك نوع حديث من قوالب ووردبريس تسمى قوالب الكتل block themes وهذه القوالب تعتمد على ملفات HTML تمثل الكتل وليس على ملفات php وهي بالتالي لا تستخدم الدوال المذكورة أعلاه بل تستخدم أساليب أخرى لتضمين هذه الأجزاء لكننا لن نتطرق لشرحها في سلسلتنا الحالية لأننا نشرح تطوير قالب كلاسيكي classic theme يعتمد البنية التقليدية.

ما هي حلقة ووردبريس the loop وأهميتها في برمجة قالب ووردبريس

من الأمور الضرورية التي تحتاج لفهمها بشكل جيد عند برمجة قالب ووردبريس من الصفر هو حلقة ووردبريس WordPress Loop أو تدعى the loop وهي كود برمجي بلغة php يستخدم بشكل أساسي لعرض المحتوى الديناميكي من قاعدة بيانات ووردبريس على الصفحة التي تستعرضها.

ستجد في الدروس القادمة أننا سنحتاج لاستدعاء حلقة ووردبريس في كافة ملفات القوالب التي تعرض لنا محتوى المقالات أو الصفحات أو أي نوع من أنواع المنشورات الأخرى في كثير من الملفات مثل ملف الصفحة الرئيسية index.php أو ملف الشريط الجانبي sidebar.php.

فيما يلي مثال بسيط يوضح الشكل العام لحلقة ووردبريس:

<?php 
if ( have_posts() ) {
    while ( have_posts() ) {
        the_post(); 
        // عرض محتوى المنشور هنا
    } // end while
} // end if
?>

يتحقق الكود بداية من وجود أي منشورات وفي حال وجودها تبدأ الحلقة التكرارية التي تنتقل عبر جميع المنشورات التي يجب عرضها وتستدعى الدالة the_post()‎ التي تعيد دليل المنشور الحالي وتمكننا من عرض أي بيانات حول هذا المنشور مثل العنوان واسم الكاتب وتراي النشر والمحتوى وما إلى ذلك، وللمزيد حول مفهوم حلقة ووردبريس والاطلاع على أمثلة منوعة حولها أنصح بمطالعة مقال فهم الحلقة The loop وطريقة ووردبريس في عرض المنشورات.

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

<?php  
   $args = array(
      "category_name" => "programming",
      "author_name" => "Ola",
      "posts_per_page" => 3,
   );
   $posts = new WP_Query($args);
?>

أهم دوال قالب ووردبريس

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

على سبيل المثال:

• الدالة have_posts()‎ التي استخدمناها في الكود السابق تحدد فيما إذا كان هناك مقالات منشورة على الموقع أم لا
• الدالة the_content()‎ تعرض محتوى الصفحة أو المقال الحالي
• الدالة bloginfo()‎ تعرض لك العديد من المعلومات حول موقعك على سبيل المثال للحصول على اسم الموقع نمرر لها الوسيط التالي bloginfo('name')‎ وللحصول على رابط الموقع نكتب bloginfo('url')‎.
• الدالة get_template_directory_uri()‎ من الدوال المفيدة كذلك لأي مطور ووردبريس التي تسمح لك بالاتصال بعنوان الويب الخاص بالقالب المفعل في الموقع واستدعاء أي ملفات تنسيق CSS أو ملفات جافا سكريبت أو غيرها من الملفات الموجودة في مجلد القالب.

لحسن الحظ يوفر لك موقع مطوري ووردبريس شرحًا مرجعيًا مفصلًا لكل تلك الدوال بالتفصيل الممل ويوفر أمثلة توضيحية جيدة حولها تجده على الرابط التالي، وهو لا يشرح لك للدوال فقط بل أيضا للخطافات Hooks و الأصناف Classes.

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

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

فهم بنية ملفات قالب ووردبريس

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

يمكن أن تعتمد على هذا التنظيم من خلال تنظيم ملفات القالب على موقع ووردبريس الرسمي للمطورين وهي كالتالي (dir تعني مجلد):

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

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

سنتيح لك الملف النهائي للقالب لتحميله في نهاية هذه السلسلة فإذا كنت مهتمًا بالحصول على هذا القالب فتابع الدروس القادمة لترى كيف ننشئ كامل ملفات القالب وننسقها بالشكل المطلوب.

الخلاصة

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

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

كتب المسودة الأولية للمقال هشام حسين.

اقرأ أيضًا

• المقال السابق: مدخل إلى برمجة قوالب ووردبريس
• المقال التالي: إنشاء الملفات الأساسية لبرمجة قالب ووردبريس
• تعلم ووردبريس Wordpress
• كيفية تخصيص قالب ووردبريس
• ملفات القالب والتنسيق في قالب Underscores لووردبريس

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

هذا المقال هو المقال الأول من سلسلة المقالات التالية:

• مدخل إلى برمجة قوالب ووردبريس
• أساسيات تطوير قالب ووردبريس
• إنشاء الملفات الأساسية لبرمجة قالب ووردبريس
• إضافة تنسيقات CSS لقالب ووردبريس
• إضافة المميزات لقالب ووردبريس باستخدام جافا سكريبت

مفاهيم أساسية حول ووردبريس

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

سوف نستعرض معًا في هذه المقالة بعض المعلومات المهمة عن ووردبريس وبنية قالب ووردبريس الأمر الذي سيسهل عليك التعامل مع تصميم وتطوير قوالب ووردبريس ويوضح لك الصورة العامة لكيفية إنشائه.

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

دورة تطوير تطبيقات الويب باستخدام لغة PHP

احترف تطوير النظم الخلفية والووردبريس وتطبيقات الويب من الألف إلى الياء دون الحاجة لخبرة برمجية مسبقة

اشترك الآن

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

لماذا يجب علي تطوير قالب ووردبريس مخصص؟

قد تتساءل، لماذا لا أستعمل قالب جاهز؟ أليس هذا أسهل من تطوير قالب من الصفر؟ والجواب على هذا السؤال يحتمل عدة أوجه:

1. قد لا تفي القوالب الجاهزة بالمطلوب
2. تفرد موقعك بتصميم خاص
3. سهولة تعديل القوالب الجاهزة
4. فرص عمل أكثر

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

1. قد لا تفي القوالب الجاهزة بالمطلوب

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

2. تفرد موقعك بتصميم خاص

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

3. سهولة تعديل القوالب الجاهزة

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

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

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

4. فرص عمل أكثر

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

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

متطلبات مسبقة لتطوير قالب ووردبريس

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

فإذا كنت مطور مواقع ووردبريس فقد تتساءل عن المتطلبات المسبقة التي عليك معرفتها كي تتمكن من برمجة وتطوير القالب الخاص بموقعك أو تخصيص قالب لأحد عملائك.

لتطوير قالب ووردبريس يجب أن تكون على دراية كافية بكل من التقنيات التالية:

• لغة HTML ولغة CSS اللتان تعملان من طرف العميل وتستخدمان لتصميم واجهة الموقع فلغة HTML هي المسؤولة عن تحديد هيكلية الموقع، ولغة CSS هي المسؤولة عن تنسيق وتصميم عناصره.
• معرفة في لغة جافا سكريبت لإضفاء التأثيرات التفاعلية والحركية المتقدمة على موقعك مثل الصور المنزلقة ومشغلات الفيديو وما إلى ذلك.
• لغة PHP التي تعمل من طرف الخادم وتستخدم من أجل جعل الموقع قادرًا على التفاعل مع قاعدة البيانات وجلب البيانات منها ل عرض محتوى ديناميكي
• التعامل مع لغات قواعد البيانات مثل MySQL أو MariaDB لأنها تساعد في إنشاء وتحديث وإضافة وحذف البيانات من قاعدة البيانات الخاصة بالموقع.
• تحتاج أيضًا إلى التعامل مع أحد محررات الأكواد مثل Visual Studio Code.
• وأخيرًا تحتاج لمعرفة مسبقة بنظام ووردبريس وكيفية إنشاء المواقع باستخدامه والتعامل مع لوحة تحكمه ورفع وتثبيت القوالب والإضافات إليه فكل هذه معلومات أساسية لابد من امتلاكها كي تبدأ ببرمجة قالب ووردبريس مخصص.

بخصوص بووردبريس:

• سوف تحتاج أيضا إلى تحويل حاسوبك إلى خادم أو مستضيف محلي Localhost باستخدام برامج مساعدة مثل برنامج XAMPP أو Wamp لسهولة العمل وتثبيت ووردبريس على جهازك وإعداد البنية التحتية لتشغيل الموقع وتطوير وتصميم القالب المطلوب مع القدرة على مشاهدة التغيرات بصورة واضحة وسريعة.

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

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

ملاحظة: يمنع التخزين المؤقت للمتصفح Browser cache ظهور ما تقوم به من تغيرات وإضافات على الشيفرات البرمجية والناتج منها في كثير من الأحيان، لهذا فيجب إيقافه عند العمل على مشروع جديد، ويتم عمل ذلك عن طريق الدخول لوضع المطور من خلال الضغط على مفاتيح Ctrl+Shift+I أو الضغط على مفتاح F12 عند عرض الموقع ضمن متصفح chrome وإيقاف التخزين المؤقت من خلال تفعيل خيار Disable cache في التبويب Network كما هو مبين في الصورة التالية:

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

خطوات برمجة قالب ووردبريس من الصفر

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

وتشمل برمجة قالب ووردبريس الخطوات الأساسية التالية:

1. وضع متطلبات الموقع وتحديد كافة الوظائف والمميزات التي تحتاج لوجودها فيه
2. إنجاز تصميم أولي يحدد شكل الموقع وتوزع العناصر وتنسيقها وتحديد الألوان والخطوط وما شابه بما يلائم متطلباتك وهويتك البصرية.
3. البدء بتحويل التصميم إلى قالب فعلي يعمل على الاستضافة المحلية من خلال كتابة شيفراته البرمجية باستخدام HTML و PHP و CSS وجافا سكريبت.
4. تصدير القالب بشكل ملف zip ورفعه على الموقع على الاستضافة الفعلية واختبار أدائه والتأكد من أنه يعمل بالشكل الصحيح.

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

تصميم قالب ووردبريس

حتى تبدأ بإنشاء قالب موقعك بصورة صحيحة يفضل أن ترسم تخطيطًا أوليًا سريعًا للموقع توضح البنية العامة له بشكل إطارات wireframes، أو التوجه مباشرةً لتصميمه على أحد برامج التصميم لمزيد من الدقة مثل فيجما Figma أو أدوبي X‎D أو Sketch أو غيرها من أدوات تصميم واجهة المستخدم، تسهل تلك البرامج تصور شكل القالب النهائي والوصول لتصميم مناسب في النهاية.

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

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

تصميم قالب ووردبريس بواسطة برنامج فيجما

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

نريد تصميم قالب بسيط يمثل مدونة لذا سنوجه مباشرة لتصميمه على وقع فيجما ووضع التصميم الذي نراه مناسبًا.

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

تصميم القسم العلوي Heade

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

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

تصميم جسم الصفحة Page

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

والجزء الثاني كالتالي:

تصميم القسم السفلي للصفحة أو التذييل Footer

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

تصميم الموقع النهائي للصفحة على الحاسب

يظهر في الشكل التالي التصميم النهائي للصفحة الرئيسية للمدونة:

تصميم الموقع النهائي للصفحة على الشاشات الصغيرة

يتم بعد ذلك عمل تصميم بشكل يناسب الحاسوب اللوحي وآخر للجوال كما بالشكل النهائي التالي لهما.

التصميم مع وجود شريط جانبي Sidebar

إن أردت أن يكون هناك شريط جانبي في الصفحة الرئيسية، فيمكنك عمل ذلك كما بالشكل التالي:

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

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

خاتمة

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

كتب المسودة الأولية للمقال هشام حسين.

اقرأ أيضًا

• المقال التالي: أساسيات تطوير قالب ووردبريس
• تعلم برمجة وتطوير مواقع ووردبريس
• إنشاء قاعدة بيانات لووردبريس
• الدليل الشامل لودجات ووردبريس

يوجد ضمن ووردبريس أكثر من طريقة لإعادة ضبط كلمة المرور، وعادةً فإن الطريقة الأسهل هي إعادة ضبط كلمة المرور من خلال رابط "هل فقدت كلمة مرورك؟" ضمن صفحة تسجيل الدخول لموقعك أو مدونتك، لكن هناك حالات (خصوصًا إن لم يكن بريدك الإلكتروني يعمل بشكل صحيح) تُضطر فيها لاتباع خطوات مختلفة لإعادة ضبط كلمة مرورك.

إليك قائمة بطرق مختلفة لإعادة ضبط كلمة المرور حيث تعتمد الطريقة التي تستخدمها على صلاحيات الوصول لموقعك التي تمتلكها.

تغيير كلمة المرور من لوحة التحكم

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

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

تغيير كلمة المرور من خلال البريد الإلكتروني التلقائي

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

عليك بعد ذلك الانتظار ريثما تُرسل كلمة المرور الجديدة لك عبر بريدك الإلكتروني والتي تستطيع استخدامها لتسجيل الدخول لحسابك الشخصي وتغيير كلمة المرور هذه لشيء يسهل عليك تذكره أو تستطيع الإبقاء عليها.

تغيير كلمة المرور من خلال سطر أوامر MySQL

احصل على قيمة معمّاة MD5 لكلمة مرورك وذلك بالتوجه لمولد القيم المعمّاة MD5 أو أنشئ مفتاحًا باستخدام بايثون أو ضمن أنظمة يونكس أو لينكس وذلك عبر إنشاء ملف يُدعى wp.txt لا يحوي شيئًا سوى كلمة المرور الجديدة ثم تنفيذ الأمر التالي:

tr -d '\r\n' < wp.txt | md5sum | tr -d ' -'

لا تنسى حذف ملف كلمة المرور wp.txt عبر تنفيذ الأمر rm wp.txt مثلًا أو حذفه يدويًا.

أما ضمن أنظمة Mac OS X فبعد إنشاء ملف wp.txt نفذ الأمر التالي (إن أردت طباعة القيمة المعمّاة MD5):

md5 -q ./wp.txt; rm ./wp.txt

أو إن أردت نسخ القيمة المعماة الناتجة مباشرة إلى حافظة النظام، فنفذ الأمر التالي

md5 -q ./wp.txt | pbcopy; rm ./wp.txt

نفِّذ بعد ذلك الأمر التالي:

mysql -u root -p

للدخول إلى قاعدة بيانات MySQL وأدخل كلمة المرور ثم اختر قاعدة بيانات ووردبريس عبر الأمر use (name-of-database)‎ (ضع اسم قاعدة البيانات) ثم اعرض الجدول عبر show tables (أنت تبحث عن جدول ينتهي بكلمة users).

نفذ بعدها الأمر التالي:

SELECT ID, user_login, user_pass FROM (name-of-table-you-found);

ضع مكان name-of-table-you-found اسم الجدول، وهذا يوفر لك فكرة عما يُنفذ ضمن قاعدة البيانات، ثم نفذ الأمر التالي لتغيير كلمة المرور:

UPDATE (name-of-table-you-found) SET user_pass="(MD5-string-you-made)" WHERE ID = (id);

ضع مكان MD5-string-you-made سلسلة MD5 المعماة التي ولدتها سابقًا، وضع مكان (id) مُعرِّف الحساب الذي تريد إعادة تعيين كلمة المرور له.

تأكد أن كلمة المرور تغيرت عبر تنفيذ الأمر التالي:

SELECT ID, user_login, user_pass FROM (name-of-table-you-found);

أخيرًا، اضغط على CTRL + D للخروج من mysql client.

ملاحظة: إن كنت تملك إصدارًا حديثًا من MySQL (الإصدار 5 وما بعد)، تستطيع جعل MySQL يحسب القيمة المعمّاة MD5، لذا تجاوز خطوة توليد قيمة MD5 من الخطوات السابقة ونفذ ما يلي لتغيير كلمة المرور فعليًا:

UPDATE (name-of-table-you-found) SET user_pass = MD5('(new-password)') WHERE ID = (id#-of-account-you-are-reseting-password-for);

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

تغيير كلمة المرور من خلال phpMyAdmin

هذا المقال لمن يمتلك وصولًا للوحة phpMyAdmin لدخول قاعدة البيانات.

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

تبدأ الخطوة الأولى بتسجيل الدخول إلى phpMyAdmin والضغط على databases لتظهر لك قائمة بقواعد البيانات، اضغط على قاعدة بيانات ووردبريس الخاصة بك.

سوف تظهر الآن جميع جداول قاعدة البيانات، وإن لم تظهر اضغط على structure، ثم ابحث عن الجدول wp_users ضمن العمود Table وعندما تجده اضغط على أيقونة المتصفح. الآن عليك البحث عن اسم المستخدم الخاص بك تحت user_login، وعندما تجده اضغط على edit (ربما يظهر على شكل قلم في بعض إصدارات phpMyAdmin).

سوف يظهر معرف المستخدم user_id الخاص بك، اضغط على Edit لتظهر لك قائمة طويلة من الأرقام والأحرف بجانب user_pass، وهنا عليك حذف هذه الأحرف والأرقام وكتابة كلمة المرور التي تريدها مكانها وانتبه إلى أنّ كلمة المرور حساسة لحالة الأحرف. استخدمت في مثال كلمة rabbitseatcarrots لتكون كلمة المرور الجديدة، ثم اخترت MD5 لتعمية كلمة المرور من القائمة المنسدلة الظاهرة في الصورة.

تحقق من كلمة مرورك الجديدة وأنك اخترت MD5.

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

تغيير كلمة المرور من خلال FTP

يوجد طريقة سهلة لإعادة ضبط كلمة المرور من خلال FTP إن كنت تستخدم حساب المدير حيث عليك الدخول لموقعك من خلال FTP لتحميل ملف functions.php للقالب النشط. عليك الآن تحرير الملف وإضافة الشيفرة التالية تمامًا بعد بداية الملف بعد وسم ‎<?php:

wp_set_password( 'password', 1 );

أدخل كلمة مرورك الجديدة لحساب المدير مكان password والرقم 1 يُشير لمعرف حساب المدير ضمن جدول wp_users ثم ارفع الملف المُعدّل إلى موقعك وحاول تسجيل الدخول من جديد باستخدام كلمة المرور الجديدة وتذكر أنه حالما تتمكن من تسجيل الدخول للموقع عليك إزالة الشيفرة السابقة كونها تُهيئ كلمة مرورك عند كل تحميل لأي صفحة ضمن الموقع.

تغيير كلمة المرور من خلال واجهة WP CLI

إن WP CLI عبارة أداة أوامر سطرية لإدارة تثبيت ووردبريس، ولاستخدامها عليك التوجه إلى مسار ووردبريس وكتابة wp user list لعرض جميع المستخدمين. ابحث الآن عن معرف المستخدم الذي تريد تعديله واستخدم الشيفرة التالية لإنجاز عملية التعديل:

wp user update 1 --user_pass=$UP3RstrongP4$w0rd

وتذكر استبدال الرقم 1 بمعرف المستخدم الذي تريد تعديله.

استخدام شيفرة الطوارئ لإعادة ضبط كلمة المرور

إن لم تعمل أي من الحلول السابقة عليك تجريب شيفرة الطوارئ لإعادة ضبط كلمة المرور وانتبه أن هذه الشيفرة ليست عبارة عن إضافة بل هي شيفرة PHP.

إن أردت استخدام هذه الطريقة، انسخ شيفرة أو سكربت الطوارئ من سكربت الطوارئ لكلمة المرور وضعها في ملف يُدعى emergency.php ضمن المسار الرئيسي لتثبيت ووردبريس، وهو المسار نفسه الذي يتضمن الملف wp-config.php.

افتح الرابط http://example.com/emergency.php ضمن متصفحك، وأدخل اسم المستخدم لحساب المدير كما هو مطلوب (عادة يكون admin) وكلمة المرور الجديدة ثم اضغط على Update Options، وسوف تُعرض لك رسالة تخبرك بتغيير كلمة المرور وسوف يُرسل لك بريد إلكتروني لحساب المدير يتضمن تغيير كلمة المرور.

احذف ملف emergency.php من خادمك بعد تغيير كلمة المرور، ولا تبقه على خادمك كي لا يستخدمه شخص آخر لتغيير كلمة مرورك والدخول لموقعك.

بعض التحذيرات في حال استخدام هذه الآلية:

1. تتطلب شيفرة الطوارئ لإعادة ضبط كلمة المرور أن تعلم اسم مستخدم حساب المدير.
2. تعمل هذه الشيفرة على تحديث كلمة مرور المدير وتُرسل بريدًا إلكترونيًا لعنوان البريد الإلكتروني للمدير.
3. حتى إن لم تستقبل أي بريد إلكتروني سوف تتغير كلمة المرور بجميع الأحوال.
4. لا تحتاج تسجيل الدخول لاستخدام هذه الشيفرة. (فإن كنت تستطيع الدخول لن تكون بحاجة لاستخدام هذه الشيفرة)
5. عليك وضع هذه الشيفرة ضمن المسار الرئيسي لتثبيت ووردبريس أي لا تضعها ضمن مجلد إضافات ووردبريس.
6. لأسباب أمنية عليك مسح هذه الشيفرة عند الانتهاء من استخدامها.

إليك شيفرة أخرى لإعادة ضبط كلمة المرور يُمكن استخدامها بدون معرفة اسم المستخدم أو البريد الإلكتروني.

ترجمة -وبتصرف- للمقال Resetting Your Password من موقع ووردبريس.

اقرأ أيضًا

• تعلم ووردبريس
• الدليل الشامل لتأمين كلمة سر الوردبريس
• كيفية تغيير وتهيئة كلمة المرور في ووردبريس
• كيفية الوصول لصفحة تسجيل الدخول في ووردبريس
• مشاكل تسجيل الدخول إلى موقع ووردبريس

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

• الشاشة البيضاء
• خطأ الخادم الداخلي
• خطأ في إنشاء اتصال مع قاعدة البيانات
• فشل التحديث التلقائي
• نفاذ زمن الاتصال
• نمط الصيانة الذي يلي التحديث
• أخطاء PHP أو أخطاء قاعدة بيانات MySQL

تعطيل جميع الإضافات دون الوصول للوحة تحكم ووردبريس

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

استخدم phpMyAdmin لتعطيل جميع الإضافات.

1. ابحث ضمن جدول wp_options عن السطر active_plugins ضمن عمود options_name.
2. غير قيمة الحقل option_value إلى a:0:{}‎

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

نفذ ما يلي باستخدام اتصال FTP مدير ملفات الاستضافة:

1. توجه إلى المجلد wp-contents
2. أعد تسمية مجلد الإضافات plugins إلى plugins_old
3. ادخل إلى لوحة تحكم ووردبريس ثم توجه إلى الإضافات ‎/wp-admin/plugins.php وهذا سوف يعطل أي إضافة مفقودة.
4. أعد تسمية المجلد plugins_old إلى plugins

كيفية التخلص من رسالة الموقع في الصيانة التي تظهر بعد التحديث التلقائي

يعمل ووردبريس على إضافة ملف اسمه ‎.maintenance ضمن المجلد الرئيسي للمدونة وذلك كجزء من عملية التحديث التلقائي -المجلد الذي يحتوي مجلد wp-admin، ووجود هذا الملف سيظهر للزوار الرسالة التالية والتي تعني أن الموقع غير متاح حاليًا لأعمال الصيانة:

اقتباس

"Briefly unavailable for scheduled maintenance. Check back in a minute".

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

أُصدر تحديث جديد لكن مدونتي لا ترى أن هذا الإصدار متوفر

يظهر إشعار بتوفر نسخة جديدة من ووردبريس عند إطلاق إصدار جديد ويُعرض هذا الإشعار في أعلى لوحة تحكم ووردبريس يقول ووردبريس x.x.x متاحة! يرجى التحديث الآن. لن تظهر هذه الرسالة في جميع المدونات في نفس الوقت، حيث أن مدونتك مبرمجة لتتحقق من التحديثات كل 12 ساعة وبالتالي فإن توقيت التحقق لكل مدونة عشوائي، لذا إن كانت مدونتك تحققت من التحديثات قبل إصدار التحديث بدقائق فهذا يعني أنك لن ترى هذه الرسالة إلا بعد 12 ساعة لاحقة.

إن أردت لمدونتك أن تتحقق الآن عن وجود تحديثات تستطيع حذف الخيار update_core ضمن جدول wp_options، كما أن لكل إضافة وقالب دورة التحقق الخاصة بها التي يتحكم بها الخيارين update_plugins و update_themes ضمن جدول wp_options.

زوال تعديلات مخصصة على قالب ووردبريس بعد التحديث التلقائي الأخير

ينسخ تحديث نواة ووردبريس جميع الملفات الجديدة ويستبدل بها الملفات القديمة لذا إن أجريت تعديلات على ملفات ضمن قالب ووردبريس الافتراضي مثل تعديل الملف wp-content/themes/twentysixteen/style.css فإن هذه التغييرات سوف تختفي ويحل محلها النسخة الجديدة من الملف.

انتبه إلى أن تحديث نواة ووردبريس يُطبق على قائمة بالملفات القديمة المعرفة ضمن wp-admin/includes/update-core.php ويحذفها، وأي ملف ليس ضمن هذه القائمة وليس ضمن توزيعة الإصدار الجديد لن تتأثر.

تذكر أنه عليك أخذ نسخة احتياطية عن ملفات ووردبريس وقاعدة البيانات الخاصة به قبل التحديثات سواء التلقائية أو اليدوية كما هو مشروح في النسخ الاحتياطية لووردبريس.

الطريقة الأفضل لتعديل ملفات القالب الافتراضي هي باستخدام قالب ابن Child Theme الذي يتطلب منك المزيد من العمل بعض الشيء لكنه يستحق ذلك لأن تعديلات سوف تكون بأمان عند تحديث القالب الأب.

كيفية إصلاح جدول قاعدة بيانات MySQL

من الضروري كل فترة إجراء إصلاح لجدول أو أكثر لقاعدة بيانات MySQL، ووفقًا لكيفية إصلاح جداول MyISAM في dev.mysql.com هناك عدة أسباب لإصلاح الجدول بما فيها الأخطاء مثل:

- "tbl_name.frm is locked against change"
- "Can’t find file tbl_name.MYI (Errcode: nnn)"
- "Unexpected end of file"
- "Record file is crashed"
- "Got error nnn from table handler"

إليك خطوات إصلاح جدول في قاعدة بيانات MySQL باستخدام phpMyAdmin:

1. ادخل لحساب الاستضافة
2. ادخل إلى phpMyAdmin
3. اختر قاعدة البيانات المُصابة أما إن كان لديك قاعدة بيانات فسوف تكون اختيرت تلقائيًا.
4. ستجد قائمة بجداول قاعدة البيانات ضمن اللوحة الرئيسية. ضع علامة ضمن الصناديق بجانب الأعمدة التي تحتاج إصلاح.
5. أسفل النافذة أي أسفل قائمة الجداول سوف تجد قائمة منسدلة. اختر Repair Table

تذكر أنه يُنصح بامتلاك نسخة احتياطية عن قاعدة البيانات في جميع الأوقات. ألق نظرة على النسخ الاحتياطية لووردبريس.

لا تصل رسائل البريد الإلكتروني الخاصة بكلمات المرور

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

الأسباب والحلول المقترحة، يستخدم ووردبريس دالة mail()‎ القياسية والتي تستخدم sendmail حيث لا حاجة لمعلومات الحساب، وهذه ليست مشكلة عادةً إن كنت تستخدم خدمة استضافة لكن إن كنت تستخدم بريدك الخاص ولا تمتلك خادم SMTP عندها لن يُرسل البريد الإلكتروني. إن كنت تستخدم نظام لينكس عندها يجب أن يكون لديك postfix أو sendmail على خادمك. يتعين عليك ضبطهما فقط (ابحث ضمن شبكة الإنترنت عن كيفية عمل ذلك). إن كنت لا تريد خوض عناء ضبط خادم البريد الإلكتروني ضمن خادمك ربما تجد msmtp مفيدًا كونه يوفر طريقة سهلة وآمنة للحصول على بريد إلكتروني ضمن نظامك. تستطيع ضمن نظام ويندوز استخدام محاكي sendmail مثل Glob SendMail.

خاص بمستضيف خادم ويندوز

تحقق من إعدادات Relay ضمن خادم SMTP الافتراضي وامنح وصولًا إلى 127.0.0.1 ثم اضبط إعدادات SMTP ضمن ملف php.ini على نفس عنوان IP، واضبط أيضًا smtp_port إلى 25.

تأكد من استخدام عنوان استقبال صحيح

افتراضيًا يملأ مرسل البريد الإلكتروني في ووردبريس حقل المرسل بالبريد الخاص بموقعك مثل wordpress@yourdomain.com وحقل الاسم بالاسم WordPress.

لا مشكلة في هذا إن كان عنوان البريد الإلكتروني صالحًا، فعلى سبيل المثال إن كان بريدك الإلكتروني الحقيقي هو wordpress@yourdomain.com عندها يجب على مُضيف تمرير البريد الإلكتروني لاستقباله. سوف يُرسل بريدك غالبًا طالما أن النطاق yourdomain.com مُجهر لإرسال واستقبال البريد الإلكتروني حتى إن لم يكن wordpress صندوق بريد إلكتروني صالح، لكن ضبط بريدك الإلكتروني الحقيقي على أنه من: عنوان مثل wpgod@gmail.com ربما لن يُرسل البريد الإلكتروني لأن gmail.com ليس نطاقًا يديره خادم البريد الإلكتروني.

يعامل البريد على أنه بريد مهمل

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

إطار عمل سياسة المُرسل Sender Policy Framework

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

مفتاح النطاق المُحدد للبريد Domain Key Identified Mail

هذا النظام مُستخدم أيضًا حيث تستطيع استخدام كل من SPF وDKIM -اختصار إلى Domain Key Identified Mail- ضمن نفس الرسالة، وكما هو الحال في SPF تستطيع التحقق من كون خادم البريد الإلكتروني المستقبل تعرف على مفتاح نطاق مُضيفك من خلال فحص ترويسة البريد الإلكتروني. هناك احتمال كبير أن مفتاح التوقيع لم يُضف مما يُشير إلى أن المُضيف اختار ألا يستخدم هذا البروتوكول.

إن كنت تستطيع تعديل سجلات DNS وخادم البريد الإلكتروني التابع لنطاقك عندها تستطيع ضبط معلومات DKIM بنفسك، وتستطيع البحث على الإنترنت عن كيفية عمل ذلك.

لم لا أستطيع رؤية منشوراتي؟

قد تواجه مشكلة بعدم رؤية المنشورات في موقع ووردبريس وكل ما تراه هو نعتذر، لا يوجد منشورات توافق معاييرك.

يُمكن أن تُحل هذه المشكلة من خلال حذف ملفات التخزين وملفات تعريف الارتباط ضمن متصفحك.

ظهور تحذير بأن الترويسات أرسلت بالفعل

تظهر لك رسالة تحذير ضمن متصفحك تقول:

Warning: Cannot modify header information - headers already sent by
(output started at

ومعناه أنه لا يمكن تعديل معلومات الترويسة، أرسلت الترويسات مسبقًا.

يظهر هذا التحذير عادةً بسبب وجود فراغات أو أسطر فارغة أو ما شابهها قبل وسم ‎<?php أو بعد وسم الإغلاق ‎?>‎ غالبًا ضمن ملف wp-config.php. ينطبق هذا الأمر على بعض الملفات الأخرى أيضًا لذا عليك التحقق من رسالة الخطأ كونها تذكر اسم الملف حيث ظهر هذا الخطأ (ألق نظرة على "تفسير رسالة الخطأ" في الأسفل). إن استبدال الملف الذي يتضمن المشكلة بنسخة من آخر نسخة احتياطية هي الفرصة الأكبر لك لحل هذه المشكلة لكن في حال استمرت المشكلة في الظهور يوجد عدة خطوات تستطيع اتباعها.

في هذه الحالة اتبع الخطوات التالية:

1. عليك تنزيل الملف المذكور في رسالة الخطأ باستخدام اتصال FTP أو باستخدام مدير الملفات الذي توفره استضافتك.
2. افتح هذا الملف باستخدام محرر نصي (لا تستخدم برنامج Microsoft Word أو ما يُشابهه بل استخدم Notepad أو BBEdit).
3. تحقق أن المحارف الأولى ليست عبارة عن فراغات أو سطور فارغة.
4. قبل حفظ الملف تحقق من كون ترميز الملف ليس UTF-8 BOM حيث تستطيع استخدام الترميز UTF-8 أو أي ترميز لا ينتهي باللاحقة BOM.

للتحقق من نهاية الملف اتبع ما يلي:

1. ضع مؤشر الفأرة بين إشارة ? وإشارة <
2. اضغط الآن على مفتاح الحذف ضمن حاسوبك. بالنسبة لمستخدمي ماك عليكم الانتباه أن زر الحذف Delete يحذف المحارف إلى يمين المؤشر.
3. استمر بالضغط على هذا الزر.
4. على الأقل لمدة 15 ثانية.
5. اكتب المحرف < واحفظ الملف دون الضغط على أي زر آخر.
6. إن ضغطت على أي زر آخر سوف تعود هذه المشكلة للظهور.
7. لا تُضف أي شيفرة برمجية ضمن كتل غير ضرورية بل أضفها ضمن كتلة PHP واحدة.

مثال خاطئ:

<?php some code; ?> <?php some other codes; ?>

مثال صحيح:

<?php code; some other code; ?>

ارفع الملف إلى الخادم بعد الانتهاء من تعديله وحفظه.

ملاحظة: تحقق أيضًا من ترميز الملف، فإن كان الملف مُرمزًا باستخدام UTF-8 BOM عليك استخدام ترميز آخر لا يتضمن اللاحقة BOM.

إن كانت رسالة الخطأ تتضمن ما يلي:

Warning: Cannot modify header information - headers already sent by (output started at /path/blog/wp-config.php:34) in /path/blog/wp-login.php on line 42

هذا يعني أن المشكلة موجودة في السطر 34 للملف wp-config.php وليس السطر 42 للملف wp-login.php، ففي هذا المثال السطر 42 من الملف wp-login.php هو المتأثر بوجود مسافة بيضاء زائدة ضمن السطر 34 من ملف wp-config.php.

إن كانت رسالة الخطأ تتضمن ما يلي:

Warning: Cannot modify header information - headers already sent by (output started at /path/wp-admin/admin-header.php:8) in /path/wp-admin/post.php on line 569

عندها المشكلة موجودة في السطر 8 للملف admin-header.php وليس السطر 569 للملف post.php، ففي هذا المثال السطر 569 للملف post.php هو المتأثر بالمسافة البيضاء الموجودة ضمن السطر 8 من الملف admin-header.php.

لماذا لا يعمل زر "نشر" أو "حفظ كمسودة"؟

لحل هذه المشكلة أو مشكلة مشابهة عليك تعطيل إضافاتك واحدة تلو الأخرى حتى تعثر على مصدر المشكلة، وعادةً تظهر مثل هذه المشاكل بسبب محاولة إضافة أو أكثر استخدام نفس الموارد (مثل أدوات jQuery أو أدوات تعتمد على Java).

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

كيفية إصلاح الخطأ 404 عند استخدام الروابط الدائم

إن ظهر الخطأ 404 عند استخدام الروابط الدائمة مثل اليوم والاسم ضمن نافذة الروابط الدائمة في قسم الإعدادات للوحة تحكم ووردبريس فهذا ربما لأن وحدة mod_rewrite غير نشطة أو غير مثبتة، والحل يكون بتفعيل هذه الوحدة لخادم أباتشي Apache. تحقق من ملف apache\conf\httpd.conf وابحث عن السطر التالي:

# LoadModule rewrite_module modules/mod_rewrite.so 

واحذف إشارة # في بداية السطر ثم أوقف خادم أباتشي Apache وأعد تشغيله.

ملاحظة: ربما سوف تحتاج للتواصل مع مزود الاستضافة لتفعيل وضع mod_rewrite.

ألق نظرة على استخدام الروابط الدائمة.

لماذا حساب المدير لا يملك صلاحيات تعديل المنشورات كمستخدم مؤلف؟

لا تعلم ما سبب هذه المشكلة بالضبط إذًا عليك اتباع أحد الطريقتين التاليتين لمحاولة حل المشكلة.

تحل هذه الخطوات هذه المشكلة عادةً:

1. أنشئ حساب مدير جديد (مثل newadmin) برتبة مدير.
2. سجل دخول على أنك المستخدم newadmin
3. خفض رتبة المدير السابق admin لمشترك واحفظ التغييرات.
4. أعد رفع مرتبة المدير السابق admin إلى مدير واحفظ التغييرات.
5. سجل دخول بحساب المدير القديم.

إن لم تعمل الطريقة السابقة جرب الطريقة التالية:

1. أنشئ اسم مستخدم جديد (مثل newadmin) برتبة مدير.
2. سجل دخول على أنك المستخدم newadmin
3. احذف حساب المدير السابق وعيين أي منشورات للمدير الجديد newadmin
4. أنشئ حساب admin برتبة مدير
5. سجل دخول بحساب المستخدم admin
6. احذف المستخدم newadmin وعيّن المنشورات للمستخدم admin

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

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

اقرأ أيضًا

• تعلم ووردبريس
• اكتشاف وإصلاح أخطاء شاشة الموت البيضاء في ووردبريس
• كيفية إصلاح الخطأ 502 Bad Gateway في ووردبريس
• تعارض إضافات ووردبريس: كيف تكتشفها وماذا تفعل حيالها
• كيفية استخدام مدقق خريطة الموقع لاستكشاف الأخطاء وإصلاحها في ووردبرس

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

شاشة الموت البيضاء

يُمكن أن تؤدي أخطاء PHP وأخطاء قاعدة البيانات لظهور شاشة بيضاء فارغة لا تتضمن أي معلومات والمعروفة ضمن مجتمع ووردبريس بشاشة الموت البيضاء. يوجد عدة أسباب تؤدي لظهور هذه الشاشة البيضاء سوف أذكرها قبل التطرق للإجراءات التي تستطيع اتباعها لحل هذه المشكلة.

• تُسبب أحد الإضافات مشاكل عدم توافقية. إن كنت تستطيع الوصول للوحة تحكم المدير عليك أن تُجرب تعطيل جميع الإضافات ثم أعد تفعيلها واحدة تلو الأخرى. إن كنت لا تستطيع الوصول للوحة تحكم المدير عليك الدخول للموقع باستخدام اتصال FTP ثم تحديد موقع المجلد wp-content/plugins وإعادة تسميته إلى plugins_old مثلًا. هذا سوف يُعطل جميع الإضافات، وتستطيع قراءة المزيد عن طريقة تعطيل الإضافات يدويًا في حل مشاكل الأسئلة المتكررة.
• يُمكن أن يُسبب القالب الذي تستخدمه هذه المشكلة: هذا السبب مُرجح إن واجهتك مشكلة الصفحة البيضاء مباشرةً بعد تفعيل قالب جديد أو بعد إنشاء موقع جديد ضمن شبكة ووردبريس. ادخل للوحة تحكم ووردبريس وفعّل قالب ووردبريس الافتراضي (مثلًا قالب Twenty Seventeen). إن كنت لا تستطيع الدخول للوحة تحكم ووردبريس عندها عليك الوصول لموقعك باستخدام اتصال FTP والتوجه للمجلد /wp-content/themes/ ثم إعادة تسمية مجلد القالب الفعّال.

توفر ميزة إصلاح الأخطاء بعض المعلومات الإضافية.

خطأ الخادم الداخلي Internal Server Error

يوجد مجموعة من الأسباب التي تؤدي لحصول خطأ خادم داخلي، إليك بعض الخطوات التي يُمكن أن تحل هذه المشكلة.

• إن المشكلة الأكثر تكرارًا هي ملف ‎.htaccess تالف. عليك الدخول للمسار الرئيسي للموقع باستخدام FTP وإعادة تسمية ملف htaccess للاسم htaccess_old ثم حاول الدخول لموقعك مرة أخرى لترى إن حُلّت المشكلة وفي حال عاد الموقع للعمل عليك ألا تنسى التوجه إلى تبويب الروابط الدائمة في قسم الإعدادات لتهيئة الروابط الدائمة وإنشاء ملف htaccess جديد لك.
• جرب تعطيل جميع الإضافات لترى إن كان سبب المشكلة هو أحد الإضافات، وإن كنت غير قادر على الوصول للوحة تحكم ووردبريس عليك تعطيل الإضافات باستخدام اتصال FTP باتباع الخطوات التالية.
• غيّر القالب المستخدم لقالب ووردبريس الافتراضي (مثل قالب Twenty Seventeen) لإقصاء أي مشكلة مرتبطة بالقالب.
• ارفع حدود ذاكرة PHP.
• جرب إعادة رفع مجلدي wp-admin وwp-includes من تثبيت جديد لووردبريس.

خطأ إنشاء اتصال بقاعدة البيانات

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

معلومات غير صحيحة في ملف wp-config.php

يظهر خطأ إنشاء اتصال بقاعدة البيانات عادةً بسبب خطأ في ملف wp-config.php، لذا عليك الدخول لهذا الملف باستخدام اتصال FTP والتأكد من أن المعلومات التالية صحيحة.

• اسم قاعدة البيانات
• اسم مستخدم قاعدة البيانات
• كلمة مرور قاعدة البيانات
• مُضيف قاعدة البيانات

تعلم أكثر عن تحرير ملف wp-config.php. 

إن كنت واثقًا أن جميع المعلومات صحيحة، تستطيع تجريب تهيئة كلمة مرور MySQL يدويًا.

مشاكل ضمن الاستضافة

الخطوة التالية هي التواصل مع الاستضافة حيث يُمكن أن تسبب مشاكل الاستضافة التالية هذا الخطأ.

• استهلكت قاعدة البيانات المصادر المخصصة لها لذا أوقفت عن العمل.
• الخادم متوقف.

تواصل مع مزود الاستضافة لمعرفة إن كان أي من الأسباب السابقة هو ما يؤدي لظهور رسالة خطأ إنشاء اتصال بقاعدة البيانات.

الموقع مُخترق

إن تأكدت خلو ملف wp-config.php من الأخطاء وتواصلت مع الاستضافة وتأكدت أيضًا من عدم وجود أي مشاكل لديهم، فمن المحتمل أن يكون موقعك تعرض للاختراق.

تفحّص موقعك باستخدام خدمة Sucuri للتحقق من كونه غير مخترق، وإن كان مُخترقًا عليك الاطلاع على مقال موقعي تعرض للاختراق.

فشل عملية الترقية التلقائية

يحدث في بعض الحالات أن تفشل ميزة ووردبريس للتحديث التلقائي حيث تتضمن الأعراض ما يلي.

• صفحة بيضاء فارغة لا تتضمن أي معلومات.
• تحذير يُشير أن التحديث فشل.
• رسالة خطأ من PHP.

يُمكن أن تفشل ميزة ووردبريس للتحديث التلقائي بسبب مشكلة في الاتصال مع ملفات ووردبريس الرئيسية أو مشكلة باتصال الإنترنت عند إجراء التحديث أو صلاحيات ملف غير صحيحة.

اطلع على مقال التحديث اليدوي لتحديث ووردبريس يدويًا.

نفاد زمن الاتصال Connection Timed Out

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

• تعطيل جميع الإضافات. إن حل تعطيل جميع الإضافات المشكلة على موقعك عليك تفعيلها واحدة تلو الأخرى لمعرفة أي منها هو سبب المشكلة، وإن كنت لا تستطيع الوصول للوحة تحكم ووردبريس اقرأ عن كيفية تعطيل الإضافات يدويًا.
• استخدم قالب ووردبريس الافتراضي. هذه الخطوة تستبعد أي مشاكل مرتبطة بالقالب.
• ارفع حدود الذاكرة في ملف wp-config.php. إن كنت تستخدم استضافة مشتركة، ربما عليك الطلب من مزود الاستضافة رفع حدود الذاكرة لك.
• ارفع زمن التنفيذ الأقصى ضمن ملف php.ini هذا ليس ملفًا تابعًا لووردبريس لذا إن كنت لا تملك أي معلومات عن كيفية تعديله عليك التواصل مع مزود الاستضافة وطلب زيادة زمن التنفيذ الأقصى. ألق نظرة على التعليمات الآتية لزيادة زمن التنفيذ الأقصى.

وضع الصيانة بعد التحديث

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

لإزالة هذه الرسالة عليك اتباع ما يلي:

1. الدخول لموقع ووردبريس باستخدام اتصال FTP.
2. حذف ملف ‎.maintenance الذي تجده في المسار الرئيسي لموقع ووردبريس.

تُنفذ بعض التغييرات لكن لا شيء يحصل

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

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

الروابط الدائمة وتعطل الصور

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

غالبًا ما تظهر هذه المشكلة في شبكة ووردبريس متعدد المواقع لكن يمكن أن تحصل أيضًا في الاستضافات المشتركة أو بعد نقل الموقع لاستضافة جديدة.

تستطيع تهيئة الروابط الدائمة من خلال التوجه إلى تبويب الروابط الدائمة ضمن قسم الإعدادات، وإن لم يعمل هذا الخيار عليك تعديل ملف ‎.htaccess يدويًا.

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>
# END WordPress

إن لم تملك خبرة في تعديل ملف ‎.htaccess عليك التواصل مع مزود الاستضافة وطلب تشغيل قاعدة mod_rewrite حيث تستطيع الاطلاع على مزيد من المعلومات في مقال استخدام الروابط الدائمة في ووردبريس.

أخطاء 404 للمنشورات المُخصصة

يُحتمل أن يظهر لك الخطأ 404 ضمن المنشورات المخصصة، عندها عليك محاولة ما يلي:

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

رسائل خطأ محددة

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

أخطاء PHP

يوجد فيما يلي بعض رسائل أخطاء PHP الشائعة.

التحذيرات والأخطاء الجسيمة

اقتباس

Cannot modify header information - headers already sent

هذه رسالة مفادها: "لا يمكن تعديل معلومات الترويسة - الترويسات أرسلت بالفعل" إن تلقيت تحذيرًا يفيد أن ووردبريس لا يستطيع تعديل معلومات الترويسة وأن الترويسات أرسلت، فهذا يعني عادةً وجود فراغات ومحارف قبل وسم البداية أو بعد وسم الإغلاق.

إن واجهتك هذه المشكلة بعد أن ثبتت ووردبريس ربما السبب خطأ في الشيفرة البرمجية ضمن ملف wp-config.php، سوف تُساعدك التعليمات المذكورة في قسم "المشاكل الشائعة أثناء التثبيت" من مقال كيفية تثبيت ووردبريس.

اقتباس

Call to undefined function

هذه رسالة خطأ مفادها: "استدعاء دالة غير معرفة".

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

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

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

اقتباس

Allowed Memory Size Exhausted

هذه رسالة خطأ مفادها: "لقد استنفدت حجم الذاكرة المسموح به".

يعني هذا الخطأ أن تثبيت ووردبريس لا يمتلك ذاكرة كافية لتنفيذ ما تريد، تستطيع تجريب الخطوات التالية:

• رفع حدود الذكرة في ملف wp-config.php.
• رفع حدود الذاكرة من خلال تعديل ملف php.ini وهذا ملف غير موجود ضمن تثبيت ووردبريس لذا إن كنت غير خبير في استخدامه عليك التواصل مع الاستضافة لزيادة حدود الذاكرة.

اقتباس

Maximum Execution Time Exceeded

هذه رسالة خطأ مفادها: "لقد تجاوزت زمن التنفيذ الأقصى".

ربما تظهر لك رسالة مثل "Maximum execution time of 30 seconds exceeded" أو "Maximum execution time of 60 seconds exceeded"، وهذا يعني أن أحد العمليات تستغرق وقتًا أطول لإكمال مهمتها وبالتالي فإنها تستنفذ الزمن المسموح لها. يوجد عدة طرق لإصلاح هذا الخطأ.

الطريقة الأولى هي تعديل ملف ‎.htaccess، وقبل ذلك، تأكد من أخذ نسخة احتياطية منه قبل البدء بتحريره ثم أضف السطر التالي له.

php_value max_execution_time 60

أما الطريقة الثانية فهي بتحرير ملف php.ini بإضافة السطر التالي فيه:

max_execution_time = 60

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

أخطاء التحليل

وتنقسم الأخطاء المدرجة هذا النوع إلى الأخطاء التالية:

أخطاء الصيغة SYNTAX ERROR

هذا يعني أنك أخطأت في مكان ما عند إنشاء بنية PHP فربما على سبيل المثال:

• نسيت وضع الفاصلة المنقوطة ; في نهاية التعليمة.
• استخدمت علامات اقتباس مائلة بدلًا من الصحيحة ".
• نسيت إغلاق قوس مفتوح

يخبرك هذا الخطأ عندما يظهر أين وقع الخطأ وفي أي سطر تقريبًا (ربما لا يكون دقيقًا بحيث يعطيك السطر الذي وقع فيه الخطأ تمامًا لذا تحقق من السطور التالية أو السابقة له) ضمن الشيفرة البرمجية.

غير متوقع Unexpected

إن ظهر لك خطأ يتضمن "parse error: unexpected"، فهذا يعني عادةً أنك نسيت تضمين محرف ما، والمحارف الشائعة النسيان في مثل هذه الأخطاء هي:

• Unexpected '='‎: يعني أنك نسيت استخدام $ عند الإشارة إلى متغير.
• Unexpected '('‎: يعني أنك نسيت تضمين قوس البداية.‎‎
• Unexpected ')'‎: يعني أنك نسيت تضمين قوس النهاية (إغلاق قوس مفتوح).
• Unexpected 'T_String'‎: يعني أنك نسيت استخدام علامات التنصيص أو الفاصلة المنقوطة في نهاية السطر السابق.
• Unexpected 'T_ELSE'‎: يعني أنك استخدمت التعبير Else بدون وجود تعبير if سابق له.

استخدام ثابت غير معرف Use of an undefined constant

هذا الخطأ يعني أنك أغفلت محرفًا ما ويمكن أن يكون أحد المحارف التالية:

• إغفال المحرف $ عند الإشارة إلى متغير
• إغفال علامات التنصيص ضمن المصفوفة

أخطاء قاعدة البيانات

يمكن أن تظهر الأخطاء التالية بسبب أمور مرتبطة بقاعدة بيانات ووردبريس.

Error 13 - Cannot Create/Write to File

يوجد عدة عوامل تُسبب ظهور هذا الخطأ نعرض رسائل الخطأ المحتملة منها.

اقتباس

MySQL cannot create a temporary file

متغير MySQL الذي يُدعى tmpdir مضبوط لمسار لا يمكن الكتابة عليه عند استخدام PHP للوصول لقاعدة بيانات MySQL. للتحقق من هذا عليك الوصول إلى قاعدة البيانات MySQL ضمن لوحة الأوامر ثم كتابة show variable، وسوف تحصل على قائمة طويلة واحدة منها تتضمن tmpdir = /somedir/‎ (أيًا كانت إعداداتك).

لحل هذه المشكلة عليك استبدال قيمة المتغير tmpdir ليُشير إلى مسار قابل للكتابة.

1. ابحث عن الملف my.cnf حيث تجده في أنظمة لينكس ضمن المسار /etc/ أما في أنظمة ويندوز عليك البحث عن my.ini.
2. عليك فتح هذا الملف عند العثور عليه باستخدام محرر نصي ثم ابحث عن قسم [mysqld].
3. ضمن هذا القسم ابحث عن السطر tmpdir فإن كان هذا السطر موجودًا تعليق (أي يوجد # في بداية السطر) عليك حذف إشارة # وتعديل السطر ليتضمن tmpdir = /writeable/dir حيث أن ‎/writeable/dir هو مسار قابل للكتابة، ويستخدم البعض المسار ‎/tmp أو تستطيع استخدام ‎/var/tmp أو ‎/usr/tmp في لينكس أو C:/Windows/tmp في ويندوز.
4. احفظ الملف.
5. أغلق MySQL من خلال كتابة الأمر mysqlshutdown -u -p shutdown.
6. شغّل MySQL من خلال التوجه إلى مسار MySQL وكتابة ‎./bin/safe_mysqld &‎. يكون مسار MySQL عادةً هو ‎/usr/local أو ‎/usr/‎ ضمن أنظمة لينكس.

اقتباس

The file permissions are incorrect

هذه رسالة خطأ مفادها حصول خطأ في أذونات الملف، لذا عليك تصحيح أذونات الملف.

إن لم تفهم أي مما سبق ولديك شخص يدير نظامك عندها عليك عرض ما سبق له وهو سوف يعلم ما يفعله.

CREATE Command Denied to User

يحدث هذا الخطأ عندما لا يمتلك المستخدم المُسند لقاعدة البيانات صلاحيات كافية لإجراء أمر ما أو إنشاء أعمدة وجداول ضمن قاعدة البيانات. تحتاج الدخول للوحة التحكم cPanel أو Plesk لإسناد صلاحيات كافية لمستخدم قاعدة البيانات.

أو تستطيع إنشاء مستخدم جديد وإسناده لقاعدة البيانات ولا تنسى في هذه الحالة تحديث ملف wp-config.php.

Error 28

يمكن أن يظهر بسبب:

• لا يوجد لديك مساحة كافية ضمن المجلد ‎/tmp (حيث يوجد مسار tmpdir) أو
• يوجد لديك الكثير من الملفات في ‎/tmp (حتى عند وجود مساحة فارغة) أو
• أن مساحة ملفات التخزين المؤقت ضمن الخادم ممتلئة.

هذا الخطأ مرتبط بMySQL ولا علاقة مباشرة له مع ووردبريس لذا عليك التواصل مع الاستضافة لحله. أخبر بعض المستخدمين أن تشغيل الأمر repair table أصلح المشكلة.

Error 145

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

عليك دومًا أخذ نسخة احتياطية عن قاعدة البيانات قبل إجراء أي عملية عليها.

إن لم تستخدم phpMyAdmin من قبل أو كنت غير معتاد على استعماله تستطيع التواصل مع الاستضافة وطلب تشغيل أوامر CHECK/REPAIR على قاعدة بياناتك.

Unknown Column

يُمكن أن يتسبب في هذا الخطأ عمود مفقود في قاعدة البيانات، فمثلًا إن حدثت ووردبريس ثم حاولت التحديث يدويًا مرة ثانية. لتحديث ووردبريس يدويًا ألق نظرة على مقال التحديث.

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

ترجمة -وبتصرف- للمقال Common WordPress Errors من موقع ووردبريس.

اقرأ أيضًا

• تعلم ووردبريس
• كيفية إصلاح أخطاء ووردبريس
• كيفية تنقيح أخطاء ووردبريس بخطوات احترافية
• الأخطاء العشرة الأكثر شيوعًا لدى مطوري ووردبريس
• نظرة على نافذة صحة موقع ووردبريس

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

يُمكن استخدام هذه الخيارات لغير المبرمجين أو المستخدمين العاديين لعرض معلومات تفصيلية عن الأخطاء.

مثال عن ملف wp-config.php لاستكشاف الأخطاء

سوف تُسجل الشيفرة التالية إن أضفتها ضمن ملف wp-config.php جميع الأخطاء والملاحظات والتحذيرات ضمن ملف يُدعى debug.log في مسار wp-content، كما أنها سوف تمنع الأخطاء من الظهور عند توليد صفحات موقعك.

// Enable WP_DEBUG mode
define( 'WP_DEBUG', true );

// Enable Debug logging to the /wp-content/debug.log file
define( 'WP_DEBUG_LOG', true );

// Disable display of errors and warnings
define( 'WP_DEBUG_DISPLAY', false );
@ini_set( 'display_errors', 0 );

// Use dev versions of core JS and CSS files (only needed if you are modifying these core files)
define( 'SCRIPT_DEBUG', true );

ملاحظة: عليك إضافة هذه الشيفرة قبل عبارة /* That's all, stop editing! Happy blogging. */ ضمن ملف wp-config.php.

وضع تنقيح الأخطاء WP_DEBUG

WP_DEBUG عبارة عن ثابت PHP (متغير شامل دائم) يُمكن استخدامه لتفعيل نمط تنقيح الأخطاء واستكشافها في ووردبريس، حيث تكون قيمته الافتراضية false وعادةً تُضبط للقيمة true ضمن الملف wp-config.php عند تطوير نسخ من ووردبريس.

// هذا يفعل وضع تنقيح الأخطاء
define( 'WP_DEBUG', true );

// هذا يعطل وضع تنقيح الأخطاء
define( 'WP_DEBUG', false );

ملاحظة: إن قيم true و false ضمن المثال غير مُحاطة بعلامة تنصيص ' لأنها قيمة منطقية، وإن ضبط الثوابت للقيمة 'false' سوف تُفسر على أنها true لأن علامتي التنصيص تحولها إلى سلسلة نصية بدلًا من أن تكون قيمة منطقية.

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

أخطاء PHP وتحذيراتها

سوف تُعرض أخطاء PHP وتحذيراتها وملاحظاتها عند تفعيل الوضع WP_DEBUG، وهذا لتعديل السلوك الافتراضي للغة PHP الذي يعرض فقط الأخطاء الفادحة و/أو يعرض شاشة الموت البيضاء عند وجود أخطاء.

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

الدوال والوسائط المُهملة

عند تفعيل وضع التنقيح WP_DEBUG سوف تظهر ملاحظات عن الدوال والوسائط المهملة ضمن ووردبريس والمستخدمة ضمن موقعك. وهي دوال أو وسائط ضمن الدوال لم تُزل بعد من نواة شيفرتك لكن مخطط لها أن تُحذف في المستقبل القريب وعادةً تُشير ملاحظات الدوال المهملة لوجود دوال جديدة يجب أن تستخدمها بدلًا من القديمة المستعملة.

سجل الأخطاء WP_DEBUG_LOG

يُرافق سجل الأخطاء WP_DEBUG_LOG تفعيل نمط استكشاف الأخطاء WP_DEBUG الذي يُسجل جميع الأخطاء في ملف debug.log، وهذا مفيد إن أردت مراجعة الملاحظات لاحقًا أو تحتاج الاطلاع على ملاحظات فاتتك أو لم تظهر على الشاشة (مثلًا خلال طلب AJAX أو عند تشغيل wp-cron).

انتبه إلى أن هذا الوضع يسمح لك بالكتابة على ملف السجل باستخدام دالة PHP المبينة ضمنه error_log()‎ التي يُمكن الاستفادة منها عند تنقيح أخطاء أحداث AJAX. فعند ضبط WP_DEBUG_LOG للقيمة true يُحفظ السجل في ملف debug.log ضمن مسار wp-content في ملفات نظامك، وتستطيع اختيار مسار آخر لحفظ التسجيلات.

define( 'WP_DEBUG_LOG', true );
-or-
define( 'WP_DEBUG_LOG', '/tmp/wp-errors.log' );

ملاحظة: لكي يعمل وضع التسجيل WP_DEBUG_LOG يجب تفعيل وضع التنقيح WP_DEBUG، وتذكر أنك تستطيع تعطيل وضع العرض WP_DEBUG_DISPLAY بشكل مستقل.

وضع عرض الأخطاء WP_DEBUG_DISPLAY

ثابت آخر يُرافق وضع التنقيح WP_DEBUG يتحكم بعرض أو عدم عرض الرسائل ضمن صفحات HTML والقيمة الافتراضية له هي true والتي تعرض الأخطاء والتحذيرات كما هي. تستطيع إخفاء هذه الأخطاء بضبط قيمة هذا الثابت إلى false، حيث يجب استخدام هذه القيمة بالتزامن مع وضع التسجيل WP_DEBUG_LOG لمراجعة الأخطاء لاحقًا.

define( 'WP_DEBUG_DISPLAY', false );

ملاحظة: لكي يعمل وضع العرض WP_DEBUG_DISPLAY يجب تفعيل وضع التنقيح WP_DEBUG، وتذكر أنك تستطيع تعطيل وضع التسجيل WP_DEBUG_LOG بشكل مستقل.

تنقيح ملفات CSS و JavaScript عبر الوضع SCRIPT_DEBUG

يعد SCRIPT_DEBUG ثابتًا مهمًا أيضًا يعمل على إجبار ووردبريس استخدام إصدار التطوير dev من ملفات CSS وجافاسكريبت JavaScript بدلًا من إصدار الإنتاج المختصر منها، وهذا مفيد عند اختبار تعديلات معينة لملفات ‎.css أو ‎.js والقيمة الافتراضية لهذا الثابت هي false.

define( 'SCRIPT_DEBUG', true );

حفظ استعلامات قاعدة البيانات عبر SAVEQUERIES

يحفظ هذا الثابت عندما يحمل القيمة true جميع استعلامات قاعدة البيانات ضمن مصفوفة ويُمكن عرض هذه المصفوفة لتُساعدك على تحليل هذه الاستعلامات، حيث يُحفظ كل استعلام مع الزمن الذي استغرقه للتنفيذ وما هي الدالة التي استدعاها.

define( 'SAVEQUERIES', true );

تُخزن المصفوفة ضمن المتغير العام ‎$wpdb->queries.

ملاحظة: يؤثر هذا على أداء الموقع لذلك عليك تعطيله عند انتهائك من البحث عن الأخطاء أو تحليل الاستعلامات.

استكشاف أخطاء الإضافات

يوجد العديد من إضافات استكشاف الأخطاء في ووردبريس والتي تعرض المزيد من المعلومات عن المكونات الداخلية سواء مكونات معينة أو عامة، وإليك بعض الأمثلة عنها:

• Query Monitor
• Debug Bar
• Log Deprecated Notices

استخدام المتصفح لتحليل أخطاء جافاسكريبت

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

سوف تتعرف في هذا القسم على كيفية تحليل مشاكل جافا سكريبت ضمن متصفحات مختلفة.

الخطوة الأولى: جرب أكثر من متصفح

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

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

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

الخطوة الثانية: تفعيل وضع SCRIPT_DEBUG

عليك تفعيل استكشاف الأخطاء وتنقيحها من خلال فتح ملف wp-config.php وإضافة السطر التالي قبل عبارة "That’s all, stop editing! Happy blogging" كما تحدثنا في الأعلى.

define('SCRIPT_DEBUG', true);

تحقق إن كنت ما تزال تواجه نفس المشكلة.

• حُلّت المشكلة - عطّل وضع اسكتشاف الأخطاء في الشيفرة البرمجية وأرسل تقريرًا بالمشكلة إلى فريق الدعم لتخبرهم أنك فعّلت اكتشاف أخطاء الشيفرة البرمجية وحُلّت المشكلة.
• ما زالت المشكلة موجودة - تابع الخطوة الثالثة.

الخطوة الثالثة: التشخيص

الآن وبما أنك تعرف المتصفحات التي تظهر عليها المشكلة تستطيع البدء بتشخيص المشكلة.

متصفح جوجل كروم ومتصفح Edge

أولًا، افتح أدوات المطور DevTools بالضغط على الاختصار CTRL + Shift + J (في أنظمة ويندوز ولينكس وكروم OS) والاختصار Command + Option + J (في أجهزة ماك) للانتقال مباشرةً إلى لوحة منصة أدوات المطور لجوجل كروم أو توجه إلى المزيد من الأدوات ثم أدوات مطوري البرامج واضغط على قسم Console.

ثانيًا، تعرف على الخطأ، فسوف تظهر الطرفية console فإن لم يُكتب فيها أي خطأ عليك إعادة تحميل الصفحة فمن المُحتمل أن يظهر الخطأ عند تحميل الصفحة، إذ توفر لك الطرفية معلومات عن الخطأ مثل نوعه وموقعه ورقم السطر انظر مثلًا.

متصفح فايرفوكس

أولًا، افتح أدوات المطور DevTools، بالضغط على الاختصار CTRL + Shift + K (في أنظمة ويندوز ولينكس وكروم OS) والاختصار Command + Option + K (في أجهزة ماك) للانتقال مباشرةً إلى لوحة منصة أدوات المطور لفايرفوكس أو توجه إلى أدوات أكثر ثم أدوات مطوري الوب واضغط على قسم Console.

ثانيًا، تعرف على الخطأ، فسوف تعرض الطرفية console الخطأ وإن لم يظهر لك أي خطأ عليك إعادة تحميل الصفحة فمن المُحتمل أن يظهر عند تحميل الصفحة، إذ توفر لك الطرفية معلومات عن الخطأ مثل نوعه وموقعه ورقم السطر.

متصفح Internet Explorer

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

ملاحظة: أوقف ووردبريس دعم الإصدار 11 من متصفح Internet Explorer في ووردبريس 5.8، لذا إن كنت تستخدمه حاليًا فالأفضل أن تستبدله بمتصفح متطور مثل جوجل كروم أو فايرفوكس أو سفاري أو مايكروسوفت إيدج.

أولًا، توجه إلى الصفحة التي تعاني فيها من الخطأ ثم ضمن متصفح IE توجه إلى الإعدادات ومنها اختر Developers Tools أو اضغط على F12 ثم اضغط على Console.

سوف تظهر طرفية الخطأ فإن لم يظهر لك أي خطأ عليك إعادة تحميل الصفحة فمن المُحتمل أن يظهر الخطأ عند تحميل الصفحة.

تعرض الصورة السابقة خطأ موجودًا في ملف jquery.js في السطر الثاني.

متصفح سفاري

فعل أولًا أدوات المطور بالتوجه إلى متصفح سفاري ثم إلى Preference ومنه اضغط على Advanced ثم اختر Show Develop menu in menu bar.

توجه إلى الموقع حيث تواجهك المشكلة وضمن متصفح سفاري توجه إلى Develop ثم اختر Show Error console.

سوف تظهر طرفية الخطأ فإن لم يظهر لك أي خطأ عليك إعادة تحميل الصفحة فمن المُحتمل أن يظهر الخطأ عند تحميل الصفحة.

تُظهر الصورة السابقة أن الخطأ في ملف jquery.js ضمن السطر الثاني.

ملاحظة: إن كنت لا تستطيع رؤية الخطأ اضغط على زر الرجوع ضمن الطرفية.

متصفح أوبرا

توجه إلى الموقع حيث تواجهك المشكلة ثم اضغط على CTRL + Shift + J في ويندوز أو Command + Options + J في ماك لتظهر لك الطرفية.

سوف تظهر طرفية الأخطاء، اختر JavaScript وErrors من القائمتين المنسدلتين، ولتعثر على موقع الخطأ عليك توسيع أحد الأخطاء عندها سوف يظهر لك الخطأ ومكانه وفي أي سطر هو.

تُظهر الصورة السابقة أن الخطأ موجود في ملف jquery.js في السطر الثاني لكن تذكر أن تنسخ كامل معلومات الخطأ لأن معرفة السطر الذي يتواجد فيه الخطأ لا يكفي لتوفير المساعدة لك.

الخطوة الرابعة: التقرير

الآن وبعد أن عثرت على الخطأ إن استطعت حله فبها ونعمت أو عليك رفع تقرير إلى فريق التطوير أو الدعم لديك لحله وحاول قدم في تقريرك التفاصيل التالية: من فضلك اذكر المعلومات التالية:

• المتصفحات التي تواجه فيها المشكلة
• هل حل SCRIPT_DEBUG المشكلة أم لا
• اسم خطأ جافا سكريبت
• موقع الخطأ - اسم الملف ورقم السطر
• محتوى رسالة الخطأ - كامل محتوى الرسالة من أخطاء سوف يُساعد المطورين.

ترجمة -وبتصرف- للمقال Debugging in WordPress والمقال Using Your Browser to Diagnose JavaScript Errors من موقع ووردبريس.

اقرأ أيضًا

• تعلم ووردبريس
• كيفية إصلاح أخطاء ووردبريس
• كيفية تنقيح أخطاء ووردبريس بخطوات احترافية
• اكتشاف وإصلاح أخطاء شاشة الموت البيضاء في ووردبريس
• إصلاح الملفات أو قواعد بيانات التالفة أو المفقودة في ووردبريس

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

• إن خيار "عنوان الموقع (URL)" هو العنوان الذي تريد للزوار كتابته ضمن المتصفح للوصول لمدونتك.
• إن خيار "عنوان ووردبريس (URL)" هو العنوان الذي توجد فيه ملفات نواة ووردبريس.

ملاحظة: يجب أن يتضمن كلا الخيارين السابقين الجزء https://‎ في البداية لكن من دون "/" في النهاية.

يحتاج كل فترة شخص ما لتغيير هذه الخيارات يدويًا، وعادةً يحصل هذا عندما يُغيّر هذا الشخص أحد أو كلا هذين الخيارين ثم يتفاجأ أن موقعه لا يعمل بالشكل الصحيح، لذا يشرح هذا المقال كيفية تغيير هذه الإعدادات مُباشرةً.

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

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

طرق تغيير رابط موقع ووردبريس

إليك أربع طرق سهلة لتغيير رابط الموقع يدويًا، أي من هذه الطرق سوف يعمل ويؤدي نفس الوظيفة.

تحرير ملف wp-config.php

تستطيع ضبط رابط الموقع يدويًا باستخدام ملف wp-config.php حيث عليك إضافة السطرين التاليين له واستبدال "example.com" بالموقع لموقعك.

define( 'WP_HOME', 'http://example.com' );
define( 'WP_SITEURL', 'http://example.com' );

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

تحرير ملف functions.php

إن كنت تمتلك وصولًا للموقع من خلال اتصال FTP فهذه الطريقة يمكن أن تُساعدك لاستعادة موقعك سريعًا إن غيرت هذه القيم بطريقة غير صحيحة.

أولًا، اتصل بالموقع باستخدام FTP ثم انسخ ملف functions.php للقالب الفعّال الذي تريد تعديله باستخدام محرر نصي بسيط وأعد رفعه إلى الموقع، ثم أضف السطرين البرمجيين التاليين مباشرةً بعد السطر ‎<?php (استخدام الرابط الخاص بك بدلًا من القيمة example.com):

update_option( 'siteurl', 'http://example.com' );
update_option( 'home', 'http://example.com' );

ارفع الملف من جديد لموقعك بنفس المكان حيث يوفر تطبيق FileZilla خيار تعديل الملف لتنفيذ ما سبق بسرعة إن كنت تستطيع استخدامه، ثم أعد تحميل صفحة تسجيل الدخول أو صفحة مدير الموقع عدة مرات، ويجب أن يعود الموقع للعمل الآن.

ملاحظة مهمة: عليك إزالة الشيفرة البرمجية السابقة من ملف functions.php بعد تأكدك من عودة الموقع للعمل من جديد.

ملاحظة: إن كان القالب الذي تستخدمه لا يمتلك ملف functions.php عليك إنشاء واحد جديد باستخدام محرر نصي وإضافة الوسم ‎<?php والسطرين البرمجيين السابقين مع استخدام الرابط الخاص بموقعك بدلًا من القيمة example.com.

<?php
update_option( 'siteurl', 'http://example.com' );
update_option( 'home', 'http://example.com' );

ارفع هذا الملف إلى مسار القالب ثم أزل السطرين البرمجيين السابقين أو الملف كاملًا بعد عودة الموقع للعمل من جديد.

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

عنصران مهمان جدًا هما تعديلات الموّجه router أو الجدار الناري firewall وانتظار ما يزيد من 10 دقائق بعد تنفيذ التعديلات النهائية. استخدم SSH للدخول للخادم (المحر nano هو محرر نصي مُثبت مُسبقًا على الخادم).

$ nano /var/www/books/wp-content/themes/twentyeleven/functions.php

أضف السطور البرمجية بعد الوسم ‎<?php

update_option( 'siteurl', 'http://your.site.url:port/yourblog');
update_option( 'home', 'http://your.site.url:port/yourblog');

أعد تحميل الموقع ضمن المتصفح باستخدام رابط خارجي.

http://your.site.url:port/yourblog

أزل هذه السطور التي أضفتها (أو اجعلها عبارةً عن تعليق) عبر الأمر السابق نفسه:

$ nano /var/www/books/wp-content/themes/twentyeleven/functions.php

ثم ادخل للموجه فالخطوات التالية هي من أجل pfSense حيث أن خطوات إعداد الموجهات الأخرى مشابهة.

أضف إلى الجدار الناري/جدول nat سطرًا شبيه بالسطر التالي:

wan/tcp/port/LAN.server.IP/80

أضف إلى الجداري الناري/جدول القواعد rules table السطر التالي:

tcp/*/port/LAN.server.IP/port/*

ضمن النظام/متقدم/الشبكة ألغ اختيار Disable NAT Reflection:

"Disables the automatic creation of NAT redirect rules for access to your public IP addresses from within your internal networks. Note: Reflection only works on port forward type items and does not work for large ranges > 500 ports."

الآن انتظر لمدة عشر دقائق ثم جرب إن كان الرابط الخارجي http://your.site.url:port/yourblog من متصفح ضمن الشبكة المحلية يستطيع تحميل الموقع الصحيح.

دورة تطوير تطبيقات الويب باستخدام لغة PHP

احترف تطوير النظم الخلفية وتطبيقات الويب من الألف إلى الياء دون الحاجة لخبرة برمجية مسبقة

اشترك الآن

طريقة تعيين الموقع

يدعم ووردبريس طريقة تعيين موقع تلقائية الغرض منها المساعدة السريعة لإعادة موقعك للعمل عند نقل موقع من خادم لآخر.

الشيفرة البرمجية للدالة

عند ضبط RELOCATE بقيمة true ضمن ملف wp-config.php (انظر للقسم التالي) سوف تدخل الشيفرة التالية حيز العمل ضمن ملف wp-login.php:

if ( defined( 'RELOCATE' ) AND RELOCATE ) {    
  // Move flag is set
  if ( isset( $_SERVER['PATH_INFO'] ) AND ($_SERVER['PATH_INFO'] != $_SERVER['PHP_SELF']) )
        $_SERVER['PHP_SELF'] = str_replace( $_SERVER['PATH_INFO'], "", $_SERVER['PHP_SELF'] );
    $url = dirname( set_url_scheme( 'http://'. $_SERVER['HTTP_HOST'] . $_SERVER['PHP_SELF'] ) );
    if ( $url != get_option( 'siteurl' ) )
        update_option( 'siteurl', $url );
}

إليك خطوات العمل.

أولًا، حرر ملف wp-config.php ثم أضف بعد عبارات define (قبل سطر التعليق الذي يقول "That’s all, stop editing!‎") التعليمة التالية define('RELOCATE',true);‎ واحفظ الملف.

ثانيًا، افتح المتصفح وتوجه يدويًا إلى الملف wp-login.php ضمن الخادم الجديد، فعلى سبيل المثال إن كان موقعك الجديد موجودًا على http://www.yourdomainname.com عندها عليك كتابة http://www.yourdomainname.com/wp-login.php ضمن المتصفح.

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

أخيرًا، بعد أن أُصلحت المشكلة عليك تحرير ملف wp-config.php وإزالة السطر الذي أضفته أو تغيير القيمة من true إلى false إن كنت تعتقد أنك سوف تغيير رابط الموقع قريبًا.

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

ملاحظة مهمة: الإبقاء على الثابت RELOCATE ضمن ملف wp-config.php غير آمن كونه يسمح للمهاجم تغيير رابط موقعك لأي شيء يريده في بعض الحالات، لذا عليك دومًا إزالة السطر RELOCATE من ملف wp-config.php بعد انتهائك من هذه الخطوات.

تغيير الرابط مباشرةً من قاعدة البيانات

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

أولًا، خذ نسخة احتياطية عن قاعدة البيانات واحفظها في مكان مختلف عن الموقع ثم انتقل للوحة تحكم phpMyAdmin واضغط على رابط قواعد البيانات.

ثانيًا، سوف تظهر لك قائمة بقواعد البيانات، عليك اختيار القاعدة المرتبطة بموقعك، وسوف تظهر جميع الجداول ضمن قاعدة البيانات على الشاشة.

ثالثًا، ابحث عن الجدول wp_options من القائمة مع الانتباه أن بادئة الجدول wp_‎ يمكن أن تكون مختلفة إن غيرتها أثناء تثبيت ووردبريس، ثم اضغط على الأيقونة الصغيرة التي تُشير إلى تصفح الجدول، وستظهر لك صفحة تتضمن قائمة بحقوله ثم ابحث ضمن حقل option_name عن site_url، واضغط على أيقونة تحرير الحقل التي تتواجد عادةً في أقصى يسار السطر وسوف تظهر نافذة تحرير الحقل، حينها غير معلومات الرابط ضمن حقل option_value للعنوان الجديد، وتحقق أنه صحيح ثم اضغط على Go لحفظ المعلومات الجديدة.

رابعًا، يجب أن يظهر لك الآن جدول wp_options من جديد، ابحث عن الحقل home ضمن الجدول واضغط على أيقونة تحرير الحقل مع الانتباه لوجود عدة صفحات ضمن هذا الجدول إن لم تجد الحقل المطلوب في أول صفحة.

أخيرًا، أدخل معلومات الرابط الجديدة ضمن حقل option_value، وتحقق أن المعلومات صحيحة ثم اضغط على Go لحفظ المعلومات.

نقل موقع ووردبريس

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

هذه المعلومات مذكورة هنا فقط لكنها ربما غير كاملة أو دقيقة. عليك قراءة مقال نقل موقع ووردبريس أولًا إن كنت تحاول نقل ووردبريس من نظام لآخر.

تبديل بادئة الجداول

ربما تُشغَّل عدة مواقع ووردبريس باستخدام قاعدة بيانات واحدة من خلال بعض التعديلات على ملف wp-config.php وهذا ما يفعله العديد من مدراء مواقع ووردبريس. تتضمن هذه التعديلات ضبط بادئة جداول قاعدة البيانات وإن حصل وغيرت بادئة جدول خاص بك عليك تحديث عدة مدخلات ضمن جدول اسمه يقابل الاسم prefix_usermeta أيضًا.

تذكر أن تغييرات SQL دائمة لذا عليك أخذ نسخة احتياطية عن قاعدة البيانات أولًا قبل البدء بأي تعديلات.

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

UPDATE `newprefix_usermeta` SET `meta_key` = REPLACE( `meta_key` , 'oldprefix_', 'newprefix_' );

تغيير قالب الملفات

افتح كل ملف قالب ضمن قالب ووردبريس وابحث عن مرجع أُدخل يدويًا لاسم نطاق موقعك القديم واستبدله باسم النطاق الجديد. ابحث عن روابط مكتوبة يدويًا ربما أضفتها ضمن ملفات القالب المتنوعة مثل sidebar.php و footer.php. يستخدم ووردبريس وسم القالب الذي يُدعى bloginfo()‎ لتوليد عنوان موقعك تلقائيًا من المعلومات الموجودة ضمن تبويب عام من قسم الإعدادات في لوحة تحكم ووردبريس، ولا حاجة لتعديل هذا الوسم ضمن ملفات القالب.

تغيير ملف الإعدادات

سوف تحتاج لتحديث ملف إعدادات ووردبريس إن نُقلت قاعدة البيانات أو تغيرت بطريقة ما.

1. تحتاج فقط لتعديل ملف الإعدادات إن:
2. نُقلت قاعدة بياناتك من خادم لآخر ولا تعمل على الخادم المحلي localhost
3. أعدت تسمية قاعدة بياناتك.
4. غيّرت اسم مستخدم قاعدة البيانات.
5. خذ نسخة احتياطية عن ملف wp-config.php
6. افتح هذا الملف باستخدام محرر نصي
7. راجع محتواه وابحث بالأخص عن مدخل مضيف قاعدة البيانات database host.
8. احفظ الملف.

في هذه المرحلة يجب أن تعمل مدونة ووردبريس خاصتك.

تحقق من ملفك الشخصي

اتبع الخطوات التالية:

1. عليك التحقق ضمن تبويب عام في قسم الإعدادات من لوحة تحكم ووردبريس أنك أجريت التغييرات الصحيحة للرابط.
2. تحقق أن المرجع ضمن عنوان ووردبريس URL يتضمن العنوان الجديد.
3. تحقق أن المرجع ضمن عنوان الموقع URL يتضمن العنوان الجديد.
4. إن أجريت أي تعديل عليك حفظ التغييرات.

تحديث ملف ‎.htaccess

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

أولًا، خذ نسخة احتياطية عن ملف ‎.htaccess وهذا أمر مُفضل وليس واجبًا، ثم افتحه عبر محرر نصي.

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

ثالثًا، اتبع التعليمات ضمن Permalink SubPanel لتحديث الروابط الدائمة ضمن ملف ‎ .htaccess.

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

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

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

أمور إضافية عليك ملاحظتها

هناك أمور ربما ترغب بتغييرها لتصحيح الروابط عند نقل الموقع.

1. روابط الصور: وهي مخزنة ضمن عمود postcontent في جدول wpposts. تستطيع استخدام شيفرة مشابهة لما ذكر في الأعلى لتحديث روابط الصور.
2. wp-options: يوجد قيم أخرى غير القيمة siteurl والقيمة home يجب مراجعتها مثل upload_path وبعض عناصر الإضافات (يعتمد على ما ثبته من ودجات وخرائط موقع وغيرها).
3. لإصلاح الودجات التي تتضمن روابط منتهية الصلاحية عليك تعديلها ضمن تبويب ودجات في قسم الإعدادات ضمن لوحة تحكم ووردبريس.
4. ابحث ضمن كامل قاعدة المعطيات عن أي عنصر متبقي وتحقق مما تُغيره.
5. إن كنت تعمل على شبكة ووردبريس متعددة المواقع سوف تحتاج لاستبدال وحدات من الرابط في قاعدة البيانات حيث تكون مخزنة في العديد من الجداول التي تتضمن كل واحدة من المواقع، لذا عليك أن تكون حذرًا لما تستبدله وتحقق من أنك تعرف معنى أو وظيفة الحقل قبل تغييره. ألق نظرة على ملاحظات هامة حول عمود GUID في الأسفل لمثال عما لا يجب تغييره.
6. إن وجدت الرابط القديم في خيارات قاعدة البيانات ضمن dashboardincominglinks تستطيع تجاهل أو حذف هذا الخيار فهو غير مستخدم منذ إصدار ووردبريس 3.8.

ملاحظة هامة حول عمود GUID

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

يُشير المصطلح GUID للعبارة Globally Unique Identifier، والغرض من هذا الحقل حفظ معرف لكل منشور حيث يكون هذا المعرف فريدًا ولا يتغير أبدًا، ويُستخدم حقل GUID بشكل أساسي لإنشاء تغذيات ووردبريس.

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

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

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

بناءً على ما سبق، لا تغير أبدًا محتويات عمود GUID تحت أي ظرف كان.

إن كان من الواجب تغيير مجلد المرفوعات لموقع آخر عندها يجب تغيير روابط ملفات الوسائط ضمن عمود post_content لجدول المنشورات، فعلى سبيل المثال إذا كان مجلد المرفوعات الافتراضي يتغير من wp-content/uploads إلى images:

UPDATE wp_posts SET post_content = REPLACE(post_content,'www.domain.com/wp-content/uploads','www.domain.com/images');

ملاحظة: ألق نظرة على نقل ووردبريس متعدد المواقع قسم نقل ووردبريس متعدد المواقع.

أداة wp-cli

إن wp-cli أداة مفيدة جدًا للصدفة Shell.

wp search-replace 'example.dev' 'example.com' --skip-columns=guid

أو إن أردت فقط تغيير الخيار تستطيع عمل التالي:

wp option update home 'http://example.com'
wp option update siteurl 'http://example.com'

ترجمة -وبتصرف- للمقال Common WordPress Errors من موقع ووردبريس.

اقرأ أيضًا

• تعلم ووردبريس
• دليل نقل موقع ووردبريس وكيفية التعامل مع صفحة إعدادات الروابط الثابتة
• النسخ الاحتياطي والاستعادة لموقع ووردبريس
• كيفية تحديث نظام ووردبريس Updating WordPress
• تعديل ملف wp-config.php لضبط إعدادات ووردبريس

يُنظر لأمن ووردبريس بجدية واهتمام كبيرين لكن كأي نظام آخر يُمكن أن تظهر مخاطر أمنية في حال أُغفلت بعض الاحتياطات الأمنية الأساسية. يتحدث هذا المقال عن المخاطر الشائعة الأساسية والخطوات التي تستطيع اتباعها لحماية تثبيت ووردبريس.

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

ما هو أمن المواقع؟

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

استضافة الموقع

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

يجب أن تتضمن استضافة موقع موثوقة ما يلي:

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

عليك أن تقرر السوية الأمنية التي تحتاجها ضمن خادمك من خلال اختيار البرمجية والبيانات التي تحتاج حمايتها حيث يُساعدك في هذا ما هو مشروح في التالي من هذا الدليل.

تطبيقات الموقع

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

المواضيع الأمنية

تذكر بعض الأفكار العامة وأبقها في ذهنك عند تأمين كل قسم من نظامك.

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

الثغرات الأمنية في حاسوبك

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

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

انظر في هذا الصدد كتاب دليل الأمان الرقمي.

دورة تطوير تطبيقات الويب باستخدام لغة PHP

احترف تطوير النظم الخلفية وتطبيقات الويب من الألف إلى الياء دون الحاجة لخبرة برمجية مسبقة

اشترك الآن

الثغرات الأمنية في ووردبريس

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

تحديث ووردبريس

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

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

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

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

الثغرات الأمنية في الخادم

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

إن كنت تستخدم استضافة مشتركة (هذه الاستضافة مستخدمة من قبل عدة مواقع وليس موقعك فقط) واخترق أحد المواقع عندها يُمكن أن يحصل المثل لموقعك حتى لو اتبعت جميع التعليمات في هذا الدليل، لذا تواصل مع مسؤول الاستضافة التي تستخدمها عن التدابير الأمنية التي يتبعونها.

الثغرات الأمنية في الشبكة

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

يجب أن تكون الاستضافة واثقة أن شبكتها آمنة وغير مخترقة وعليك فعل المثل أيضًا لأن الثغرات الأمنية في الشبكة يُمكن أن تسمح بتسريب كلمات المرور ومعلومات حساسة أخرى.

كلمات المرور

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

يتضمن ووردبريس مقياس لقوة كلمة المرور يظهر عند تغيير كلمة المرور، تستطيع استخدامه عند تغيير كلمة المرور لضمان أن قوة هذه الكلمة مناسبة.

أمور عليك تجنبها عند اختيار كلمة المرور:

• أي جزء من اسمك الحقيقي أو اسم المستخدم أو اسم الشركة أو اسم موقعك.
• كلمة من القاموس في أي لغة.
• كلمة مرور قصيرة.
• أي كلمة مرور رقمية فقط أو كلمة مرور تعتمد فقط على الحروف (مزيج من الاثنين هو الخيار الأفضل).

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

يُفضل تفعيل الاستيثاق الثنائي إلى جانب استخدام كلمة مرور قوية كإجراء أمني إضافي.

FTP

يجب عليك عند الاتصال بخادمك استخدام اتصال SFTP المُشفر إن كانت الاستضافة توفره وإن كنت غير متأكد من أن الاستضافة توفر هذا النوع من الاتصال تستطيع التواصل معها والاستفسار.

لا يختلف استخدام SFTP عن استخدام FTP إلا من ناحية تشفير كلمة مرورك والمعلومات الأخرى عند نقلها بين حاسوبك وموقعك، أي أن كلمة مرورك لا تُرسل غير مشفرة ولا يمكن اعتراضها من قبل مهاجم.

صلاحيات الملف

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

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

• المجلد الرئيسي لووردبريس /: يجب أن تكون جميع الملفات قابلة للكتابة من قبل حساب المستخدم الخاص بك ما عدا ملف ‎.htaccess إن كنت تريد أن يولد ووردبريس تلقائيًا قواعد إعادة الكتابة لك.

• منطقة إدارة ووردبريس /wp-admin/: يجب أن تكون جميع الملفات قابلة للكتابة من قبل حساب المستخدم الخاص بك.

• المحتوى الخاص بالمستخدم /wp-content/: يجب أن يكون قابل للكتابة من قبل حساب المستخدم الخاص بك وعمليات الخادم. وسوف تجد ضمن مجلد wp-content:

• ملفات القوالب /wp-content/themes/: يجب أن تكون جميع الملفات قابلة للكتابة من قبل عمليات الخادم إن كنت تريد استخدام المحرر الخاص بالقالب لكن إن كنت لا تريد استخدامه يُمكن أن تكون جميع الملفات قابلة للكتابة من قبل حساب المستخدم الخاص بك فقط.

• ملفات الإضافات /wp-content/plugins/: يجب أن تكون جميع الملفات قابلة للكتابة من قبل حساب المستخدم.

يجب أن توثق المجلدات التي يُمكن أن تتواجد ضمن /wp-content/ ومطلوبة من قبل أي إضافة أو قالب حيث يمكن أن تتغير الصلاحيات.

تغيير صلاحيات الملف

إن كنت تملك وصول للصدفة shell لخادمك تستطيع تغيير صلاحيات الملف تباعًا باستخدام الأمر التالي:

• للمجلدات:

find /path/to/your/wordpress/install/ -type d -exec chmod 755 {} \;

• للملفات:

find /path/to/your/wordpress/install/ -type f -exec chmod 644 {} \;

التحديثات التلقائية

عندما تطلب من ووردبريس إجراء تحديث تلقائي تُنفذ جميع العمليات من خلال المستخدم الذي يملك الملفات وليس مستخدم الخادم. تُضبط جميع صلاحيات الملفات إلى 0644 وجميع المجلدات إلى 0755 قابلة للكتابة من قبل أي مستخدم وقابلة للقراءة من أي شخص بما في ذلك الخادم.

أمن قاعدة البيانات

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

إن كنت تُدير MySQL بنفسك عليك أن تفهم جيدًا آلية ضبط MySQL وتعطيل الميزات التي لا تحتاجها (مثل قبول اتصالات بعيدة TCP). ألق نظرة على تأمين قاعدة بيانات MySQL.

تقييد صلاحيات مستخدم قاعدة البيانات

يحتاج مستخدم قاعدة بيانات MySQL صلاحيات قراءة وكتابة البيانات لقاعدة البيانات SELECT و INSERT و UPDATE و DELETE لإجراء عمليات ووردبريس العادية مثل نشر مقالات المدونة أو رفع ملفات الوسائط أو نشر التعليقات أو وإنشاء مستخدمي ووردبريس جُدد أو تثبيت إضافات ووردبريس، لذا يُمكنك تعطيل أي صلاحيات أخرى ضمن قاعدة البيانات مثل DROP و ALTER و GRANT، وبهذا فأنت تُحسن من سياسات الاحتواء.

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

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

تأمين المجلد wp-admin

إن إضافة كلمة مرور من جهة الخادم للمجلد /wp-admin/ يُضيف طبقة ثانية من الحماية لمنطقة المدير في مدونتك وصفحة تسجيل الدخول وملفاتك، وهذا يُجبر المهاجم أو الروبوت على مهاجمة الطبقة الثانية هذه بدلًا من ملفات المدير نفسها. تُدار العديد من هجمات ووردبريس تلقائيًا من قبل روبوتات برمجيات خبيثة.

يُحتمل أن يؤدي تأمين المجلد /wp-admin/ إلى تعطيل بعض وظائف ووردبريس مثل معالج AJAX في wp-admin/admin-ajax.php.

تُصنف معظم هجمات ووردبريس الشائعة إلى صنفين هما:

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

إن الاستخدام الأفضل لطبقة الحماية الثانية باستخدام كلمة المرور هو فرض طلبات HTTPS مُشفرة لصفحات الإدارة لتكون جميع الاتصالات والبيانات الحساسة مُشفرة.

تأمين المجلد wp-includes

يُمكن إضافة طبقة ثانية من الحماية حيث لا يجب لأي مستخدم الوصول إلى الشيفرات، وأحد الطرق لفعل ذلك هي من خلال حجب الشيفرات التي تستخدم mod_rewrite ضمن ملف ‎.htaccess .

ملاحظة: كي تضمن ألا يكتب ووردبريس فوق الشيفرة التالية عليك وضعها خارج وسمي ‎# BEGIN WordPress و ‎# END WordPress ضمن ملف ‎.htaccess إذ يستطيع ووردبريس الكتابة على أي شيء بين هذين الوسمين.

# Block the include-only files.
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^wp-admin/includes/ - [F,L]
RewriteRule !^wp-includes/ - [S=3]
RewriteRule ^wp-includes/[^/]+\.php$ - [F,L]
RewriteRule ^wp-includes/js/tinymce/langs/.+\.php - [F,L]
RewriteRule ^wp-includes/theme-compat/ - [F,L]
</IfModule>


# BEGIN WordPress

لاحظ أن هذا لن يعمل جيدًا على تثبيت ووردبريس متعدد المواقع لأن القاعدة التالية:

RewriteRule ^wp-includes/[^/]+\.php$ - [F,L]

سوف يمنع ملف ms-file.php من توليد الصور. حذف هذا السطر سوف يسمح للشيفرة بالعمل لكن يوفر سوية حماية أقل.

تأمين الملف wp-config.php

تستطيع نقل ملف wp-config.php إلى مجلد أعلى من مجلد تثبيت ووردبريس، وهذا يعني أنه عليك نقل ملف wp-config.php خارج المجلد الجذر في حال كان موقعك مثبتًا في المجلد الرئيسي.

ملاحظة: يؤكد البعض أن نقل ملف wp-config.php يملك منافع أمنية بسيطة، وإن لم تُنفذ العملية بحذر يُمكن أن تسبب ثغرات أمنية خطيرة. البعض الآخر يخالف هذا الرأي.

لاحظ أنه يُمكن تخزين ملف wp-config.php بمجلد أعلى من مجلد تثبيت ووردبريس بمستوى واحد فقط كما يجب عليك التحقق أنك أنت والخادم فقط من يستطيعون قراءة هذا الملف (هذا يعني عادةً استخدام صلاحيات 400 أو 440).

إن استخدمت خادمًا مع ملف ‎.htaccess تستطيع إضافة التالي لهذا الملف (في أعلى الملف) لمنع وصول أي شخص يبحث عنه.

<files wp-config.php>
order allow,deny
deny from all
</files>

تعطيل تحرير الملفات

تسمح لك لوحة تحكم ووردبريس افتراضيًا للمدير بتعديل ملفات PHP مثل ملفات الإضافات والقوالب، وهذه عادةً الأداة الأولى التي يستخدمها المهاجم إن تمكن من الدخول بما أنها تسمح له بتنفيذ شيفرة برمجية. يمتلك ووردبريس ثابتًا لتعطيل تحرير الملفات من لوحة التحكم، وبالتالي إضافة هذا السطر ضمن ملف wp-config.php مكافئ لإزالة صلاحيات editthemes وeditplugins وedit_files من جميع المستخدمين.

define('DISALLOW_FILE_EDIT', true);

لن يمنع هذا السطر المهاجم من رفع ملفات خبيثة لموقعك لكنه يُحبط بعض الهجمات.

الإضافات

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

الجدار الناري

يوجد العديد من الإضافات والخدمات التي تعمل كجدار ناري لموقعك الإلكتروني حيث يعمل بعضها من خلال تعديل ملف ‎.htaccess مع تقييد الوصول على مستوى خادم Apache قبل أن يُعالج من قبل ووردبريس. تُعد إضافة iThemes Security أو All in One WP Security أمثلة جيدة، وهناك إضافات جدار ناري تعمل على مستوى ووردبريس مثل WordFence و Shield وتحاول ترشيح الهجمات عند تحميل ووردبريس لكن قبل أن يُعالج بشكل كامل.

تستطيع أيضًا تثبيت WAF جدار ناري للخادم لترشيح المحتوى قبل معالجته من ووردبريس، والجدار الناري الأكثر استخدامًا هو ModSecurity.

يُمكن إضافة الجدار الناري لموقع كحاجز يتوسط بين الزوار من شبكة الإنترنت والخادم حيث تعمل هذه الخدمات كخادم وكيل عكسي reverse proxies يقبل الطلبات الأولية ويُعيد توجيهها إلى خادمك بعد تجريدها من الطلبات الخبيثة. يستطيع الجدار الناري تحقيق ذلك من خلال تعديل سجلات DNS باستخدام سجل A أو تبديل كامل لخادم DNS مما يسمح للزيارات بالمرور عبر الجدار الناري قبل وصولها لموقعك. توفر بضع شركات هذه الخدمة مثل CloudFlare و Sucuri و Incapsula.

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

إضافات تحتاج صلاحية الكتابة

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

إضافات تنفيذ الشيفرة البرمجية

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

تستطيع تجنب استخدام هذه الإضافات باستخدام قوالب الصفحة المخصصة التي تستدعي الدالة، وهذه الخطوة في الحماية تكون فعّالة فقط عند تعطيل تعديل الملف من ووردبري](اقرأ قسم صلاحيات الملف في بداية المقال).

الأمن من خلال الغموض

إن التأمين باستخدام الغموض Security through obscurity هي تقنية غير شائعة لكن يوجد عدة أماكن في ووردبريس يُمكن للمعلومات السرية المساعدة في رفع السوية الأمنية:

1. أعد تسمية حساب المدير: تجنب استخدام أسماء سهلة التوقع عند إنشاء حساب المدير مثل admin أو webmaster كأسماء مستخدمين كون حساب المدير يتعرض للهجوم أولًا. تستطيع إعادة تسمية حساب موجود ضمن تثبيت ووردبريس باستخدام لوحة الأوامر في MySQL باستخدام واجهة أمامية للتعامل مع قاعدة البيانات مثل phpMyAdmin أو باستخدام أمر مثل:

wp_users SET user_login = 'newuser' WHERE user_login = 'admin';

2. غير بادئة جداول قاعدة البيانات: تفترض العديد من هجمات حقن قاعدة البيانات SQL في ووردبريس أن بادئة الجدول هي wp_‎ كونها المستخدمة افتراضيًا عند تثبيت ووردبريس، لذا فإن تغييرها يُمكن أن يحجب على الأقل بعض هجمات حقن SQL.

النسخ الاحتياطي للبيانات

أنشئ نسخًا احتياطية من بياناتك بانتظام مُضمنًا قواعد بيانات MySQL، تستطيع الاطلاع على مقال إنشاء نسخة احتياطية لقاعدة بياناتك.

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

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

السجل

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

تسمح لك السجلات بمعرفة عنوان IP والزمن والخطوات التي اتخذها المهاجم، وسوف تتمكن من رؤية أي من هذه الهجمات من خلال سجلات هجمات البرمجة عبر المواقع XSS وتضمين الملف عن بعد RFI وتضمين الملف المحلي LFI ومحاولات تجاز المجلدات. سوف تتمكن أيضًا من رؤية محاولات تنفيذ هجوم القوى الغاشمة.

إن تمكنت من فهم السجلات سوف تتمكن من رؤية أمور مثل متى تُستخدم محررات الإضافة والقالب ومتى يُحدث شخص ما الودجات ومتى تُضاف المقالات والصفحات. أي سوف تتمكن من الاطلاع على جميع العناصر الأساسية لتنفيذ أي تحقيق جنائي على خادمك. يوجد بضع إضافات أمنية لووردبريس يُمكن أن تُساعدك على هذا مثل Sucuri Auditing tool أو إضافة Audit Trail.

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

المراقبة

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

مراقبة السجلات

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

مراقبة أي تغيرات في ملفاتك

عند وقوع أي هجوم يوجد دائمًا آثار له سواء كانت ضمن السجلات أو ضمن ملفات النظام (ملفات جديدة أو ملفات مُعدلة أو غيرها). إن كنت تستخدم OSSEC على سبيل المثال فإنه سوف يراقب ملفاتك ويُنبهك عند حصول أي تغيير.

الأهداف

إن أهداف استخدام نظام تتبع ملفات النظام:

• مراقبة الملفات المُضافة أو المعدلة
• تسجيل التغييرات والإضافات
• إمكانية عكس التغييرات الصغيرة
• تحذيرات مؤتمتة

المقاربات العامة

يستطيع المدير مراقبة ملفات النظام من خلال تقنيات عامة مثل:

• أدوات النظام
• التحكم بالإصدار
• مراقبة على مستوى النظام أو النواة

أدوات خاصة

تتضمن خيارات مراقبة ملفات النظام ما يلي:

• diff - ابن نسخة نظيفة من موقعك وقارنها مع النسخة العاملة حاليًا
• Git - إدارة الشيفرة المصدرية
• inotify و incorn - خدمة مراقبة الملفات على مستوى نواة النظام يمكن استخدام أوامر على أحداث ملفات النظام.
• Watcher - مكتبة بايثون من أجل inotify.
• OSSEC - نظام اكتشاف الدخلاء مفتوح المصدر يُنفذ عمليات تحليل للسجل وتحقق من تكاملية الملفات وسياسة مراقبة واكتشاف rootkit وتنبيهات بالزمن الحقيقي واستجابة فورية.

الاعتبارات

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

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

مراقبة خادم الويب خارجيًا

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

اقتباس

تستطيع الاطلاع على المصادر التي اعتمد عليها المقال الأجنبي بالرجوع للمقال نفسه.

ترجمة -وبتصرف- للمقال Hardening WordPress من موقع ووردبريس.

اقرأ أيضًا

• تعلم ووردبريس
• هل ووردبريس آمن؟
• الدليل الكامل إلى أمن مواقع ووردبريس
• إدارة ووردبريس وتسجيلات الدخول بأمان
• الاستيثاق الثنائي 2FA واستعماله لزيادة أمان مواقع ووردبريس

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

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

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

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

كُتِب هذا المقال ليعرفك على مبادئ عمل ووردبريس كنظام تقني. سيضعك هذا المقال على بداية طريقك في تعلم برمجة ووردبريس، وذلك لأننا سنبدأ معك من الأساسيات.

1. ما هو ووردبريس

حتى تتعلم برمجة ووردبريس لا بد أن تفهم ما هو هذا النظام. ولم نجد أفضل من تشبيهه بمصنع لتقديم شرح شامل عن ماهيته ووظائفه من الناحية التقنية.

اقتباس

ووردبريس هو مصنع يصنّع المواقع إلكترونية

لتكن نقطة انطلاقك في رحلة تعلم ووردبريس، معرفة ماهية نظام ووردبريس وبماذا يفيد، إذ نعلم أنه مبني على لغة البرمجة PHP وأنه نظام إدارة محتوى مفتوح المصدر، لكن ما هي وظيفته؟

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

التعمق في أوجه الشبه بين نظام ووردبريس والمصنع

فيما يلي نقدم تفاصيل إضافيةً توضح لك كيف تستفيد من تشبيه نظام ووردبريس بالمصنع في تعلم برمجة ووردبريس:

1. إن بيئة العمل في مصنع ووردبريس هي الخادم، وهو حاسوب متصل بالإنترنت تخزَّن عليه كافة البيانات. (وإن الاشتراك بالاستضافة يعني حجز مساحة على هذا الخادم). يتلقى الخادم طلبات الإنتاج من العملاء - وهم المستخدمون الذين يطلبون المواقع عن طريق متصفحات الإنترنت - ومهمته تجميع منتج نهائي جاهز للعرض على متصفح المستخدم.
2. إن المنشورات هي المواد الأولية الرئيسية المستخدمة في مصنع ووردبريس، وقاعدة البيانات من نوع MySQL هي المخزن في هذا المصنع (حيث تخزَّن هذه المواد الأولية).
3. يستجيب نظام ووردبريس لطلب الإنتاج الذي يرده من المتصفح ("اجمع صفحة الموقع التي تقابل الرابط الذي طلبته كاملةً وأعد إرسالها")، يستدعي نظام ووردبريس المواد الأولية من قاعدة البيانات.
4. يرسل نظام ووردبريس تلك المواد الأولية التي تشكل معظم الشيفرة البرمجية لنظام ووردبريس إلى خط التجميع في المصنع. التي تبني بدورها الأجزاء الداخلية لصفحة الموقع: أساسيات البيانات التي ستتضمنها صفحة الموقع وترتيب ظهورها.
5. توجد خطوط تجميع خاصة للتحكم بطريقة عرض صفحات الموقع في نظام ووردبريس: كيف سيصمَّم المنتج ليعرَض على المستخدم (بغض النظر عن البيانات الأساسية التي يتكون منها). إن خطوط التجميع المعنية بمظهر صفحات المواقع هي ملفات قوالب مبينة على لغة البرمجة PHP تسمى قوالب ووردبريس wordpress themes.
6. يستدعي المصنع متعهدين متخصصين خارجيين لتنفيذ مهام محددة، وهذا ما نسميه إضافات ووردبريس wordpress plugins، التي يمكنها التدخل في أية مرحلة من عملية التصنيع عن طريق نظام خُطافات ووردبريس hooks.
7. يصدر المنتج النهائي بلغة HTML اللازمة لعرض صفحة الموقع، ثم يشحن المصنع هذا المنتج إلى متصفح المستخدم الذي أرسل الطلب في كل مرة تحمَّل فيها صفحة الموقع.

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

2. طريقة البرمجة في نظام ووردبريس: اللغات البرمجية الأساسية الأربعة في ووردبريس

إن الخطوة التالية في مسارك التدريبي في برمجة ووردبريس هي أن تعرف اللغات البرمجية التي ستستخدمها. سنقدم إليك أهم أربع لغات برمجية في ووردبريس، وهي: HTML و CSS وPHP وجافا سكريبت JavaScript، وسنوجز وظيفة كل منها.

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

1. HTML: لغة برمجة المواقع، فهي لغة البرمجة التعريفية التي يترجمها متصفح المواقع بتحويل سلسلة من الرموز البرمجية إلى صفحة موقع واضحة تتضمن نصوصًا وصورًا وكافة محتويات الصفحة الأخرى. إذا لم تتعلم البرمجة بلغة HTML فلا بد أنك لن تستطيع التعمق في برمجة ووردبريس، لكن من ناحية أخرى ستستخدم لغة PHP معظم الوقت التي وظيفتها تحويل الشيفرة البرمجية فيها إلى لغة HTML بدلًا من البرمجة باستخدام لغة HTML مباشرةً.
2. CSS: هي لغة البرمجة التعريفية التي تتحكم بمظهر صفحات الموقع، أي كيف ستبدو للمستخدم. تتحكم لغة CSS تقريبًا بكل النواحي المتعلقة بالمظهر، من الأحجام والهوامش والألوان والخطوط إلى أسلوب العرض المستجيب responsive لمختلف أنواع الأجهزة. عندما تريد أن تجعل الموقع على ووردبريس يبدو بمظهر معين، يبدأ عمل لغة CSS حيث تنتهي مهمة خصائص أدوات بناء الصفحة وخيارات القوالب.
3. PHP: لغة البرمجة الأساسية في ووردبريس. هي اللغة الأساسية التي برمج بها نظام ووردبريس، وهي اللغة الأساسية لإضافات وقوالب ووردبريس، وهي أكثر لغة برمجة ستستخدمها بصفتك مبرمج ووردبريس.
4. JavaScript: تستخدَم لبرمجة الواجهات الأمامية للموقع. هي لغة برمجية قوية تستخدم في مختلف النواحي، لكن المبرمج على ووردبريس يستخدمها غالبًا للتحكم بالجوانب الديناميكية من عرض الموقع التي تشمل التفاعلات المعقدة مع المستخدم الذي يتصفحه. بالرغم من أهميتها إلا أنك تستطيع إنجاز معظم عملك على ووردبريس بمعرفتك بالمبادئ الأساسية فقط منها، لذا ابدأ مسيرتك بتعلم اللغات البرمجية الثلاثة الأخرى أولًا، وقد حرصنا على توفير سلسلة عالية الجودة تشرح لغة جافاسكربت كاملة بعدد 90 درسًا تعليميًا بعنوان "دليل تعلم جافاسكربت" وهي ترجمة للقسم الأول من موقع javascript.info الشهير، ويمكنك البدء مع المقال الأول بعنوان "مقدمة إلى لغة جافاسكربت" وتابع تقدمك حتى الاحتراف.

3. كيف يتواصل ووردبريس مع متصفحك؟ مفهومي "من جهة المستخدم" ومن "جهة الخادم" في ووردبريس

إن أحد أهم عوامل تعلم البرمجة على ووردبريس بسرعة الاستيعاب الجيد لمواضع تنفيذ العمليات في نظام ووردبريس، أيها تنفَّذ على حاسوب المستخدم ("من جهة المستخدم client-side") وأيها تنفذ على خادم الويب الذي يستضيف الموقع ("من جهة الخادم server-side").

إن فهمك لآلية تفاعل الخادم مع المستخدم في ووردبريس سيجيب على كثير من الأسئلة التي تراودك حول البرمجة في ووردبريس، مثل تساؤلك "هل يستطيع المستخدم الاطلاع على الشيفرة البرمجية التي أكتبها بلغة PHP؟".

نذكرهما بإيجاز:

العمليات التي تنفذ من جهة الخادم

هي كل ما يجري على الخادم: هو الحاسوب المتصل بالإنترنت الذي تستضيف موقعك عليه (والذي تستأجره غالبًا من شركة استضافة مواقع).

من أهم العمليات التي تنفَّذ من جهة الخادم:

• تخزين المعلومات في قاعدة بيانات MySQL التي تخزن معظم بيانات موقعك واستدعائها منها.
• كافة العمليات المرتبطة بلغة البرمجة PHP في ووردبريس: يعمل الخادم وفق النهج المنصوص عليه في آلاف ملفات ووردبريس المكتوبة بلغة PHP، إضافةً إلى ملفات PHP في إضافات ووردبريس وقوالبه.

كل ما سبق ذكره ينفَّذ على الخادم، فالمتصفحات لا يمكنها قراءة الملفات المكتوبة بلغة PHP، فلا يعاد إرسال الملفات إلى المستخدم ليبني منها صفحة الموقع إلا بعد تحويلها إلى لغة HTML التي يفهمها المتصفح (إضافةً إلى ملفات جافاسكربت وCSS والقليل غيرها).

العمليات التي تنفذ من جهة المستخدم

تجري هذه العمليات في بيئة المستخدم: وهي الحاسوب (أو الهاتف المحمول أو أي جهاز آخر) الذي يرسل الطلبات إلى الخادم، ويحول ما يرد إليه من الخادم إلى صفحات تفاعلية وقابلة للعرض على المتصفح.

من أهم العمليات التي تنفَّذ من جهة المستخدم:

• إرسال طلبات للحصول على موارد من صفحات HTML وصفحات تنسيق CSS وملفات جافا سكريبت بالإضافة إلى ملفات الصور وغيرها.
• استخراج ملفات HTML وCSS والصور وغيرها إلى صفحة موقع يفهمها المستخدم.
• التعامل مع كافة أنواع تفاعلات المستخدم من خلال نماذج forms HTML ومحددات العناصر الزائفة في pseudoselectors CSS وخاصةً من خلال جافا سكريبت.

كلما تعلمت البرمجة في ووردبريس ستتعمق في فهم آلية التواصل المستمرة بين الخادم والعميل وكيفية تبادلهما البيانات. اقرأ المقالة الكاملة لمزيد من التفاصيل ورسم توضيحي مفصَّل.

4. المبادئ الأساسية في البرمجة على ووردبريس: نظام الخطافات في ووردبريس

سترغب خلال تعلمك البرمجة على ووردبريس أن تفهم أساس نظام ووردبريس البرمجي الذي توجهه تفاعلات المستخدم event-driven: وهي خُطافات ووردبريس hooks التي تعرّف أيضًا بالإجراءات actions والمرشحات filters.

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

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

نوعا الخطافات في ووردبريس: خطافات الإجراءات وخطافات المرشحات

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

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

لإضافة خطافات الإجراءات نكتب دالات الإجراءات ثم نربطها من خلال دالة add_action()‎ في ووردبريس. مثال على ذلك:

add_action('wp_footer', 'wpshout_action_example');
function wpshout_action_example() {
    echo "WPShout was here.";
}

لإضافة خطافات المرشحات نكتب دالات المرشحات ثم نربطها من خلال دالة add_filter()‎ في ووردبريس. مثال على ذلك:

add_filter( 'the_title', 'wpshout_filter_example' );
function wpshout_filter_example( $title ) {
    return 'Hooked: ' . $title;
}

5. برمجة قوالب ووردبريس

أصبحت الآن مطلعًا على ماهية ووردبريس (أنه مصنع المواقع الإلكترونية) واللغات التي عليك تعلمها (أهمها PHP) وأين ينفَّذ كل نوع من العمليات على نظام ووردبريس (في جهة الخادم أو جهة المستخدم) والنظام الأساسي الذي توجهه تفاعلات المستخدم (الخطافات) والذي يربط كافة الجوانب ببعضها.

يتطلب ذلك دورةً تدريبيةَ كاملةً تقدم لك مفاهيم تأسيسية مفتاحية لتعلم قوالب ووردبريس: هيكلية القوالب template hierarchy والحلقة loop ودالة functions.php، وهذا ما تقدمه دورة PHP من أكاديمية حسوب التي تشرح كيفية بناء قوالب ووردبريس من الصفر شرحًا تفصيليًا وبلغة عربية.

صرت جاهزًا لتعلّم أساسيات برمجة قوالب ووردبريس، نرجو لك كل التوفيق ولا تتردد بمشاركتنا تجربتك في التعليقات.

ترجمة -وبتصرف- للمقال Learn WordPress Development: The Basic Course لصاحبه Fred Meyer.

اقرأ أيضًا

• تعلم البرمجة
• تطوير ووردبريس للمبتدئين: تعلم PHP
• ما الذي تحتاج معرفته قبل الشروع في التطوير على ووردبريس
• مقدمة إلى تطوير قوالب ووردبريس: تحويل صفحة HTML إلى قالب ووردبريس
• هل أنت جديد على عالم ووردبريس؟ إليك ما يجب عليك معرفته أوّلًا

يهدف هجوم القوة الغاشمة Brute Force Attack -وهو أبسط نوع من الهجمات لاكتساب وصول للموقع من خلال تجريب أسماء مستخدمين وكلمات مرور مرارًا وتكرارًا حتى يتمكن من الدخول وهو مختلف عن عمليات الاختراق التي تُركز على نقاط ضعف الموقع. ينجح هذا الهجوم مع الأشخاص الذين يستعملون كلمات مرور بسيطة مثل "123456" واسم مستخدم شائع مثل "admin".

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

هذا الهجوم ليس هجومًا خاصًا بمواقع ووردبريس بل يُمكن أن يُطبق على أي تطبيق ويب لكن ووردبريس هدف متكرر كونه مُستخدم على نطاق واسع.

حماية نفسك من هجمات القوة الغاشمة

يوجد نقطة تُستهدف باستمرار في ووردبريس وهي ملف "wp-login.php" حيث يُنفذ الهجوم عليه مرارًا وتكرارًا حتى يتمكن المهاجم من الدخول أو يتوقف الخادم عن العمل. تستطيع حماية الخادم باتّباع بعض الخطوات.

لا تستخدم admin كاسم للمستخدم

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

تستطيع أيضًا استخدام الإضافة Change Username لتغيير اسم المستخدم الخاص بحسابك.

كلمات مرور قوية

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

يوفر ووردبريس مقياس لقوة كلمة المرور يُعرض عند تغيير كلمة المرور في ووردبريس، لذا استخدمه لاختيار كلمة مرور قوية يصعب تخمينها. تستطيع استخدام إضافة Force Strong Password لإجبار المستخدمين على اختيار كلمات مرور قوية.

أمور يجب عليك تجنبها عند اختيار كلمة المرور:

• أي تشكيل باستخدام اسمك الحقيقي أو اسم موقعك أو الشركة التي تعمل بها أو اسم المستخدم.
• كلمة من القاموس في أي لغة كانت
• كلمة مرور قصيرة.
• أي كلمة مرور مكونة فقط من الأحرف أو الأرقام (يُفضل استخدام مزيج من الاثنين)

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

تستطيع تفعيل الاستيثاق الثنائي لزيادة قوة كلمة المرور ورفع سوية أمن مدونتك.

الإضافات

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

حماية الخادم من هجوم القوة الغاشمة

إن قررت حجب صفحة wp-login.php أو wp-admin عن الزوار سوف تحصل على الخطأ 404 أو 401 عند محاولة الوصول لهذه الصفحات، ولتجنب ذلك سوف تحتاج إضافة السطر التالي لملف ‎.htaccess.

ErrorDocument 401 default

تستطيع تحويل الخطأ 401 إلى الصفحة 401.html لكن الهدف ليس تحويله إلى ووردبريس، كما تستطيع استخدام مسار error_page في خادم Nginx لكن يجب عليك استخدام رابط مُجرد.

error_page  401  http://example.com/forbidden.html;