البحث في الموقع

انتهينا في المقال السابق إنشاء الملفات الأساسية لبرمجة قالب ووردبريس من سلسلة برمجة قالب ووردبريس من الصفر من مرحلة برمجة الملفات الأساسية لقالب ووردبريس المسؤولة عن تصميم الشكل العام للموقع وعرض المحتويات المطلوبة في ترويسة وتذييل وجسم الصفحات. هذا المقال هو المقال الرابع من سلسلة المقالات التالية: مدخل إلى برمجة قوالب ووردبريس أساسيات تطوير قالب ووردبريس إنشاء الملفات الأساسية لبرمجة قالب ووردبريس إضافة تنسيقات 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

انتهينا في المقال السابق من إضافة تنسيقات 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 عدة وسطاء وهي: ‎$handle‎: اسم فريد يمثل الملف الذي تريد تضمينه لتمييزه الملف عن غيره من الملفات. ‎$src: مسار الملف الذي تريد تضمينه. ‎$deps: dependencies التي يحتاج الملف إلى تحميلها قبل تحميل الملف. على سبيل المثال، إذا كنت تستخدم مكتبة jQuery في ملف جافا سكريبت الخاص بك فيجب أن تضيفها ضمن مصفوفة الاعتماديات. ‎$ver: إصدار الملف يمكنك تحديد رقم الإصدار للملف الخاص بك للتحكم في التخزين المؤقت والتحديثات. ‎$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 لقالب ووردبريس كل ما تحتاجه لتعلم الووردبريس تعلم برمجة وتطوير مواقع ووردبريس أساسيات لغة جافا سكريبت كيفية البدء في تطوير قوالب ووردبريس

بعد أن وضحنا أهم المعلومات الأساسية التي يجب على مطور قالب ووردبريس معرفتها قبل البدء في برمجة القوالب، سنبدأ في هذا المقال بشكل فعلي بإنشاء كافة الملفات المطلوبة لعمل القالب وبرمجتها باستخدام لغتي PHP و HTML. هذا المقال هو المقال الثالث من سلسلة المقالات التالية: مدخل إلى برمجة قوالب ووردبريس أساسيات تطوير قالب ووردبريس إنشاء الملفات الأساسية لبرمجة قالب ووردبريس إضافة تنسيقات CSS لقالب ووردبريس إضافة المميزات لقالب ووردبريس باستخدام جافا سكريبت لنتعرف على الهيكلية العامة لمجلدت وملفات قالب ووردبريس ونبدأ بإنشاء الملفات الضرورية لقالبنا المخصص. إنشاء مجلد خاص بقالب ووردبريس سنسمي قالبنا الحالي بالاسم modawanty أي مدونتي لذا سننشئ مجلدًا بهذا الاسم على خادم محلي داخلي localhost ولن نحتاج للاتصال بالإنترنت، كما سنعتمد على محرر الأكواد فيجوال ستوديو كود VS Code فهو يحتوي على إمكانيات متعددة لتسهيل العمل فإذا لم تكن قد حولت حاسوبك إلى خادم محلي بعد ولم تنشئ موقع ووردبريس تجريبي بعد لا تقلق يمكنك القيام بذلك من خلال خطوات سهلة وبسيطة مشروحة بالتفصيل في مقال كيفية تثبيت ووردبريس وفي مقال دليلك المصور لتثبيت ووردبريس والبدء بإنشاء متجر ووكومرس. بعدها سيكون عليك إنشاء مجلد خاص بقالب ووردبريس وتسميه modawanty داخل مجلد القوالب themes الموجود كما شرحنا في الدرس السابق ضمن المجلد wp-content داخل الدليل الجذر لموقع ووردبريس الخاص بك، وبعدها سننشئ في هذا المجلد مجموعة ملفات القالب التالية المبينة في الصورة التالية. تذكر أن لكل ملف من هذه الملفات استخدامًا مخصصًا فبعضها ملفات templates تستدعى ضمنيًا من قبل نظام ووردبريس لعرض صفحات الموقع المختلفة مثل index.php و page.php و archive.php وبعضها ملفات قالب جزئية تستخدم لتجميع الأكواد المتكررة في أكثر من مكان في الموقع مثل header.php و footer.php وإليك قائمة مختصرة بأسماء ووصف كل ملف من بينها: index.php: ملف عرض الصفحة الرئيسية للموقع وأي صفحة لا تحوي ملف مخصص لعرضها style.css: ملف تنسيقات القالب الأساسي ويحتوي بعض البيانات التعريفية حول القالب header.php: ملف ترويسة القالب ويعرض عادة قوائم التنقل في الموقع والشعار وعناوين الصفحات وما إلى ذلك وقد يحتوي معلومات عن ملفات خارجية يستخدمها القالب مثل ملفات تنسيق CSS إضافية. footer.php: ملف تذييل القالب يعرض معلومات مثل قائمة التذييل وبعض الودجات وعبارة حقوق النشر وقد يستدعي ملفات JS مستخدمة في الموقع. archive.php: ملف عرض صفحات أرشيف مقالات الموقع. page.php: ملف عرض الصفحات الفردية في الموقع. single.php: ملف عرض المقالات الفردية في الموقع. slideshow.php: ملف لعرض أحدث منشورات الموقع بشكل شريط منزلق screenshot.png: ملف الصورة المصغرة الخاصة بالقالب عند عرضه في لوحة التحكم functions.php: ملف لإضافة وظائف وميزات إضافة للقالب مجلد images: لتخزين صور خاصة بالقالب مجلد 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. برمجة قالب ووردبريس بالاعتماد على قوالب بادئة قالب البدء أو قالب التمهيد 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. فرص عمل أكثر أخيرًا فإن تعلم تطوير قوالب ووردبريس يفتح أمامك فرصة جيدة للربح المادي حيث يمكنك الاستفادة من بيع القوالب على المتاجر المتخصصة في بيع المنتجات الرقمية وكسب زبائن مع ضمان عدم وجود ثغرات نظرًا لخضوع القوالب للعديد من الاختبارات على مواقع بيعها المشهورة والمعتمدة فهذا المجال مربح ومطلوب في سوق العمل. على سبيل المثال يعتبر متجر بيكاليكا لبيع المنتجات الرقمية من أكبر المواقع العربية المتخصصة في بيع القوالب الجاهزة المختبرة من قبل كفاءات رفيعة المستوى. لذلك، فإن تعلم ووردبريس يحتاج منك فهم ما يجري وراء الكواليس كي تتمكن من إنتاج قالب مميز أو حتى عمل إضافة لقالب مسبق التجهيز أو حتى قالبك الخاص. متطلبات مسبقة لتطوير قالب ووردبريس يستخدم ووردبريس مجموعة مختلفة اللغات والتقنيات البرمجية الأساسية التي يفيدك تعلمها في التقدم خطوة للأمام في التعامل مع ووردبريس من مجرد إنشاء وتخصيص مواقع بنظام الووردبريس إلى مطور للوردبريس. فإذا كنت مطور مواقع ووردبريس فقد تتساءل عن المتطلبات المسبقة التي عليك معرفتها كي تتمكن من برمجة وتطوير القالب الخاص بموقعك أو تخصيص قالب لأحد عملائك. لتطوير قالب ووردبريس يجب أن تكون على دراية كافية بكل من التقنيات التالية: لغة HTML ولغة CSS اللتان تعملان من طرف العميل وتستخدمان لتصميم واجهة الموقع فلغة HTML هي المسؤولة عن تحديد هيكلية الموقع، ولغة CSS هي المسؤولة عن تنسيق وتصميم عناصره. معرفة في لغة جافا سكريبت لإضفاء التأثيرات التفاعلية والحركية المتقدمة على موقعك مثل الصور المنزلقة ومشغلات الفيديو وما إلى ذلك. لغة PHP التي تعمل من طرف الخادم وتستخدم من أجل جعل الموقع قادرًا على التفاعل مع قاعدة البيانات وجلب البيانات منها ل عرض محتوى ديناميكي التعامل مع لغات قواعد البيانات مثل MySQL أو MariaDB لأنها تساعد في إنشاء وتحديث وإضافة وحذف البيانات من قاعدة البيانات الخاصة بالموقع. تحتاج أيضًا إلى التعامل مع أحد محررات الأكواد مثل Visual Studio Code. وأخيرًا تحتاج لمعرفة مسبقة بنظام ووردبريس وكيفية إنشاء المواقع باستخدامه والتعامل مع لوحة تحكمه ورفع وتثبيت القوالب والإضافات إليه فكل هذه معلومات أساسية لابد من امتلاكها كي تبدأ ببرمجة قالب ووردبريس مخصص. بخصوص بووردبريس: سوف تحتاج أيضا إلى تحويل حاسوبك إلى خادم أو مستضيف محلي Localhost باستخدام برامج مساعدة مثل برنامج XAMPP أو Wamp لسهولة العمل وتثبيت ووردبريس على جهازك وإعداد البنية التحتية لتشغيل الموقع وتطوير وتصميم القالب المطلوب مع القدرة على مشاهدة التغيرات بصورة واضحة وسريعة. ولمطالعة المزيد من المعلومات حول تثبيت ووردبريس على خادم محلي أنصح بمطالعة مقال دليل إعداد خادم ويب محلي خطوة بخطوة ومقال كيفية تثبيت ووردبريس. ملاحظة: يمكنك بالطبع برمجة قالب ووردبريس بالاعتماد على خادم خارجي على استضافة فعلية على الانترنت لكن في هذه الحالة سيكون عليك الوصول إلى ملفات موقع ووردبريس البعيد والانتظار ليتم تحميل الملفات للاستضافة مع كل تغيير أو تحديث للشيفرات البرمجية وقد يبطّئ من عملية التطوير ويضيف عليها عمليات يدوية مملة لهذا فمن المستحسن استخدام خادم محلي، مع وجوب معرفة بعض الأشياء المهمة مثل كيفية إيقاف التخزين المؤقت للمتصفح حتى يحدث التحديث اللحظي مع كل كود تقوم بكتابته. ملاحظة: يمنع التخزين المؤقت للمتصفح Browser cache ظهور ما تقوم به من تغيرات وإضافات على الشيفرات البرمجية والناتج منها في كثير من الأحيان، لهذا فيجب إيقافه عند العمل على مشروع جديد، ويتم عمل ذلك عن طريق الدخول لوضع المطور من خلال الضغط على مفاتيح Ctrl+Shift+I أو الضغط على مفتاح F12 عند عرض الموقع ضمن متصفح chrome وإيقاف التخزين المؤقت من خلال تفعيل خيار Disable cache في التبويب Network كما هو مبين في الصورة التالية: بعد التأكد من أن برنامج XAMPP يعمل بطريقة صحيحة وأنه قد تم تثبيت أحدث إصدار ووردبريس عليه من موقعه الرسمي وإعداد موقع ووردبريس تجريبي على جهازك ستكون الآن جاهزًا للبدء بالخطوات العملية لبرمجة قالب ووردبريس من الصفر. خطوات برمجة قالب ووردبريس من الصفر يتكون قالب ووردبريس من مجموعة من الملفات البرمجة التي تتفاعل مع بعضها البعض كي تحدد شكل ومظهر موقعك، وتمر برمجة قالب ووردبريس بعدة مراحل فأنت لن تفتح محرر الأكواد وتشرع بالبرمجة مباشرة بل عليك المرور بعدة خطوات لإنجاز العمل على أكمل وجه. وتشمل برمجة قالب ووردبريس الخطوات الأساسية التالية: وضع متطلبات الموقع وتحديد كافة الوظائف والمميزات التي تحتاج لوجودها فيه إنجاز تصميم أولي يحدد شكل الموقع وتوزع العناصر وتنسيقها وتحديد الألوان والخطوط وما شابه بما يلائم متطلباتك وهويتك البصرية. البدء بتحويل التصميم إلى قالب فعلي يعمل على الاستضافة المحلية من خلال كتابة شيفراته البرمجية باستخدام HTML و PHP و CSS وجافا سكريبت. تصدير القالب بشكل ملف zip ورفعه على الموقع على الاستضافة الفعلية واختبار أدائه والتأكد من أنه يعمل بالشكل الصحيح. وفي مقال اليوم سنهتم بخطوة تحديد متطلبات موقعنا وتصميمه على فيجما وسنشرح خطوات برمجة القالب في الدروس اللاحقة من السلسلة. تصميم قالب ووردبريس حتى تبدأ بإنشاء قالب موقعك بصورة صحيحة يفضل أن ترسم تخطيطًا أوليًا سريعًا للموقع توضح البنية العامة له بشكل إطارات wireframes، أو التوجه مباشرةً لتصميمه على أحد برامج التصميم لمزيد من الدقة مثل فيجما Figma أو أدوبي X‎D أو Sketch أو غيرها من أدوات تصميم واجهة المستخدم، تسهل تلك البرامج تصور شكل القالب النهائي والوصول لتصميم مناسب في النهاية. تصميم الشكل النهائي الذي سيظهر عليه القالب خطوة مهمة جدًّا، فهي توضح لصاحب المشروع الشكل النهائي الذي سوف يكون عليه شكل الموقع للتأكد من أنه يلبي المتطلبات كما أنه سيكون نقطة قانونية مهمة لك، فربما يعود صاحب المشروع في رأيه ويطلب شيء آخر لأي سبب من الأسباب، ولكن مع وجود التصميم سيكون ضمان كبير لعدم تغيير رأيه. ملاحظة: إذا كان هناك مطالب أخرى لاحقة من صاحب المشروع بإضافة وتعديل بعض الأمور الموجودة في التصميم فلا تتشدد، وتحلى بالمرونة لأن هذا يفيدك مستقبلًا إما بعودته لطلب خدماتك مرة أخرى، أو بإعطائك تقييم جيد يفيدك في المشاريع الأخرى وسيزيد ذلك من ثقة الآخرين بك. تصميم قالب ووردبريس بواسطة برنامج فيجما سوف نشرح في هذه السلسلة كيفية بناء قالب ووردبريس لموقع مدونة بسيط يعرض المقالات، وسنبدأ أولًا بشرح كيفية إنجاز التصميم بواسطة فيجما Figma وذلك لوضع اللبنة الأساسية لتصميم الموقع، ونكمل خطوات برمجة القالب وتنسيقه وفق هذا التصميم في المقالات اللاحقة. نريد تصميم قالب بسيط يمثل مدونة لذا سنوجه مباشرة لتصميمه على وقع فيجما ووضع التصميم الذي نراه مناسبًا. سوف نقوم بتصميم الموقع كمدونة بها قائمتان أحدهما رئيسية والأخرى ثانوية في القسم العلوي للموقع أو ترويسة الموقع Header، وسنضع بينهما شريط صور منزلق Slider يعرض أهم مقالات الموقع وسنكتب الأكواد الخاصة بهذا المنزلق في القسم الأخير من السلسلة باستخدام لغة جافا سكريبت، ثم سنحدد ما يحتويه القسم الأوسط الخاص بعرض جسم الصفحة على سبيل المثال في صفحة المدونة سيعرض هذا القسم عناوين وصور ومقتطفات من أحدث المقالات المنشورة في المدونة معروضة وفق الترتيب التنازلي لتاريخ نشرها، ثم سننتهي بالقسم السفلي وهو التذييل الخاص بالمدونة Footer. تصميم القسم العلوي Heade نبدأ تصميم الموقع بإنشاء خلفية الصفحة الرئيسية وستكون باللون الأبيض، ثم ننشئ الخلفية الخاصة بالقائمة الثانوية في أعلى الصفحة وستكون باللون الأصفر، بعد ذلك ننشئ القسم الخاص بالمنزلق باللون الرمادي الفاتح ونضيف صورة واحدة له، ثم نختار في القسم الثالث اللون الأصفر للقائمة الرئيسية كما هو موضح بالشكل التالي: بعد ذلك نحدد ما ستحتويه القائمة العلوية الثانوية من قوائم فرعية أو صفحات، وستكون على سبيل المثال صفحة من نحن وسياسة الخصوصية واتصل بنا، يتبع ذلك البدء بوضع ما ستحتويه القائمة الرئيسية من محتويات وهي الصفحة الرئيسية، وبعض التصنيفات الأساسية مثل تقنية وهواتف وتطبيقات وحاسبات ووردبريس، وتصمم كلا القائمتين كما بالشكل التالي: تصميم جسم الصفحة Page في الخطوة التالية ننشئ جسم الصفحة وهو القسم الأوسط الذي سيعرض محتوى الصفحة والذي يختلف حسب نوع الصفحة ففي حالتنا تعرض الصفحة الرئيسية المقالات الحديثة المنشورة في المدونة سنقسم هذه الصفحة إلى قسمين، علوي وسفلي، يتكون القسم العلوي من صورتين للمقالات الأكثر قراءة مع مقتطفاتهم، أما القسم السفلي فيحتوي على مقتطفات كل المقالات التي يتم نشرها على المدونة وفق تاريخ نشرها من الأحدث للأقدم، يصمم الجزء الأول كالتالي: والجزء الثاني كالتالي: تصميم القسم السفلي للصفحة أو التذييل Footer سيكون القسم التالي هو التذييل الخاص بالصفحة، ويصمم بوضع خلفية بنفس اللون الرئيسي للمدونة ثم يعرض قائمة في التذييل تضم مجموعة من العناصر هي على سبيل المثال أحدث المقالات، والأكثر قراءة، والوسوم والتصنيفات وطرق التواصل وتحت قائمة التذييل سنعرض عبارة جميع الحقوق محفوظة واسم المدونة كما هو موضح بالشكل التالي: تصميم الموقع النهائي للصفحة على الحاسب يظهر في الشكل التالي التصميم النهائي للصفحة الرئيسية للمدونة: تصميم الموقع النهائي للصفحة على الشاشات الصغيرة يتم بعد ذلك عمل تصميم بشكل يناسب الحاسوب اللوحي وآخر للجوال كما بالشكل النهائي التالي لهما. التصميم مع وجود شريط جانبي Sidebar إن أردت أن يكون هناك شريط جانبي في الصفحة الرئيسية، فيمكنك عمل ذلك كما بالشكل التالي: وستجد في المقالات التالية أن عملية إضافة شريط جانبي تشابه عملية إضافة التذييل للصفحة فكلاهما يحتاج نفس الدوال الجاهزة التي توفرها ووردبريس. يمكنك متابعة تصميم باقي صفحات الموقع مثل صفحة من نحن، وصفحات الأرشيف، وصفحة نتائج البحث لكننا سنكتفي بتصميم الصفحة الرئيسية لموقعنا وستكون باقي الصفحات بتصميم مشابه مع بعض الاختلافات الطفيفة التي سنشرحها في حينها. خاتمة بهذا نكون وصلنا لنهاية هذه المقالة من سلسلة برمجة قالب ووردبريس من الصفر والتي بدأناها بتصميم الشكل العام للموقع والأقسام المهمة له بداية من الترويسة إلى المحتوى الأساسي للصفحة وانتهاء بالتذييل والشريط الجانبي وما يحتويه كل قسم من مكونات، سوف يكون الجزء الثاني في السلسلة هو شرح كيفية برمجة ملفات القالب الأساسية التي تعرض هذا المحتوى المطلوب وسنخصص الجزء الثالث والرابع لتنسيق طريقة عرض هذا المحتوى بالشكل المناسب لهذا التصميم. كتب المسودة الأولية للمقال هشام حسين. اقرأ أيضًا المقال التالي: أساسيات تطوير قالب ووردبريس تعلم برمجة وتطوير مواقع ووردبريس إنشاء قاعدة بيانات لووردبريس الدليل الشامل لودجات ووردبريس

