يعد تخصيص قالب WordPress موجود حاجة شائعة، ولكن تحرير القالب مباشرة يمكن أن يسبب مشاكل. 

إذا تم تحديث السمة، فسيتم استبدال التغييرات التي أجريتها! أفضل طريقة هي إنشاء سمة فرعية موروثة من السمة الأم. 

تسمح لك السمات الفرعية بتعديل السمة وتوسيعها بأمان وأمان. 

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

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

لذلك ، دون مزيد من اللغط ، فلنبدأ.

1 ما هو موضوع الطفل؟

السمة الفرعية هي سمة WordPress التي ترث الوظائف من السمة الأصلية. يسمح لك بتعديل أو إضافة ميزات جديدة دون تغيير ملفات السمات الأصلية. 

يعد هذا مفيدًا لأنه إذا قمت بتعديل ملفات السمات الأصلية مباشرة، فسيتم فقدان التغييرات عند تحديث السمة. 

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

في هذا القسم، ستلاحظ أننا ذكرنا الموضوع الرئيسي، ولكن ما هو بالضبط؟

2 ما هو موضوع الوالدين؟

السمة الأصلية هي سمة مصممة مسبقًا وتعمل كأساس لموقع WordPress على الويب. فهو يوفر تركيب اساسيوتخطيط ووظيفة الموقع. 

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

يمكن أن يؤدي استخدام القالب الرئيسي إلى توفير الوقت والجهد عند إنشاء موقع ويب، مما يوفر نقطة بداية للتصميم والوظيفة.

في هذه المرحلة، يمكننا القول أن جميع سمات WordPress هي سمات أصلية من الناحية الفنية ما لم يتم تصميمها خصيصًا لتكون سمة فرعية.

إليك نقطة أساسية يجب تذكرها: يمكن أن يوجد السمة الأصلية وتعمل بشكل مستقل، بينما يعتمد السمة الفرعية دائمًا على السمة الرئيسية لتوفير الوظائف والميزات الأساسية.

3 لماذا استخدام موضوع الطفل؟

هناك بعض الأسباب الرئيسية لاستخدام قالب فرعي بدلاً من تعديل القالب مباشرةً:

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

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

4 المتطلبات المسبقة لإنشاء سمة الطفل

قبل إنشاء قالب فرعي، من المهم أن يكون لديك بعض المتطلبات. 

أولاً، تحتاج إلى تثبيت WordPress فعال وموضوع أصلي تريد إنشاء قالب فرعي له. 

من المفيد أيضًا فهم HTML وCSS وPHP، حيث ستقوم بتغيير التعليمات البرمجية لتخصيص السمة الفرعية. 

ومن المفترض أيضًا أن تكون قادرًا على نسخ ولصق مقتطفات التعليمات البرمجية من مصادر أخرى. 

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

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

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

لكن في هذا الدليل، سنستخدم قالب WordPress الافتراضي Twenty-Twenty-four.

5 إنشاء سمة فرعية في WordPress

الآن بعد أن فهمت مفهوم السمات الفرعية، دعنا نتعمق في إنشاء سمة فرعية في WordPress. 

سنستكشف طريقتين شائعتين يمكنك الاختيار من بينهما، بما يوفر مستويات مختلفة من الراحة:

5.1 إنشاء سمة فرعية باستخدام الكود

أولاً، قم بالوصول إلى تثبيت WordPress الخاص بك عبر FTP أو مدير الملفات الذي توفره لوحة تحكم الاستضافة الخاصة بك. انتقل إلى wp-content/themes الدليل وإنشاء مجلد جديد باسم فريد لموضوعك الفرعي. 

في هذا البرنامج التعليمي، سوف نستخدم اسم "mtschild" لمجلد السمات الفرعية.

يعمل هذا الدليل كمساحة تخزين أساسية لمكونات السمة الفرعية الخاصة بك.

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

