بعد أن تعرفت في الدروس السابقة من سلسلة تعلم تطوير قالب ووردبريس على كافة الأساسيات التقنية اللازمة لتعامل ووردبريس مع القوالب، حان الوقت في هذا الدرس لتبدأ بشكل عملي ببناء قالب ووردبريس خاص بك من الصفر. قبل البدء أذكرك بضرورة تثبيت إصدار جديد من ووردبريس على السيرفر المحلي أو سيرفر الاستضافة الفعلي، وإنشاء موقع اختباري، والبدء بإضافة بعض المحتوى المنوع في هذا الموقع كالمقالات والصفحات الثابتة كي ترى أثر القالب الذي تطوره بشكل أفضل على الموقع. يمكن أن تقوم بإضافة هذا المحتوى بنفسك بشكل يدوي، أو تعتمد على إضافات مساعدة تسهل لك الأمر وتولد محتوى تجريبي وهمي مثل إضافة FakerPress ، أو تعتمد على عينات من محتوى جاهزة حيث أن مطوري ووردبريس يوفرون عادة مجموعات محتوى لمطوري القوالب يمكنك تنزيلها واستيرادها إلى موقعك الاختباري للتأكد من أن قالبك يحتوي على جميع أنماط المحتوى المطلوبة. القالب الذي سنطوره معًا ضمن هذه السلسلة سيكون باللغة العربية فقط أي السلاسل الثابتة ستكتب ضمن الكود باللغة العربية، كما أن اتجاهات عرض العناصر والفقرات فيه من اليمين لليسار بشكل افتراضي، لكننا سنجعل هذا القالب قابل ليكون بلغة أخرى من خلال تضمين السلاسل النصية وتغليفها ضمن دوال الهروب المخصصة للترجمة مثل: __( ‘String’, ‘text-domain’ );
_e( ‘String’, ‘text-domain’ );
esc_html__( ‘String’, ‘text-domain’ );
esc_html_e( ‘String’, ‘text-domain’ ); أنصح بقراءة المقال التالي: خطوات تعريب قالب ووردبريس (الدليل الكامل مع التطبيق العملي)
والمقال التالي تعريب قالب ووردبريس للمطورين لمزيد من المعلومات المفصلة حول جعل قالب ووردبريس قابل للتعريب أو قابل ليكون بعدة اللغات. الآن بعد أن تجهز موقع ووردبريس يمكنك العودة إلى هنا، لنبدأ معًا خطوة بخطوة في بناء ثيم ووردبريس بسيط وأنيق سأخصصه لمدونة ووردبريس تتحدث عن نباتات الزينة وأنواعها ويمكنك بالطبع أن تعتمد أي محتوى آخر تهتم به. خطوات التطبيق العملي1 لبناء قالب ووردبريس من الصفر الخطوة1. ارسم مخطط أولي يحدد تصميم موقعك الخطوة2. أنشئ المجلدات والملفات الضرورية لعمل القالب. الخطوة3. تخصيص ملف تنسيقات القالب style.css الخطوة4. أنشئ ملف التمبلت الأساسي index.php الخطوة 5. أضف المزيد من التنسيقات المطلوبة لعناصر القالب الخلاصة الخطوة1. ارسم مخطط أولي يحدد تصميم موقعك بعد أن تحدد فكرة الموقع ووظائفه من الضروري أن تخطط لكيفية ظهور أو عرض المحتوى الذي ستضيفه في هذا الموقع، وتضع تصورأولي للأفكار والوظائف التي تود تطبيقها في القالب. تعتبر طريقة رسم الإطارات الشبكية للموقع أو ما يعرف بمخططات الصفحات ( Wireframes ) طريقة سهلة وسريعة لوضع تصور أولي عن مظهر الموقع (سواء على أجهزة سطح لمكتب أو التابلت أوالهواتف الجوالة)، ومشاركته مع فريق العمل أو عرضه على العميل قبل تطويره الفعلي. الإطار الشبكي أو المخطط الهيكلي (Wireframe) هو مخطط ثنائي الأبعاد يوضح التصميم العام لصفحات موقع إلكتروني أو تطبيق ويب، وهو يشابه المخططات المعمارية التي ترسم قبل تنفيذ أي بناء، فهي تحدد ميزات موقع الويب وتعطي نظرة عامة حول بنية كل صفحة من صفحاته، وتبين تخطيط وتوزع العناصر فيها، والمعلومات والوظائف التي تحتويها. ويمكن أن يرسم هذا المخطط بشكل بدائي بأقل التفاصيل أو يتضمن قدرًا أكبر من التفصيل حسب المتطلبات. ويتم رسم هذه المخططات إما يدويًا على الورق أو باستخدام برامج متخصصة مثل Sketch أو Proto io أو Figma أو فوتوشوب أو كانفا أوغيرها من البرامج المتخصصة بالرسم.. كما أن بعض هذه البرامج تملك إمكانية تحويل التصميم الأولي إلى قالب ستاتيكي HTML مما يسهل عليك عملية برمجة القالب الخاص بك في بيئة ووردبريس بالاعتماد على التصميم الستاتيكي. تحويل الإطار الشبكي إلى موقع فعلي الجدير بالذكر أن هذه المهمة قد لا تكون وظيفتك كمطور قوالب ووردبريس في حال كنت تعمل ضمن فريق عمل، حيث أن الشركات المتخصصة توكل إلى مصمم واجهات المستخدم UI/Ux Designer، وتطلب من مصمم المواقع تكويد التصميم وتحويله لتصميم ثابت يتضمن كافة العناصر الهيكلية والتنسيقات بتقنيات الواجهة الأمامية (HTML ،CSS ،JS) وتكون مهمتك كمطور ووردبريس أن تبرمج التصميم الجاهز وتحوله لقالب ووردبريس تفاعلي بتقنية (PHP). وفي هذه الحالة لاداعي لأن تقوم بهذه الخطوة ويمكنك مباشرة إنشاء الملفات التي تعكس هذا التصميم وكتابة الكود البرمجي اللازم. لكننا هنا نفترض أنك تعمل بنفسك وبشكل مستقل على بناء قالب من الألف للياء. اقرأ المزيد: شرح تصميم قوالب ووردبريس وتخصيصها من البداية للنهاية في حالتنا سنقوم ببناء الموقع بالكامل دون الاعتماد على أي تصميم ستاتيكي مسبق للعمل عليه. نريد أن تكون الصفحة الرئيسية لموقعنا بالشكل التالي: رسم الإطار الشبكي للموقع الإلكتروني الخطوة2. أنشئ المجلدات والملفات الضرورية لعمل القالب. كما شرحنا في دروس سابقة فإن ملفات القوالب يجب أن تحفظ في الدليل themes الموجود ضمن الدليل wp-content ضمن المجلد الجذر للموقع. في الدليل themes يجب أن يكون لديك دليل فرعي (أومجلد منفصل) لكل قالب مثبت على موقعك. ويجب أن يتضمن مجلد أي قالب على الأقل ملفين كي يعمل بشكل صحيح هما الملف index.php وملف التنسيقات style.css. لذا سأقوم في الدرس الحالي بإنشاء مجلد جديد ضمن الدليل خاص بملفات القالب وأسميه ola1 _ويمكنك بالطبع تسميته كما تشاء ليعبر عن القالب الخاص بك_ وأنشئ فيه هذين الملفين الأساسيين. بالطبع هذا لا ينطبق على القوالب الأبناء (Child themes) التي تكون عبارة عن قوالب فرعية من قوالب أساسية أخرى، فهذه القوالب يمكن أن تحتوي فقط على ملف تنسيقات style.css، ويجب أن تكون كافة محتوياتها كذلك في مجلد فرعي منفصل ضمن الدليل themes، ويكون القالب الأب موجود كذلك ضمن ملجد فرعي بجانب مجلد القالب الابن. تحتوي معظم قوالب ووردبريس كذلك على الملف function.php الذي يعرف باسم ملف وظائف القالب وهذا الملف يضم عادة الوظائف أو الدوال البرمجية التي نحتاج لاستخدامها في جميع أنحاء القالب. حيث يتم تشغيل جميع الوظائف الموجودة في هذا الملف في كل مرة يتم فيها تحميل الموقع وطالما أن القالب مفعل في الموقع الحالي. يمكنك إنشاء هذا الملف مباشرة في مجلد القالب أو تأجيل إنشاءه عندما تحتاج لوضع كودك البرمجي فيه. سننشئ هذا الملف في قالبنا مباشرة لأننا سنحتاج في درس اليوم لإضافة بعض أكواد تخصيص القالب فيه. بعدها يمكن أن يتضمن قالبك كذلك بشكل اختياري على العديد من ملفات php الأخرى (ملفات تمبلت القالب) التي تستدعى وفق تسلسل هرمي حسب الصفحة التي يتم عرضها من الموقع، وغيرها من ملفات الوسائط وملفات التنسيقات وسكربتات جافاسكريبت الإضافية والتي تضاف للقالب حسب الحاجة، والتي تشكل مع بعضها البعض قالب ووردبريس متكامل كما سنترى تباعًا في دورسنا القادمة ضمن هذه السلسلة التعليمية. بالنسبة لقالبنا الحالي سأحتاج أيضًا لملف صورة باسم screenshot.png لتمثل الصورة الخاصة بالقالب عند استعراض القوالب في لوحة التحكم من خلال التبويب ا لمظهر< قوالب، وسأحتاج صورة أخرى باسم default.png سأستخدمها ضمن الكود لتكون صورة مميزة للمقالات التي لا تملك صورة مميزة، وللتنظيم سأضع كافة الصور في مجلد فرعي باسم images . وبالتالي سيبدو مجلد القالب الخاص بي بالشكل التالي: بنية الملفات والمجلدات لقالب ووردبريس الخطوة3. تخصيص ملف تنسيقات القالب style.css أول ملف سأبدأ بالعمل عليه هو style.css الذي يعتبر الملف المسؤول عن تعريف نظام ووردبريس بالقالب الخاص بك حيث يتضمن هذا الملف عادة كافة المعلومات التي تعرف بالقالب مثل اسم القالب، واسم المطور، ورقم الإصدار، وغيرها من المعلومات العامة التي تكتب ضمن كتلة تعليق في بداية هذا الملف كما يلي: @charset "UTF-8"; /* Theme Name: ola1 Theme URI: https://www.wpar.net/ Author: OLA SALEH Author URI: https://www.wpar.net/author/engolasaleh/ Description: قالب مطور لأغراض تعليمة ضمن دورة مجانية لتعلم تطوير القوالب المقدمة من موقع ووردبريس بالعربية Version: 1.0 */ بدأنا الملف بكتابة التعليمة التالية @charset “UTF-8” التي تخبر الذي المتصفح بقراءة ملف css كـ UTF-8. وهذا الأمر يفيد إذا كان ملف التنسيقات الخاص بك يحتوي على محارف UNICODE وليس محارف ASCII فقط. بعدها كتبنا معلومات توصيفية عامة حول القالب بشكل تعليق بين الرمزين /* */ وضمنا فيه اسم الثيم، وعنوان URI لهذا الثيم، والوصف، واسم المؤلف، وعنوان URI للمؤلف، والإصدار.. @charset "UTF-8"; /* Theme Name: ola1 Theme URI: https://www.wpar.net/ Author: OLA SALEH Author URI: https://www.wpar.net/author/engolasaleh/ Description: القالب مطور لأغراض تعليمة ضمن سلسلة تعلم تطوير القوالب المقدمة على موقع ووردبريس بالعربية Version: 1.0 */ وتجدر الإشارة هنا أننا قد نحتاج لتمرير المزيد من المعلومات الوصفية حول القالب في حال كنا ننوي رفعه على متجر قوالب ووردبريس الرسمي ، أو بعض المتاجر المتخصصة التي تشترط وجود مجموعة من المعايير في القوالب التي تبيعها مثل متجر بيكاليكا للمنتجات الرقمية. ففي مثل هذه الحالات قد يشترط عليك المتجر أن تنشر القالب تحت رخصة جنو العمومية، وتبين أبرز ميزات القالب من خلال وسوم القالب tags مثل كون هذا القالب يتضمن ترويسة مخصصة أو شريط جانبي أو صورة مميزة أو قائمة مخصصة وما إلى ذلك.. كي تسهل على المستخدمين بتصفح القوالب حسب ميزاتها. كما يجب عليك إضافة مجال النص Text Domain في حال كنت تريد جعل قالب ووردبريس قابل للترجمة لتحديد موقع ملفات الترجمة الخاصة بالقالب. في هذه الحالة قد تبدو ترويسة ملف التنسيقات أطول كما يلي: @charset "UTF-8"; /* Theme Name: ola1 Theme URI: https://www.wpar.net/ Author: OLA SALEH Author URI: https://www.wpar.net/author/engolasaleh/ Description: القالب مطور لأغراض تعليمة ضمن سلسلة تعلم تطوير القوالب المقدمة على موقع ووردبريس بالعربية Version: 1.0 Liicense: GNU General Public License v3 or later License URI: http://www.gnu.org/licenses/gpl-3.0.html Text Domain: ola1 Tags: one-column, custom-menu, featured-images */ بالطبع سوف يتضمن ملف تنسيقات القالب _إضافة للمعلومات الوصفية_ مجموعة من القواعد الأساسية المطلوبة لتنسيق عناصر الثيم الخاص بك، والتي يمكنك من خلالها تخصيص وتنسيق الثيم وفق متطلباتك التصميمة، وتتم إضافة هذه التنسيقات تباعًا للملف حسب الحاجة. حاليًا وبما أننا قررنا أن يكون القالب الخاص بنا باللغة العربية فسوف نضيف له خطوط تدعم اللغة العربية (سأضيف الخط Noto Sans Arabic ) فهو من الخطوط العربية الأنيقة التي توفرها خطوط جوجل للويب، وسنستخدم بشكل بديل خط Tahoma عند عدم توفر هذاالخط، كما وسنجعل اتجاه العناصر من اليمين لليسار ونحدد الهوامش الداخلية Padding والهوامش الخارجية Margin وارتفاع فواصل الأسطر line-height العامة كما يلي: /* General styles */ @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Arabic:wght@300;400;700&display=swap'); html, body,p { direction: rtl; font-family: 'Noto Sans Arabic',Tahoma, sans-serif; font-weight: 300; line-height: 1.75; margin: 0; padding: 0; } الخطوة4. أنشئ ملف التمبلت الأساسي index.php إن كتابة ترميز HTML لقالب ووردبريس هو بالضبط نفس كتابة الترميز لموقع HTML / CSS عادي. لذا قبل أن نكتب كود الملف index.php دعنا نلقي نظرة على تصميم موقعنا حسب الإطار الشبكي لتحديد الوسوم والعناصر المناسبة للملف. كما تلاحظ ستحتاج في الصفحة الرئيسية إلى عرض ثلاث مناطق أساسية: هيدر الصفحة الذي يعرض اللوغو وقائمة التنقل (نحتاج للحصول عليه من خلال دالة get_header) محتوى الصفحة الذي يعرض منطقة مميزة ضمنها عبارة نصية إضافة لعرض آخر مقالات منشورة في الموقع (نحتاج للحصول عليه من خلال عرض سلاسل نصية ثابتة ثم المرور عبر حلقة للاستعلام عن مقالات ووردبريس وعرض قائمة التنقل عبر المقالات) وتذييل الصفحة الذي يعرض قائمة الفوتر وعبارة حقوق النشر (نحتاج للحصول عليه من خلال دالة get_footer) لجلب هذه المعلومات نحرر الملف index.php ونكتب الكود التالي فيه: