دليل المبتدئين في تطوير قوالب ووردبريس: بناء أول قالب فرعي من الصفر

ووردبريس، كأكثر أنظمة إدارة المحتوى شيوعًا على مستوى العالم، يعتمد قدرته الكبيرة على التخصيص إلى حد كبير على نظام القوالب (Themes) الخاص به. بالنسبة للمطورين الذين يرغبون في تخصيص مظهر مواقعهم دون الحاجة إلى التعامل مع الكود الأساسي، فإن القوالب الفرعية (Child Themes) تمثل الحل المثالي. تسمح لك هذه القوالب باستخدام جميع ميزات القالب الأصلي (Parent Theme) بشكل آمن، مع إجراء التعديلات الضرورية فقط، مما يضمن عدم تغطية التحديثات القادمة للقالب الأصلي للتغييرات التي قمت بها. سيقوم هذا المقال بإرشادك خطوة بخطوة لإنشاء قالب فرعي لووردبريس كامل وقابل للاستخدام من الصفر.

ما هو الموضوع الفرعي (Subtopic) وما هي المزايا الأساسية له؟

الموضوع الفرعي (Subtheme) هو موضوع مستقل لبرنامج ووردبريس (WordPress)، ويعتمد على موضوع آخر (يُعرف بالموضوع الأصلي أو Parent Theme) لكي يعمل بشكل صحيح. الفكرة الأساسية وراء استخدام المواضيع الفرعية تكمن في “الوراثة وإعادة الكتابة” (Inheritance and Overwriting). عادةً ما يحتوي الموضوع الفرعي على ملف أنماط (Style Sheet) واحد وملف وظيفي (Function File) فقط، ولكن يمكن من خلال هذ

عند استخدام المواضيع الفرعية (subthemes) في التطوير، هناك عدة مزايا لا يمكن استبدالها، وأهمها من حيث الأمان أثناء التحديثات. عندما تقوم بتعديل ملفات الموضوع الرئيسي (parent theme) مباشرةً، فإن أي تغييرات تقوم بها ستُطمس بمجرد نشر تحديث للموضوع الرئيسي، مما قد يؤدي إلى مشاكل في تنسيق الموقع أو توقف بعض الميزات عن العمل. أما باستخدام المواضيع الفرعية، فإن تعديلاتك تظل محصورة داخل مجلد الموضوع الفرعي، ويمكن تحديث الموضوع الرئيسي في أي و

القراءة الموصى بها دليل البدء في استخدام إضافة WooCommerce: بناء متجرك الإلكتروني من الصفر。

النقطة التالية هي كفاءة التطوير؛ لا حاجة لبناء جميع ملفات القوالب الخاصة بالموضوع من الصفر، بل يكفي فقط إنشاء الجزء الذي تريد تعديله داخل الموضوع الفرعي. على سبيل المثال، إذا كنت تريد تغيير شريط العنوان في الموقع فقط، فما عليك سوى إنشاء التغييرات المطلوبة header.php الملفات، جميع القوالب الأخرى (مثل…) single.php、page.phpسيتم استخدام إصدار الموضوع الأبوي تلقائيًا في جميع الحالات، مما يعزز كفاءة العملية التطويرية بشكل كبير.

خادم ووردبريس من شركة UltaHost

ضمان استرداد المال خلال 30 يومًا، عرض نطاق ترددي وقواعد بيانات غير محدودين، حماية مجانية ضد هجمات DDoS، خصم 50% عند الشراء لمدة 3 سنوات (السعة المتاحة: 501–4 تيرابايت).

صفحة الوصول

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

قم بإنشاء أول دليل فرعي (subdirectory) وملف لديك.

إن إنشاء موضوع فرعي (sub-topic) من الناحية التقنية بسيط للغاية؛ كل ما عليك فعله هو اتباع هيكل الملفات وقواعد التسمية المحددة. أولاً، يجب أن تكون في دليل المواضيع (theme directory) الخاص بـ WordPress. /wp-content/themes/ قم بإنشاء مجلد جديد. يجب أن يكون اسم هذا المجلد مطابقًا لاسم الموضوع الفرعي الخاص بك، ويُنصح باستخدام أحرف صغيرة وخطوط فاصلة وأرقام، على سبيل المثال: my-first-child-theme。