هل صنعت قالب HTML وأحببته لكنّك لم تعرف كيف تُحوّله إلى قالب ووردبريس؟ ليس بعد الآن، ستتعلم في هذا الدرس كيف تقوم بذلك. هل تعلم بأنّ هناك الكثير من المُطوّرين الذين يكسبون رزقهم عن طريق إنشاء قوالب وإضافات ووردبريس (Wordpress) وبيعها؟ وهل تعلم أنّه بإمكان مطوّري ووردبريس الحصول على آلاف الدولارات سنويًَّا من خلال بيع مُنتجاتهم؟ هذا الدّرس مُخصّص لمطوّري الويب، على فرض أن القارئ على اطّلاع (ولو بشكل مُبسّط) بما يتعلّق بلغة PHP وMySQL ومعلومات عامّة عن كيفية تنصيب واستخدام ووردبريس. هذا الدرس جزء من سلسلة تعلم كيفية تطوير قوالب ووردبريس: مقدمة إلى تطوير قوالب ووردبريس: تحويل صفحة HTML إلى قالب ووردبريس (هذا الدرس) التصفيح (Pagination) في قوالب ووردبريس إضافة قوائم التنقل (Navigation Menu) إلى قالب ووردبريس صف وتسجيل ملفات Javascript و CSS في قوالب ووردبريس متطلبات التّشغيل نحتاج إلى تحميل نسخة ووردبريس من الموقع الرسمي ، سنستخدم النّسخة العربية من هذا الرّابط. تحتاج ووردبريس إلى خادوم ويب، سواء كان Apache أو Nginx أو الخادوم المُدمج مع لغة PHP (بإصدار5.4 وما فوق). وتحتاج أيضًا إلى خادوم قواعد البيانات MySQL. لنقم بإنشاء مُجلّد جديد wordpress_tutorials ونضع فيه نسخة ووردبريس النّاتجة عن فكّ ضغط الملف الذي قمنا بتحميله. ملاحظة: يمكن أن تستخدم البرامج المُجهّزة خصّيصًا بخواديم Apache و MySQL مثل MAMP ،WAMP أو XAMPP. مع مُراعاة الاختلاف بين رابط خادوم الويب ومعلومات خادوم MySQL مع ما سنستخدمه في هذا الدّرس. سنقوم باستخدام الخادوم المُدمج مع PHP لتجنّب تنصيب خادوم Apache أو Nginx وتجنب الخوض في الإعدادات الخاصّة بكل واحد منها. لتشغيل الخادوم المُدمج نتوجه باستخدام سطر اﻷوامر إلى المجلّد الذي يحوي نسخة ووردبريس. ثم نكتب أمر: php -S localhost:8000 يتمّ تشغيل خادوم الويب المُدمج مع PHP على الحاسوب، يمكن التّوجّه عن طريق المُتصفّح إلى الرّابط localhost:8000 للتّأكد من أن الخادوم يعمل. تهيئة قالب HTML سنقوم بالاعتماد على قالبٍ قمتُ بإعداده مُسبقاً، يمكن تحميله من هذا الرابط، التّصميم عبارة عن قالب عادي يحوي بضع ملفّات HTML ،CSS و JavaScript. وهو مبني اعتمادًا على إطار عمل Foundation مع بعض التّعديلات والإضافات. هذا القالب تجريبيّ فقط لرؤية كيفية ظهور الشكل العامّ له. نتوجه إلى مجلّد المشروع الذي يحوي ملفات ووردبريس، ومنه نتوجّه إلى مجلد wp-content ثم إلى مُجلّد themes. نقوم بإنشاء مُجلّد اسمه my_theme بمثابة مُجلّد القالب الذي سنقوم بإنشائه. ملفات القالب الأساسية نحتاج إلى وجود ملفّين على الأقل ضمن مجلد القالب الذي أنشأناه، وهما: - style.css - index.php وهذا أقل ما يجب توفّره في القالب ليكون قالبًا صالحًا للاستخدام. نتجه إلى صفحة تغيير القوالب من لوحة تحكم ووردبريس لنرى ما يشبه: كما تلاحظون لا نرى القالب الجديد الذي أنشأناه ضمن القوالب، وذلك ﻷن هناك شيئًا آخر علينا فعله قبل أن نرى القالب الجديد في هذه الصفحة. نحتاج إلى إضافة تعليق في ملف style.css كالتّالي (يمكن تعديل أيّ قيمة أيضًا): /* Theme Name: قالبي الجديد Author: عمار العقاد Author URI: http://aalakkad.me Description: قالب جديد، نقوم من خلاله بالتّدرّب على إنشاء قوالب WordPress. Version: 1.0 */ تقوم ووردبريس بالدخول إلى كل مجلد في مجلد القوالب، ثم تبحث عن ملف style.css بداخله تعليق يشبه التّعليق السابق، ثم تقوم بتفسير هذه التّعليقات ووضعها في صفحة القوالب التي تظهر للمُستخدم من خلالها أسماء وتوصيف القوالب. وهناك تفصيلات أخرى للتعليقات في ملف style.css يمكن الاطلاع عليها كاملة من ملفات التوثيق. يمكن التوجه إلى صفحة القوالب من خلال لوحة التحكم، لنرى شيئًا مُشابهًا لما يلي: لنقم بتفعيل هذا القالب الجديد، ثم نتوجّه إلى الصّفحة الرّئيسية للمُدوّنة (الصفحة التي تُظهر المقالات وليست صفحة لوحة التّحكم). إن كنت تستخدم الخادوم المُدمج مع PHP بالطريقة التي ذكرناها، فيكون رابط الصّفحة الرئيسية هو: localhost:8000. سنرى صفحة بيضاء دون أن تحوي أيّ شيء، وذلك ﻷن القالب ما زال فارغًا تمامًا. سيتغيّر الوضع بعد قليل. نقل قالب HTML إلى قالب ووردبريس ما سنفعله في الخطوة الأولى هو وضع قالب HTML في ملف index.php ثم نقوم بتعديل مسارات ملفات CSS و JavaScript. ستكون جميع الصفحات التي نستخدمها من ووردبريس بعد تفعيل القالب الجديد مُتطابقة، وكأنها قالب HTML نفسه. وهذا هو المطلوب في هذه المرحلة، سنقوم بإضافة التّفاصيل فيما بعد وعلى عدة مراحل. نقوم الآن بنسخ محتوى ملف index.html كاملًا من قالب HTML ونضعه في ملف index.php في قالبنا الجديد my_theme ضمن ووردبريس. ثم ننسخ مجلد assets كما هو إلى داخل مجلد قالبنا الجديد. لنرى كيف أصبح شكل الموقع بعد أن وضعنا محتوى ملف index.html في ملف index.php: يظهر الآن القالب بهذا الشّكل ﻷن ملفات CSS وJavaScript أصبحت في مسار مختلف عن المسار الذي كان موجودًا في قالب HTML. علينا الآن أن نقوم بتعديل مسارات هذه الملفات كي يُصبح شكل قالب ووردبريس الجديد مُطابقًا لشكل قالب HTML. توفّر لنا ووردبريس عددًا من الدّوالّ (functions) مهمتها تسهيل إنشاء القوالب، سنستخدم منها get_template_directory_uri()، تقوم هذه الدالّة بإرجاع قيمة نصّيّة هي رابط القالب. مثلاً، إن كان مجلد القالب هو my_theme ورابط خادوم الويب الذي نعمل عليه هو http://localhost:8000 ستكون نتيجة الدالّة هي: http://localhost:8000/wp-content/my_theme يجب أن نستخدم هذه الدالّة أو ما يشابهها لنحصل على الرّوابط، ولا نستخدم روابط نضعها بشكل يدوي، فيُمكن لرابط خادوم الويب أن يتغير، وإن كانت الروابط موضوعةً بشكل يدوي فسيظهر شكل القالب كما في الأعلى خاليًّا من ملفات CSS و .JavaScript. نقوم بتعديل ملف index.html في قسم head، نبحث عن سطر استدعاء ملفات CSS، ثم نقوم بالتّعديل عليها لتصبح بالشّكل: في قسم head أيضًا نُريد استبدال رابط استدعاء ملف modernizr.js ليستخدم دالّة get_template_directory()، فيُصبح: <script src="<?php echo get_template_directory_uri(); ?>/assets/js/modernizr.js"></script> أخيرًا نبحث في نهاية ملف index.php عن سطر استدعاء ملف JavaScript، ونقوم بالتّعديل عليه ليُصبح كما يلي: <script src="<?php echo get_template_directory_uri(); ?>/assets/js/vendor.js"></script> الآن عندما يتم طلب المُدوّنة من المُتصفّح، ستكون النّتيجة النّهائية للتعديلات الثلاثة التي قمنها بها كالتالي: <link rel="stylesheet" href="http://localhost:8000/wp-content/themes/my_theme/assets/css/main.css"> <script src="http://localhost:8000/wp-content/themes/my_theme/assets/js/modernizr.js"></script> <script src="http://localhost:8000/wp-content/themes/my_theme/assets/js/vendor.js"></script> نذهب الآن إلى الصّفحة الرّئيسية للمُدوّنة لنرى كيف أصبح القالب. في آخر فقرة من هذا الدرس سنقوم بتعديل ترويسة الموقع التي نصّها الحالي هو: "عنوان الموقع"، والذي يظهر في الجُزء العُلويّ. نريد تغيير هذا النصّ ليصبح اسم المدونة التي قمنا بإدخالها أثناء مرحلة التّنصيب، يمكنك تغيير اسم المدونة من لوحة التحكم ثم الإعدادات. لنفتح صفحة index.php في المُحرّر، ثم نبحث عن السطر الذي يحوي: <h1 class="logo">عنون الموقع</h1> ,نقوم باستبداله بما يلي بعض إضافة وسم PHP له: <h1 class="logo"><?php bloginfo('name'); ?></h1> وسم: <?php php bloginfo('name'); ?> يقوم بإظهار/طباعة نصّ يتم جلبه من قاعدة البيانات، النصّ هو اسم المُدوّنة. نلاحظ أن الدّالّة bloginfo() تقوم بالإظهار وليست الإرجاع return كما تفعل دالّة ()get_template_directory_uri. الآن عندما نتوجّه إلى الصفحة الرئيسية للمدونة تكون الترويسة شبيهة بالصورة: فصل محتوى الملفات من قواعد البرمجة الهامة إلغاء التّرابط أو الفصل (decoupling)، فنحاول فصل العناصر المُترابطة قدر الإمكان ووضعها في ملفات مُنفصلة. مثلًا سنقوم لاحقًا بإنشاء صفحة خاصّة لعرض المواضيع المُنفردة، وستحتاج تلك الصّفحة إلى وجود الترويسة (header) والتذييل (footer) كي تحوي ملفات CSS و JavaScript وتكون متناغمة مع باقي القالب. توفّر لنا ووردبريس عدة طُرق لإلغاء التّرابط في الملفات، إمّا أن يتم استخدام التّسلسل الهرمي لملفّات القالب (theme hierarchy) أو يتم استخدام قِطَع القالب (template parts). التّسلسل الهرمي لملفّات القالب (أو ملفات القالب للاختصار) هي ملفات بأسماء ثابتة، تقوم ووردبريس باستخدام الملف المُتوفّر منها حسب الطلب الذي يأتيها من المتصفح؛ مثلاً طلبتَ من المدونة رابط مقالٍ معيّن، تقوم ووردبريس بتحليل الطّلب ومعرفة أن المطلوب هو مقال، فتبحث عن ملف باسم single.php، إن كان موجودًا يتمّ استخدامه، إن لم يكن موجودًا تبحث ووردبريس عن ملف index.php. وهكذا الأمر بالنسبة لجميع الطلبات. أما قِطع القالب، فهي ملفات يقوم المستخدم بإنشائها دون أن يلتزم باستخدام أسماء مُحدّدة كما في ملفات القالب. ثم يقوم المطوّر باستخدام هذه القِطع في أي مكان يريده ضمن القالب. يقوم المُطوّر مثلًا بإنشاء قطعة مُخصّصة لعرض أزرار المُشاركة، يقوم بتسمية الملف: sharing.php، ويضع فيه الوسوم التي يُريدها. ثم يقوم باستدعاء هذا الملف في الصّفحة الرّئيسيّة index.php وصفحة المقال المُنفرد single.php على النّحو التّالي: <?php get_template_part('sharing'); ?> هناك تفصيلات حول كيفية إنشاء قطع القالب والتّعامل معها، ما سنذكره هنا فقط لإعطاء فكرة عامة عنها وليس لشرحها بالتّفصيل. سنستخدم في هذا الدرس التّسلسل الهرمي فقط لسهولته وشهرته. إن كان الاسم غريبًا بالنّسبة إليك فستألفه بمُجرد أن تشرع في استخدامه. سنقوم بإنشاء 3 ملفّات في القالب هي: - header.php - footer.php - sidebar.php ومن ثم يمكننا استخدام هذه الملفّات في أي مكان ضمن القالب عن طريق الدّوال: - get_header() - get_footer() - get_sidebar() هذه الدّوال تعمل بشكل مُشابه لـ require التّي نعرفها في لغة PHP. بهذه الطّريقة لن نحتاج إلى القيام بالنّسخ واللصق في كل مرة نريد إدراج الترويسة في ملفات القالب، وفي حال أردنا تعديل شيء في الترويسة فلن نضطرّ إلى تطبيق التعديل في جميع ملفات القالب. الخطوة التّالية هي نقل المحتوى المُناسب لكل ملفّ من الملفّات السّابقة من ملف index.php إلى الملفّات الثّلاثة الجديدة التي أنشأناها. سنقوم حرفيًا بالنّسخ واللّصق من ملف index.php إلى الملفات الثّلاثة، ثم نقوم بوضع إحدى الدّوال الثلاثة في ملف index.php بدل النصّ الذي قمنا باقتصاصه. ملف الترويسة header.php نقوم باقتصاص مُحتوى ملف index.php من بدايته وحتى نهاية وسم </header> في السطر 57. نضع ما اقتصصناه في ملف header.php. ثم نضع مكان الاقتصاص في ملف index.php ما يلي: <?php get_header(); ?> فتصبح بداية ملف index.php مشابهةً لما يلي: <?php get_header(); ?> <div class="main-content"> <div class="row"> ملف التذييل footer.php نقوم الآن باقتصاص الجزء الخاص بالتذييل من ملف index.php، في السطر 71 بدءاً من وسم: <div class="site-footer"> وحتى نهاية الملف. نقوم بوضع المُحتوى في ملف footer.php، ثم نستبدل مكان الوسوم المقصوصة في ملف index.php بما يلي: <?php get_footer(); ?> ملف الشريط الجانبي sidebar.php الوسوم الخاصّة بالشريط الجانبي ما هي إلا أربعة أسطر، تبدأ من السطر 64، المحتوى هو: <div class="large-4 columns sidebar"> <div class="card"> Sidebar </div> </div> نقوم بنقل المحتوى السّابق من ملف index.php إلى ملف sidebar.php، ونضع مكانه في ملف index.php: <?php get_sidebar(); ?> بهذا ننتهي من المرحلة الأولى من إلغاء الترابط بين الوسوم، وضعنا كل جزءٍ منها في ملفٍّ خاصٍّ به، وكلما أردنا استخدام ذلك الجزء نقوم باستدعاء الدّالّة المناسبة لذلك. أصبح ملف index.php أقصر طولًا، ويؤدّي نفس الغرض الذي كان يؤدّيه قبل أن نقوم بالتّعديلات، محتوى الملف كالتالي: <?php get_header(); ?> <div class="main-content"> <div class="row"> <div class="large-8 right columns news"> <div class="row"> <div class="medium-12 columns"> <article class="card"> <header> <h1>Post title</h1> </header> <div class="date">4 كانون الأول 2014</div> <p>خلافاَ للاعتقاد <a href="#">السائد</a> فإن لوريم إيبسوم ليس نصاَ عشوائياً، بنذ العام 45 قبل الميلاد، مما يجعله أكثر من 2000 عام في القدم. قام البروفيسور "ريتشارد ماك لينتوك" (Richard McClintock) وهو بروفيسور اللغة اللاتينية في جامعة هامبدن-سيدني في فيرجينيا بالبحث عن أصول كلمة لاتينية غامضة في نص لوريم إيبسوم وهي "consectetur"، وخلال تتبعه لهذه الكلمة في الأدب اللاتيني اكتشف المصدر الغير قابل للشك. فلقد اتضح أن كلمات نص لوريم إيبسوم تأتي من الأقسام 1.10.32 و 1.10.33 من كتاب "حول أقاصي الخير والشر" (de Finibus Bonorum et Malorum) للمفكر شيشيرون (Cicero) والذي كتبه في عام 45 قبل الميلاد. هذا الكتاب هو بمثابة مقالة علمية مطولة في نظرية الأخلاق، وكان له شعبية كبيرة في عصر النهضة. السطر الأول من لوريم إيبسوم "Lorem ipsum dolor sit amet.." يأتي من سطر في القسم 1.20.32 من هذا الكتاب.</p> <div class="read-more text-left"> <a href="#">تابع قراءة المقال &raquo;</a> </div> <footer class="tags"> <span class="label">تقني</span> <span class="label">تنمية</span> <span class="label">منوعات</span> </footer> </article> </div> <div class="medium-12 columns"> <article class="card"> <header> <h1>Post title</h1> </header> <div class="date">4 كانون الأول 2014</div> <p>خلافاَ للاعتقاد <a href="#">السائد</a> فإن لوريم إيبسوم ليس نصاَ عشوائياً، بنذ العام 45 قبل الميلاد، مما يجعله أكثر من 2000 عام في القدم. قام البروفيسور "ريتشارد ماك لينتوك" (Richard McClintock) وهو بروفيسور اللغة اللاتينية في جامعة هامبدن-سيدني في فيرجينيا بالبحث عن أصول كلمة لاتينية غامضة في نص لوريم إيبسوم وهي "consectetur"، وخلال تتبعه لهذه الكلمة في الأدب اللاتيني اكتشف المصدر الغير قابل للشك. فلقد اتضح أن كلمات نص لوريم إيبسوم تأتي من الأقسام 1.10.32 و 1.10.33 من كتاب "حول أقاصي الخير والشر" (de Finibus Bonorum et Malorum) للمفكر شيشيرون (Cicero) والذي كتبه في عام 45 قبل الميلاد. هذا الكتاب هو بمثابة مقالة علمية مطولة في نظرية الأخلاق، وكان له شعبية كبيرة في عصر النهضة. السطر الأول من لوريم إيبسوم "Lorem ipsum dolor sit amet.." يأتي من سطر في القسم 1.20.32 من هذا الكتاب.</p> <div class="read-more text-left"> <a href="#">تابع قراءة المقال &raquo;</a> </div> <footer class="tags"> <span class="label">تقني</span> <span class="label">تنمية</span> </footer> </article> </div> </div> <div class="row"> <div class="medium-12 columns"> <ul class="pagination"> <li class="arrow unavailable"><a href="">&laquo;</a></li> <li class="current"><a href="">1</a></li> <li><a href="">2</a></li> <li><a href="">3</a></li> <li><a href="">4</a></li> <li class="unavailable"><a href="">&hellip;</a></li> <li><a href="">12</a></li> <li><a href="">13</a></li> <li class="arrow"><a href="">&raquo;</a></li> </ul> </div> </div> </div> <?php get_sidebar(); ?> </div> </div> <?php get_footer(); ?> جلب المقالات من قاعدة البيانات نحتاج الآن إلى عرض المقالات المحفوظة في قاعدة البيانات (والتي يتم التّحكم فيها من لوحة التّحكم الخاصّة بووردبريس)، سنقوم بعرضها في ملف index.php وفي دروس لاحقة سنستخدم نفس طريقة عرض المقالات في باقي ملفات القالب، سواءً في ملف single.php أو في archive.php أو في غيرها. ضمن ملف index.php نجد أن كل مقال مُحاط بالوسوم: <div class="medium-12 columns"> <article class="card"> كل مقال يجب أن يبدأ بهذه الوسوم، وينتهي بإغلاق هذه الوسوم. نلاحظ أن قالب HTML يحوي مقالين شكليين، سنحذف واحدًا منها ونكتفي بالآخر لنقوم باستخدامه كمعيار لعرض المقالات مثله. نحيط وسوم بداية المقال بالحلقة الرّئيسية التي تكلّمنا عنها سابقًا، فتُصبح الوسوم كما يلي: <?php while(have_posts()) { the_post(); ?> <div class="medium-12 columns"> <article class="card"> وبعد إغلاق الوُسوم التي بدأ المقال عندها نضع نهاية الحلقة (قوس إغلاق الحلقة) كما يلي: </article> </div> <?php } ?> إن قمنا بحفظ التّعديلات والتجربة، سنجد أن المقال الشّكليّ سيتكرّر بعدد المقالات الموجودة في قاعدة بيانات ووردبريس لدينا. لكن جميع المقالات ستكون بنفس الشّكل وبنفس المُحتوى. سنقوم الآن باستبدال المُحتوى الشّكليّ بالمُحتوى المُناسب من قاعدة البيانات حسب كل مقال. تقدم ووردبريس دالّة the_title لطباعة عُنوان المقال الحالي، سنستخدمها بدل عنوان المقال الشّكلي، فتصبح الوسوم كما يلي: <h1><?php the_title();?></h1> وبنفس الطريقة نستخدم دالّة the_date لعرض تاريخ نشر المقال كما يلي: <div class="date"><?php the_date();?></div> ثم لعرض محتوى المقال نستخدم دالّة the_content بدل وسم <p></p> الذي يحوي المحتوى الشكليّ، كما يلي: <p><?php the_content();?></p> يُمكن أن نقوم بحفظ التّعديلات على الملف ومشاهدة النّتيجة في المُتصفّح لنتأكد من أن التّعديلات التي قمنا بها تم تطبيقها وتعرض النّتيجة الصّحيحة. بقي لدينا تعديلان مُشابهان لما قمنا به، الأول لتعديل رابط “تابع قراءة المقال” والثاني لعرض الوسوم الخاصّة بالمقال. لتعديل رابط المقال نستخدم دالّة the_permalink التي وظيفتها عرض رابط الويب الخاصّ بالمقال، لكن لا تقوم الدّالّة سوى بطباعة الرّابط دون وضعه في وسم <a></a> كي يصبح قابلًا للنّقر والاستخدام. علينا إذًا وضع الرّابط في مكانه المُناسب كما يلي: <a href="<?php the_permalink();?>">تابع قراءة المقال »</a> قمنا باستبدال قيمة حقل href="#" بدالّة طباعة رابط المقال. الآن أصبح بإمكاننا مُشاهدة الصّفحة الرّئيسيّة للقالب التي تعرض المقالات ويمكن الضّغط على رابط “تابع قراءة المقال” للوصول إلى المقال بعينه ضمن صفحة مُستقلّة. بقي الآن أن نعرض الوسوم الخاصّة بكل مقال. مكان الوسوم هو داخل وسم: <footer class="tags"> </footer> سنقوم باستخدام دالّة wp_get_post_tags التي مهمتها إرجاع مصفوفة تحوي جميع الوسوم الخاصّة بالمقال على شكل كائنات (Objects) وليس مُجرّد نصّ عادي. وعليه فإنه سيكون بإمكاننا الوصول إلى اسم كل وسم عن طريق: tag->name$ كما يلي: <footer class="tags"> <?php $tags = wp_get_post_tags(get_the_ID()); foreach($tags as $tag) { echo '<span class="label"> ' . $tag->name . '</span> '; } </footer> يُمكننا الآن استعراض المقالات في الصّفحة الرّئيسية للمُدوّنة والوصول إلى كل مقال عن طريق الرّابط الخاص به ورؤية الوسوم الخاصّة بكل مقال أيضًا. سنتوقف هنا في هذا الدرس كي لا تكون المعلومات كثيفة يصعب استيعابها، وسنتابع في دروس أخرى استخدام أرقام الصّفحات في الأسفل بشكل صحيح. (يمكن الآن إضافة تعليق حول وسوم الصفحات كي لا تظهر بشكل خاطئ وبدون روابط صحيحة). خلاصة تعلّمنا في هذا الدّرس كيف نقوم بتجهيز قالب HTML ليُصبح قالبَ ووردبريس، وكيف نُعدّل مسارات ملفات JavaScript وCSS لتُصبح متناغمةً مع رابط الويب الخاص بقالب ووردبريس. وفي القسم الثاني من الدرس تعلّمنا كيف نقوم بفصل المحتوى عن ملف index.php إلى ملفّات فرعية أخرى، لنقوم بإعادة استخدامها في أي ملف ضمن القالب. وفي القسم الأخير رأينا كيف يمكن جلب المقالات من قاعدة البيانات وإظهارها للمُستخدم مع عرض الوسوم الخاصّة بكل مقال. أرجو أن يكون الدرس سهلاً بسيطاً، في حال وجود أي استفسار أو مداخلة نرحّب به في التعليقات.

