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

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

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

في هذا الدليل، سنعرض لك 5 طرق موثوقة لإضافة صور خلفية في ووردبريس تناسب جميع مستويات الخبرة. 🎨

لماذا إضافة صورة خلفية إلى ووردبريس؟

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

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

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

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

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

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

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

• الطريقة 1: إضافة صورة خلفية باستخدام أداة تخصيص قالب ووردبريس الخاص بك
• الطريقة 2: إضافة صورة خلفية مخصصة باستخدام محرر الموقع الكامل
• الطريقة 3: إضافة صورة خلفية باستخدام باني قالب ووردبريس
• الطريقة 4: إضافة صورة خلفية باستخدام CSS Hero
• الطريقة 5: إضافة صور خلفية مخصصة في أي مكان في ووردبريس باستخدام كود CSS
• موارد إضافية: أدلة حول الصور وملفات الوسائط لتحسين تجربة مستخدم ووردبريس

جاهز؟ هيا بنا نبدأ.

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

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

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

في الوقت نفسه، لاستخدام ‘المخصص’، عليك زيارة صفحة المظهر » تخصيص في لوحة تحكم ووردبريس الخاصة بك.

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

لاحظ أن الخيارات التي تراها ستختلف بناء على قالب ووردبريس الذي تستخدمه. في هذا الدرس التعليمي، سنستخدم قالب Sydney.

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

في خيارات تخصيص قالب Sydney، عليك النقر على ‘عام’ في اللوحة الموجودة على اليمين.

بمجرد القيام بذلك، سترى خيارات ‘عامة’ مختلفة لتخصيص قالب Sydney الخاص بك.

في هذه المرحلة، ستحتاج إلى النقر على قسم ‘صورة الخلفية’.

في الشاشة التالية، سترى خيار إضافة صورة الخلفية الخاصة بك.

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

سيؤدي هذا إلى فتح مكتبة وسائط الووردبريس.

هنا، يمكنك تحميل صورة من جهاز الكمبيوتر الخاص بك أو تحديد صورة قمت بتحميلها مسبقًا.

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

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

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

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

بمجرد أن تصبح راضي عن الشكل الذي يظهر عليه، انقر فوق زر ‘نشر’ في الأعلى لحفظ إعداداتك.

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

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

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

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

في هذا الدرس التعليمي، سنستخدم قالب ‘Twenty Twenty-Two’ الافتراضي. لتشغيل محرر الموقع الكامل، ما عليك سوى الانتقال إلى المظهر » المحرر من منطقة إدارة ووردبريس الخاصة بك.

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

ما عليك سوى النقر على علامة ‘+’ في الأعلى وإضافة كتلة ‘الغلاف’.

لإضافة صورة خلفية إلى كتلة ‘الغلاف’، انقر على زر ‘تحميل’ أو ‘مكتبة الوسائط’.

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

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

بعد اختيار الصورة، ما عليك سوى النقر على زر ‘تحديد’.

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

للقيام بذلك، ما عليك سوى النقر على أيقونة ‘عرض القائمة’ في الأعلى (أيقونة بها 3 شرطات). سيؤدي هذا إلى فتح عرض تخطيطي لعناصر القالب، مثل هيدر وفوتر الموقع.

بعد ذلك، ما عليك سوى سحب وإفلات جميع عناصر القالب أسفل كتلة ‘الغلاف’ في عرض القائمة.

بمجرد أن يتم وضعها جميعًا هناك، ستظهر صورة كتلة ‘الغلاف’ كخلفية للموقع.

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

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

عند الانتهاء، لا تنس النقر على زر ‘حفظ’.

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

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

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

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

في هذا الدرس التعليمي، سنستخدم إصدار SeedProd Pro لأنه يتضمن باني القالب. يوجد أيضًا إصدار SeedProd Lite يمكنك تجربته مجانًا.

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

عند التفعيل، سترى شاشة الترحيب SeedProd في لوحة تحكم ووردبريس الخاصة بك.

بعد ذلك، ستحتاج إلى إدخال مفتاح الترخيص الخاص بك والنقر فوق زر ‘Verify Key’ لتفعيل الإصدار الاحترافي من الإضافة. يمكنك العثور على مفتاح الترخيص الخاص بك في منطقة حسابك على SeedProd.

بمجرد الانتهاء من إعداد كل شيء، ستحتاج إلى الانتقال إلى SeedProd » Theme Builder في لوحة تحكم ووردبريس الخاصة بك.

انقر على زر ‘Themes’ الموجود في الأعلى.

ستوفر SeedProd الأن العديد من تمبلتات التصميم للاختيار من بينها.

