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

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

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

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

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

لمزيد من المعلومات، يرجى الاطلاع على دليلنا الشامل لتحرير مواقع ووردبريس بالكامل.

الطريقة الأولى: أستايل ويدجات ووردبريس باستخدام كود CSS

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

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

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

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

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

لا تنس حفظ إعدادات الويدجات بالنقر على زر “تحديث”.

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

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

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

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

بعد ذلك، انتقل إلى Code Snippets » + Add Snippet، ثم حدد ‘Add Your Custom Code (New Snippet)‘. ثم انقر على زر ‘+ Add Custom Snippet’ .

الأن، قم بتسمية ملف CSS المخصص الجديد الخاص بك. يمكن أن يكون اسم بسيط مثل “أستايل ويدجت المخصص”.

ثم غير نوع الكود إلى “CSS Snippet”.

بعد ذلك، أضف CSS المخصص في الحقل.

فيما يلي بعض CSS الأساسية التي استخدمناها:

.latest-articles { 
background-color:#dedff4;
padding:20px;
}

بعد الانتهاء، مرر للأسفل إلى قسم Insertion. تأكد من ضبط طريقة الإدراج على ‘Auto Insert’ والموقع على ‘Site Wide Header’.

بعد ذلك، حرك الزر في الزاوية العلوية اليمنى حتى يظهر “Active”، ثم انقر على “Save Snippet”.

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

هكذا يبدو موقعنا على موقع ووردبريس التجريبي:

الطريقة الثانية: إضافة أستايل ويدجات ووردبريس باستخدام CSS Hero (بدون كود)

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

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

يمكنك معرفة المزيد عن هذه الإضافة في مرجعة CSS Hero الخاصة بنا.

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

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

بعد ذلك، عليك زيارة الصفحة التي يمكنك من خلالها رؤية الويدجات التي تريد تصميمها، ثم انقر على زر CSS Hero في الأعلى.

سيؤدي هذا إلى فتح الصفحة في واجهة محرر CSS Hero.

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

ما عليك سوى توجيه مؤشر الفأرة إلى الأداة التي تريد تصميمها. ثم انقر عليها لتحديدها.

في هذا المثال، حددنا ويدجت البحث.

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

في المثال أدناه، قمنا بتغيير حجم الخط الخاص بـ ويدجت البحث ووردبريس لكي تبرز بشكل أكبر.

يمكنك أيضًا تغيير عناصر محددة من الأداة عند الحاجة.

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

بعد الانتهاء، لا تنس النقر على زر “حفظ” لحفظ إعداداتك.

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

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