تم تحسين هذا الموقع ليتم عرضه من متصفح حديث يتم فيه تمكين JavaScript.

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

علا صالح

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

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

تصميم قالب ووردبريس من خلال أداة تخصيص القالب ( التي تصل لها من داخل لوحة تحكم موقعك> المظهر> تخصيص) وهذه أسهل طريقة لكنها تختلف حسب القالب المستخدم وقابليته للتخصيص.
في حال كان القالب يعتمد على أحد إضافات إنشاء الصفحات (Page Builders) فيمكنك استخدام هذه الإضافات والاستفادة منها بشكل كبير لتخصيص وتصميم قالبك بسرعة وسهولة.
تصميم قالب وورد بريس من الصفر من خلال كتابة كافة الأكواد البرمجية اللازمة لعمل القالب وهذه أصعب الطرق وتتطلب منك معرفة بكافة اللغات البرمجية لعمل القالب (php,html,css,js…)
تصميم قالب ووردبريس بالاعتماد على تصميم HTML ستاتيكي وهنا يكون عليك تحويل البيانات الستاتيكية لبيانات ديناميكية من خلال استدعاء دوال php المناسبة.
إنشاء قالب ابن (قالب فرعي) من قالب أب (قالب أساسي) يرث هذا القالب الابن عادة القالب الرئيسي لكنه لا يرث ملف التنسيقات للقالب الأصلي لذا يمكنك تصميم القالب الفرعي بالطريقة التي تريدها.
تصميم قالب وورد بريس من خلال أحد أطر عمل قوالب ووردبريس Theme Framework في حال كان لديك إطار عمل مثبت على موقعك.
تصميم قالب ووردبريس مخصص باستخدام قالب بدء Starter Theme ومن الواجب عليك في هذه الحالة تعديل كود قالب البدء بشكل محدود لجعله خاصًا بك.

ما الفرق بين الاعتماد على أطر العمل وقوالب البدء في تصميم قالب ووردبريس؟

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

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

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

هناك العديد من قوالب البدء التي يممكنك الاعتماد عليها لكني هنا سأعتمد على قالب البدء الشهير underscores أو المعروف باسم قالب _s

مميزات قالب البدء underscores

قالب البدء starter theme هو عبارة عن قالب ووردبريس أساسي يتضمن الحد الأدنى من أكواد PHP و CSS وHTML اللازمة لعمل أي قالب ووردبريس، لذا يمكن اعتباره بمثابة أرضية لتبني عليها قالب ووردبريس الخاص بك.

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

من أشهر قوالب البدء قالب underscores الذي تم تطويره من قبل شركة Automattic لإنشاء قالب وورد بريس بالمتطلبات الأساسية وهو بالطبع غير مخصص ليكون قالب أساسي لموقعك لكنه يخضع ترخيص GPL ويمكنك أن تعدله وتستخدمه لأي غرض تريده.

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

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

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

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

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

إذا نقرت على رابط خيارات متقدمة Advanced Options فسوف تتمكن من تحديد خيارات أكثر للقالب مثل اسم دليل أو مجلد القالب واسم مؤلفه وعنوان URL للمؤلف ووصف القالب

وفي حال نقرت على خيار _sassify! فهذا سوف يجعل قالبك مجهز بأدوات Sass.

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

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

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

محتويات قالب underscores

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

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

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

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

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

https://i0.wp.com/developer.wordpress.org/files/2014/10/wp-hierarchy.png?resize=2862%2C1504&ssl=1

أهم ملفات قالب underscores

