الشروع في العمل مع قوالب ووردبريس الطفل؟

في هذا البرنامج التعليمي ، ستتعلم كيفية إنشاء سمة فرعية لـ WordPress. إذا كنت جديدًا على WordPress ولا تعرف ما هي سمة WordPress الفرعية ، فسأشرح كل شيء.

قوالب WordPress عبارة عن مجموعة من ملفات PHP و JavaScript و CSS. بكلمات بسيطة ، باستخدام سمات WordPress ، يمكنك تغيير شكل ومظهر مدونتك. يمكن أن تكون سمات WordPress قوية جدًا.

تقدم سمات WordPress المتميزة الكثير من الميزات والوظائف المتقدمة. تتوفر الآلاف من قوالب WordPress المجانية والمميزة.

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

لماذا قوالب ووردبريس الطفل؟

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

موضوع الطفل يوفر الكثير من العمل والوقت. يستغرق إنشاء سمة WordPress من البداية وقتًا طويلاً وأحيانًا معرفة متقدمة بـ HTML و CSS و PHP وهو أمر مطلوب. باستخدام السمات الفرعية ، يمكنك إجراء الكثير من التعديلات.

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

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

ماذا يمكنك أن تفعل مع قوالب ووردبريس الفرعية

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

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

ماذا ستحتاج:

الآن أنت تعرف ما هي سمة WordPress الفرعية ولماذا يجب عليك إنشاء قوالب فرعية ، حان الوقت لتتعلم كيفية إنشاء سمة فرعية لـ WordPress.

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

هناك العديد من الطرق لتثبيت WordPress محليًا ، إذا كنت من مستخدمي MAC ، فيمكنك استخدام MAMP ، ويمكن لمستخدمي Windows استخدام مثبت XAMPP أو WAMP أو Bitnami WordPress.

• كيفية تثبيت WordPress مع خادم WAMP
• كيفية تثبيت WordPress مع MAMP
• كيفية تثبيت WordPress باستخدام Bitnami Stack

إذا كنت مبتدئًا تمامًا ، فيمكنك تنزيل Bitnami WordPress stack وتثبيته لإنشاء موقع WordPress يعمل بكامل طاقته على جهاز MAC أو الكمبيوتر الشخصي.

أنا شخصياً أفضل خادم WAMP للتنمية المحلية. ليس من الصعب تثبيت WordPress على WAMP ، يمكنك قراءة البرنامج التعليمي أو مشاهدة مقاطع الفيديو لمعرفة كيفية تثبيت WordPress باستخدام WAMP أو XAMPP أو MAMP.

ستحتاج أيضًا إلى محرر كود لتحرير ملفات السمات. Sublimetext و Brackets و Atom هم عدد قليل من برامج تحرير الأكواد الشائعة.

كيف تصنع قالب طفل ووردبريس؟

بمجرد أن يصبح موقع WordPress المحلي الخاص بك جاهزًا ، يمكننا البدء في إنشاء سمة الأطفال الخاصة بنا. إذا كنت تستخدم خادم WAMP ، فانتقل إلى دليل تثبيت WAMP> WWW> WordPress> wp-content> مجلد السمات.

في مجلد سمات WordPress ، أنشئ مجلدًا جديدًا وقم بتسميته twentysixteen-child أو أي شيء تريده مثل InstantShift. سنقوم باستخدام موضوع Twentysixteen كموضوع رئيسي. هذا يعني أن موضوع الطفل الخاص بنا سيستند إلى موضوع TwentySixteen.

لكل موضوع فرعي ، نحتاج إلى ملفين.

• functions.php
• style.css

مع مجلد موضوع twentysixteen-child الخاص بك ، قم بإنشاء هذين الملفين. افتح الآن ملفاتك في محرر النصوص ، للوصول السريع ، يمكنك سحب مجلد twentysixteen-child الخاص بك في الشريط الجانبي لمحرر النصوص. افتح ملف style.css وأضف الكود التالي.

[المغلق]
/ *
اسم الموضوع: InstantShift
الوصف: Twenty Sixteen Child Theme for InstantShift.
المؤلف: طاهر الطاوس
عنوان URI للمؤلف: http://www.instantshift.com
نموذج: عشرون وعشرون
الإصدار: 0.1.0
* /
[/ css]