Theme Name: MTS Child Theme
Theme URI: https://www.mythemeshop.com/
Description: Child theme for the Twenty Twenty-Four Theme
Author: MyThemeShop
Author URI: https://www.mythemeshop.com
Template: twentytwentyfour
Version: 1.0.0
Text Domain: mtschild

يُعلم هذا الرمز WordPress أن السمة الفرعية الخاصة بك تمتد إلى السمة الأصلية المحددة. استبدل "MTS Child Theme" باسم السمة الفرعية المفضلة لديك وحقل القالب باسم مجلد السمة الأصلية.

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

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

إذا لم يقم القالب الأصلي الخاص بك بتحميل أي ورقة أنماط، فاستخدم الكود التالي لتحميل style.css عبر jobs.php:

<?php
add_action( 'wp_enqueue_scripts', 'mts_child_theme_enqueue_styles' );
function mts_child_theme_enqueue_styles() {
wp_enqueue_style( 'mts_child_theme-style', get_stylesheet_uri() );
}

يمكن أن يعمل هذا الرمز أيضًا إذا قام القالب الأصلي بتحميل ورقة الأنماط الخاصة به فقط. 

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

<?php
add_action( 'wp_enqueue_scripts', 'mts_child_theme_enqueue_styles' );
function mts_child_theme_enqueue_styles() {
	wp_enqueue_style( 'mts-child-theme-parent-style', get_parent_theme_file_uri( 'style.css' ) );
}

بالنسبة لموضوع Twenty-Twenty-Four المستخدم في هذا الدليل، سنقوم بتطبيق الكود الأول نظرًا لأن القالب لا يقوم بتحميل أي ورقة أنماط على الإطلاق. 

تذكر أن تبدأ بـ <?php علامة عند إضافة الكود. قم بتعديل هذه الرموز وفقًا لمتطلباتك، خاصة فيما يتعلق باسم السمة mts_child_theme يستخدم.

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

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

ومع ذلك، سنرشدك بشأن تخصيص السمة الفرعية لإعدادك لمزيد من التعديلات.

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

5.2 إنشاء سمة فرعية باستخدام مكون إضافي

يعد إنشاء سمة فرعية باستخدام مكون إضافي أمرًا بسيطًا وسهلاً. أولا، تحتاج إلى تثبيت وتفعيل مكون موضوع الطفل توصيل في. لمزيد من التفاصيل، راجع دليلنا خطوة بخطوة كيفية تثبيت البرنامج المساعد ووردبرس].

بمجرد تنشيط المكون الإضافي، انتقل إلى لوحة تحكم WordPress وانتقل إلى الأدوات → سمات الطفل.

على حدد علامة التبويب "الموضوع الأصلي"، اختر السمة الأصلية من القائمة المنسدلة لإنشاء السمة الفرعية. عادة، يتم تحديد الموضوع النشط على موقعك مسبقًا.

المقبل، انقر على حلل زر. سيقوم البرنامج الإضافي بفحص السمة الرئيسية المحددة لتحديد ما إذا كان يمكنه إنشاء سمة فرعية وما إذا كان يتطلب ملف style.css الخاص به للمظهر.

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

ومع ذلك، امتنع عن تغيير الإعدادات حتى تصل إلى القسم 7.

في القسم 7، انقر فوق الزر المسمى انقر لتحرير سمات السمة التابعة.

ومن هناك، يمكنك إدخال تفاصيل السمة الفرعية الخاصة بك.

عند إنشاء سمة فرعية يدويًا، قد تفقد قوائم وعناصر واجهة السمة الأصلية. 

ومع ذلك، يمكن للمكون الإضافي Child Theme Configurator نقلها من القالب الأصلي إلى القالب الفرعي. 

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

عند الانتهاء، سيقوم المكون الإضافي بإنشاء مجلد للقالب الفرعي الخاص بك يحتوي على ملفات style.css وfunctions.php الأساسية للتخصيص في المستقبل.

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

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

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

6 كيفية تخصيص موضوع طفلك

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

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