تحدثنا في الدرس السابق مُقدّمة إلى تطوير قوالب ووردبريس حول إنشاء قالب ووردبريس بسيط، واليوم سنقوم بإكمال العمل عليه لعرض أرقام الصفحات أو عرض رابطيّ السابق والتالي للتنقل بين الصفحات والوصول إلى جميع المقالات ضمن المدوّنة. عند وجود عدد كبير من المقالات في المدوّنة، فلن يتم عرضها جميعاً في صفحة واحدة، بل يتم تقسيمها على عدد من الصفحات، بشكل افتراضي يتم عرض 10 مقالات في الصفحة الرئيسية أو الأرشيف (تصنيف أو وسم)، ويمكن تغيير رقم المقالات في الصفحة الواحدة من لوحة التحكم. فهرس السلسلة: مقدمة إلى تطوير قوالب ووردبريس: تحويل صفحة HTML إلى قالب ووردبريس التصفيح (Pagination) في قوالب ووردبريس (هذا الدرس) إضافة قوائم التنقل (Navigation Menu) إلى قالب ووردبريس صف وتسجيل ملفات Javascript و CSS في قوالب ووردبريس Pagination تقدّم ووردبريس دالّة مخصّصة لعرض أرقام الصفحات هي ()paginate_links. سنقوم بالاطلاع على كيفية استخدامها وخياراتها، وننوه بوجود طرق أخرى لعرض أرقام الصفحات، مثل إضافة WP-PageNavi. يتم استخدام الدالّة بهذه الطريقة: <?php echo paginate_links($args);?> حيث متحول args$ هو مصفوفة تحوي إعدادات مخصصة لهذه الدالّة، يمكن أن نستخدم الإضافة دون تمرير هذا المتحول، أو يمكن أن تكون قيمة هذه المتحول هي بعض من الإعدادات الخاصة بالدالّة وليس جميعها. الإعدادات الكاملة هي كالتالي بقيمها الافتراضية: <?php $args = array( 'base' => '%_%', 'format' => '?page=%#%', 'total' => 1, 'current' => 0, 'show_all' => False, 'end_size' => 1, 'mid_size' => 2, 'prev_next' => True, 'prev_text' => __('« Previous'), 'next_text' => __('Next »'), 'type' => 'plain', 'add_args' => False, 'add_fragment' => '', 'before_page_number' => '', 'after_page_number' => '' ); ?> يمكننا أن نضع بعض هذه الإعدادات في المتحول، وتقوم ووردبريس بمعالجة الإعدادات التي نقدّمها للدالّة، بحيث تضيف للإعدادات المُدخلة ما يكملها من الإعدادات الافتراضية. سنقوم الآن باستخدام هذه الدالّة ورؤية كيف تظهر الروابط دون وجود إعدادات للدالّة، نضع ما يلي في نهاية ملف index.php فيصبح: <div class="row"> <div class="medium-12 columns"> <?php echo paginate_links(); ?> </div> </div> </div> <?php get_sidebar(); ?> عندما نقوم بزيارة الصفحة الرئيسية للمدونة، نجد أن روابط أرقام الصفحات تظهر بشكل مشابه لهذه الصورة: سنرى في الفقرة التالية كيف يمكن تخصيص ظهور هذه الروابط. إضافة Style جديد سنحتاج إلى إضافة Style جديد إلى القالب الذي نقوم باستخدامه، وذلك لكي تظهر أرقام الصفحات بشكل يتناسب مع باقي القالب. قد يتبادر للذهن في البداية أن يتم استخدام النسخ واللصق لإضافة Style جديد إلى ملف css الرئيسي. رغم أن هذا ممكن ويؤدي الغرض المطلوب، إلا أن الطريقة الأفضل هي استخدام دالّة تدعى wp_enqueue_style. 1. إضافة دالّة ()wp_head إلى ملف header.php قبل إغلاق وسم </head> نقوم بإضافة السطر التالي: <?php wp_head();?> وهي دالّة مهمة جداً في أي قالب ووردبريس، حيث تقوم ووردبريس (والعديد من الإضافات) باستخدام هذه الدالّة سواءً لإضافة ملفات الشكل (CSS) أواستدعاء ملفات جافاسكريبت أو حتى إضافة وسوم إضافية تتعلق بـ SEO. قمنا بإضافة دالّة wp_head ﻷننا نريد استخدام دالّة ()wp_enqueue_style التي ستقوم بإدراج وسم HTML لاستيراد ملف CSS جديد. 2. إضافة ملف CSS الجديد نقوم بإنشاء ملف جديد هو custom.css، وهو الذي سنقوم باستدعاءه من خلال دالّة ()wp_enqueue_style. نقوم بنسخ ولصق محتوى هذا الرابط ونضعه ضمن ملف custom.css الذي أنشأناه، وهو ما سيقوم بإضافة الشكل المناسب ﻷرقام الصفحات في القالب. 3. استخدام دالّة ()wp_enqueue_style لنقم بفتح ملف functions.php من ملفات القالب، ولنضف عليه ما يلي: // Enqueue custom style add_action('wp_enqueue_scripts', function() { wp_enqueue_style('custom-pagination', get_template_directory_uri() . '/custom.css'); }); ما قمنا بفعله هو أننا أخبرنا ووردبريس أن تنفذ دالّة ()wp_queue_style عند وصول دورة تنفيذ ووردبريس إلى الحدث (action) المُسمّى wp_enqueue_scripts وهو المسؤول عن ترتيب وتنسيق وطباعة ملفات جافاسكريبت و CSS وتحليل متطلبات كل ملف -إن وجدت له متطلبات-، وفي النهاية يتم استخدام الملف/الملفات المطلوبة بعد أن يتم طلب جميع متطلباتها. الآن إن قمنا بفتح المصدر الخاص بالصفحة الرئيسية من المتصفح، نجد أن المصدر أصبح يحوي شيئاً مشابهاً لما يلي: <link rel='stylesheet' id='custom-pagination-css' href='http://localhost:8000/wp-content/themes/my_theme/custom.css?ver=4.1' type='text/css' media='all' /> وهو استدعاء ملف CSS خاص، الذي أردنا وجوده قبل البدء بعرض إرقام الصفحات. لننظر الآن كيف تبدو أرقام الصفحات: أجمل بكثير من سابقتها أليس كذلك؟ شرح إعدادات دالّة paginate_links كما أسلفنا، يمكن أن نمرر جزءًا من الإعدادات ويمكن ألا نمرر أي شيء على الإطلاق، فتقوم ووردبريس باستخدام الإعدادات الافتراضية التي أوردناها في الأعلى. base (القيمة اختيارية)، نوعها سلسلة نصيّة. القيمة الافتراضية: %_% تُستخدم للإشارة إلى الرابط، الذي سيتم استخدامه لإنشاء روابط الصفحات. في رابط مثل: http://example.com/all_posts.php%_% يتم استبدال القيمة الافتراضية: %_% بقيمة format التي سنتحدث عنها في الفقرة التالية. format (القيمة اختيارية)، نوعها سلسلة نصيّة. القيمة الافتراضية: ?page=%#% تُستخدم كهيكل للصفحات. في حال كنا نريد أو كنا نستخدم عناوين نظيفة (pretty permalinks) ستكون القيمة هي /page/%_%، حيث تعبير %_% يتم استبداله برقم الصفحة. total (القيمة اختيارية)، نوعها رقميّ. القيمة الافتراضية: 1 مجموع عدد الصفحات، عند استخدام دالّة ()paginate_links داخل حلقة ووردبريس، تكون القيمة الافتراضية تساوي خاصّية max_num_pages$ في WP_Query. current (القيمة اختيارية)، نوعها رقميّ. القيمة الافتراضية: 0 رقم الصفحة الحالية. show_all (القيمة اختيارية)، نوعها قيمة منطقية (true أو false). القيمة الافتراضية: false إذا كانت القيمة true عندها سيتم إظهار جميع الصفحات بدلاً من قائمة قصيرة من الأرقام المجاورة لرقم الصفحات الحالية. بشكل افتراضي هذا الخيار تكون قيمته false ويتم التحكم به عن طريق الخيارين end_size و mid_size. end_size (القيمة اختيارية)، نوعها رقميّ. القيمة الافتراضية: 1 عدد الأرقام عند بداية ونهاية أطراف القائمة. mid_size (القيمة اختيارية)، نوعها رقميّ. القيمة الافتراضية: 2 عدد الأرقام على جانبيّ الصفحة الحالية، (مع ملاحظة أن الرقم لا يشمل الصفحة الحالية). prev_next (القيمة اختيارية)، نوعها قيمة منطقية (true أو false). القيمة الافتراضية: true لتحديد إن كنا نريد روابط التالي والسابق أن يتم استخدامها في القائمة أم لا. prev_text (القيمة اختيارية)، نوعها سلسلة نصّية. القيمة الافتراضية: __('« Previous') حيث __() هي دالّة مسؤولة عن الترجمة. نص رابط الصفحة السابقة، تعمل فقط إن كان الخيار السابق (prev_next) فعّالاً (قيمته true). next_text (القيمة اختيارية)، نوعها سلسلة نصّية. القيمة الافتراضية: __('Next »') حيث __() هي دالّة مسؤولة عن الترجمة. نص رابط الصفحة التاية، تعمل فقط إن كان خيار (prev_next) فعّالاً (قيمته true). type (القيمة اختيارية)، نوعها سلسلة نصّية. القيمة الافتراضية: ‘plain’ تتحكم بشكل القيمة التي تقوم الدالّة بإرجاعها. القيمة الممكنة هي: plain: تكون القيمة التي يتم ارجاعها عبارة عن سلسلة نصّية مؤلفة من روابط مفصول بينها بمحرف السطر الجديد. array: تكون القيمة التي يتم ارجاعها عبارة عن مصفوفة من روابط الصفحات لتوفّر تحكم كامل بكيفية الظهور. list: تكون القيمة التي يتم ارجاعها عبارة عن قائمة HTML غير مرتّبة (ul). add_args (القيمة اختيارية)، نوعها مصفوفة. القيمة الافتراضية: false مصفوفة اسمية من المحددات ليتم إضافتها إلى الرابط، تكون المصفوفة على شكل: اسم => قيمة. add_fragment (القيمة اختيارية)، نوعها سلسلة نصيّة. القيمة الافتراضية: لا يوجد قيمة. نص لتتم إضافته إلى نهاية كل رابط بشكل مباشر (يمكن تمرير متحولات GET عن طريق هذا الخيار، بشكل يشبه خيار add_args لكن على شكل سلسلة نصية بدلاً من مصفوفة). before_page_number (القيمة اختيارية)، نوعها سلسلة نصيّة. القيمة الافتراضية: لا يوجد قيمة. نص ليتم إظهاره قبل كل رقم صفحة (النص وليس الرابط). after_page_number (القيمة اختيارية)، نوعها سلسلة نصيّة. القيمة الافتراضية: لا يوجد قيمة. نص لتتم إضافته بعد رقم الصفحة (النص وليس الرابط). أزرار التالي والسابق قد يفضّل البعض استخدام أزرار "التالي" و"السابق" بدلاً من أرقام الصفحات، أو ربما يتطلب القالب الذي يعملون عليه هذه الأزرار. تقدّم ووردبريس دالّة واحدة لعرض الرابطين معاً (التالي - السابق) هي: posts_nav_links. لنقم بوضع هذه الدالّة بدلاً من دالّة إظهار أرقام الصفحات التي تحدثنا عنها سابقاً: <?php posts_nav_link(); ?> يصبح القالب بهذا الشكل: يمكن أن تأخذ الدالّة ثلاثة محددات كلها اختيارية، هي: sep$: (سلسلة نصية)، يمثل النصّ المعروض بين الرابطين. القيمة الافتراضية: ' — ' prelabel$: (سلسلة نصية)، اسم رابط الصفحة السابقة. القيمة الافتراضية: '« Previous Page' nxtlabel$: (سلسلة نصية)، اسم رابط الصفحة التالية. القيمة الافتراضية: 'Next Page »' لنقم معاً بتعديل هذه الإعدادات لتصبح كالتالي: <?php posts_nav_link(' - ', '&laquo; السابق', 'التالي &raquo;'); ?> تظهر لنا التعديلات في القالب كما يلي: ما رأيكم لو نختم الدرس بخدعة بسيطة، نقوم من خلالها بجعل روابط التالي السابقة تظهر بشكل مشابه لأرقام الصفحات؟ سأخبركم بتلميح: تكمن الخدعة بالاستفادة من المحدد الأول sep$. لنضع في البداية وسم ul محيطاً بدالّة ()posts_nav_links يأخذ نفس صنف CSS الموجود في أرقام الصفحات كما يلي: <ul class="page-numbers"> <?php posts_nav_link(' - ', '&laquo; السابق', 'التالي &raquo;'); ?> </ul> الآن نريد إحاطة كِلا الرابطين بوسم li لكل رابط، يمكن أن نضع داخل وسم ul بداية وسم li ونضع قبل إغلاق وسم ul وسم إغلاق وسم li، فيصبح المصدر كالتالي: <ul class="page-numbers"> <li> <?php posts_nav_link(' - ', '&laquo; السابق', 'التالي &raquo;'); ?> <li> </ul> ما فعلناه حتى الآن أننا أحطنا كلا الرابطين بوسم li واحد، لكننا نريد أن نحيط كل واحد من الرابطين بوسم مستقلّ، سنقوم باستبدال المحدد الأول $sep بـ: </li><li>. بما أن محتوى هذا المحدد سيكون بين الرابطين بشكل دائم، فسنضع فيه إغلاق وسم li الأول يليه بداية وسم li الثاني. فيصبح المصدر: <ul class="page-numbers"> <li> <?php posts_nav_link('</li><li>', '&laquo; السابق', 'التالي &raquo;'); ?> <li> </ul> يصبح شكل الروابط كالصورة التالية: خلاصة تعرّفنا خلال الدرس على كيفية إضافة أرقام الصفحات أو روابط التالي-السابق بحيث يتم استخدامها للتنقل بين صفحات الموقع. كما تعرفنا بشكل بسيط على كيفية إضافة ملف CSS جديد باستخدام دالّة ()wp_enqueue_style.

