قالب الإبن child theme في الووردبريس
المقدمة: كيفية إنشاء قالب الإبن في ووردبريس بسهولة
من الأشياء الجميلة والمبتكرة التي قام بها مطورو ووردبريس هي إضافة إمكانية إنشاء قالب الإبن ذو فعالية متوافقة مع القالب الأب، وذلك بغية تمكين أصحاب مواقع ووردبـريس من إنشاء قوالب فرعية تستمد خصائصها من القوالب الرئيسية .
فالقالب الإبن يمكنك من استخدام القالب الرئيسي والتعديل عليه ثم حفظه بشكل منفضل دون التأثير على القالب الأب. وهذه الميزة، ستكتشف أنها غاية في الأهمية لأنها ستوفر عليك الكثير من الجهد وتخفف عنك بعض القلق والمعانات لما قد يتعرض له موقعك في حالة التحديث خصوصاُ.
في هذه المقالة، سأعمل إن شاء الله على شرح مفصل ومبسط لكيفية إنشاء وتخصيص القالب الإبن في الووردبريس .
إقرأ أيضاً: كيفية تثبيت قالب ووردبريس بطرق صحيحة
لماذا يجب عليك إنشاء القالب الإبن إلى جانب القالب الأب؟
القالب الإبن = Child Theme —– القالب الأب = Parent Theme
كيفية إنشاء قالب الإبن في ووردبريس بسهولة
إن الأمر لا يدعو للإستغراب، فالقالب الإبن يتيح لك تعديل القالب الرئيسي كما يحلو لك ويوفر لك كل المتطلبات التي تريدها لموقعك. وبالتالي يمكنك تحرير القالب الإبن دون التأثير على القالب الأب، وليس هذا فحسب، بل يمكنك إنشاء أي مشروع باستخدام القالب الإبن كنقطة الارتساء. فقد يصعب عليك التعديل على القالب الرئيسي، لكن القالب الابن يتيح لك ذلك وبسرعة. ورغم كل هذا فهو يعتمد في وظيفته على القالب الأب، يأخذ منه صفاته، تنسيقاته ووظائفه كاملة.
كيف يعمل القالب الإبن في ووردبريس؟
إن القالب الإبن يجب أن يتواجد داخل مجلد منفضل عن مجلد القالب الأصلي . ويجب أن يشتمل على الأقل على ملفين إثنين : style.css و functions.php . و يمكن إضافة أنواع الملفات والملفات المخصصة الأخرى حسب الحاجة ، ولكن الملفين style و functions ضروريان حتى يعمل القالب الإبن بشكل صحيح.
إذن القالب الإبن يجب أن يتواجد في هذا المسار : /wp-content/themes داخل مجلد themes إلى جانب مجلد القالب الأب.
باستخدام .css وملفات .php المناسبة ، يمكنك تغيير كل شيء من إعدادات النمط والتخطيط إلى كود PHP والبرامج النصية ( سكريبتات ) المستخدمة بواسطة القالب الإبن، حتى إذا كانت هذه البرامج النصية غير موجودة في مجلد القالب الأب.
كيفية إنشاء قالب الإبن في ووردبريس بسهولة
فكر في قالبك الإبن كمتطابق للقالب الرئيسي. ويتمثل التطابق حين يقوم زائر بتحميل موقعك، فيقوم ووردبريس بتحميل القالب الإبن الذي يستمد وظيفته من الأنماط والوظائف المفقودة من القالب الأب. وبالتالي ، فإن معظم أكواد خلفية موقعك تـأتي من المجلد الأب ولكن يتم تغييره وفقاً لإعدادات القالب الفرعي ( الإبن ) قبل ظهور المحتوى على الصفحة.
ما هي الخطوات إذن؟
قبل إنشاء القالب الإبن ، يجب أن تتأكد من توفرك العناصر التالية :
- هل تستطيع الوصول إلى لوحة تحكم إدارة ووردريس؟
- هل تستطيع الوصول إلى إدارة الملفات أو FTP ؟
إقرأ أيضـاً: ما هي لوحة تحكم إدارة ووردبريس؟
إنشاء قالب الإبن في الووردبريس
إعلم أخي، أختي أن إنشاء قالب الإبن ليس أكثر تعقيداً من العمل الذي قمت به بالفعل مع القالب الرئيسي.
أول ما تقوم به الآن هو إنشاء مجلد للقالب الإبن في هذا المسار wp-content/theme. من الأفضل الحفاظ على النظام الجيد لمسار الملفات عن طريق إضافة child- في نهاية إسم القالب الإبن. لا تضع مسافة في إسم الملف فقد يسبب أخطاءً في موقعك. و لإنشاء مجلد جديد ، يمكنك استخدام بروتوكول FTP أو إدارة الملفات.
إذن تابع معي، سوف ننتقل إلى ملفات ووردبريس عبر FTP لإنشاء قالب الإبن الذي سيتخذ قالب IAMSocial ( على سبيل المثال ) قالبه الرئيسي، وبالتالي سيصبح مسار القالب الإبن كالتالي: wp-content/themes/IAMSocial-child.
كيف السبيل؟ بسيطـة! بعد الدخول للموقع عبر FTP ( واليكن البرنامج المستخدم هو FileZilla ) أسلك المسار التالي:
wp-content/themes/بيمين الماوس داخل مجلد themes اختر من القائمة ” إنشاء مجلد ” « créer un dossier » أعطه إسم القالب الرئيسي متبوع بكلمة child- ( ليصبح إسم للقالب الإبن ) ثم قم بفتح المجلد بالنقر عليه مرتين بالزر الأيسر للماوس . وداخل المساحة الفارغة لمجلد الأبن ، إضغط بيمين الماوس، ستظهر قائمة منسدلة كما في الصورة، إختر ” إنشاء ملف جديد ” « Créer un nouveau fichier »
كيفية إنشاء قالب الإبن في ووردبريس بسهولة
شرح الصورة:
رقم 1: مسار مجلد القالب الإبن
رقم2: إنشاء المجلد
رقم3: إنشاء ملف جديد
عند إنشاء ملف جديد، ستظهر نافذة لإدخال إسم الملف الذي تود إنشاءه ، أعطه إسم style.css كما في الصورة ثم إضغط على OK لتنفيذ العملية.
الآن سيظهر ملف داخل مجلد الإبن. وبيمين الماوس على الملف ستختار من القائمة المنسدلة Afficher /Editer كما في الصورة
شرح الصورة:
رقم1: ملف style.css داخل مجلد الإبن.
رقم 2 : اختر ” عرض/تحرير « Afficher/Editer »
سيفتح الملف style.css . أضف إليه هذا الكود الذي هو في الأصل عبارة عن تعليقات بلغة CSS :
|
1 2 3 4 5 6 7 8 9 10 11 12 |
/* Theme Name: IAMSocial Child Theme URI: https://jabism.com Description: IAMSocial Child Theme Author: jabism Abderrahim Author URI: https://jabism.com Template: IAMSocial Version: 1.0.0 Text Domain: IAMSocial-Child */ /*- تخصيص قالب الابن يبدأ من هنا - */ |
قم بتغيير جميع القيم لتتناسب مع القالب الخاص بك و إسم النطاق ” الدومين ” لموقعك .
واعلم أن أغلب الأسطر التي أدرجناها في ملف style.css بمجلد الإبن، تبقى اختيارية بحيث يمكن الإستغناء عن بعضها دون إحداث أي تأثير سلبي على القالب الابن. هنالك سطرين يجب الإبقاء عليهما ولا يمكن الاستغناء عنهما البتة، وهما : إسم القالب الإبن (Theme name) و القالب الأب (Template ) ليصبح الكود كالتالي:
|
1 2 3 4 |
/* Theme Name: IAMSocial Child Template: IAMSocial */ |
هذان السطران ضروريان لكي يفهم نظام ووردبريس على أن هناك قالب الإبن، ويجب الإمتثال لأوامره
ثم نقوم بحفط الملف CSS. والســـلام.
الآن جاء دور الملف Functions.php
لكن كيف سنضيفه؟ وأين سنضيفه؟ وأي كود سنضيفه إليه؟
يمكنك إنشاء الملف بنفس الطريقة التي أنشأنا بها الملف السابق وداخل نفس المجلد، لكن هاته المرة سيكون امتداده هو PHP. وليس CSS. 
ولا تكتب فيه شيئاً، أتركه فارغاً أو ابدأ بإضافة وظائف PHP التي ستحتاجها لقالب الإبن.
في منطقة لوحـة إدارة موقع ووردبريس ، مَـرِّر الماوس على مظهر ثم أنقر على قوالب لرؤية القالب الإبن لموقعك ثم انقر فوق تفعيل.
لحد الآن الملف functions.php لم يقم بتحميل CSS من القالب الرئيسي.
ما العمل إذن؟ لا تقلق ولا تخشى شيئاً! ركــز معـي!
من القائمة الجانبية في لوحة تحكم إدارة موقعك، اختر مظهر ثم محرر القوالب واختر Functions.php من القالب الإبن.
إن ووردبريس يملك القدرة على تحميل CSS من القالب الأب. إذن، قم بنسخ هـذا الكود 
وألصقه ب Functions.php:
|
1 2 3 4 5 6 7 |
<?php add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' ); function enqueue_parent_styles() { wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' ); } ?> |
بعد لصق الكود في Functions.php من القالب الإبن، أنقر فوق ” تحديث ” في أسفل الصفحة لحفظ التغييرات.
قم بزيارة موقعك الآن، وستلاحظ أنه تم تحميل CSS وأن القالب الإبن أصبح مطابقاً للقالب الأب في كل وظائفه.
هل رأيت، كم أن إنشاء القالب الإبن في الووردبريس بسيط وسهل جداً ؟ بنفس الطريقة يمكنك تعلم الكثير والمزيد عن ووردبريس ، ولكن لا تسرع كي لا تمل، خطوة خطوة، وسيكون النجاح حليفك بإذن الله.
لا شيئ صعب مع الإصــرار!
تخصيص قالب الإبن في الووردبريس
مميزات قالب الإبن :
من المميزات التي تدعونا لاستخدام قالب الإبن هي قدرة هذا القالب على امتلاك ملف function.php منفصل، والذي هو بمتابة المكون الإضافي ، يُـسْتخدم لِإضافة (أو إزالة) وظيفة معينة. كما يجب أن تكون جد متأكد من أن جميع التغييرات التي تحدثها بقالب الإبن لن تختفي بعد تحديث القالب الأب.
هـــام:
من المعلوم أنه يمكنك تخصيص القالب الإبن لموقعك، ربما هذا ما تريده، أليس كذلك؟ طبعاً هذا ما ترجوه، وإلا فلماذا أنشأته في بداية الأمر!
أريد أن أضيف إلى علمك أنه يمكنك تخصيص القالب الإبن بالتعديل على ملفات custom.css للقالب الإبن. وذلك باستخدام محرر النصوص و FTP أو عبر إدارة الملفات أو من لوحة تحكم الموقع. ولكنني هنا سأعمل على شرح أسهل الطرق المعتادة ، وهو لوحة إدارة الموقع، عبر اختيار مظهر ← محرر القوالب من القائمة الجانبية . وهنا يجب أن تكون على دراية بأساسيات CSS. لتقوم بإضافة أو إزالة عناصر من ملف CSS.
على سبيل المثال ، لتغيير لون خلفية القالب الإبن ، يلزمك إضافة أوامر CSS التالية إلى ملف style.css:
|
1 2 3 4 |
.site-content-contain { background-color: #B2C4FC; position: relative; } |
علاوة على ذلك، وفي أغلب الحالات، توجد قوالب مصحوبة بقالب الإبن، وتوفر تخصيص للقالب بشكل رائع . تتمكن من خلاله استخدام عدة تنسيقات. و قد تكون لديك رغبة في أن تفعل أكثر مما جاء في القالب من تنسيقات وتتجاوزه إلى تعديلات أكثر ملاءمة لذوقك، فالحل الوحيد هو إنشاء القالب الإبن.
الخلاصـة :
إن إنشاء قالب الإبن في الووردبريس، عمل بسيط وقوي في نفس الوقت، بحيث يمكنك من إنشاء قالب جديد تماماً يرتكز بناءهُ على إعدادات القالب الرئيسي دون التأثير على ملفات القالب الأب، و العكس صحيح طبعاً.
مع القليل من الترميز البسيط والتنظيم الجيّد ، يمكنك تغيير القالب الإبن كيفما تريد ، مع تقديم مجموعة واسعة من الاحتمالات الإبداعية !
آمل أن يكون الشرح واضحاً ومفهوماً ، و أن يكون قد أجاب عن كل تساولاتك !
قناتي على اليوتوب أرى أن هذه المواضيع قد تهمك: |