هناك أكثر من طريقة لإضافة كود CSS مخصص إلى مدونة WordPress.

اليوم ، سأشرح نقاط القوة والضعف في طريقتين مختلفتين أقترحهما عليك ، حتى تتمكن من اختيار الطريقة التي تناسبك.

ولكن من قبل ، إذا لم تقم بتثبيت WordPress ، فاكتشف كيفية تثبيت وورد بلوق الخطوات 7 et كيفية العثور عليها، وتثبيت وتفعيل موضوع ورد على بلوق 

ثم عد إلى سبب وجودنا هنا.

كيفية العثور على العناصر التي تريد تخصيصها

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

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

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

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

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

اقرأ أيضا: كيفية إضافة قائمة منسدلة مع CSS في Visual محرر بك

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

بمجرد وضع هذه المعلومات في الاعتبار ، يصبح تغيير النمط أمرًا سهلاً. على سبيل المثال ، إذا كنت ترغب في تغيير الخط من 13px إلى 14px ، فأنت ببساطة تبحث عن ملف ورقة الأنماط ، المحدد الذي يتوافق مع عنصر العنصر المميز. بشكل عام في هذا النموذج: (« # معلومات .block البرنامج المساعد-المحتوى"). يمكنك بعد ذلك تعديل القيم المختلفة للسمات.

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

كيف وورد والعمل معا CSS

إنها حقيقة أن وورد المواضيع يتم إنشاؤها بشكل مختلف. لذا ضع في اعتبارك أن ملف وورد موضوع قد لا تمتثل بنسبة 100٪ لما تقرأه في الأقسام التالية.

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

انظر أيضا: كيفية تغيير حجم الصور غرفتر على وورد

حان الآن وقت إجراء عمليات التحرير المختلفة.

الطريقة # 1: تحرير ملف النمط من سمة WordPress الخاصة بك

هناك طريقتان للوصول إلى ملف style.css الخاص بالقالب.

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

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

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

الطريقة الأخرى للعثور على ورقة الأنماط هي استعراض نظام تشغيل مزود الاستضافة وتحديد موقع الملف في ملف وورد موضوع (باستخدام عميل FTP). سيختلف الموقع الدقيق اعتمادًا على مزود الاستضافة الخاص بك. في المثال الموضح أدناه ، اسم موقع الويب (في حالتنا thecare) هل مجلد ضمن مجلد ال public_html.

منذ تثبيت WordPress ، يمكنك رؤية مجلد wp-content في "thecare". المجلد الفرعي wp-content هو مجلد آخر يسمى " WP-الموضوعات"، حيث يوجد جميع ملفات وورد المواضيع مثبتة.

من هذا الموقع يستخدم موضوع يسمى " بريدك الإلكتروني »، ملف النمط« style.css موجود في المجلد " النشرة الوالدين ".

الطريقة الثانية: استخدام البرنامج المساعد لتعديل CSS

ربما تكون الطريقة الأكثر ملاءمة لتحرير CSS لمدونة WordPress الخاصة بك هي استخدام البرنامج المساعد.

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

فيما يلي بعض المكونات الإضافية المتميزة التي يمكنك استخدامها أيضًا لتعديل كود CSS الخاص بك وورد موضوع :

1. قلم رصاص أصفر: Visual CSS Style Editor

Yellow Pencil هو محرر نمط مرئي يمكنك استخدامه مع أي سمة لتخصيص موقع الويب الخاص بك في دقائق (الخطوط والألوان والرسوم المتحركة والمزيد ...).

Ce وورد البرنامج المساعد قسط سيخلق أنماط CSS بواسطة خلفية بينما تلعب بالألوان كما لو كانت لعبة ، فقد تم تصميمها لكل من المستخدمين المبتدئين وذوي الخبرة.

اكتشف أيضا لدينا الإضافات 5 WordPress لإظهار الإخطارات

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

تحميل | عرض | استضافة المواقع

2. عرف JS و CSS لجوتنبرج

Le وورد البرنامج المساعد قسط JS وCSS المخصص لـ غوتبورغ سيسمح لك بإضافة عدد غير محدود من الأنماط المخصصة إلى محرر WYSIWYG لمنشورات وصفحات WordPress الخاصة بك. إنه متوافق تمامًا مع إصدار Gutenberg من WordPress.

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

تحميل | عرض | استضافة المواقع

3. SiteOrigin CSS

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

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

اقرأ أيضا مقالتنا على 10 WordPress الإضافات لتعزيز مبيعات موقعك

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

تحميل | عرض | استضافة المواقع

4. CSS مخصص بسيط

CSS مخصص بسيط هي واحدة من الإضافات الأكثر شعبية.

اكتشف أيضا لدينا كيف تجعل مدونتك سريعة: إدارة ملفات CSS و JS.

تم تثبيته أكثر من 100 مرة وحصل على تصنيف خمس نجوم.

تحميل | عرض | استضافة المواقع

5. الفسفور الابيض اضافة CSS مخصص

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

تم تنزيل المكون الإضافي أكثر من 10.000 مرة ويتمتع حاليًا بتصنيف 4,3 نجمة.

تحميل | عرض | استضافة المواقع

6. موضوع الحشاش مخصص CSS

إذا كنت تبحث عن حل يوفر معاينة مباشرة لتغييراتك ، فيمكنك التفكير في استخدام ثيم Junkie Custom CSS. 

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

تحميل | عرض | استضافة المواقع

الموارد الأخرى الموصى بها

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

• الإضافات 10 WordPress المشاركة على الشبكات الاجتماعية
• كيفية عرض حقول مخصصة للخروج من حلقة على وورد
• 5 WordPress plugins لاستثمار مدونتك مع الإعلانات
• كيفية حماية جهاز بلوق كاشطات المحتوى

وفي الختام

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

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

إذا كنت تحب هذه المقالة ، نلا تتردد في مشاركة على الشبكات الاجتماعية المفضلة لديك. 

...