كيفية تصميم الصور على موقع WordPress الخاص بك باستخدام CSS

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

ولكن عندما يتعلق الأمر بتعزيز المشاركة (وفي النهاية أرباحك النهائية) ، فإن الأمر لا يتعلق فقط بتضمين الصور على موقعك ، بل يتعلق بالصور التي تقوم بتضمينها وكيفية تقديمها.

في هذا المنشور أريد أن أتناول قطعة واحدة مهمة من هذا اللغز: العرض التقديمي.

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

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

• لماذا الصور مهمة جدا لمواقع الويب
• دورة مكثفة لـ WordPress CSS
• كيفية إضافة CSS مخصص إلى WordPress
• فئات صور CSS الافتراضية لـ WordPress
• تصميم صورة بسيط باستخدام WordPress
• المزيد من الأمثلة على ما يمكنك فعله باستخدام Image CSS في WordPress
• ماذا عن الأنماط الموجودة؟
• السماء هي الحد

لماذا الصور مهمة جدا لمواقع الويب

ما هي أفضل طريقة لشرح مدى فائدة الصور للمدونات من إثباتها بصورة؟

تصبح الأمور أكثر إثارة عندما تصل إلى علم الأحياء حول كيفية معالجتنا للمعلومات. ضع في اعتبارك على سبيل المثال أن 90٪ من المعلومات المرسلة إلى الدماغ هي معلومات مرئية ، وأن 40٪ من الأشخاص يستجيبون بشكل أفضل للمعلومات المرئية التي تكون نصًا عاديًا (المصدر: Zabisco).

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

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

دورة مكثفة لـ WordPress CSS

يدرك مطورو WordPress الأساسيون تمامًا أهمية الصور لمواقع الويب ، وهذا هو السبب في أنهم يوفرون لمطوري السمات (ومديري السمات) قدرًا كبيرًا من القوة والمرونة في تحديد كيفية عرض الصور.

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

يرمز CSS إلى Cascading Style Sheets: لغة ترميز تُستخدم لتحديد شكل صفحات الويب. يتم دمج CSS مع HTML (Hyper Text Markup Language) ، وهي لغة الترميز المستخدمة لتحديد البنية الدلالية لموقع الويب. إذا لم يكن هذا منطقيًا بالنسبة لك ، فلا تقلق - إنها معلومات تكميلية أكثر من اللازم.

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

فيما يلي مثال على مقتطف كود CSS المتعلق بمظهر نوع صورة معين في WordPress:

 .محاذاة اليمين {
	الحدود: 1 بكسل صلب # c5c5c5 ؛
	تعويم: صحيح ؛
	الهامش: 0 0 10px 10px؛
	الحشو: 3 بكسل ؛
}

النص .alignright عبارة عن فئة CSS (يمكن تحديدها كفئة بالنقطة التي تسبق اسمها). في هذه الحالة ، يعد .alignright فئة يعينها WordPress لأي صورة يتم تحديدها داخل الواجهة الخلفية لـ WordPress لتتماشى مع يمين المحتوى:

يمكن تطبيق العديد من الإعلانات (مثل border padding ) على فئة CSS ، والتي يتم تطبيقها في النهاية على أي عنصر HTML تم تعيين الفئة المعنية إليه.

في المثال أعلاه ، أي صورة في WordPress تمت محاذاتها إلى اليمين (عبر محرر النصوص) سيكون لها فئة .alignright المخصصة لها ، وبالتالي سترث التصميم المطبق على تلك الفئة. سوف "تطفو" الصورة إلى اليمين ، وبها هامش صغير لمنع النص من الدخول إليها ، وحدود رمادية حولها ، وحشو صغير لفصل الحد عن حافة الصورة.

كل هذا سيكون أكثر منطقية مع التمثيل المرئي:

هناك الكثير من الإعلانات التي يمكن إضافتها إلى فئة CSS ؛ سنستمتع ببعض المرح معهم قريبًا.

كيفية إضافة CSS مخصص إلى WordPress

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

الطريقة الأنظف والأكثر إثباتًا للمستقبل هي إنشاء "قالب ثانوي" خاص بك في WordPress باستخدام ورقة أنماط CSS الخاصة به. ستتجاوز ورقة أنماط CSS الموجودة في دليل القالب الفرعي أي أنماط مطابقة داخل ورقة أنماط القالب "الأصل".

قد يبدو إنشاء موضوع فرعي بمثابة تمرين شاق إلى حد ما ، ولكنه سهل بما يكفي إذا كنت معتادًا على FTP. إذا كنت تريد المضي قدمًا في هذا الطريق ، فراجع البرنامج التعليمي حول WordPress Codex.

إذا كنت تبحث عن شيء أكثر وضوحًا ، فلدي اقتراحان للمكوِّن الإضافي:

1. وحدة CSS المخصصة داخل Jetpack: مثالية إذا كنت تستخدم Jetpack بالفعل على موقعك.
2. CSS مخصص بسيط: إذا لم تكن تستخدم Jetpack بالفعل (ولست بحاجة إلى وظائفه المتنوعة) ، فهذا خيار أكثر خفة.

أيًا كان الخيار الذي تتخذه ، فإن إضافة CSS مخصصة إلى WordPress ستكون بسيطة مثل تحرير ملف CSS المخصص الذي تم إنشاؤه (بواسطتك أو بواسطة أحد المكونات الإضافية).

