كيفية إضافة CSS مخصص إلى موضوع WordPress Child الخاص بك

إذا كنت ترغب في إضافة CSS مخصص إلى قالب WordPress الفرعي الخاص بك ، فأنت بحاجة أولاً إلى إنشاء ورقة أنماط جديدة . للقيام بذلك ، يمكنك إما استخدام محرر نصوص مثل Notepad ++ أو محرر كود مثل Dreamweaver. بمجرد حفظ ورقة الأنماط الجديدة الخاصة بك ، ستحتاج إلى تحميلها إلى دليل المظهر الفرعي الخاص بك. أسهل طريقة للقيام بذلك هي باستخدام عميل FTP. بمجرد أن تكون ورقة الأنماط الجديدة الخاصة بك في دليل القالب الفرعي الخاص بك ، ستحتاج إلى وضعها في قائمة الانتظار. للقيام بذلك ، تحتاج إلى إضافة الكود التالي إلى ملف function.php الخاص بالقالب الفرعي الخاص بك: wp_enqueue_style ('child-theme-styles'، get_stylesheet_uri ())؛ سيخبر هذا الرمز WordPress بتحميل ورقة الأنماط الجديدة بعد ورقة أنماط القالب الأصلي. هذا كل ما في الأمر لإضافة CSS مخصص إلى قالب WordPress الفرعي الخاص بك!

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

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

كيف يمكنني إدراج ملفات Css في قوالب ووردبريس الخاصة بالأطفال؟

إدراج الملفات في قائمة الانتظار في ووردبريس هي عملية تحميل الملفات في نواة ووردبريس. يمكن القيام بذلك إما من خلال ملف function.php أو باستخدام ملحق. عند استخدام سمة فرعية ، ستحتاج إلى إدراج الملفات في قائمة الانتظار بنفسك. الطريقة الصحيحة للقيام بذلك هي باستخدام ربط الإجراء wp_enqueue_scripts. يتيح لك هذا الخطاف تحميل الملفات في رأس المستند ، حيث يجب تحميل ملفات CSS . لاستخدام هذا الخطاف ، ستحتاج أولاً إلى إنشاء وظيفة تقوم بتحميل ملف CSS الخاص بك. يجب إضافة هذه الوظيفة إلى ملف jobs.php الخاص بسمة الطفل. بمجرد إضافة وظيفتك إلى function.php ، يمكنك حينئذٍ استخدام الخطاف wp_enqueue_scripts لاستدعاء وظيفتك. يجب أن تبدو وظيفتك كما يلي: function my_theme_enqueue_styles () {wp_enqueue_style ('parent-style'، get_template_directory_uri (). '/style.css')؛ } add_action ('wp_enqueue_scripts'، 'my_theme_enqueue_styles') ؛ ستقوم هذه الوظيفة بتحميل ملف CSS الخاص بك بعد ملف CSS الخاص بالسمة الأصلية. هذا مهم لأنه سيتأكد من أن ملف CSS الخاص بك يتجاوز أي أنماط من السمة الأصلية.

قم بتحميل ورقة الأنماط الخاصة بك بوظيفة نمط Themename

إذا كان هناك عنوان URI محدد ، فسيتم تحميل ورقة الأنماط بواسطة الوظيفة اسم النمط.

كيف أقوم بإضافة رموز إلى موضوع الطفل؟

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

إذا كنت ترغب في إضافة التعليمات البرمجية الخاصة بك ، فإن أفضل خيار هو استخدام سمة فرعية. يمكن استخدام السمات الفرعية لتعديل سمات WordPress مع عدم تعديل ملفات القالب الأصلي. موضوع Zakra Child متاح للتنزيل مباشرة من صفحة البداية. قم بإنشاء ملف يسمى style.css في مجلد zakra-child ، متبوعًا بالمعلومات الموضحة أدناه. إذا لزم الأمر ، احفظ الملف عن طريق إدراجه. يرجى التأكد من تثبيت النسق الرئيسي بجانب السمة التابعة في السمات المثبتة. يمكنك إضافة رمز إلى ملفات القوالب عن طريق تعديلها. إذا كنت تريد إجراء تغييرات أو إضافة تعليمات برمجية إضافية إلى ملف header.php ، فانسخ ملف النسق الأصل والصقه في القالب الفرعي.

