إضافة الحدود للصور في ووردبريس

إضافة الحدود للصور في ووردبريس

هل تريد إضافة  إطار أو حد ( border ) حول صورك في ووردبريس؟ ربما شاهدتها في بعض المواقع داخل المقالات أو الصفحات، وتمنيت لو تتلعم كيفية فعل ذلك !  عندنا الحل السريع والسهل . هنا ستتعلم كيفية إضافة الحدود للصور في ووردبريس بأشكالها وألوانها.

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

إقرأ ايضاً:

• إنشاء قوائم نقطية ومرقمة بألوان مختلفة في الووردبريس
• إنشاء خط فاصل أفقي hr

سأبدأ أولا باستخدام أيقونة الصور من محرر النصوص في ووردبريس ، ثم إضافة ووردبريس وبعدها استخدام  CSS و HTML:

الفهرس:

• استخدام أيقونة الصور  لإضافة إطار إلى الصور 
• إستخدام مكون إضافي لإضافة الحدود إلى الصور 
• إضافة الحدود إلى الصور من خلال CSS و HTML

استخدام أيقونة الصور  لإضافة إطار إلى الصور 

تحرير الصور في ووردبريس

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

إضافة الحدود للصور في ووردبريس

1. 1.  ⇐ عندما ننقر على الصورة تظهر المقابض على شكل مربعات صغيرة بأربع أركان الصورة (1) .

1. ⇐ بعد اختيار الصورة ننقر على أيقونة  الصورة من محرر النصوص لتحرير الصورة والتعديل عليها (2) 
2. هناك طريقة أخرى للدخول لتحرير الصورة: أنقر على الصورة بيمين الماوس ثم اختر أيقونة الصورة  كما هو مبين في لقطة الشاشة أدناه : 

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

راجع الشرح أدناه :

إضافة الحدود للصور في ووردبريس

∴ شرح ما جاء في لقطة الشاشة: ⇑

1. الرقم واحد يشير إلى اختيار قسم متقدم 
2. رقم إثنان يشير إلى اختيار عرض الحد أو الاطار الذي ستضيفه للصورة وهنا كتبت 5.
3. يشير إلى اختيار نوع الحد، وهنا قمتُ باختيار الحد المزدوج (double ) ..
4. عندما تقوم بهذه الاختيارت فإن أكواد CSS تكتب مباشرة في الخانة رقم 4
5. افتراضياً سيظهر الاطار باللون الرمادي المغلوق . وأنا أضفت كود CSS لتغيير اللون إلى الأحمر  color:red ويمكنك أن تضيف أي لون أمام كلمة color وسيتم تطبيقها .

النتيجة التي اشتغلنا عليها كانت ممتازة وسهلة في الممارسة :

إضافة الحدود للصور في ووردبريس

استخدام المكون الإضافي لإضافة الحدود إلى  الصور  في وردبريس

للأسف لا يوجد تحديث ! وبالتالي لم تعد المكونات الاضافية لووردبريس الخاصة بإضافة حدود للصور تستجيب لطلبات المستخدمين . منها من لم تعد موجودة في مستودع ووردبريس للإضافات ومنها من تخلفت عن التحديث منذ عدة إصدارات كالتي سأدرج روابطها أدناه.. ربما كان السبب هو عدم الاقبال عليها بعدما أصبح محرر نصوص ووردبريس يوفر هذه الخاصية  أو أن مطوريها أهملوا مسايرة تحديثات ووردبريس. لقد كانت الاضافتين الشهيرتين : « Border Image Plugin  »  و « WP Image Borders » تساعدان المبتدئين  الذين لا يرغبون في تعلم HTML أو CSS.. لكنهما أصبحتا متجاوزتين في ظل التحديثات المتوالية لووردبريس .

لذلك، أنصحك أن تتعلم إنشاء موقعك بنفسك وتتعلم التعديل وإصلاح الأعطاب بنفسك .

بمعنى: « لا تعطيني سمكة كل يوم ولكن علمني كيف أصطاد »

استخدام HTML و CSS لإضافة حدود الصورة في ووردبريس

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

إضافة حدود باستخدام الأنماط المضمنة في WordPress

بعد تحميل وإدراج صورتك في مقال ووردبريس ، قم بالتبديل إلى محرر النصوص. وسترى كود HTML لصورتك. سيبدو الرمز مثل هذا:

هذه هي الصورة التي أدرجت شفيرتها البرمجية فوق

يمكنك بسهولة إضافة نمط CSS في كود HTML مثل هذا:

الآن أصبحت الصورة محاطة بحدود بعد إضافة  علامة border 

لا تتردد في تغيير عرض الحدود واللون والحشو والهامش لتناسب احتياجاتك.

أضف حدود صورة في قالب ووردبريس لموقعك  أو القالب الإبن

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

≡ راجع هذه الفقرة : طريقة تخصيص ووردبريس لتعديل CSS

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

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

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

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

• كيفية إضافة الصور إلى مقالات ووردبريس .
• الحدود الدائرية في مقالات ووردبريس
• كيفية تعديل CSS في ووردبريس

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

قناتي على اليوتوب

أرى أن هذه المواضيع قد تهمك:

خاصية Padding في CSS الحدود الدائرية border-radius في CSS تنسيق النصوص ب CSS إضافة اللَّون في CSS إنشاء قوائم نقطية ومرقمة بألوان مختلفة في الووردبريس قائمة مقالات حول الووردبريس، الإضافات والقوالب