كيفية تغيير لون الخلفية في ووردبريس (دليل المبتدئين)

هل تبحث عن طريقة سهلة لتغيير لون خلفية موقع  ووردبريس الخاص بك؟

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

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

كيفية تغيير لون الخلفية في  ووردبريس

لماذا تغير لون الخلفية في ووردبريس؟

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

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

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

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

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

تغيير لون الخلفية باستخدام أداة تخصيص  ووردبريس

تغيير لون الخلفية باستخدام Custom CSS

قم بتغيير ألوان الخلفية بشكل عشوائي

تغيير لون الخلفية للمنشورات الفردية

استخدم مقطع فيديو في الخلفية

قم بإنشاء صفحة مقصودة مخصصة

تغيير لون الخلفية باستخدام  ووردبريس Theme Customizer

اعتمادًا على المظهر الخاص بك ، قد تكون قادرًا على تغيير لون الخلفية باستخدام  ووردبريس Theme Customizer . يتيح لك تحرير مظهر موقعك في الوقت الفعلي ودون الحاجة إلى تحرير التعليمات البرمجية.

للوصول إلى  ووردبريس Theme Customizer ، يمكنك تسجيل الدخول إلى موقع الويب الخاص بك ثم الانتقال إلى المظهر »تخصيص .

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

تعتمد الخيارات المحددة المتاحة على سمة  ووردبريس التي يستخدمها موقعك. في هذا البرنامج التعليمي ، نستخدم قالب Twenty-One الافتراضي.

لتغيير لون خلفية موقع الويب الخاص بك ، امض قدمًا وانقر على علامة تبويب إعدادات “الألوان والوضع الداكن” من القائمة الموجودة على يسارك.

انتقل إلى إعدادات الألوان والوضع الداكن

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

اختر لون الخلفية

عند الانتهاء من التغييرات ، لا تنس النقر فوق الزر “نشر”. يمكنك الآن زيارة موقع الويب الخاص بك لمشاهدة لون الخلفية الجديد أثناء العمل.

مثال على لون الخلفية الجديد

قد لا يتوفر هذا الخيار في نسقك في “مُخصص القوالب”. في هذه الحالة ، يمكنك تجربة إحدى الطرق أدناه.

تغيير لون الخلفية عن طريق إضافة CSS مخصص

هناك طريقة أخرى يمكنك من خلالها تغيير لون خلفية موقع  ووردبريس الخاص بك عن طريق إضافة CSS مخصص في  ووردبريس Theme Customizer.

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

أضف CSS مخصصًا في  ووردبريس Theme Customizer

بعد ذلك ، يمكنك إدخال الرمز التالي:

body {
 background-color: #FFFFFF;
}

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

أدخل لون الخلفية CSS المخصص

عند الانتهاء ، لا تنس النقر فوق الزر “نشر”. يمكنك الآن زيارة موقع الويب الخاص بك لعرض لون الخلفية الجديد.

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

قم بتغيير ألوان الخلفية بشكل عشوائي في  ووردبريس

الآن ، هل تبحث عن طريقة لتغيير لون الخلفية بشكل عشوائي في  ووردبريس؟

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

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

أول شيء عليك القيام به هو معرفة فئة CSS للمنطقة التي تريد إضافة تأثير تغيير لون الخلفية فيها.

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

ابحث عن فئة CSS

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

بعد ذلك ، تحتاج إلى فتح محرر نص عادي على جهاز الكمبيوتر الخاص بك مثل المفكرة وإنشاء ملف جديد. سيتعين عليك حفظ الملف باسم “wpb-background-tutorial.js” على سطح المكتب.

بمجرد الانتهاء من ذلك ، يمكنك إضافة الكود التالي إلى ملف JS الذي أنشأته للتو:

jQuery(function($){
        $('.page-header').each(function(){
            var $this = $(this),
            colors = ['#ec008c', '#00bcc3', '#5fb26a', '#fc7331'];
  
            setInterval(function(){
                var color = colors.shift();
                colors.push(color);
                $this.animate({backgroundColor: color}, 2000);
            },4000);
        });
        }); 

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

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

الآن وبعد أن أصبح ملف JS جاهزًا ، ستحتاج إلى تحميله إلى مجلد JS الخاص بموضوع  ووردبريس الخاص بك باستخدام خدمة بروتوكول نقل الملفات (FTP) .

في هذا البرنامج التعليمي ، نحن نستخدم FileZilla. إنه عميل FTP مجاني لأنظمة Windows و Mac و Linux ، وهو سهل الاستخدام للغاية.

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

بعد تسجيل الدخول ، سترى قائمة بالمجلدات والملفات الخاصة بموقعك على الويب ضمن عمود “الموقع البعيد”. انطلق وانتقل إلى مجلد JS في سمة موقعك.

قم بتحميل ملف JS باستخدام خدمة FTP

إذا لم يكن قالبك يحتوي على مجلد js ، فيمكنك إنشاء واحد. ما عليك سوى النقر بزر الماوس الأيمن فوق مجلد القالب الخاص بك في عميل FTP والنقر فوق خيار “إنشاء دليل”.

قم بإنشاء دليل وقم بتسميته

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

انقر فوق خيار التحميل

لمزيد من التفاصيل ، يمكنك اتباع البرنامج التعليمي الخاص بنا حول كيفية استخدام FTP لتحميل الملفات إلى  ووردبريس .