داخل هذا المجلد، أول ملف يجب عليك إنشاؤه وأكثره أهمية هو ملف قواعد الأنماط (style sheet file). style.cssهذا الملف لا يحتوي فقط على قواعد التصميم (الأنماط)، بل إن تعليقات بداية الملف (header comments) أيضًا تعتبر أساسية لكي يتعرف نظام ووردبريس (WordPress) على القوالب الفرعية (subthemes). يجب أن تحتوي هذه التعليقات ع

/*
 Theme Name:   My First Child Theme
 Theme URI:    https://example.com/my-first-child-theme/
 Description:  A child theme of the Twenty Twenty-Six theme
 Author:       Your Name
 Author URI:   https://example.com
 Template:     twentytwentysix
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  https://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  my-first-child-theme
*/

يرجى ملاحظة أن…Template: هذا السطر في غاية الأهمية؛ يجب أن يتطابق تمامًا مع اسم مجلد الموضوع الأصلي (الموضوع الرئيسي)، مع الأخذ بعين الاعتبار اختلاف أحرف الكبيرة والصغيرة. على سبيل المثال، إذا كنت تستخدم الإعدادات الافتراضية لـ WordPress وهي Twenty Twenty-Six كموضوع أصلي، فإن اسم مجلد هذا الموضوع سيكون… twentytwentysixإذًا، يجب أن يتم كتابة ذلك هنا. twentytwentysixمن خلال هذا الإعلان بالذات، قامت ووردبريس (WordPress) بإنشاء علاقة الوراثة بين الثيمات الفرعية (sub-themes) والثيمة الرئيسية (parent theme).

القراءة الموصى بها دليل نهائي لتطوير مواضيع ووردبريس: بناء مواضيع مواقع إلكترونية محترفة من الصفر إلى النهاية。

لكي تتمكن المواضيع الفرعية من تحميل الأنماط بشكل صحيح، عادةً ما يكون من الضروري أيضًا إنشاء ملف أساسي ثاني: ملف الوظائف (Function File). functions.phpوظيفة هذا الملف مماثلة لوظيفة الموضوع الرئيسي (الموضوع الأب). functions.php يتم التحميل بشكل متزامن، وليس بالاستبدال. يمكنك إضافة كود PHP مخصص إلى هذه العملية، والأهم من ذلك، استخدام هذا الكود لإضافة ملفات أنماط (style sheets) القوالب الأم والفرعية إلى القائمة بشكل صحيح.

تم تحميل الأنماط بشكل صحيح من خلال ملفات الوظائف (function files).

في المواضيع الفرعية…functions.php المهمة الأساسية للملف عادةً ما تكون إدارة تحميل ملفات الأنماط (style sheets). على الرغم من أن المواضيع الفرعية (subtopics)… style.css سيتم التعرف عليه تلقائيًا بواسطة ووردبريس، ولكن من أجل ضمان تحميل أنماط الموضوع الأصلي (الموضوع الأب) بشكل أولوي وبشكل صحيح، فإن أفضل ممارسة هي استخدام خطاف (hook) في ووردبريس لإدارة العمليات بشكل صريح.

أنت بحاجة إلى ذلك في الموضوع الفرعي (الsubtopic). functions.php قم بكتابة دالة داخل الملف، ثم استخدمها. wp_enqueue_scripts هذا “hook الإجراءي” يُستخدم لاستدعاء الدالة المطلوبة. تضمن هذه الطريقة تحميل ملفات الأنماط بشكل صحيح وفعال في الجزء العلوي من الصفحة.

استضافة.كوم استضافة مشتركة

