الابتداء مع WordPress مواضيع الطفل

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

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

تحرير المظهر دون تعديل ملفات النسق

باختصار ، هذا ما يدور حول موضوع الطفل: تخصيص بدون تعديل الملفات الأصلية. سيكون لموضوع الطفل أساسًا نفس الوظائف والمظهر الخاص بموضوعك الرئيسي (الأم) ، ما لم تقول صراحةً خلاف ذلك.

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

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

لنجعل أيدينا قذرة

لذا ، فإن الخطوة الأولى هي إنشاء دليل موضوع جديد تحت مجلد / wp-content / themes /. دعنا نسميها "Twenty-Child" ، ولنقم بإنشاء ملف styles.css الأساسي الخاص بنا:

/ * Theme Name: Twenty Child Theme URI: http://www.webrevenue.co الوصف: Learning Child themes now المؤلف: Rochester Oliveira الكاتب URI: http://www.webrevenue.co/author/rochester/ القالب: twentytwelve * / / * الاتصال بالموضوع الرئيسي ملف CSS * /import ("../ twentytwelve / style.css")؛ / * أضف أي شيء تريده أدناه * /

المعلمات (من بين المعلمات الاختيارية الأخرى التي تم حذفها):

• اسم السمة: الاسم الذي ستشاهده أسفل شاشة اختيار السمات
• عنوان URI: الرابط الذي سيتم عرضه هناك
• الوصف: وصف موجز حتى تتذكر ما يدور حوله هذا الأمر
• المؤلف: الذي أنشأ موضوع الطفل
• عنوان URI للمؤلف: إذا كنت تريد الارتباط بموقع المؤلف
• قالب: مجلد السمة الرئيسية (حتى إذا كنت تريد استخدام سمة مختلفة كالمفتاح ، فقط استبدل هذه المعلمة)

بمجرد إضافة هذه الشفرة ، سترى موضوع الطفل تحت عنوان WP admin> Appearance> Themes. يمكنك تحديده الآن وستظهر جميع التغييرات في موقعك.

تعديلات موضوع الطفل 101

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

#1 تثبيت Firebug

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

بمجرد تثبيته ، يمكنك الضغط على F12 أو النقر بزر الماوس الأيمن في مكان ما من الصفحة وتحديد "Inspect Element". سترى نافذة جديدة تحتوي على HTML و CSS للصفحة الحالية (والكثير من علامات التبويب الأخرى المفيدة ، وربما يمكننا التحدث عنها لاحقًا).

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

#2 النظر في خصوصية CSS (أو وزن المحدد)

كل قاعدة CSS لها محددها ، الخصائص والقيم. ولكن عندما يجد المتصفح 2 أو المزيد من القواعد التي ستؤثر على العنصر نفسه ، يجب اختيار أي منها أكثر ملاءمة. عادة ما يكون لدينا هذه "القاعدة" لفهم ما سيتم النظر فيه:

• ! إعلان مهم سيحل محل أي شيء آخر
• سيكتب Inline CSS أي شيء ولكن! قواعد مهمة
• ID (#header، #footer، # container…) تستحق نقاط 100
• فئات (.main، .nav، .box) تستحق نقاط 10
• العلامات (body، div، p، a) تستحق نقطة 1
• الفصول العامة والفئات الزائفة (* ،: hover ،: after) تساوي 0 ولكنها تنطبق إذا كان هناك "رابط"

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

.site-header {padding: 1.71429em 0؛ } المقالة ، جانبا ، التفاصيل ، figcaption ، الشكل ، التذييل ، رأس ، hgroup ، nav ، القسم {display: block؛ }

يحتوي المنتقى الأول على نقاط 10 (حيث إنها فئة) ، والثاني لديه نقطة 1 لكل منهما (بما أن الفواصل تفصل بين محددات مختلفة فقط) لهذا السبب تظهر في الأعلى. إذا كان لديك شيء من هذا القبيل # شعبة div هناك بالتأكيد أن هذا هو أول واحد تظهر.

لماذا هذا مهم جدا؟

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

.site-header {padding: 1.71429em 0؛ }

يمكنك إضافة هذا في CSS الخاص بالطفل ، ولكن لا يجب عليك:

.site-header {padding 15px 0! مهم؛ }

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

body .site-header {padding: 15px 0؛ }

يحتوي هذا المحدد على نقاط 11 ، وهي أكبر من 10 الأصلي وبالتالي سيتم تطبيق هذا الرمز.

#3 حقق الاستفادة الجيدة من الوظائف

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

if (! function_exists ('top_menu')) {function top_menu () {// cool code here} add_action ('wp_head'، 'top_menu')؛ }

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

#4 تعرف على بعض خصائص CSS

هل تعلم أنه يمكنك إخفاء وإضافة الأشياء باستخدام CSS؟ ستحتاج إلى تثبيت firebug للعثور على المحدد المناسب ، ولكن يمكنك إخفاء عنصر عن طريق إضافة هذا الرمز:

body a {display: none}

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

.price del: بعد {لون: أحمر؛ المحتوى: "للبيع!" ؛ }

ما رأيك؟

ما رأيك في هذا الدليل؟ سوف تفكر في استخدام المواضيع الطفل؟ هل تستخدمه بالفعل؟ أعلمنا باستخدام قسم التعليقات أدناه!