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

أخر تحديث لهذه المقالة في: 03 مايو 2020 الساعة: 01:09 ص

المقدمـة:

هل حاولت يوماً أن تضيف صورة خلفية لنصٍّ أو فقرة  داخل مقالة  ووردبريس ولم تنجح؟

هل أعجبتك الفكرة لكنك لم تتمكن من تطبيقها؟

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

إذن نبدأ على بركة الله:

 

  • دعوني أحكي لكم  فوق هذه الخلفية الجميلة عن ما كتبت في  مقالة  « ما هي لوحة تحكم إدارة ووردبريس؟ » لقد ذكرت فيها أنك عندما تنصب موقع ووردبريس ستقضي معظم وقتك داخل إدارة الموقع. وهذا بالفعل ينطبق عليَّ بالحرف. فإنني أقضي جزءاً كبيراً من وقتي أعمل وأكتشف هذه المساحة المتطورة التي تترجم نشاط الموقع أو خموله! فكما هو الحال بالنسبة لتلوين القوائم النقطية أو المرقمة  و كذلك إنشاء خط فاصل أفقي hr بالألوان ، طبعاً الفكرة موجودة ويمكن تطبيقها في HTML و CSS ، لكن تطبيقها  في مقالات ووردبريس بشكل منفصل، سيكلفك إطلاق العنان للتفكير في ملاءمة تلك الأكواد مع مقالات ووردبريس. وذلك بإدماج وسوم CSS في HTML  عبر الوسـم « style » وهذا ما سوف نستخدمه في  كود إضافة خلفية صورة إلى نص داخل مقالة ووردبريس.

 

–  إقرأ أيضاً: إضافة الخلفية في CSS

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


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

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

في أعلى يسار محرر النصوص، تجد تبويبين كما في الصورة :

التبويب رقم 1 « مرئي »  والتبويب رقم 2 « نص » . ونحن هنا سنشتغل على التبويب نص لإدراج شفيرة CSS خلفية الصورة و إدماجها مع أكواد HTML. 

كيف ذلك؟ 

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

 

ملاحظة : رابط الصورة يمكن أن يبدأ ب http://  أو مسار الصورة على موقعك .. 

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

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

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

هنا :      width: 100%; height: 100%    يمكنك تغيير العرض مثلاً إلى   width: 70%  والارتفاع إلى  height: 60%.

أو تغيير العرض مثلاً إلى   width: 300px  والارتفاع إلى  height: 150px  حسب أبعاد الصورة التي تريدها خلفية لكتابتك.

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

 على  خلفية الصورة

في مقالة ووردبريس بموقع: Jabism.com

                       هذا تطبيقٌ للدَّرس

 

هناك أشياء جميلة يمكنك القيام بها بلغتي HTML و CSS  في التبويب « نص »  بمحرر النصوص بموقع ووردبريس .. فقط  يجب أن يكون الوقت صديقك دائماً، وهذا ما أفتقده دائماً .

 – إقرأ أيضاً:  قائمة دروس HTML و CSS

فــي أمــان الله

لا ترحــل:
إذا أعجبك المقال، فلا تَقْرَأْ وتَرْحَل … تَـعْلِيقَـاتُكَ تَـشْجِيعٌ لَـنَـا لِنَسْتَمِرَّ فِــي الْبَحْثِ وَالْعَطَـاء. وإِذَا أعْجَبَتْكَ الْمَقَالَة، شَارِكْهَا مَعَ أصْدِقَائِكَ عَبْرَ مَوَاقِع التَّوَاصُل

اترك تعليقا

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *

    مؤسس موقع :
        عبدالرحيم ح.س من شمال المغرب . تقني "الهندسة المدنية" ، مارست البرمجة منذ 2001، خبرتي مع الويب والإعلاميات : تمتد من سنة 2000 ، سائر باستمرار في تحديث معلوماتي والاطلاع على كل جديد.
كتب 255 مقالة في jabism.com.

عدد المشاهدات لهذه المقالة : 67
انتقل إلى أعلى