أداء عالٍ مع وحدات المعالجة المركزية AMD EPYC، ووحدات تخزين NVMe SSD وLiteSpeed، ودعم داخلي متخصص على مدار الساعة طوال أيام الأسبوع، وتدابير أمنية متقدمة بما في ذلك SSL، وقوة الغاشمة، والحماية من البرامج الضارة والحماية من DDoS، وتوفير ما يصل إلى 731 تيرابايت 4 تيرابايت

صفحة الوصول

فيما يلي مثال قياسي على التنفيذ:

<?php
/**
 * Enqueue parent and child theme stylesheets.
 */
function my_first_child_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') // 使用主题版本号作为缓存破坏参数
    );
}
add_action( 'wp_enqueue_scripts', 'my_first_child_theme_enqueue_styles' );

في الكود المذكور أعلاه،get_template_directory_uri() تُرجع الدالة URI لمجلد الموضوع الرئيسي. get_stylesheet_directory_uri() تعيد الدالة URI لدليل الموضوع النشط الحالي (أي الموضوع الفرعي). من خلال جعل إعلانات أنماط الموضوع الفرعي تعتمد على إعلانات أنماط الموضوع الرئيسي، نضمن أن تكون ترتيب تطبيق أنماط CSS صحيحًا: أولاً يتم تطبيق أنماط الموضوع الرئيسي، ثم تتم تعديلها وإضافة أنماط الموضوع الفرعي عليها.

تنفيذ التخصيصات الشائعة للمواضيع الفرعية (Subtopics)

بمجرد الانتهاء من بناء الهيكل الأساسي، يمكنك البدء في العمل على التخصيصات الفعلية. عادةً ما تتم أغلب عمليات التخصيص على مستويين رئيسيين: ملفات الأنماط (styles) وملفات القوالب (templates).

القراءة الموصى بها تحليل متعمق لتطوير إضافات ووردبريس: بناء وظائف مخصصة من الصفر。

بالنسبة لتخصيص الأنماط، كل ما عليك فعله هو تعديل ملفات الأنماط الموجودة في الموضوع الفرعي (الsubtopic). style.css تمت إضافة قاعدة CSS جديدة إلى الملف. نظرًا لأن هذه القاعدة يتم تحميلها بعد أنماط الموضوع الأصلي، فإن لها أولوية أعلى (بافتراض أن خصوصية محددات الاختيار متطابقة). على سبيل المثال، إذا كنت ترغب في تغيير لون الروابط في الموقع بأكمله، يمكنك إضافة الكود الت

/* 在子主题的 style.css 文件中 */
a {
    color: #3498db; /* 覆盖父主题的链接颜色 */
}

.site-header {
    background-color: #2c3e50; /* 修改页头背景色 */
}

بالنسبة للتصاميم الأكثر تعقيدًا أو تعديلات الوظائف، سيتعين عليك كتابة ملف قالب الثيمة الأصلية من جديد. هذه واحدة من أقوى ميزات الثيمات الفرعية. طريقة التنفيذ كالتالي: قم بأخذ ملف قالب الثيمة الأصل header.php、footer.php أو page.phpقم بنسخ الملف إلى دليل المواضيع الفرعية الخاص بك. بعد ذلك، سيقوم ووردبريس تلقائيًا باستخدام هذه النسخة الموجودة في دليل المواضيع الفرعية، مع تجاهل الملف الأصلي الموجود في دليل الموضوع الرئيسي

الاستضافة المشتركة InterServer

استضافة مشتركة $2.50 دولار أمريكي في الشهر، الشهر الأول $0.1 دولار أمريكي الرمز الترويجي tryinterserver، 461 نص برمجي للتطبيقات السحابية، تثبيت بنقرة واحدة.

صفحة الوصول

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

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

الملخصات

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

الأسئلة الشائعة الأسئلة المتداولة

هل يمكن إنشاء مواضيع فرعية (subthemes) لأي تصميم (theme) خاص ببرنامج ووردبريس (WordPress)؟