6.1 تخصيص الأنماط باستخدام CSS

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

قبل المتابعة، من الضروري أن يكون لديك فهم أساسي لـ HTML وCSS. 

يمكنك الاستفادة بشكل فعال من أداة الفحص الخاصة بالمتصفح الخاص بك أو نسخ الأنماط مباشرة من ملف style.css الخاص بالقالب الأصلي.

للوصول إلى رموز CSS لصفحة ويب باستخدام متصفحك، ما عليك سوى النقر بزر الماوس الأيمن على الصفحة وتحديدها فحص من الخيارات التي تظهر. تعرض هذه الأداة رموز أنماط CSS، مما يسمح لك بتحديد العناصر التي ترغب في تعديلها.

عندما تنقر بزر الماوس الأيمن وتحدد "فحص"، ستنقسم شاشة متصفحك إلى قسمين، وستعرض HTML وCSS للصفحة. 

اعتمادًا على إعدادات المتصفح لديك، قد تظهر تفاصيل HTML وCSS إما على الجانب الأيمن أو في أسفل الشاشة.

أثناء التمرير فوق أسطر HTML المختلفة، سيقوم مراقب Chrome بتمييزها في علامة تبويب العناصر وعرض قواعد CSS المقابلة المتعلقة بالعنصر المميز.

يمكنك التجربة عن طريق تحرير CSS مباشرةً لمعاينة الشكل الذي سيظهر به. على سبيل المثال، إذا كنت ترغب في تغيير لون خلفية الصفحة الرئيسية الافتراضية لموضوع Twenty Twenty-Four من #f9f9f9 إلى #6841ea.

بمجرد ضبط لون الخلفية في مفتش المتصفح، يكون التغيير مؤقتًا. لجعلها دائمة، يجب عليك نقل قاعدة CSS هذه إلى ملف style.css الخاص بالقالب الفرعي الخاص بك:

body {
background-color: #6841ea;
}

بعد إدخال الرمز، تذكر حفظ تعديلاتك. يمكنك تكرار هذه العملية لأي عنصر آخر في صفحة الويب ترغب في تخصيصه.

على سبيل المثال، لنفترض أنك تريد تعديل الألوان على موقع الويب الخاص بك. يمكننا تزويدك ببعض رموز CSS التي ستسمح لك بذلك.

لتغيير لون النص إلى اللون الرمادي الداكن، أضف الكود التالي إلى ملف CSS الخاص بك:

body { color: #3b3b3b; } 

لتغيير لون العنوان إلى اللون الأزرق استخدم الكود التالي:

h1, h2, h3 { color: #007bff; }

للحصول على لون خلفية الرأس، استخدم الكود التالي:

#header { background-color: #f5f5f5; } /* Light grey background for header */

وبالنسبة لمنطقة المحتوى، استخدم هذا الرمز لتعيين لون الخلفية إلى اللون الأبيض:

.site-container { background-color: #fff; } 

يمكنك نسخ أنماط CSS هذه إلى ملف style.css الخاص بالقالب الفرعي الخاص بك إما من خلال دليل السمات الفرعية لموقع الويب الخاص بك أو من لوحة تحكم WordPress الخاصة بك.

عندما تقوم بإضافة كود CSS الخاص بك، فإنه سيشبه هذا التنسيق:

بعد حفظ التغييرات، حاول تحديث صفحة موقع الويب الخاص بك. إذا لم تظهر التغييرات، فامسح ذاكرة التخزين المؤقت للمتصفح لديك للتأكد من أنك تعرض أحدث إصدار من CSS.

6.2 تجاوز ملفات القالب

بينما يتحكم تخصيص CSS في مظهر موقع الويب الخاص بك، توفر السمات الفرعية ميزة أكثر قوة: تجاوز ملفات القالب.

تمكنك هذه الإمكانية المتقدمة من إعادة تشكيل التخطيط و هيكل صفحات موقع الويب الخاص بك والعناصر. ومع ذلك، توخي الحذر لأنه يتطلب فهمًا أعمق لقوالب WordPress وHTML وPHP.

لتجاوز قالب، انسخ ملف .php الأصلي من مجلد القالب الأصلي إلى قالبك الفرعي، مع الاحتفاظ باسم الملف الدقيق. 

على سبيل المثال، لتجاوز header.php، تحتاج إلى نسخ ملف header.php من الدليل /parent-theme/ ولصقه كـ header.php في الدليل /child-theme/.

يمكنك الآن تعديل ملف header.php في السمة الفرعية الخاصة بك.

بعض القوالب الشائعة التي يجب تجاوزها:

• header.php – يحتوي على العلامات والعلامات التجارية للموقع، والتنقل، وما إلى ذلك.
• footer.php – الإغلاق العلامة والترميز.
• page.php - القالب الافتراضي للصفحات.
• Single.php – القالب المستخدم للمشاركات الفردية.
• Index.php – قالب الصفحة الرئيسية.

على سبيل المثال، يمكنك تعديل footer.php عن طريق عرض حقوق الطبع والنشر المخصصة لموقعك:

<!-- Modified child footer.php -->

<footer>
  <p>&copy; <?php echo date('Y'); ?> My Company</p>

  <?php if ( is_active_sidebar('footer-1') ) : ?>
    <?php dynamic_sidebar('footer-1'); ?>
  <?php endif; ?>

</footer>

6.3 توسيع الوظائف

• functions.php يمكّنك الملف الموجود في القالب الفرعي من تقديم وظائف PHP جديدة وخطافات ومرشحات وتعليمات برمجية للتوسع في الميزات الافتراضية للقالب الأصلي.

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

على سبيل المثال، إذا كنت ترغب في قسم مخصص على موقع WordPress الخاص بك لعناصر واجهة المستخدم المخصصة، فاستخدم مقتطف الكود التالي لإنشاء منطقة عنصر واجهة مستخدم تسمى "منطقة عنصر واجهة المستخدم المخصصة":

function register_custom_widget() {
    register_sidebar( array(
        'name'          => 'Custom Widget Area',
        'id'            => 'custom_widget_area',
        'description'   => 'Add widgets here to appear in the custom widget area',
        'before_widget' => '<div id="%1$s" class="widget %2$s">',
        'after_widget'  => '</div>',
        'before_title'  => '<h2 class="widget-title">',
        'after_title'   => '</h2>',
    ) );
}
add_action( 'widgets_init', 'register_custom_widget' );

بعد حفظ هذا الرمز في ملف function.php الخاص بالقالب الفرعي الخاص بك، انتقل مرة أخرى إلى موقع WordPress الخاص بك وقم بالوصول إليه المظهر → الحاجيات. ستلاحظ أن أداة "منطقة الأدوات المخصصة" متاحة للاستخدام.

7 الأسئلة المتكررة

8 وفي الختام

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

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

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

تذكر، مع القليل من المثابرة، يمكن أن يمنحك إنشاء قالب فرعي المرونة اللازمة لإنشاء مظهر ومظهر فريد لموقعك على الويب مع الحفاظ على استقرار وأمان القالب الأصلي.

لذا، جربه وشاهد الفرق الذي يمكن أن يحدثه لموقع WordPress الخاص بك.

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

• محتوى مدعوم من تحسين محركات البحث وتوزيع العلاقات العامة. تضخيم اليوم.
• PlatoData.Network Vertical Generative Ai. تمكين نفسك. الوصول هنا.
• أفلاطونايستريم. ذكاء Web3. تضخيم المعرفة. الوصول هنا.
• أفلاطون كربون، كلينتك ، الطاقة، بيئة، شمسي، إدارة المخلفات. الوصول هنا.
• أفلاطون هيلث. التكنولوجيا الحيوية وذكاء التجارب السريرية. الوصول هنا.
• المصدر https://rankmath.com/blog/wordpress-child-theme/