مرّ معنا أثناء إضافة أرقام الصفحات كيف أضفنا ملف CSS جديد عن طريق وضع بضعة أسطر في ملف functions.php في ملفات القالب. سنتناول في هذا الدرس الشرح التفصيلي لهذه الآلية، وهي الطريقة الآمنة لإضافة ملفات JavaScript و CSS. فهرس السلسلة: مقدمة إلى تطوير قوالب ووردبريس: تحويل صفحة HTML إلى قالب ووردبريس التصفيح (Pagination) في قوالب ووردبريس إضافة قوائم التنقل (Navigation Menu) إلى قالب ووردبريس صف وتسجيل ملفات Javascript و CSS في قوالب ووردبريس (هذا الدرس) ما المقصود بالصف؟ هو وضع الملف في صفّ/دور/طابور (queue) لتقوم ووردبريس بمعالجته لاحقاً. تخيل أنك تضع الملف في دور/طابور شراء جهاز آي فون جديد مثلاً! وعندما يحين موعد عرض الملفات، تقوم ووردبريس بمعالجة الصفّ ومتطلبات كل ملفّ فيه، ثم إعادة ترتيب الصف حسب المتطلبات، وأخيراً عرض الملفات في مكانها المناسب مع متطلباتها. الخطوات العامة سنعرض الآن الخطوات بشكل عام، ثم تفصيلها وطريقة استخدامها في الفقرة اللاحقة. لصفّ ملفٍّ ما، سواء كان ملف JavaScript أو CSS نحتاج إلى: استخدام الحدث (action) المناسب. تسجيل الملف المراد استخدامه؛ حيث يجب استخدام معرّف (handle) للملف، مسار الملف، ويمكن تحديد متطلباته (dependencies) إن وُجدت. صفّ الملف (enqueue)؛ باستخدام المعرّف المُستخدم أثناء تسجيل الملف. تسجيل وصف ملفات CSS تسجيل ملف CSS لتسجيل ملفٍّ جديد نقوم باستخدام دالّة wp_register_style، يمكن للدالّة أن تقبل المحدّدات التالية: handle$: مطلوب، هو المعرّف الخاص بالملف، الذي سيتم استخدامه عند صفّ الملف (enqueue). src$: مطلوب، هو رابط (URL) ملف CSS المطلوب تسجيله، مثل:http://example.com/css/mystyle.css، لكن يجب ألا يتم استخدام الرابط بهذا الشكل، بل يجب أن يكون أكثر مرونة (التفصيل في الملاحظة بعد نهاية الفقرة). deps$: مصفوفة من المعرّفات، التي تمثّل متطلبات الملف الذي نقوم بتسجيله، كي يتم صفّها قبل صفّ الملف المُسجَّل. القيمة الافتراضية: مصفوفة فارغة ()array. ver$: إصدار الملف المُسجَّل، تقوم ووردبريس بوضعه كرقم بعد رابط الملف، على الشكل:custom.css?ver=123، إن لم يتم وضع قيمة لهذا المحدّد، فسيتم وضع إصدار ووردبريس الحالي بدلاً منه، لعدم وضع أي رقم نضع قيمة المحدّد null. القيمة الافتراضية:false. media$: قيمة حقل media الذي سيتم استخدامه مع وسم <link> أثناء صفّ الملف، القيمة الممكنة: all، screen، handheld، print. القيمة الافتراضية هي all. ملاحظة هامة: عند تسجيل أو صفّ الملفات، يجب أن تكون الروابط مرنة، أي أن يتم استبدال اسم الموقع/النطاق عن طريق دوالّ ووردبريس. مثال خاطئ: add_action( 'wp_enqueue_scripts', 'register_invalid_style' ); function register_invalid_style() { wp_register_style( 'my-invalid-style', 'http://localhost/wp-content/themes/my-theme/css/custom.css' ); } هل لاحظتم أنني وضعت المسار كاملاً؟ ترى هل سيعمل الرابط السابق إن قمنا باستخدام القالب على موقع على الإنترنت بدلاً من الموقع المحلّي؟ بالتأكيد لا! مثال صحيح: add_action( 'wp_enqueue_scripts', 'register_valid_style' ); function register_valid_style() { wp_register_style( 'my-valid-style', get_template_directory_uri() . '/css/custom.css' ); } تكون النتيجة في المتصفح مشابهة للتالي: <link rel='stylesheet' id='my-valid-style-css' href='http://localhost:8000/wp-content/themes/my-theme/css/custom.css?ver=4.2' type='text/css' media='all' /> تقوم دالّة ()get_template_directory_uri بإرجاع رابط القالب الفعّال (active)، مثلاً: http://example.com/wp-content/themes/my-theme، بحيث يكون اسم النطاق حسب الموقع الحالي، ثم يقوم المطوّر بإضافة مسار الملّف الذي يريده بعد رابط القالب الفعّال. إن أردنا تسجيل وصفّ الملفات ضمن الإضافات بدلاً من القوالب، نقوم باستخدام دالّة ()plugins_url بدلاً من الدالّة السابقة الخاصة بالقوالب. صف ملف CSS لصفّ ملف CSS نستخدم دالّة wp_enqueue_style، محدّدات الدالّة هي نفسها محدّدات دالّة wp_register_style، باستثناء: محدّد handle$ هو المحدد الوحيد المطلوب في حال استخدامنا لمعرّف ملف مُسجّل مسبقاً. محدد src$ غير مطلوب في حال نقوم باستخدام معرّف لملف مُسجّل مسبقاً، ومطلوب إن كنا نريد استخدام الدالّة لصفّ ملفّ غير مسجّل. فعوضاً عن تسجيل الملف بدالّة منفصلة ثم صفّه بدالّة أخرى، نقوم بصفّه مباشرة في هذه الدالّة. مثال عن صفّ ملف مسجّل مسبقاً: add_action( 'wp_enqueue_scripts', 'enqueue_style' ); function enqueue_style() { wp_enqueue_style( 'my-valid-style' ); } مثال عن صفّ ملف جديد دون تسجيل: add_action( 'wp_enqueue_scripts', 'register_enqueue_style' ); function register_enqueue_style() { wp_enqueue_style( 'my-valid-style', get_template_directory_uri() . 'my-theme/css/custom.css' ); } نلاحظ أننا في المثال الثاني استخدمنا دالّة wp_enqueue_style بشكل مماثل لدالّة wp_register_style. الفرق الرئيسي بين الطريقتين، أن الأولى تسمح لنا باستخدام الملف المُسجل في عدة أماكن، وتتيح مرونة أكبر بالتعامل مع الملفات. إلغاء صفّ أو إلغاء تسجيل ملف CSS قد نحتاج لإلغاء صفّ ملف، أو إلغاء تسجيله (كما سنرى في نهاية المقال)، تتيح ووردبريس دالّتين لهذين الغرضين هما: wp_dequeue_style لإلغاء صفّ ملف و wp_deregister_style لإلغاء تسجيل ملف. في كلا الدالّتين نقوم بتمرير محدّد واحد هو المعرّف الخاص بالملف الذي نريد إلغاء صفّه أو إلغاء تسجيله، لإلغاء صفّ إطار عمل Bootstrap مثلاً، نضع الأسطر التالية في ملف functions.php: add_action( 'wp_enqueue_scripts', 'dequeue_bootstrap' ); function dequeue_bootstrap() { wp_dequeue_style( 'bootstrap' ); } تسجيل وصفّ ملفات جافاسكريبت آلية تسجيل وصفّ ملفات جافاسكريبت هي مماثلة جداً للتعامل مع ملفات CSS، مع بعض الفروقات البسيطة التي سنستعرضها الآن. تسجيل ملف جافاسكريبت نقوم باستخدام دالّة wp_register_script، التي تقبل المحدّدات التالية: handle$: مطلوب، هو المعرّف الخاص بالملف، الذي سيتم استخدامه عند صفّ الملف (enqueue). src$: مطلوب، هو رابط (URL) ملف جافاسكريبت المطلوب تسجيله، مثل:http://example.com/js/myscript.js، لكن يجب ألا يتم استخدام الرابط بهذا الشكل، بل يجب أن يكون مرناً باستخدام ()get_template_directory_uri. deps$: مصفوفة من المعرّفات، التي تمثّل متطلبات الملف الذي نقوم بتسجيله، كي يتم صفّها قبل صفّ الملف المُسجَّل. القيمة الافتراضية: مصفوفة فارغة ()array. ver$: إصدار الملف المُسجَّل، تقوم ووردبريس بوضعه كرقم بعد رابط الملف، على الشكل:custom.js?ver=123، إن لم يتم وضع قيمة لهذا المحدّد، فسيتم وضع إصدار ووردبريس الحالي بدلاً منه، لعدم وضع أي رقم نضع قيمة المحدّد null. القيمة الافتراضية: false. in_footer$: بشكل افتراضي يتم صفّ ملفات جافاسكريبت وملفات CSS ضمن وسم <head>، لكن يمكن بوضع قيمة هذا المحدد true أن يتم صفّ ملفات جافاسكريبت في نهاية المستند، قبل إغلاق وسم <body/>، وهو الأفضل للأداء بالنسبة لزوار الموقع. القيمة الافتراضية: false. ملاحظة: صفّ ملفّات جافاسكريبت و CSS يتطلب وجود خطّاف ()wp_head ضمن القالب، وصفّ ملفات جافاسكريبت مع محدّد in_footer$ بقيمة true يتطلب وجود خطّاف ()wp_footer في القالب، قبل إغلاق وسم <body/>. صفّ ملف جافاسكريبت الاستخدام مشابه تماماً لصفّ ملف CSS، لكنه يتم عن طريق دالّة wp_enqueue_script، والتي تشابه بمحدداتها دالّة التسجيل wp_register_script. الفرق بين محددات دالة الصفّ ودالّة التسجيل الخاصة بملفات جافاسكريبت هي كالفرق بين محددات دالة الصف والتسجيل الخاصة بملفات CSS. محدّدات دالّة wp_enqueue_script هي نفسها محدّدات دالّة wp_register_script، باستثناء: محدّد handle$ هو المحدد الوحيد المطلوب في حال نقوم باستخدام معرّف لملف مُسجّل مسبقاً. محدد src$ غير مطلوب في حال نقوم باستخدام معرّف لملف مُسجّل مسبقاً، ومطلوب إن كنا نريد استخدام الدالّة صفّ ملفّ غير مسجّل. فعوضاً عن تسجيل الملف بدالّة منفصلة ثم صفّه بدالّة أخرى، نقوم بصفّه مباشرة في هذه الدالّة. إلغاء صفّ أو إلغاء تسجيل ملف جافاسكريبت طريقة إلغاء صفّ أو إلغاء تسجيل ملف جافاسكريبت هي مشابه للطريقة في ملفات CSS، لكن باستخدام دالّتي: wp_deregister_script و wp_dequeue_script. أمثلة وحالات استخدام بالمثال يتضح المقال، سنمرّ معاً على أربعة أمثلة وحالات استخدام لنرى من خلالها كيف يمكننا التعامل ثم الاستفادة من تسجيل وصفّ ملفات JavaScript و CSS: 1. عند استخدام إضافة رديئة الجودة لنفرض لسبب ما أنك تستخدم إضافة رديئة -لا تتبع المعايير ولا تستخدم أحد الإصدارات من المكتبات-، تتطلب هذه الإضافة وجود إصدارٍ قديم من مكتبة jQuery، بينما قالبك يستخدم الإصدار اﻷحدث منها. هل من المنطقي وجود نسختين من المكتبة في القالب؟ بالتأكيد لا. لحلّ هذه المشكلة نحن أمام ثلاثة خيارات: إن كانت الإضافة ليست رديئة الجودة كثيراً، وتقوم بصفّ مكتبة jQuery، فهذا شيء جيّد، يمكننا ببساطة إلغاء المكتبة من الصفّ وتنتهي المشكلة. إن كانت الإضافة رديئة كما وصفناها ولا تقوم بصفّ مكتبة jQuery، عندها يجب على المطوّر أن يقوم بالتعديل على ملفات الإضافة يدوياً لإلغاء تحميل مكتبة jQuery. وهناك احتمال كبير أن المطور سينسى التعديل الذي قام به، ومع مرور الأيام يقوم بتحديث الإضافة إلى إصدار جديد ويذهب التحديث اليدويّ الذي قام به! أو إن كان ذو ذاكرة قوية، سيقوم بالقيام بالتعديل اليدوي ذاته في كل مرة يظهر إصدار جديد من الإضافة. لكم أن تتخيلوا المعاناة التي ستصبح على كاهل المطوّر. الخيار الثالث والأسرع هو القيام بحذف هذه الإضافة رديئة الجودة والبحث عن واحدة أفضل منها تتبع المعايير والقواعد وتستخدم أحد الإصدارات من ملفات JavaScript و CSS. الخيار الثالث هو الأفضل لتقليل استخدام مسكنات ألم الرأس. من المهم اتباع المعايير والقواعد المتفق عليها حتى لا يقع المطوّر في الحُفر التي وُضعت تلك المعايير والقواعد من أجل تلافيها. 2. استخدام المكتبات الموجودة في ووردبريس ربّما حدّثتك نفسك في أحد الأيام أن تستعرض ملفات ووردبريس وترى محتواها، إنْ حدث ذلك فلا بدّ أنك رأيت الكثير من مكتبات جافاسكريبت مثل jQuery، jQuery UI، Backbone وغيرها. إن كانت هذه الملفات موجودة ضمن ووردبريس، فلمَ لا نقوم باستخدامها عند الحاجة إليها؟ لو كان القالب يحتاج إلى مكتبتيّ jQuery و jQuery UI فبدلاً من تحميل نسخة من كل مكتبة من الإنترنت ثم وضعها ضمن ملفات القالب واستخدامها، يمكننا بشكل مباشر استخدام نسخة jQuery و jQuery UI الموجودتان ضمن ووردبريس. بهذا نضمن الحصول على إصدار حديث من المكتبة يأتي مع كل تحديث لووردبريس بالإضافة لعدم التكرار (Don’t Repeat Yourself). من المكتبات الشهيرة المضمّنة في ووردبريس: jQuery jQuery UI Backbone jQuery Suggest Thickbox TinyMCE Underscore للاطلاع على كامل القائمة يمكن زيارة صفحة التوثيق. 3. استخدام jQuery بشكل مباشر من شبكة توصيل المحتوى (CDN) لا بدّ أنك سمعت بشبكة توصيل المحتوى (Content Delivery Network). تعريفها على ويكبيديا: هي مجموعة من الخوادم المتزامنة والموزعة والموجودة على الشبكة في أماكن جغرافية مختلفة، تحتوي على نسخ من البيانات. فالعميل يحصل على البيانات من الخادم الموجود في أقرب موقع جغرافي، بغرض تقليل التأخير الناتج في نقل البيانات. هناك موقع مخصص لاستخدام مكتبات JavaScript عن طريق شبكات توصيل المحتوى هو jsDelivr، سنقوم باستخدام رابط مكتبة jQuery منه (//cdn.jsdelivr.net/jquery/2.1.3/jquery.min.js) لنقوم بصفّها واستخدامها ضمن القالب، عوضاً عن استخدام النسخة المتضمنة في ملفات ووردبريس. للقيام بهذا نحتاج لوضع الأسطر القليلة التالي في ملف functions.php الخاص بقالبنا: add_action( 'wp_enqueue_scripts', 'register_jquery' ); function register_jquery() { wp_deregister_script( 'jquery' ); wp_register_script( 'jquery', ( '//cdn.jsdelivr.net/jquery/2.1.3/jquery.min.js' ), false, null, true ); wp_enqueue_script( 'jquery' ); } قمنا بإلغاء تسجيل jQuery (كانت مسجلة مع الملف المتضمَّن في ووردبريس)، ثم قمنا بتسجيلها مع رابط الملف من شبكة توصيل المحتوى (CDN)، وأخيراً قمنا بصفّها (enqueue) ليتم إدراجها في القالب. 4. صفّ ملف جافاسكريبت يعتمد على jQuery في معظم الحالات نحتاج في القوالب لإضافة جافاسكريبت، سواء لإضافة حركات معيّنة أو لتعديل شيءٍ ما، وبسبب شهرة مكتبة jQuery فمعظم المطورين يعتمدون عليها كقاعدة أساسية لبناء ملفات جافاسكريبت الخاصة بقوالبهم. على فرض أن الملف الذي نريد إضافته يعتمد على مكتبة jQuery وهو موجود مع ملفات القالب في المسار: js/custom.js، لصفّ هذا الملف نقوم بإضافة الأسطر التالية إلى ملفfunctions.php: add_action( 'wp_enqueue_scripts', 'enqueue_custom_js' ); function enqueue_custom_js() { wp_register_script( 'my-custom-js', get_template_directory_uri() . '/js/custom.js', ['jquery'] ); wp_enqueue_script( 'my-custom-js' ); } قمنا بتسجيل الملف الذي نريد صفّه، ولنلاحظ كيف حدّدنا متطلبات الملف ضمن مصفوفة، يعتمد الملف على مكتبة jQuery فقط. ثم قمنا بصفّه باستخدام المعرّف الذي استخدمناه أثناء تسجيل الملف. تكون النتيجة في المتصفح مشابهة للتالي: <script type="text/javascript" src="//cdn.jsdelivr.net/jquery/2.1.3/jquery.min.js?ver=4.2"></script> <script type="text/javascript" src="http://localhost:8000/wp-content/themes/my-theme/js/custom.js?ver=4.2"></script> ونلاحظ أن ووردبريس قامت بصفّ مكتبة jQuery قبل الملف الذي قمنا بتسجيله، وذلك كي يقوم المتصفح بقراءة ملف المكتبة في البداية وتكون متوفرة للاستخدام، وعند قراءة المتصفح للملف الخاص يمكن للملف استخدام مكتبة jQuery بعد أن أصبحت متوفرة. تمرير متغيّرات من PHP للجافاسكريبت ماذا لو أردنا استخدام متغيّرات ما ضمن جافاسكريبت؟ قد يتهيؤ للبعض أن يقوم بعمل طلب AJAX أو وضع ما يريد استخدامه في جافاسكريبت بداخل ملف خارجي. قد تعمل هذه الحلول، لكنها لن تجدي نفعاً إن أردنا تمرير متغيّرات تتبدّل قيمتها باستمرار كأن تكون من قاعدة البيانات مثلاً. توفّر ووردبريس حلّاً سهلاً ومناسباً لهذه المشكلة، وذلك باستخدام دالّة wp_localize_script، اسم الدالّة قد يوحي أنها مخصصة للترجمة، لكن يمكن استخدامها لتمرير جمل الترجمة وأي نوع آخر من المتغيّرات إلى جافاسكريبت. محددات الدالّة هي: - handle$: معرّف لملف جافاسكريبت الذي نريد تمرير المتغيّرات له، يجب أن يكون الملف مسجّلاً قبل استخدام الدالّة. - name$: اسم متغيّر جافاسكريبت الذي سيتم وضع البيانات بداخله. - data$: مصفوفة المتغيّرات التي نريد تمريرها إلى جافاسكريب. مثال: لنقم بتمرير متغيّرين هما سلسلة نصية ورقم إلى ملف جافاسكريبت ذو المحدد my-custom-js: add_action( 'wp_enqueue_scripts', 'enqueue_custom_js' ); function enqueue_custom_js() { wp_register_script( 'my-custom-js', get_template_directory_uri() . '/js/custom.js', ['jquery'] ); $translation_array = array( 'some_string' => 'A String to be using inside JS', 'a_value' => '10' ); wp_localize_script( 'my-custom-js', 'object_name', $translation_array ); wp_enqueue_script( 'my-custom-js' ); } كي نصل إلى المتغيّرات من داخل ملف custom.js، نستخدم شيئاً مشابهاً: alert( object_name.some_string); يجب أن تظهر رسالة تنبيه (Alert) بداخلها النصّ الذي استخدمناه. صفّ الملفات في لوحة التحكم كل ما مرّ معنا من تسجيل وصفّ الملفات هو خاص بواجهة الموقع (Front-end)، أي الذي يراه الزوار. إن أردنا تسجيل وصفّ الملفات في لوحة التحكم (Dashboard) يمكننا ذلك بنفس الطريقة، لكن باستبدال حدث wp_enqueue_scripts بحدث: admin_enqueue_scripts. مثلاً لصفّ مكتبة jQuery Suggest في لوحة التحكم (المكتبة معرّفة مسبقاً في ووردبريس)، نستخدم الأسطر التالية: add_action( 'admin_enqueue_scripts' , 'enqueue_jquery_suggest' ); function enqueue_jquery_suggest() { wp_enqueue_script( 'suggest' ); } ملاحظة: من المناسب وضع شروط معيّنة قبل صفّ الملفات وقصرها على صفحاتٍ معينة، كي لا يتم وضع الملف في كل صفحات لوحة التحكم. الخاتمة تعرّفنا على كيفية صفّ ملفات JavaScript و CSS، هذه الآلية تسهّل كثيراً تنظيم الملفات والتعامل معها، ويجب الحرص على استخدامها بشكل دائم، فهي من المعايير والأشياء المتعارف عليها في تطوير قوالب وإضافات ووردبريس. أرجو أن يكون الشرح واضحاً ومفيداً، إن كان لديكم سؤال أو فكرة فلتشاركونا إياها في التعليقات.