يمكنك تمرير مؤشر الماوس فوق أي تمبلت ترغب في استخدامه والنقر عليه. في هذا الدرس التعليمي، سنستخدم تمبلت ‘Starter’.

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

لإضافة صورة خلفية تظهر على الموقع الإلكتروني بأكمله وعلى جميع تمبلتات القالب، انقر فوق خيار ‘Edit Design’ ضمن Global CSS.

في الشاشة التالية، سترى إعدادات CSS العامة التي يمكنك تغييرها.

ما عليك سوى النقر على خيار ‘Background’ لبدء التخصيص.

بعد ذلك، ستظهر لك خيارات ‘صورة الخلفية’.

انقر على ‘Use Your Own Image’ لتحميل صورتك. بدلاً من ذلك، يمكنك النقر فوق زر ‘Use a Stock Image’ للبحث عن صورة مخزنة لاستخدامها كخلفية لموقعك الإلكتروني.

بعد إضافة صورة خلفية، ستعرض لك منشئ SeedProd معاينة مباشرة.

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

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

بمجرد الانتهاء من تعديل صورة الخلفية، ما عليك سوى النقر فوق زر ‘Save’ في الأعلى وإغلاق إعدادات Global CSS.

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

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

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

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

بمجرد الانتهاء من ذلك، يمكنك البدء في تخصيص موقعك الإلكتروني.

أول شيء عليك فعله هو فتح صفحتك الرئيسية في متصفحك. ستجد هناك رابط ‘Customize with CSS Hero’ في شريط المسؤول الخاص بك.

ما عليك سوى النقر على الرابط، وستظهر لك خيارات CSS Hero.

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

انقر على ‘Background’ للاطلاع على إعدادات إضافة صورة.

ومن هناك، انقر ببساطة على ‘Image’.

بعد ذلك، يمكنك اختيار صورة من موقع Unsplash أو تحميل صورتك الخاصة لإنشاء الخلفية.

عند النقر على الصورة التي تريدها، سيظهر لك زر ‘Set Image’.

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

وأخيرًا، يمكنك النقر على ‘Save and Publish’ في الأسفل لحفظ صورة الخلفية لموقعك.

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

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

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

<body class="archive category category-event category-5">

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

يمكنك استخدام CSS class إما category-event أو category-5 لتنسيق صفحة هذه التصنيف بشكل مختلف.

على سبيل المثال، لنضف صورة خلفية مخصصة لصفحة أرشيف التصنيفات.

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

لهذا السبب نوصي دائمًا باستخدام WPCode بدلاً من ذلك. إنها أفضل إضافة لإضافة مقتطفات كود مخصص دون عناء كبير.

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

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

📝 ملاحظة: يمكنك استخدام الإصدار المجاني من WPCode لإضافة مقتطفات CSS مخصصة. ومع ذلك، فإن الترقية إلى WPCode Pro تتيح لك الوصول إلى سجل المراجعة الكامل لجميع مقتطفاتك البرمجية، وإضافة وحدات تتبع وسائل التواصل الاجتماعي، وجدولة الكود الخاص بك، والمزيد!

بعد التفعيل، ما عليك سوى الانتقال إلى Code Snippets » + Add New من منطقة إدارة ووردبريس الخاصة بك.

في الشاشة التالية، ستحتاج إلى تحريك مؤشر الماوس فوق خيار ‘Add Your Custom Code (New Snippet)’ والنقر فوق زر ‘Use snippet’ عندما يظهر.

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

بعد ذلك، يمكنك كتابة أو لصق CSS المخصص التالي في مربع ‘Code Preview’.

body.category-tv {
background-image: url("http://example.com/wp-content/uploads/2025/01/your-background-image.jpg");
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}

لا تنس استبدال رابط صورة الخلفية وتصنيف الـ class بالروابط الموجودة على موقعك الخاص.

إليك كيف قد يبدو الأمر في محرر WPCode:

بعد ذلك، ستحتاج إلى تحديد ‘Code Type’ عن طريق تحديد ‘CSS Snippet’ من القائمة المنسدلة.

بمجرد أن يبدو كل شيء جيدًا، يمكنك تبديل المفتاح لتفعيل مقتطف الكود والنقر فوق ‘Save Snippet’.

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

يحتوي ووردبريس على CSS class تحتوي على معرف المنشور أو الصفحة في وسم article. يمكنك استخدام نفس كود CSS واستبدال .category-news بـ CSS class الخاص بالمنشور.

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

موارد إضافية: أدلة حول الصور وملفات الوسائط لتحسين تجربة مستخدم ووردبريس

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

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

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