بعد ذلك ، ستحتاج إلى إدخال الكود التالي في ملف funtions.php الخاص بالسمة. يقوم هذا الرمز بتحميل ملف JavaScript والنص البرمجي jQuery التابع الذي تحتاجه لكي يعمل هذا الرمز بشكل صحيح .

function wpb_bg_color_scripts() {    
wp_enqueue_script( 'wpb-background-tutorial',  get_stylesheet_directory_uri() . '/js/wpb-background-tutorial.js', array( 'jquery-color' ), '1.0.0', true ); 
 } 
add_action( 'wp_enqueue_scripts', 'wpb_bg_color_scripts' ); 

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

يمكنك الآن زيارة موقع الويب الخاص بك لمشاهدة الألوان المتغيرة عشوائيًا أثناء العمل في المنطقة التي استهدفتها.

تغيير لون تأثير الرسوم المتحركة

تغيير لون الخلفية للمنشورات الفردية

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

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

يمكنك حتى تغيير لون الخلفية للمنشورات في فئة معينة. على سبيل المثال ، يمكن أن تحتوي منشورات الأخبار على ألوان خلفية مختلفة مقارنة بالدروس التعليمية.

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

CSS افتراضي لمنشور معين في  ووردبريس

فيما يلي مثال لما سيبدو عليه الأمر:

<article id="post-104" class="post-104 post type-post status-publish format-standard hentry category-uncategorized"> 

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

.post-104 { 
background-color: #D7DEB5;
color:#FFFFFF; 
} 

لإضافة CSS المخصص ، يمكنك استخدام  ووردبريس Theme Customizer. أولاً ، تأكد من تسجيل الدخول إلى موقع  ووردبريس الخاص بك. بعد ذلك ، قم بزيارة منشور المدونة الخاص بك وانقر فوق خيار “تخصيص” في الأعلى.

بعد ذلك ، توجه إلى علامة تبويب CSS الإضافية من القائمة الموجودة على يسارك.

انتقل إلى خيار CSS الإضافي

بعد ذلك ، أدخل CSS المخصص ثم انقر فوق الزر “نشر”.

أدخل CSS مخصصًا للون المنشور الفردي

يمكنك الآن زيارة منشور المدونة الخاص بك لرؤية لون الخلفية الجديد.

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

استخدم مقطع فيديو في الخلفية

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

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

إنه مكون إضافي مجاني يتيح لك تشغيل مقاطع فيديو YouTube في خلفية موقع  ووردبريس الخاص بك. هناك أيضًا إصدار متميز متاح يتيح لك إزالة العلامة المائية mb.YTPlayer ويوفر المزيد من ميزات التخصيص.

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

عند التنشيط ، يمكنك التوجه إلى mb.ideas »YTPlayer من منطقة إدارة  ووردبريس الخاصة بك.

في الشاشة التالية ، ستحتاج إلى إدخال عنوان URL لفيديو YouTube الخاص بك وتنشيط فيديو الخلفية.

أدخل عنوان URL لفيديو YouTube الخاص بك

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

بمجرد إدخال عنوان URL للفيديو وتنشيط الخلفية ، انطلق وقم بزيارة موقع الويب الخاص بك لمشاهدة خلفية الفيديو قيد التشغيل.

معاينة خلفية الفيديو

قم بإنشاء صفحة مقصودة مخصصة

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

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

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

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

بمجرد تنشيط المكون الإضافي ، سيُطلب منك إدخال مفتاح الترخيص الخاص بك. يمكنك العثور على المفتاح في منطقة حساب SeedProd الخاص بك. بعد إدخال المفتاح ، انقر فوق الزر “تحقق من المفتاح”.

مفتاح ترخيص SeedProd

بعد ذلك ، يمكنك التوجه إلى SeedProd »الصفحات والنقر فوق الزر” إضافة صفحة مقصودة جديدة “.

أضف صفحة SeedProd المقصودة الجديدة

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

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

اختر قالبًا لصفحتك

عند تحديد قالب ، سيُطلب منك إدخال اسم الصفحة واختيار عنوان URL.

أدخل اسم الصفحة وعنوان URL للصفحة

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

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

منشئ الصفحة المقصودة SeedProd

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

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

تغيير لون خلفية الصفحة المقصودة

بعد الانتهاء من تحرير صفحتك المقصودة ، لا تنس النقر فوق الزر “حفظ” في الجزء العلوي.

بعد ذلك ، يمكنك التوجه إلى علامة التبويب “اتصال” ودمج الصفحة مع خدمات التسويق عبر البريد الإلكتروني المختلفة . على سبيل المثال ، يمكنك الاتصال بـ Constant Contact و SendinBlue وغيرها.

ربط خدمات التسويق عبر البريد الإلكتروني

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

إعدادات صفحة SeedProd

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

بمجرد الانتهاء ، يمكنك الخروج من مُنشئ الصفحة SeedProd وزيارة صفحتك المقصودة المخصصة.

معاينة الصفحة المقصودة المخصصة

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

خدمات مميزة لآجلك

نأمل أن تساعدك هذه المقالة في تعلم كيفية تغيير نظام ألوان الادمن في الووردبريس. قد ترغب أيضًا في رؤية مختارات حول الإضافات (بلجن) في الووردبريس ودليلنا حول كيفية اختيار أفضل شركات حجز النطاقات والاستضافات وكيفية التعامل معها.

اشترك معنا لمزيد من المعرفة

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