بعد أن تطرّقنا في هذه السّلسلة حول أساسيات تطوير قوالب ووردبريس إلى تحويل صفحة HTML إلى قالب ووردبريس ثم إلى كيفية إضافة Pagination (أو ما يُعرف بالتّصفيح) إليها، سنتطرّق اليوم إلى خاصّيّة أخرى لا تقل أهمّية. قوائم التنقّل (Navigation Menu) هي إحدى ميزات القوالب، توفّر ووردبريس طريقة سهلة للتحكم بالقوائم المخصصة للقالب من داخل لوحة تحكم ووردبريس، وكل ما تحتاجه هو إضافة بضعة أسطر برمجية لتضيف دعم القوائم في قالبك. فهرس السلسلة: مقدمة إلى تطوير قوالب ووردبريس: تحويل صفحة HTML إلى قالب ووردبريس التصفيح (Pagination) في قوالب ووردبريس إضافة قوائم التنقل (Navigation Menu) إلى قالب ووردبريس (هذا الدرس) صف وتسجيل ملفات Javascript و CSS في قوالب ووردبريس تسجيل القوائم بدايةً في ملف functions.php ضمن ملفات القالب نحتاج لإضافة دالّة تقوم بتسجيل أسماء القائمة (أو القوائم) التي تريد إضافتها. كالتالي: add_action('init', function() { register_nav_menu('our-custom-menu', 'القائمة الرئيسية'); }); بعد ذلك يمكن التأكد من صحة إضافة القائمة عن طريق الذهاب من لوحة التحكم إلى المظهر (Appearance) ثم القوائم (Menus)، ستظهر لدينا قائمة باسم القائمة الرئيسية في تبويب إدارة موضع القوائم. تأخذ دالّة register_nav_menu محدّدين هما: المكان (Location) والوصف (Description). محدّد المكان يستخدم كمعرّف للقائمة، حيث يتم طلب محتوى القائمة ضمن ملفات القالب عن طريق محدّد المكان (location) الذي قمنا بتعيينه أثناء تسجيل القائمة. في حالتنا قمنا بوضع قيمة المحدد هي: our-custom-menu. والوصف يتم استخدامه عند عرض القائمة في لوحة التحكم ليكون أنسب وأسهل للقراءة من محدد المكان، في حالتنا قمنا بوضع قيمة الوصف هي: القائمة الرئيسية. يمكننا تسجيل أكثر من قائمة في آن واحد عن طريق استخدام دالّة register_nav_menus التي تستخدم بشكل مشابه لدالّة register_nav_menu لكن المحدّدات تكون على شكل مصفوفة اسميّة (Associative Array)، كل عنصر في المصفوفة يمثّل قائمة واحدة بحيث يكون مفتاح العنصر هو محدّد المكان وقيمة العنصر هي محدّد الوصف. في قالبنا لا نحتاج سوى لقائمة واحدة، في ما يلي كيفية تسجيل أكثر من قائمة معًا: add_action('init', function() { register_nav_menus([ 'our-custom-menu' => 'القائمة الرئيسية', 'our-second-menu' => 'القائمة الفرعية', ]); }); كما ننوه إلى وجود دالّة معاكسة لدالّة تسجيل القوائم هي unregister_nav_menu لكننا لن نتطرّق إليها الآن. إظهار القائمة في القالب الخطوة الأخيرة ضمن القالب هي عرضه في المكان المناسب. في القالب الذي نستعمله نجد أن موقع القوائم أصبح في ملف header.php، في السطر 30 من الملف نجد وسم <section class="top-bar-section">، نريد أن نضع القائمة بدلاً من وسم <ul> الموجود بداخله. نقوم بحذف وسم <ul> مع محتواه، ثم نستخدم السطر البرمجيّ التالي لعرض القائمة: <?php wp_nav_menu(['theme_location' => 'our-custom-menu']); ?> تقبل دالّة wp_nav_menu مُحدداً واحداً هو مصفوفة تحوي عددًا من الإعدادات، الإعداد الوحيد الضروري هو theme_location ويتم استخدامه كما في السطر البرمجي السابق. يمثل هذا المحدّد قيمة محدّد المكان السابقة التي استخدمناها أثناء تسجيل قائمة جديدة والتي كانت: our-custom-menu. في حال لم يتم إدخال هذا المحدّد تقوم ووردبريس باستخدام قيمة إعداد menu (سنأتي إليه في الفقرة التالية)، وإن لم تجد قيمة فسيتم عرض أول قائمة غير فارغة تجدها ووردبريس، وفي حال عدم وجود أي قوائم غير فارغة وعدم تمرير محدّد المكان فلا يتم عرض شيء. إن ألقينا نظرة على القالب من المتصفح سنجد أن شكل عناصر القائمة أصبح مختلف قليلاً عن الشكل الذي كان عليه، وذلك ﻷن الدالّة تقوم بإضافة وسم <div> محيط بوسوم القائمة. في الفقرة التالية سنتعرف على بقية الإعدادات التي يمكن أن نستخدمها مع دالّة wp_nav_menu والتي ستمكننا من إظهار القائمة على الشكل الأنسب. إعدادات دالة wp_nav_menu كما قلنا من قبل فإن دالّة wp_nav_menu تأخذ محدّداً واحداً هو مصفوفة تحوي مجموعة إعدادات، المبرمج ليس مضطراً لإدخال جميع الإعدادات، يمكنه إدخال بعضها والباقي ستقوم ووردبريس بمعالجته وإسناد قيمته الافتراضية. الإعدادات بشكل كامل هي: <?php $defaults = array( 'theme_location' => '', 'menu' => '', 'container' => 'div', 'container_class' => '', 'container_id' => '', 'menu_class' => 'menu', 'menu_id' => '', 'echo' => true, 'fallback_cb' => 'wp_page_menu', 'before' => '', 'after' => '', 'link_before' => '', 'link_after' => '', 'items_wrap' => '<ul id="%1$s" class="%2$s">%3$s</ul>', 'depth' => 0, 'walker' => '' ); wp_nav_menu( $defaults ); ?> theme_location مكان القائمة ضمن القالب، كما تم تحديده أثناء تسجيل القائمة باستخدام دالّة register_nav_menu، ليكون بإمكان المستخدم تحديد القائمة المطلوبة للمكان الذي تم تسجيله (دون تقييد المستخدم بقائمة واحدة). القيمة الافتراضية: '' (سلسلة نصية فارغة) menu القائمة المطلوب عرضها، تقبل قيمة المعرّف الرقمي (ID)، أو الاسم اللطيف (slug)، أو الاسم الخاص بالقائمة (وليس مكان القائمة ضمن القالب). القيمة الافتراضية: '' (سلسلة نصية فارغة) container لتحديد إن كان مطلوبًا من ووردبريس إحاطة وسم <ul> بوسم آخر أم لا، القيمة المسموحة هي div أو nav، وفي حال عدم الرغبة بإحاطة القائمة بوسم نجعل القيمة false. القيمة الافتراضية: 'div' container_class الصنف الخاص بوسم html المحيط بالقائمة، بشكل افتراضي يأخذ الصنف الشكل: menu-{menu slug}-container حيث يكون {menu slug} هو الاسم اللطيف للقائمة. القيمة الافتراضية: '' (سلسلة نصية فارغة) container_id معرّف CSS (ID) الذي يتم تطبيقه على الوسم المحيط (container). القيمة الافتراضية: '' (سلسلة نصية فارغة) menu_class الصنف الذي يتم تطبيقه على وسم القائمة <ul>، يمكن أن يتم وضع أكثر من صنف يتم الفصل بينهم بفراغات (space). القيمة الافتراضية: 'menu' menu_id معرّف (ID) CSS الذي يتم تطبيقه على وسم القائمة <ul>. بشكل افتراضي تكون قيمته: menu-{menu slug} حيث {menu slug} هو الاسم اللطيف للقائمة؛ في حال حدوث تكرار بالاسم يتم إضافة إشارة - مع رقم مميز يبدأ من 1 ويزيد عند كل تكرار، مثلًا: menu-{menu slug}-1، menu-{menu slug}-2، إلخ. القيمة الافتراضية: '' (سلسلة نصية فارغة) echo فيما إن كنا نريد إظهار القائمة مباشرة في مكان استخدام دالّة wp_nav_menu أو نريد إرجاعها (return). القيمة الافتراضية: true fallback_cb دالّة ليتم استخدامها في حال لم تكن القائمة موجودة، نضع قيمتها false في حال لم نكن نريد استخدام دالّة. ويتم تمرير محدّد $args للدالّة التي يتم استخدامها. القيمة الافتراضية: 'wp_page_menu' before إظهار نصّ قبل وسم <a>. القيمة الافتراضية: '' (سلسلة نصية فارغة) after إظهار نصّ بعد وسم </a>. القيمة الافتراضية: '' (سلسلة نصية فارغة) link_before إظهار نصّ قبل نصّ الرابط. القيمة الافتراضية: '' (سلسلة نصية فارغة) link_after إظهار نصّ بعد نصّ الرابط. القيمة الافتراضية: '' (سلسلة نصية فارغة) items_wrap يتم تفسيرها بنفس الطريقة التي يتم تفسير محدّد الهيئة (format) لدالّة sprintf. يحدث تعاون بين المحددات الأخرى عن طريق رموز رقمية. %1$s تُستبدل بقيمة محدد menu_id، %2$s تُستبدل بقيمة محدد menu_class، و %3$s تُستبدل بقيمة عناصر القائمة (وسوم <li>). إن تم استبعاد أي رمز رقمي من هذا المحدّد، سيتم استبعاد المحدّد المرتبط به من وسوم القائمة. القيمة الافتراضية: '<ul id="%1$s" class="%2$s">%3$s</ul>' depth يمثل عدد المستويات الهرمية التي سيتم استخدامها، حيث رقم 0 يعني جميع المستويات. ويتم استخدام قيمة -1 لتحويل جميع المستويات إلى مستوى واحد فقط. القيمة الافتراضية: 0 walker يتم تمرير عنصر هو نسخة من صنف Walker_Nav_Menu أو من صنف يرث من ذلك الصنف. الهدف من هذا المحدد هو التحكم بشكل كامل بالأصناف (classes) والمحدّدات (IDs) ووسوم HTML للقائمة. يمكن العودة لتوثيق WordPress للاطلاع على المثال المقدم القيمة الافتراضية: '' (سلسلة نصية فارغة) تحسين ظهور القائمة في القالب بعد أن تعرّفنا على إعدادات إظهار القائمة، دعونا نقوم بتعديلها في قالبنا لتصبح مناسبة أكثر. إن شاهدنا مصدر HTML للصفحة الرئيسية من المتصفح، نجد أننا نحتاج لإزالة الوسم المحيط بالقائمة (container)، ونحتاج لإضافة صنف right لوسم <ul> المحيط بعناصر القائمة. يمكننا تعديل السطر البرمجي في ملف header.php ليصبح: <?php wp_nav_menu([ 'theme_location' => 'our-custom-menu', 'container' => false, 'menu_class' => 'right', ]); ?> قمنا بجعل قيمة الوسم المحيط (container) تساوي false ﻷننا لا نريد إحاطة القائمة بأي وسم، فنحن من البداية نقوم بإحاطة القائمة بوسم <section> في قالب HTML الذي نستخدمه. وقمنا أيضًا بإضافة قيمة محدد menu_class لتساوي: right، ليتم إضافة صنف right لوسم القائمة <ul> ليظهر بشكل جيّد. بهذا نكون قد جعلنا القائمة تظهر بشكل مرن، ونعطي المستخدم إمكانية أكبر لاختيار ما يناسبه من عناصر للقائمة من خلال لوحة التحكم، وبنفس الوقت جعلنا القائمة التي يختارها المستخدم تظهر بأفضل شكل ضمن القالب الذي نعمل عليه. الشريط الجانبي الأشرطة الجانبية (Sidebars) هي إحدى ميزات القوالب، هو بشكل بسيط عمود شاقولي يقوم القالب بتزويده لعرض معلومات مختلفة عن المحتوى الأساسي للموقع، تقوم الأشرطة الجانبية بعرض ودجات/مربعات (widgets) يقوم مدير المدونة بالتحكم بها. التعامل مع الشريط الجانبي يشبه إلى حدّ كبير التعامل مع القوائم. تسجيل شريط جانبي لنقم معاً بإضافة ما يلي إلى ملف functions.php لتعريف شريط جانبيّ جديد: add_action('widgets_init', function() { register_sidebar(); }); إن قمنا بزيارة لوحة التحكم، نجد أن هناك عنصراً جديداً في قائمة المظهر (Appearance) هو الودجات (Widgets)، بداخله يظهر لنا الشريط الجانبي الجديد بعنوان الشريط الجانبي 1، إن قمنا بإضافة شريط جانبي آخر سيأخذ نفس الاسم لكن بزيادة الرقم بمقدار واحد. والسبب أننا عندما قمنا بتسجيل الشريط الجانبي لم نحدد له اسماً أو معرّفاً. سنقوم بهذا الآن بعد أن نتعرف على إعدادات هذه الدالّة. إعدادات دالّة register_sidebar الإعدادات الافتراضية: $args = array( 'name' => sprintf( __( 'Sidebar %d' ), $i ), 'id' => "sidebar-$i", 'description' => '', 'class' => '', 'before_widget' => '<li id="%1$s" class="widget %2$s">', 'after_widget' => "</li>\n", 'before_title' => '<h2 class="widgettitle">', 'after_title' => "</h2>\n", ); شرح الإعدادات: name اسم الشريط الجانبي (القيمة الافتراضية هي ترجمة كلمة ‘Sidebar’ مع معرّف رقميّ). id معرّف الشريط الجانبي - يجب أن يكون بأحرف صغيرة (lowercase), دون فراغات (القيمة الافتراضية هي معرّف رقمية يتم زيادته تلقائياً ). description وصف نصّي لماهيّة/مكان الشريط الجانبي. يظهر في واجهة إدارجة الودجات في لوحة التحكم. (القيمة الافتراضية: فارغة) class صنف CSS ليتم إسناده للشريط الجانبي في صفحة إدارة الودجات، ولن يتم استخدام هذا الصنف في القالب. ملاحظة: سيتم إضافة كلمة “sidebar” إلى قيمة الصنف. مثلاً: إن وضعنا اسم الصنف: tal ستكون قيمة الصنف هي: sidebar-tal. (القيمة الافتراضية: فارغة). before_widget وسم/وسوم HTML ليتم وضعها قبل كل واحد من الودجات (widget) (القيمة الافتراضية: ‘<li id="%1$s" class="widget %2$s">‘). ملاحظة: يتم استخدام دالّة sprintf لاستبدال المتحولات. after_widget وسم/وسوم HTML ليتم وضعها بعد كل واحد من الودجات (widget) (القيمة الافتراضية: '\n'). before_title وسم/وسوم HTML ليتم وضعها قبل كل عنوان (القيمة الافتراضية: <h2 class="widgettitle">). after_title وسم/وسوم HTML ليتم وضعها بعد كل عنوان (القيمة الافتراضية: “</h2>\n“). عرض الشريط الجانبي في القالب نتوجه إلى ملف sidebar.php، ونقوم بتعديله ليصبح كالتالي: <div class="large-4 columns sidebar"> <?php dynamic_sidebar(); ?> </div> قمنا باستبدال النصّ الموجود مسبقاً “Sidebar” بدالّة ()dynamic_sidebar التي وظيفتها عرض محتويات الشريط الجانبي في المكان المحدد. يمكن أن نمرّر قيمة واحدة لتلك الدالّة إما أن تكون اسم (name) أو معرّف (ID) الشريط الجانبي. وفي حال عدم تمرير أي قيمة يتم عرض الشريط الجانبي الأول. تخصيص الشريط الجانبي كما لاحظنا فشكل ودجات الشريط الجانبي غير مقبولة، لنقم معًا بتحسين مظهرها عن طريق إحاطة كل واحدة من الودجات (widgets) بوسم <div class="card"> الذي كان موجودًا في ملف sidebar.php قبل استخدام دالّة عرض الشريط الجانبي. لنقم باستخدام إعدادات دالّة ()register_sidebar التي مرّت معنا في الفقرات السابقة، في ملف functions.php نقوم بتعديل الدالّة لتصبح: register_sidebar(['before_widget' => '<div class="card">', 'after_widget' => '</div>']); قمنا بتمرير إعدادَين فقط لإضافة وسم div قبل واحدة من الودجات وإضافة إغلاق الوسم بعد كل واحدة منها. بهذا نكون قد انتهينا من إضافة قائمة رئيسية وشريط جانبي إلى القالب، وتعلمنا معاً كيف يمكن تخصيص شكل القائمة والشريط الجانبي ليتناسب مع القالب بأفضل شكل ممكن.