نظريًا، أي قالب (theme) مكتوب وفقًا لمعايير الكتابة الموصى بها من قبل ووردبريس (WordPress Coding Standards) يمكن استخدامه كقالب أصلي (parent theme) لإنشاء قوالب فرعية (child themes). كل ما عليك فعله هو التأكد من أن القالب الفرعي ي style.css أنا أحبك، أيها الأخ الأكبر. Template: ما عليك سوى ملء اسم مجلد الموضوع الرئيسي بشكل صحيح في الحقل المخصص.

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

هل ستحل ملف functions.php الخاص بالموضوع الفرعي في محل ملف functions.php الخاص بالموضوع الأساسي؟

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

هذا يعني أن الكود الموجود في كلا الملفين سيتم تنفيذه. يمكنك القيام بذلك في الموضوع الفرعي (الsubtopic). functions.php يمكنك إضافة ميزات جديدة إلى الموضوع الخاص بك أو استخدام خيوط (hooks) في WordPress لتعديل السلوك الحالي، ولكن لا يمكنك “تغطية” الدالة الموجودة في الموضوع الأصلي (الموضوع الأب) بشكل مباشر عن طريق إنشاء دالة بنفس الاسم، لأن ذلك قد يؤدي إلى خطأ فادح في PHP. عادةً، لتعديل سلوك دالة في الموضوع الأصلي، يجب استخدام خيوط الإجراءات (action hooks) أو خيوط المرشحات

ماذا أفعل إذا تعطل تنسيق موقع الويب بعد تفعيل الموضوع الفرعي؟

إذا أدى تفعيل الموضوع الفرعي (sub-topic) إلى تغيير كبير في مظهر الموقع، فغالبًا ما يكون السبب عدم تحميل ملفات الأنماط (style sheets) بشكل صحيح. يرجى اتباع الخطوات التالية للتحقيق في المشكلة:

أولاً، قم بفحص المواضيع الفرعية. style.css In the file header Template: يجب التأكد من أن قيمة هذا الخاصية تتطابق تمامًا مع اسم مجلد الموضوع الأب، بما في ذلك حروف الأحرف الكبيرة والصغيرة. هذا هو السبب الأكثر شيوعًا لحدوث المشكلة.

ثانيًا، قم بفحص… functions.php الكود الموجود في الملف، وبشكل خاص… wp_enqueue_style تأكد من أن مسار الدالة (path) وإعدادات الاعتمادات (dependencies) صحيحة، وأنه لا توجد أخطاء في صيغة اللغة البرمجية PHP. يمكنك التحقق من وجود أي رسائل خطأ ذات صلة في وحدة “اللوحة الرئيسية -> الأدوات -> صحة الموقع” (Dashboard -> Tools -> Site Health) في ووردبريس.

أخيرًا، قم بمسح جميع البيانات المؤقتة (الكاش) من موقعك الإلكتروني ومتصفحك، ثم قم بتحديث الصفحة لرؤية النتائج.

كيف يمكن إضافة قوالب صفحات مخصصة داخل المواضيع الفرعية؟

إضافة قالب صفحة مخصص في الموضوع الفرعي تتم بنفس الطريقة التي تتم بها إضافته في الموضوع العادي. كل ما عليك فعله هو إنشاء ملف PHP جديد داخل دليل الموضوع الفرعي، وإضافة كتلة تعليقات محددة في بداية الملف لتحديده كقالب صفحة.

على سبيل المثال، أنشئ واحدًا باسم my-full-width.php الملف، يجب أن يحتوي في بدايته على:

<?php
/**
 * Template Name: 我的全宽页面
 * Description: 一个没有侧边栏的全宽页面模板。
 */

ثم، يمكنك كتابة كود القالب الخاص بك في هذا الملف. بعد الانتهاء من العملية، عند إنشاء أو تعديل صفحة في واجهة ووردبريس الخلفية، ستتمكن من رؤية خيار “صفحتي الكاملة العرض” (My Full-Width Page) ضمن قائمة الاختيارات المتاحة تحت خانة “القالب” (Template) ضمن خصائص الصفحة (Page Properties).