المقدمـة: إضافة صورة كخلفية في مقالة ووردبريس
هل حاولت يوماً أن تضيف صورة خلفية لنصٍّ أو فقرة داخل مقالة ووردبريس ولم تنجح؟
هل أعجبتك الفكرة لكنك لم تتمكن من تطبيقها؟
في هذه المقالة سوف تتعلم كيف تضيف خلفية صورة لنص أو جزء منه داخل مقالة بموقع ووردبريس!
إذن نبدأ على بركة الله:
- دعوني أحكي لكم فوق هذه الخلفية الجميلة عن ما كتبت في مقالة « ما هي لوحة تحكم إدارة ووردبريس؟ » لقد ذكرت فيها أنك عندما تنصب موقع ووردبريس ستقضي معظم وقتك داخل إدارة الموقع. وهذا بالفعل ينطبق عليَّ بالحرف. فإنني أقضي جزءاً كبيراً من وقتي أعمل وأكتشف هذه المساحة المتطورة التي تترجم نشاط الموقع أو خموله! فكما هو الحال بالنسبة لتلوين القوائم النقطية أو المرقمة و كذلك إنشاء خط فاصل أفقي hr بالألوان ، طبعاً الفكرة موجودة ويمكن تطبيقها في HTML و CSS ، لكن تطبيقها في مقالات ووردبريس بشكل منفصل، سيكلفك إطلاق العنان للتفكير في ملاءمة تلك الأكواد مع مقالات ووردبريس. وذلك بإدماج وسوم CSS في HTML عبر الوسـم « style » وهذا ما سوف نستخدمه في كود إضافة خلفية صورة إلى نص داخل مقالة ووردبريس.
إضافة صورة كخلفية في مقالة ووردبريس
– إقرأ أيضاً: إضافة الخلفية في CSS
إضافة صورة كخلفية في مقالة ووردبريس
لإضافة صورة لخلفية في مقالة ووردبريس نقوم بما يلي:
من لوحة تحكم إدارة موقع ووردبريس، مرر الماوس على القائمة « مقالات » ومن القائمة المنسدلة أنقر على « أضف جديداً » للدخول إلى محرر النصوص.
في أعلى يسار محرر النصوص، تجد تبويبين كما في الصورة :
إضافة صورة كخلفية في مقالة ووردبريس
التبويب رقم 1 « مرئي » والتبويب رقم 2 « نص » . ونحن هنا سنشتغل على التبويب نص لإدراج شفيرة CSS خلفية الصورة و إدماجها مع أكواد HTML.
كيف ذلك؟
أنسخ هذا الكود وألصقه في المكان المناسب لك داخل المقالة في التبويب نص مع تغيير العبارة “هنا رابط الصورة ” برابط الصورة التي اخترتها كخلفية لنصك.
|
1 |
<div style="background-image:url(هنارابط الصورة);"> |
ملاحظة : رابط الصورة يمكن أن يبدأ ب http:// أو مسار الصورة على موقعك ..
بعد نسخ الكود بالشكل الصحيح تعود إلى التبيوب مرئي لتجد أنه أصبح متاحاً لك الكتابة فوق الصورة والنتيجة ستكون كما رأيت في المثال الأول حيث كتبت النص فوق خلفية بصورة.
ويمكنك التحكم في طول وعرض الحقل الذي ستكتب فيه بخلفية صورة، إما بإدراج النسبة المئوية للأبعاد ، أو إستخدم البيكسل (px) إذا كنت تريد التحكم في الكتابة على أبعاد الصورة بالضبط .
لتحديد أبعاد حقل الكتابة بخلفية الصورة قم بنسخ ولصق هذا الكود مع تغيير الأبعاد حسب ما يناسبك:
|
1 |
<div style="background-image:url(هنارابط الصورة); width: 100%; height: 100%;"> |
هنا : width: 100%; height: 100% يمكنك تغيير العرض مثلاً إلى width: 70% والارتفاع إلى height: 60%.
أو تغيير العرض مثلاً إلى width: 300px والارتفاع إلى height: 150px حسب أبعاد الصورة التي تريدها خلفية لكتابتك.
وهذه هي النتيجة:
على خلفية الصورة
في مقالة ووردبريس بموقع: Jabism.com
هذا تطبيقٌ للدَّرس
إضافة صورة كخلفية في مقالة ووردبريس
الخلاصة:
هناك أشياء جميلة يمكنك القيام بها بلغتي HTML و CSS في التبويب « نص » بمحرر النصوص بموقع ووردبريس .. فقط يجب أن يكون الوقت صديقك دائماً، وهذا ما أفتقده دائماً .
– إقرأ أيضاً: قائمة دروس HTML و CSS
فــي أمــان الله
إذا أعجبك هذا المحتوى، فلا تَقْرَأْ وتَرْحَل … تَـعْلِيقَـاتُكَ تَـشْجِيعٌ لَـنَـا لِنَسْتَمِرَّ فِــي الْبَحْثِ وَالْعَطَـاء. وإِذَا كنت تعتقد أنه قد يكون مفيداً لأشخاص آخرين، فشَارِكْهَ على الشبكات الاجتماعية.
قناتي على اليوتوب
أرى أن هذه المواضيع قد تهمك: