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

إضافة صورة كخلفية لموقع ووردبريس قد تبدو فكرة بسيطة، لكنّها ليست كذلك، خصوصا إن لم يكن القالب الذي تستعمله يدعم هذه الخاصية. ألن يكون من الرائع أن تظهر صورة الخلفية على الشاشة كاملة (full-screen)؟ بالتأكيد سيكون من الجيد التوفر على صور خلفية مختلفة لكل تصنيف (category)، ماذا عن استعمال الصورة البارزة في كل تدوينة (featured image) كصورة خلفية؟

سنتطرّق إلى كل هذه الجوانب في هذا المقال.

قبل أن تبدأ

فكر مليا في الصور المتوافرة لديك

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

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

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

تثبيت الملحقات

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

1. Background Images: يقوم هذا المُحلق من إضافة دعم قالبك لصور الخلفية، كما يعمل على توليد رابط URL المناسب من أجل عرض الصفحة.
2. WPCustom Category Image: يعمل هذا الملحق على إضافة صور بارزة (featured images) للتصنيفات (categories)، لا تحتاج إلى تثبيته ما لم ترغب في تغيير صورة الخلفية لكل تصنيف على حدة.

الآن بما أنك قمت بتثبيت الملحقات لنقم بإضافة بعض الصور الخلفية.

إضافة صورة خلفية عامة

يتم توفير إمكانية إضافة الصور الخلفية من خلال خيار تخصيص الخلفية الخاص بالقالب، لا تدعم كل القوالب هذه الخاصية، هنا يأتي دور ملحق background images لإضافة هذا الدعم، ما يعني أيضا إضافة فئة class custom-background إلى وسم body.

يمكنك إعداد صورة خلفية إما من خلال Appearance < Background (على يسار الصورة أسفله) أو من خلال مخصص القالب theme customizer (على يمين الصورة أسفله).

أيا كانت الطريقة التي اخترت اتباعها عليك باستعمال الإعدادات التالية:

• Position (الموقع): center (الوسط)
• Repeat (التكرار): no repeat (لا تكرار) (لا تبدو الخلفيات جيدة إذا كان هناك تكرار)
• Attachment (الارتباط): fixed (ثابت)
• Background Color (لون الخلفية): أترك الخيار كما هو

إضافة صورة خلفية خاصة بكل تصنيف (Category)

إن كنت تريد استخدام صورة خلفية خاصة بتصنيف معين فستحتاج إلى تثبيت ملحق WPCustom Category Image الذي سيسمح لك بإضافة صورة خاصة لكل تصنيف.

بمجرد قيامك بتثبيت الملحق اذهب إلى Posts  < Categories، اختر التصنيف التي تريد (category) وسترى زر Add Image الذي سيسمح لك باختيار صورة موجودة في Media Library أو رفع صورة جديدة.

إعداد ملحق Background Images

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

من لوحة التّحكم اذهب إلى Appearance  < Background Images للذهاب إلى صفحة الإعدادات الخاصة بالملحق، لنتطرق إلى الخيارات واحدة بواحدة.

تتوفر لك فقط أربع إعدادات للتحكم الكامل في صور الخلفيات:

Display background on home page only (عرض الخلفية في الصفحة الرئيسية فقط)

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

Make images fullscreen (ظهور الصور على الشاشة كاملة)

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

body.custom-background {
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

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

Using featured image on posts (استعمال الصور الخاصة بالمنشورات)

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

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

سيكون هذا الخيار مُعطّلا في حال ما إذا كان القالب الذي تستخدمه لا يدعم الصور الخاصة (featured images).

Use featured image on categories (استعمال الصور الخاصة بالتّصنيفات)

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

سيكون هذا الخيار معطلا إذا لم يكن ملحق WPCustom Category Image مفعلا.

بعض الإعدادات المتقدمة

عندما جرّبت هذا المُحلق مع بعض القوالب، تبيّن لي بأن الجزء الظاهر من الصّورة لم يكن كافيًا لتحقيق الهدف المنشود من الأمر.

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

على سبيل المثال، فيما يلي صفحة بدرجة تعتيم 0.9: تعديل طفيف لكن التّأثير الذي يُحدثه كبير:

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

لإعداد درجة التعتيم عليك باستخدام كود CSS من قبيل:

div.site {
  background-color: rgba(255,255,255,0.90);
}

يمكنك إضافة هذه الشِفرة سواء من خلال استخدام ملحق تخصيص التصميم (مثل Jetpack) أو من خلال إنشاء قالب فرعي (child theme) . لا تقم أبدًا بالتعديل على ملف style.css الأساسي في قالب موقعك.يضمن القيام بتغيير درجة تعتيم الخلفية فقط بقاء الخط والصور بدرجة تعتيم كاملة.

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

أبدع في اختيار خلفيات موقعك

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

ترجمة -بتصرف- للمقال: How To Properly Add Background Images To Your Wordpress Site لصاحبه: Chris Knowles.