الترميز أعلاه مطلوب لمظهر فرعي. بدون ورقة أنماط مع الترميز الضروري ، لن يتمكن WordPress من التعرف على مظهر طفلك.

أعتقد أنه يمكنك فهم كل شيء. لا يوجد شيء يمكن تفسيره. اسم موضوع طفلي هو InstantShift ولكن يمكنك تسمية طفلك كما تريد. أهم شيء هو قالب: عشرون وعشرون . هذا هو اسم موضوعنا الأم. تأكد من تهجئتها بشكل صحيح.

إذا كنت تستخدم أي سمة أخرى كقالب رئيسي ، فقم ببساطة بتغيير القالب: twentysixteen with Template: parent-theme-name .

في رأس ورقة الأنماط يمكننا أيضًا إضافة المزيد من المعلومات ، لكنها ليست مطلوبة. الآن قم بتسجيل الدخول إلى لوحة تحكم WordPress الخاصة بك. انتقل إلى المظهر> المظاهر. يجب أن تشاهد سمة InstantShift بدون أي لقطة شاشة ، لأننا لم نقم بإضافة أي لقطة شاشة لموضوع الطفل الخاص بنا.

مرر مؤشر الماوس فوق سمة InstantShift وانقر فوق الزر "تفاصيل السمة". هذه هي لقطة شاشة موضوع طفلي.

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

لا تقلق. انه عادي. لا يمكننا رؤية أي أنماط لأننا لم نقم بتضمين ملف ورقة أنماط السمات الرئيسية. دعونا نتأكد من عمل ورقة أنماط قالب الطفل الخاص بنا. في ملف style.css الخاص بسمة طفلك ، أضف الكود التالي.

[المغلق]
الجسم{
لون الخلفية: # E7F5FB ؛
}
[/ css]

احفظ ملف style.css الخاص بك ، وأعد تحميل الصفحة الأولى لموقع WordPress المحلي الخاص بك ويجب أن ترى لون خلفية أزرق فاتح.

تسجيل ورقة الأنماط الخاصة بالموضوع الرئيسي

لا نريد إنشاء كل الأنماط من البداية. سنضيف فقط بعض الأنماط الجديدة مع ملف style.css الخاص بالسمات الفرعية. الآن دعنا نضيف ملف Stye.css الخاص بالنسق الرئيسي في القالب الفرعي الخاص بنا.

افتح ملف function.php وأضف الكود التالي في ملف function.php للقالب الفرعي.

[بي أتش بي]
<؟ php

// أنماط موضوع الأصل //
// https://codex.wordpress.org/Child_Themes //

وظيفة theme_enqueue_styles () {
$ parent_style = 'أسلوب الوالدين'؛
ks29so_enqueue_style ($ parent_style، get_template_directory_uri (). '/style.css')؛
ks29so_enqueue_style ("نمط الطفل"،
get_stylesheet_directory_uri (). "/style.css"،
مجموعة (parent_style $)
) ؛
}
add_action ('ks29so_enqueue_scripts'، 'theme_enqueue_styles') ؛
[/بي أتش بي]

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

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

لكننا لم ننشئ سمة الأطفال الخاصة بنا لتغيير الخلفية ببساطة للجسم. لنبدأ في تخصيص موضوعنا.

تجاوز أنماط النسق الأصل

تخصيص الرأس:

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

[المغلق]
.site-header {
الحشو: 0 4.5455٪ ؛
الخلفية: # CDDC39 ؛
الهامش السفلي: 2em ؛
}
[/ css]

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

تخصيص الملاحة الرئيسية

لنقم الآن بتغيير لون الخلفية لعناصر قائمة التنقل الرئيسية. أحب استخدام أدوات مطور Chrome لتعديل أنماط CSS الخاصة بي.

بعد تحرير صفحات الويب باستخدام أدوات مطوري Chrome ، يمكنك نسخ الرمز الجديد من أدوات مطوري Chrome ولصقه في ملف style.css الخاص بالموضوع الفرعي.

افتح ملف style.css الخاص بموضوع طفلك وأضف الكود التالي فيه.

[المغلق]
# رأس القائمة & GT ؛ لي {
الخلفية: rgba (185 ، 202 ، 22 ، 0.97) ؛
margin-right: 4px! مهم ؛
نصف قطر الحدود: 5 بكسل ؛
}
[/ css]

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

الكلمات الأخيرة

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

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

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