فئات صور CSS الافتراضية لـ WordPress

مع كل ذلك بعيدًا ، دعنا ننتقل إلى الأشياء المثيرة: فئات CSS الافتراضية للصور في WordPress.

هناك أربع فئات افتراضية يمكنك استخدامها لتغيير مظهر الصور في WordPress:

• .aligncenter
• .alignleft
• .alignright
• .alignnone

أنا متأكد من أنه يمكنك معرفة أنواع الصور التي يتم تخصيص هذه الفئات لها.

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

لتصميم نوع معين من الصور ، كل ما عليك فعله هو اتباع التنسيق الذي رأيته بالفعل في المثال أعلاه:

 .class-name {
	الملكية: القيمة ؛
	الملكية: القيمة ؛
	الملكية: القيمة ؛
}

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

مع ذلك ، دعنا ننتقل إلى الجزء الممتع: تصميم صورك!

تصميم صورة بسيط باستخدام WordPress

عندما يتعلق الأمر بإضافة تأثيرات أسلوبية بسيطة إلى صورك في WordPress ، فهناك خمس خصائص CSS شائعة:

1. background
2. border
3. float
4. margin
5. padding

للحصول على فهم كامل لكيفية تأثير هذه الخصائص على مظهر الصورة (أو بشكل أكثر دقة ، مظهر "الإطار" الذي توضع فيه الصورة) ، نحتاج إلى التفكير في "نموذج الصندوق" في CSS:

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

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

الآن دعنا نضيف بعض ترميز CSS البسيط:

 .محاذاة اليمين {
	الخلفية: الرمادي ؛
	الحدود: 3 بكسل أسود صلب ؛
	تعويم: صحيح ؛
	الهامش: 10 بكسل ؛
	الحشو: 3 بكسل ؛
}

هذا هو التأثير النهائي:

ربما يمكنك فك ما فعلناه هنا. تم الآن "تعويم" الصورة (أي محاذاة) إلى اليمين ، بحيث يلتف النص حولها. أضفنا القليل من الحشو ، والذي تم إعطاؤه خلفية رمادية. قمنا بتطبيق حد أسود سميك يظهر حول المساحة المتروكة. أخيرًا ، يوفر هامش 10 بكسل مساحة بين الصورة والنص.

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

• background
• border
• float
• margin
• padding

لقد وعدت بحل لتوسيط الصور أيضًا. لأسباب خارجة عن نطاق هذا البرنامج التعليمي ، لا تسمح CSS لك ببساطة باستخدام float: center; (أي القيمة غير موجودة). بدلاً من ذلك ، عليك تحديد الصورة كعنصر كتلة ، وتطبيق margin: 0 auto; وحدد عرض للصورة. يمكنك قراءة المزيد عن هذه التقنية هنا. (سأقدم أيضًا مثالاً على الترميز المستخدم لإنشاء صورة مركزية أدناه.)

المزيد من الأمثلة على ما يمكنك فعله باستخدام Image CSS في WordPress

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

لنبدأ ببعض الحشو وخلفية رمادية لمنح صورنا إطارًا:

 .alignleft {
	الخلفية: #dbdbdb ؛
	تعويم: اليسار؛
	الهامش: 0 10px 5px 0 ؛
	الحشو: 5 بكسل ؛
}

ينتج عن هذا الترميز:

دعنا نستكشف ما حدث هنا:

• لقد استخدمت لونًا سداسيًا بتنسيق HTML للخلفية. تمنحك رموز الألوان هذه عمليا مرونة غير محدودة في اختيار الألوان لموقع الويب الخاص بك.
• نظرًا لأن الصورة التي استخدمتها هي PNG شفافة ، فقد ملأ لون background كل المساحة المتاحة غير المستخدمة داخل ملف الصورة.
• لقد استخدمت أربع قيم ضمن خاصية margin لتعيين هوامش مختلفة لكل جانب من جوانب الصورة.

لنجرب شيئًا آخر. بدلاً من إعطاء صورنا لونًا للخلفية ، دعنا نضعها في حدود بسيطة لتحديدها من المحتوى. ها هي الترميز:

 .محاذاة اليمين {
	الحد: 1 بكسل صلب # 000099 ؛
	تعويم: صحيح ؛
	الهامش: 0 0 10px 10px؛
	الحشو: 3 بكسل ؛
}

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

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

 .aligncenter {
	الحدود: 5px صلب #dbdb ؛
	العرض محجوب؛
	الهامش: 0 تلقائي ؛
	العرض: 300 بكسل ؛
}

والنتيجة النهائية:

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

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

ماذا عن الأنماط الموجودة؟

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

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

السماء هي الحد

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

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

• شبكة مطوري Mozilla: محبوب بين مجتمع مطوري الويب.
• مدارس W3: مكروهة من قبل العديد من مطوري الويب "الجادين" ، ولكن لا يوجد دحض لعمق المعلومات واتساعها. فقط ضع في اعتبارك أنه قد لا يكون دائمًا صحيحًا و / أو محدثًا بنسبة 100٪.
• WordPress Codex: تعرف على المزيد حول كيفية تكامل WordPress و CSS معًا.

إذا كان لديك أي أسئلة ، فلا تتردد في طرحها في قسم التعليقات أدناه!

مصدر الصورة: Simon Pow، PicJumbo.

• CSS
• الصور