كيفية إضافة صورة خلفية في ووردبريس

هل تريد إضافة صورة خلفية إلى موقع ووردبريس الخاص بك؟

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

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

كيفية إضافة صورة خلفية في ووردبريس

فيديو تعليمي

اشترك في WPBeginner

إذا كنت تفضل التعليمات المكتوبة ، فيرجى متابعة القراءة.

الطريقة الأولى: إضافة صورة خلفية باستخدام إعدادات سمة ووردبريس الخاصة بك

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

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

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

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

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

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

حدد صورة الخلفية

انقر على زر تحديد الصورة للمتابعة.

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

تحميل صورة الخلفية

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

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

إعدادات صورة الخلفية

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

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

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

انطلق وقم بزيارة موقع الويب الخاص بك لرؤيته أثناء العمل.

الطريقة الثانية: إضافة صورة خلفية مخصصة في ووردبريس باستخدام البرنامج المساعد

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

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

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

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

عند التنشيط ، تحتاج إلى زيارة Appearance »Full Screen BG Image لتكوين إعدادات البرنامج المساعد.

خلفية ملء الشاشة

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

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

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

إضافة صورة خلفية جديدة

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

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

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

يسمح لك Full Screen Background Pro بتعيين الصور كخلفية عالمية ، أو يمكنك الاختيار من بين أقسام مختلفة من موقع الويب الخاص بك مثل الفئات أو المحفوظات أو الصفحة الأمامية أو صفحة المدونة.

لا تنس النقر على زر حفظ الصورة لحفظ صورة الخلفية الخاصة بك.

يمكنك إضافة العديد من الصور كما تريد من خلال زيارة المظهر » صفحة صورة BG ملء الشاشة .

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

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

تتلاشى الخلفية وتتلاشى الإعدادات

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

لا تنس النقر فوق زر حفظ الإعدادات لتخزين تغييراتك.

صور الخلفية للمنشورات والصفحات والفئات

يتيح لك Full Screen Background Pro أيضًا تعيين صور الخلفية للمنشورات الفردية والصفحات والفئات والعلامات والمزيد.

فقط قم بتحرير المنشور / الصفحة حيث تريد عرض صورة خلفية مختلفة. في شاشة تحرير المنشور ، ستلاحظ مربع “صورة خلفية ملء الشاشة” الجديد أسفل محرر النشر.

إضافة صورة خلفية لمنشور أو صفحة واحدة

لاستخدام صورة خلفية لفئة معينة ، تحتاج إلى زيارة المظهر » صفحة صورة BG ملء الشاشة ثم النقر فوق الزر” إضافة صورة جديدة “.

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

تعيين صورة الخلفية لفئة معينة

أدخل الآن معرف الفئة المحددة أو سبيكة معينة حيث تريد عرض الصورة. انظر دليلنا حول كيفية العثور على معرف الفئة في ووردبريس .

لا تنس حفظ صورتك لتخزين الإعدادات الخاصة بك.

الطريقة الثالثة: أضف صور الخلفية باستخدام CSS Hero

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

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

افتح الآن صفحتك الرئيسية في متصفحك. سترى رابط “التخصيص باستخدام CS SHero” في شريط الإدارة .

صورة الخلفية مع CSS Hero

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

في لقطة الشاشة أدناه ، سترى .header-filter-gradientالمنطقة. عند النقر فوق هذه المنطقة ، يمكنك بعد ذلك اختيار رابط الخلفية في الشريط الجانبي الأيسر.

مُحدِّد صورة الخلفية في ووردبريس

سيتم فتح رابط الخلفية. من هناك ، يمكنك النقر فوق “صورة”. الآن ، يمكنك اختيار صورة من Unsplash أو من التحميلات الخاصة بك لإنشاء الخلفية الخاصة بك.

أضف الصورة إلى الخلفية باستخدام CSS Her

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

اضغط على “حفظ ونشر” في الجزء السفلي ، وسيتم الآن حفظ صورة الخلفية لموقعك.

خلفية مخصصة لصورة ووردبريس

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

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

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

1

<body class=”archive category category-tv category-4″>

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

استخدم أداة الفحص لرؤية الفئات المضافة بواسطة ووردبريس

يمكنك استخدام فئة CSS category-tvأو category-4فئة CSS لتصميم صفحة الفئة هذه فقط بشكل مختلف.

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

1

2

3

4

5

6

7

body.category-tv {

background-image: url(“http://example.com/wp-content/uploads/2017/03/your-background-image.jpg”);

background-position: center center;

background-size: cover;

background-repeat: no-repeat;

background-attachment: fixed;

}

لا تنسَ استبدال عنوان URL لصورة الخلفية وفئة الفئة بفئتك الخاصة.

يمكنك أيضًا إضافة خلفيات مخصصة إلى المنشورات والصفحات الفردية. يضيف ووردبريس فئة CSS مع المنشور أو معرف الصفحة في علامة النص الأساسي. يمكنك استخدام نفس كود CSS فقط استبدل .category-tv بفئة CSS الخاصة بالمنشور.

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

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

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

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

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