ملف تنسيقات القالب style.css: هو ملف أساسي لن يعمل القالب بدونه وهو يتضمن في البداية قسم تعليقات يوفر كافة المعلومات الوصفية حول القالب وقواعد التنسيق التي تحدد مظهر وتصميم عناصر صفحات الموقع المختلفة.
ملف index.php هو ملف أساسي لن يعمل القالب بدونه وهو مسؤول عن تحميل الصفحة الرئيسية كما أنه يقوم بتحميل التعليمات البرمجية من ملفات التمبلت التالية (ملف content.php، ملف الترويسة header.php، ملف التذييل footer.php، ملف الشريط الجانبي sidebar.php، ملف وظائف القالب functions.php)
style-rtl.css: ملف تنسيق مخصص لكتابة التنسيقات الضروية للغات التي تكتب من اليمين إلى اليسار مثل اللغة العربية. ففي حال كانت لغة الموقع تكتب من اليمين لليسار فالتنسيقات المكتوبة في هذا الملف سيكون لها أولوية على التنسيقات الموجودة في ملف التنسيق الأساسي للقالب style.ss
اقرأ المزيد: طريقة تعريب قالب ووردبريس بالخطوات المفصلة
ملف وظائف القالب functins.php يفيد هذا الملف في إضافة وظائف خارجية لقالبك وتحديد بعض الميزات مثل دعم ميزة روابط التغذية التلقائية RSS ودعم ميزات الصور المصغرة ودعم وجود أكثر من بنية للمقال في ووردبريس وغيرها من الوظائف..
ملف single.php هو الملف المسؤول عن عرض صفحات المقالات المفردة و عرض أنواع المنشورات المخصصة المفردة.
ملف page.php وهو الملف المسؤول عن عرض الصفحات الثابتة في الموقع.
ملف 404.php الملف المسؤول عن عرض الصفحة التي تظهر للمستخدم عند طلب صفحة غير موجودة.
archive. php الملف المسؤول عن عرض صفحات الأرشيف باختلاف أنواعها (أرشيف التصنيفات، وأرشيف الوسوم، والتصنيفات المخصصة، وأرشيف التواريخ، وأرشيف المؤلفين..)
ملف search.php: وهو الملف المسؤول عن تنسيق وعرض نتائج البحث في موقع وورد بريس.
ملف image.php ملف تمبلت يعرض صورة واحدة من الوسائط التي تم تحميلها.
الملف screenshot.png وهو ملف صورة القالب ويمكنك حذفها ووضع أي صورة خاصة بك تريدها في مجلد القالب وإعادة تسميتها بالاسم screenshot.png ليتم عرضها عند عرض صفحة القوالب المثبتة في لوحة تحكم الموقع. (ملاحظة يفضل أن تكون أبعاد هذه الصورة هو 1200 بكسل للعرض و 900 بكسل للارتفاع)
header.php ملف عرض ترويسة الموقع يضاف لأي صفحة من خلال الدالة get_header ().
sidebar.php ملف عرض الشريط الجانبي يضاف لأي صفحة من خلال الدالة get_sidebar ().
footer.php ملف عرض تذييل الموقع يضاف لأي صفحة من خلال الدالة get_footer ().
comment.php ملف عرض جزء التعليقات ويمكن أن يضاف لأي صفحة من خلال الدالة comments_template ().
searchform.php ملف لعرض نموذج البحث ويعرض من خلال الدالة get_search_form ()
content.php ملف يتضمن كود لجلب المقالات المنشورة في الموقع من خلال حلقة ووردبريس. ويتم عرضه في أي صفحة من خلال الدالة get_template_part ("content").
content-page.php ملف لعرض محتوى الصفحات، ويتم عرضه في الملف page.php باستخدام الدالة get_template_part ('content'، 'page').
content-none: ملف مسؤول عن عرض عرض رسالة للمستخدم في حال عدم وجود مقالات منشورة في الموقع.
custom-header.php ملف لتعريف ترويسة مخصصة في الموقع ويتم استدعاؤه في السطر التالي ضمن الملف function.php
تسجيل الدخول لعرض الكود
ملف الترخيص License.txt من خلال هذا الملف توضح أن قالبك يخضع لترخيص GPL v2، وهو ملف مطلوب إذا كنت تريد رفع القالب في الدليل الرسمي لقوالب ووردبريس.
README.md ملف لكتابة وصف القالب.
navigation.js كود جي كويري في المجلد js يستخدم لتمكين ميزة التنقل عبر عناصر القائمة من خلال لوحة المفاتيح.
customizer.js: كود جي كويري في المجلد js يستخدم لتحسين تجربة المستخدم لأداة تخصيص القوالب.
مجلد languages يستخدم هذا الملف لتخزين ملفات الترجمة للقالب (ملفات .mo) التي تمكنك من ترجمة نصوص القالب المكتوبة باللغة الإنجليزية إلى اللغة العربية أو غيرها من اللغات المحلية.

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

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

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

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

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

كما تلاحظ تصميم القالب بدائي للغاية لذا ستحتاج للكثير من العمل لتغيير تصميم قالب ووردبريس الخاص بك إما من خلال تحرير ملف style.css / وملف style-rtl.css نفسه و إضافة قواعد CSS جديدة إلى نهاية هذين الملفين..

على سبيل المثال: يمكنك استبدال الكود التالي في ملفي التنسيقات

تسجيل الدخول لعرض الكود

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

تسجيل الدخول لعرض الكود

سيبدو الموقع الآن بالشكل التالي:

كما يمكنك إضافة أكواد php لكتابة الدوال التي تريدها في ملف وظائف القالب function.php أو كتابة خطافات إجراءات action hooks أو خطافات فلترة filter hooks وتهيئتها في هذا الملف، كما يمكنك تعديل ملف التمبلت الخاص بصفحة معينة أو نوع منشور معين في موقعك.

على سبيل المثال لا يتضمن قالب underscore ميزة تخصيص بنية المقالة ويمكنك إضافة هذه الميزة له من خلال كتابة الكود التالي في الملف function.php:

تسجيل الدخول لعرض الكود

كما أن القالب underscores لا يتضمن ملف تمبلت مخصص لعرض أرشيف المؤلفين author.php ويعتمد على ملف التمبلت العام archive.php لعرض كافة أنواع صفحات الأرشيف، وبالتالي يمكنك إضافة ملف بهذا الاسم لموقعك وتخصيص أرشيف المؤلفين وعرض معلومات المؤلف فيه بالطريقة التي تناسبك.

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