تبعاً لآخر دراسة أجراها موقع WordPress فإن 85% من المستخدمين يتكيفون مع قوالبهم وفقط 35% من الزبائن يستخدمون القالب الابن أثناء ذلك. ويكمن السبب وراء ذلك في قلّة فهم هذه القوالب أو لصعوبة إدراك إنشاء واحدة مثلها. في هذا البرنامج التعليمي, سنطلع على كيفية إنشاء واستخدام قوالب ابن, ولماذا من الضروري استخدامهم. (هذه النصيحة خاصة لعملاء القوالب الأنيقة فقط: إن كنت تبحث عن تقديم تغييرات CSS بسيطة لقالبك فيمكنك استخدام صندوق CSS للزبائن في اللوحة الالكترونية عوضاً عن إنشاء قالب ابن, ولإجراء تغييرات أعمق تتطلب إضافة ملفات php حينئذٍ عليك استخدام القالب الابن ).
لماذا يجب استخدام القوالب الابن
إن إنشاء قالب ابن أثناء عرض التعديلات لشيفرا ت القوالب يمكن أن يوفر عليك الكثير من التعب فيما بعد. تسمح القوالب الابن لك بالقيام ببعض التغييرات من دون التأثير على شيفرات القوالب الأصلية, مما يسهّل لك تحديث قالبك الاب بدون إزالة التغييرات التي قمت بها. وفي نفس الوقت بإنشاء قالب ابن يمكنك إنشاء قاعدة منفصلة من الملفات التي يمكن أن تستخدمها لتخصيص موضوع دون التأثير على الموضوع الأصلي على الإطلاق. وهذا ليس بالأمر الوحيد الذي يسهّل التحديث لديك، بل إنهُ يجعلك متأكد من أنك لن تدمر الموضوع الأصلي الخاص بك كما كنت أبدا إن لم تُعدل الملفات مسبقاً. ويمكنك دائما إيقاف تشغيل القالب الابن والرجوع إلى القالب الأصل.
استعد للتطبيق
في هذا المثال سنقوم بإنشاء قالب ابن من أجل قالب Foxy. الخطوات الأولى, علينا في البداية أن ننشئ مجلد جديد من أجل قالب ابن. ونسميه فيما بعد بإسم مثل Foxy child كإسمٍ مألوف ونضع ضمن ملف القالب الجديد مجلد يدعى style.css ونملأه بالمعلومات كالمعلومات الواردة في الأسفل. أما باقي المعلومات كإسم القالب و URI و الوصف والمؤلف يعود أمر ذكرهم إليك إن كنت تود ذلك.
/*
Theme Name: W3ArabicOnline Child Theme
Theme URI: http://www.w3arabiconline.com
Description: W3ArabicOnline Child Theme
Author: Ayman Mosully
Author URI: http://www.w3arabiconline.com
Template: W3ArabicOnline
Version: 1.0.0
*/
@import url("../Foxy/style.css");
/* =Theme customization starts here
------------------------------------------------------- */
الأجزاء الأكثر أهمية في هذا الملف هي “Template:” و @import sections حيث يحددان واردات القالب الأصل CSS من الواردات الأصلية. وعليك التأكد أن المدخل للقالب الأصل (الأب) في مجلد CSS صحيح وأن عامل “Template:” يحدد بشكل صحيح اسم القالب الأصل. أما إن كنت تستخدم قالب مختلف فعليك أن تضبط القيم تباعاً. كل شيء يجب أن يكون موجود بحاذافيره والانتباه لحالة الأحرف فمجلد القالب الأصل Foxy يجب أن يُكتب بحرف كبير F و @import URL توضح ذلك.
تفعيل قالبك الابن
بعد إنشاء مجلد قالبك الابن وملف style.css يمكنك تحميل وتفعيل قالبك الابن الجديد. وإن تحميل وتفعيل القالب الابن لا يختلف ابداً عن أي قالب عادي. فيمكنك ببساطة تحميله بواسطة صفحة Appearances > Themes من خلال لوحة مفاتيح WordPress ومن ثم تقوم بتفعيلهُ. وقبل التحميل عليك إغلاقهُ. وكلا من Mac وWindows يحتويان وظيفة إغلاق ضمن نظامهما. عليك التأكد أن القالب الأصل (الأب) تم تحميلها أيضاً (كما في مثالنا التالي: قالب Foxy).
تعديل قالبك CSS
الآن نكون قد أنشأنا قالب Foxy الابن وحملناه. فكل ما قمنا بفعله هو استيراد قوالب CSS الأصلية, وبالتالي القوالب ستبدو تماماً كالقوالب الأصلية. ويمكنك تعديل قالب CSS الخاص بك بإضافة تغييرات متعددة لملف CSS لقالبك الابن أسفل خط @import. وتضاف كل معلومات CSS الجديدة بعد تحميل قالب CSS الأصلي لأن قالب CSS الجديد يتموضع أسفل القالب الأصلي في الملف وكل أنماط CSS الجديدة ستحل محل القالب الأصلي. دعونا على سبيل المثال نقول أننا نريد تغيير عرض الخط في "السعر" في الصفحة الرئيسية للقالب. والخط الآن عريض ورمادي اللون ونريد تغييره إلى خط أخضر رفيع. ويمكننا إضافة ملف CSS ذو صلة بملف foxy-child/style.css, كالتالي:
/*
Theme Name: W3ArabicOnline Child Theme
Theme URI: http://www.w3arabiconline.com
Description: W3ArabicOnline Child Theme
Author: Ayman Mosully
Author URI: http://www.w3arabiconline.com
Template: W3ArabicOnline
Version: 1.0.0
*/
@import url("../Foxy/style.css");
/* =Theme customization starts here
------------------------------------------------------- */
.et-price-sale { color: #5bbc26; font-weight: 300;}
بمجرد إضافة هذا التغيير سيحل ملف قالب CSS الابن style.css مكان القالب الأصلي. وفي هذه الحالة نحصل على علامة السعر بلونٍ أخضر جميل كما هو معروض بالأسفل:
تحرير ملف Functions.php
إن ملف Functions.php يوجد عادة حيث يتم تخزين الوظائف الرئيسية للقالب. يتم تحميل وظائف القالب الأب دائماً مع القالب الابن لكن إن احتجت أن تضيف المزيد من الوظائف المخصصة لقالبك ومن ثم يمكنك فعل ذلك بإنشاء ملف Functions.php جديد ضمن مجلد قالبك الابن. وسيتم تحميل الوظائف الجديدة مباشرةً قبل وظائف القالب الأب. وإن ملف Functions.php للقالب الابن يجب أن يبدأ بعلامة php افتتاحية, وينتهي بعلامة php للإغلاق. ويمكنك إضافة رمز php الذي ترغب به بين الافتتاحية والإغلاق.
<?php // Your php code goes here ?>
تحرير ملفات قوالب أخرى
إضافةً لتعديلات CSS والوظائف يمكنك القيام بتغييرات هيكلية لقالبك من خلال تعديل ملفات قالب php. لذلك عليك القيام بذلك بحذر ولكن بمجرد تحرير ملفات php يمكنك تعديل أي جزء من القالب. وعلى عكس تحرير functions.php حيثما تكون وظائف القالب الأصلي قد تم استيرادها تلقائياً, يتم تحرير ملفات php بإبدال الملف كلياً بملف جديد. ويتم تجاهل الملف الأصلي ويستخدم الملف الجديد بدلاً منه. والشيء الأول الذي يتوجب علينا فعله هو تكرار الملف القديم قبل البدء بتعديله. ويمكنك القيام بذلك ببساطة من خلال نسخ ولصق ملف القالب الأصلي في مجلد القالب الابن متأكداًأن الملف والموقع يحملان نفس الاسم بالضبط. على سبيل المثال, إذا أردنا أن نعدل Foxy/includes/navigation.php علينا أن ننسخ ونلصق الملف إلى foxy-child/includes/navigation.php
يعرف WordPress أن يضع هذا الملف في مكان الملف القديم لأنه يحمل نفس الاسم والموقع. يمكننا بعد ذلك أن نفتح الملف وإجراء أي تغييرات الضرورية.
<div class="pagination clearfix">
<div class="alignleft">
<?php next_posts_link(esc_html__('« Older Entries','Foxy')) ?>
</div>
<div class="alignright">
<?php previous_posts_link(esc_html__('Next Entries »', 'Foxy')) ?>
</div>
</div>
مصادر إضافية للقالب الابن
- تنزيل إضافة The One Click Child Theme : إن كنت تواجه صعوبةً ما في إنشاء مجلد قالب ابن من خلال هذه الإضافة حيث ستتمكن من إنشاء قالب ابن بنقرة واحدة .
- The WordPress Codex : يحتوي على جميع أنواع الوثائق الضخمة في WordPress codex. حيث أن هذه المقالة ستكون نقطة البداية لأي توضيح أو استفسار حول موضوع إنشاء القالب الابن.
ليست هناك تعليقات:
إرسال تعليق