ماهو القالب الأب Parent Theme

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

ماهو القالب الأبن Child Theme

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

لماذا يجيب استخدام القالب الإبن ؟

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

كيفية عمل قالب ابن؟

مجلد القالب

أولاً عليك عمل قالب جديد داخل مجلد القوالب wp-content/themes بنفس اسم القالب الأب مع إضافة (child-) في نهاية الإسم. كمثال القالب twentyfifteen، فالقالب الإبن له هو twentyfifteen-child.

ملف style.css

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

/*
Theme Name:   Twenty Fifteen Child
Theme URI:    http://example.com/twenty-fifteen-child/
Description:  Twenty Fifteen Child Theme
Author:       John Doe
Author URI:   http://example.com
Template:     twentyfifteen
Version:      1.0.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
Text Domain:  twenty-fifteen-child
*/

جميع المعلومات السابقة اختيارية ماعدا Theme Name والـ Template بحيث يكون :

Theme Name : اسم القالب الإبن ويجب أن يكون مميز

Template : اسم المجلد الذي يحتوي على القالب الأب

ملفات التنسيق style

لكي يظهر القالب الإبن بنفس تنسيق القالب الأب يجب إضافة استايلات القالب الاب للإبن إما عن طريق import@ أو عن طريق الدالة wp_enqueue_style الذي يتم إرفاقه بالخُطاف wp_enqueue_script . إقرأ عن (WordPress Hooks).

[highlight background=”” color=””]يُنصح بالتقليل من import@ قدر المستطاع أو حتى تلاشاها نهائياً فهي تزيد من وقت تحميل الموقع[/highlight]

ويتم ذلك عن طريق إضافة ملف الوظائف functions.php ثم إضافة الكود التالي:

<?php
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
?>

حيث نطلب من ووردبريس في السطر رقم 2 بإضافة وظيفة جديدة أثناء عملية إضافة السكريبتات والتي تتم عن طريق wp_enqueue_scripts، ثم نبدأ في السطر رقم 3 بتعريف الوظيفة الخاصة بنا my_theme_enqueue_styles والتي ستقوم بإضافة الاستايلات الخاصة بالقالب الأب عن طريق الدالة wp_enqueue_style في السطر رقم 4.

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

لكن أحياناً قد تواجهك مشكلة في حالة استخدام الكاش (الذاكرة المخبأة) Browser Caching ، لانه يتم دائماً تحديث القوالب ولكن تظل النسخة التي يتم حفظها باستخدام الكاش قديمة، ذلك علينا استخدام مايسمى بالـ Cache Busting، حتى نجبر المتصفح على تفريغ الكاش وجلب الإصدار الجديد من ملف الاستايل الجديد الخاص بالقالب الأب وأيضاً التأكد من أن ملف الاستايل الخاص بالقالب الإبن سيتم تحميله بعد الخاص بالقالب الأب. بذلك يكون الاستخدام الأمثل للكود السابق يكون كالآتي :

<?php
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css' ); 
wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array('parent-style'), 
wp_get_theme()->get('Version') ); 
} ?> 

شرح الكود:

1- حتى السطر رقم 4، هذا ما قمنا بشرحه في المثال السابق

2 – في السطر رقم 5 قمنا بإضافة السطر الخاص بتسجيل ستايل القالب الإبن

3 – لاحظ الوسيط array(‘parent-style’) في السطر رقم 5 فهو مسؤل عن تحديد الملفات التي يعتمد عليها ملف الاستايل الخاص بالقالب الإبن وبالتالي تم تمرير الـ handle$ الخاص بالقالب الأب parent-style .

4 – ثم في السطر رقم 6 قمنا بتمرير الدالة ()wp_get_theme هذه الدالة تقوم بجلب الكائن WP_Theme الذي يحتوي على معلومات القالب

5 – ثم تمكنا من جلب رقم الإصدار version الخاص بالقالب عن طريق استدعاء الدالة (‘version’)get، وهي عبارة عن طريقة (PHP Methods) من طرق الكائن (PHP Object)

[highlight background=”” color=””]هذا الكود يحتاج منك معرفة بالبرمجة الكائنية PHP OOP[/highlight]