كيف أقوم بإضافة Css إلى صفحة معينة في WordPress؟

لإضافة مكون إضافي جديد ، قم بتسجيل الدخول إلى لوحة إدارة WordPress الخاصة بك وانتقل إلى قائمة المكونات الإضافية. يمكنك البحث عن مكون إضافي محدد عن طريق كتابة Post / Page Custom CSS في حقل البحث. يمكن بعد ذلك إكمال التثبيت بالنقر فوق الزر "التثبيت الآن".

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

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

Enqueue Css WordPress Child Theme

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

كيفية إضافة ملف Css في قالب ووردبريس

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

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

بالإضافة إلى السماح لك بإضافة CSS مستقل عن السمة إلى موقعك ، فإن المكون الإضافي المخصص لـ CSS يجعل من السهل دمج CSS المخصص. إذا كنت تريد تغيير CSS لموضوعك بشكل كبير ، فإن السمة الفرعية فكرة جيدة. يمكنك استخدام السمات الفرعية لتجاوز ملفات النسق الرئيسي ، مثل CSS و PHP والأصول الثابتة مثل الصور. سنستخدم Simple Custom CSS في هذا البرنامج التعليمي لإنجاز نفس الشيء دون أي تكوين إضافي. أسلوب. يمكن تحرير CSS باستخدام محرر الكود الذي تختاره ، مثل Atom أو Visual Studio Code ، أو قائمة المظهر في منطقة إدارة WordPress الخاصة بك. إذا كنت لا ترغب في لمس قاعدة الشفرة ، يمكنك استخدام أداة التخصيص أو أداة التخصيص.

للاتصال بملفات CSS الخارجية ، تأكد من أن WordPress Core يعرف ما تستخدمه. إذا كنت ترغب في تخصيص المظهر الخاص بطفلك ، فيمكنك القيام بذلك عن طريق إنشاء سمة فرعية. لإضافة قواعد نمط مخصصة إلى نسقك الفرعي ، يجب عليك أولاً تعديل ملف style.html. لإنشاء ملف CSS خارجي ، يجب عليك أولاً تعديل function.php. في ThemeForest ، هناك الآلاف من سمات WordPress للاختيار من بينها.

كيفية إنشاء موضوع الطفل

النسق الفرعي هو سمة ترث وظائف سمة أخرى ، تسمى النسق الرئيسي. غالبًا ما يتم استخدام السمات الفرعية عندما تريد إجراء تغييرات على نسق موجود.
لإنشاء سمة فرعية ، ستحتاج إلى إنشاء مجلد جديد وملفين: style.css و function.php.
في المجلد الجديد ، أنشئ ملفًا يسمى style.css وأضف الكود التالي:
/ *
اسم الموضوع: موضوع الطفل
النموذج: موضوع الوالدين
* /
import url (“../ parent-theme / style.css”) ؛
يخبر هذا الرمز WordPress باستخدام ورقة أنماط القالب الأصلي.
بعد ذلك ، قم بإنشاء ملف يسمى functions.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') ؛
}
؟ >
يخبر هذا الرمز WordPress بإدراج ورقة أنماط القالب الأصلي في قائمة الانتظار.
الآن ، عند تنشيط السمة الفرعية ، سترث أنماط ووظائف السمة الأصلية. يمكنك بعد ذلك إجراء تغييرات على ورقة أنماط القالب الفرعي وملف function.php ، وستنعكس هذه التغييرات على الواجهة الأمامية لموقعك.

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

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

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

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