وبذلك عن طريق الـ handle$ والـ version نستطيع التغلب على مشكلة الكاش والتأكد أيضاً ألا يتم تحميل الاستايل الخاص بالقالب الأب بدلاً من القالب الإبن.

ملفات الجافا سكريبت

كما هو الحال في ملفات التنسيق، علينا أيضاً إضافة ملفات الاسكريبت الخاصة بالقالب الأب أو الإبن إن وجد عن طريق الدالة wp_enqueue_script وذلك بإضافتها للخُطاف wp_enqueue_scripts . هكذا:

[highlight background=”” color=””]لاحظ الاختلاف بين script و scripts في كل من الدالتين[/highlight]

function wpdocs_theme_name_scripts() {
wp_enqueue_script( 'script-name', get_template_directory_uri() . '/js/example.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'wpdocs_theme_name_scripts' );

هل لاحظت أنه تم أيضاً إضافة ملفات التنسيق باستخدام الأكشن wp_enqueue_scripts؟

إذن للحفاظ على التنسيق والترتيب السليم للأكواد يمكننا إضاف الاسكريبتات للدالة my_theme_enqueue_styles بحيث يصبح الكود بهذا الشكل:

<?php
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array('parent-style'), wp_get_theme()->get('Version') );
wp_enqueue_script( 'script-name', get_template_directory_uri() . '/js/example.js', array(), '1.0.0', true );

}
?>

اتجاه النص

إذا كنت تريد القالب الإبن أن يدعم اتجاه النص من اليمين لليسار عليك بعمل ملف يسمى rtl.css في مجلد القالب الإبن يحتوي على:

/*
Theme Name: Twenty Fifteen Child
Template: twentyfifteen
*/

حتى وإن كان قالبك لن يحتوي على نص بهذا الشكل فإنه من المستحب إضافته، فووردبريس لن يقوم باستدعاءه إلا إذا تحققت الدالة ()is_rtl.

ملف الوظائف functions.php

وإذا أردت إضافة الوظائف أو تسجيل الخصائص للقالب، عليك بإضافة ملف functions.php ، مع مراعاة التالي:

1 – يتم تحميل ملف الوظائف الخاص بالقالب الإبن قبل القالب الأب

2 – يمكنك إضافة الوظائف التي تريدها إلى القالب الإبن ما دام القالب الأب لايحتوي على وظائف تحمل نفس الإسم

3 – يمكن إعادة تعريف نفس الوظائف الموجودة في القالب الأب مرة أخرى داخل القالب الأبن مادامت مُعرفة داخل القالب الاب بهذا الشكل :

if ( ! function_exists( 'theme_special_nav' ) ) {
function theme_special_nav() {
//  Do something.
}
}

فالكود السابق:

1 – في السطر رقم 1 نتحقق من عدم وجود الدالة theme_special_nav

2 – إن كانت الإجابة نعم (أي غير موجودة)، سيتم بناء الدالة كما يظهر في السطر رقم 2

وانطلاقاً من حقيقة أن القالب الأبن يتم تحميله أولاً، فعند تعريف الدالة theme_special_nav داخله، يصبح تحقق الشرط في السطر رقم 1 بالنفي، أي أن الدالة موجوده. وبالتالي لا يظهر مشكلة. وتسمى هذه النوعية من الدوال التي يتم تعريفها بهذا الشكل (أي وجود عملية تحقق قبل إقلاع الدالة) باسم Pluggable Functions.

[highlight background=”” color=””]لا تقم نهائياً بنسخ الأكواد من ملف الوظائف الموجود داخل القالب الأب داخل ملف الوظائف الخاص بالقالب الإبن[/highlight]

ملفات القالب

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

مثال:

إذا كان هناك ملف داخل القالب الأب باسم content-gallery.php داخل مجلد آخر اسمه templates، فيجب عمل نفس المجلد داخل القالب الإبن ثم إضافة الملف بداخله.

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

وللتطبيق العملي سأقوم بتطبيق ذلك على القالب twentyseventeen لبناء twentyseventeen-child قريباً.

[highlight background=”” color=””]أنقر على twentyseventeen-child إن كان الرابط مفعلاً.[/highlight]