كيفية إضافة حد حول صورة في WordPress

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

حدود صور ووردبريس

فيديو تعليمي

اشترك في WPBeginner

إذا لم يعجبك الفيديو أو كنت بحاجة إلى مزيد من الإرشادات ، فاستمر في القراءة.

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

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

صفحة الإعدادات للمكون الإضافي WP Image Borders

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

بدلاً من ذلك ، يمكنك استهداف فئات CSS معينة ليكون لها حدود. سنوضح لك كيفية إضافة فئة CSS إلى صورة معينة لاحقًا في هذه المقالة. الآن يمكنك وضع أي شيء في فئة CSS مثل .border-image.

يسمح لك القسم الثاني في إعدادات البرنامج المساعد بتخصيص إعدادات الحدود. يمكنك اختيار نمط الحدود والعرض ونصف القطر واللون.

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

لا تنس النقر فوق الزر “حفظ التغييرات” لتخزين إعدادات المكون الإضافي.

إذا حددت الخيار الأول “إضافة حدود لجميع الصور في منشورات المدونة” ، فلن تحتاج إلى القيام بأي شيء آخر.

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

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

إضافة فئة CSS إلى صورة في WordPress

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

ما عليك سوى تحميل صورتك وإضافتها إلى منشورك. بعد اضافة الصورة اضغط عليها في المحرر المرئي ثم اضغط على زر التعديل في شريط الادوات.

تحرير صورة في WordPress

سيؤدي ذلك إلى إظهار نافذة منبثقة لتحرير الصور تعرض تفاصيل صورتك. تحتاج إلى النقر فوق “خيارات متقدمة” لتوسيعها ، ثم إدخال فئة css الخاصة بصورتك.

تلميح: هذا .border-imageلأننا اخترنا ذلك في إعدادات البرنامج المساعد لدينا.

إضافة فئة CSS إلى صورة في WordPress

بعد ذلك ، انقر فوق زر التحديث لحفظ إعدادات الصورة وتحديثها. هذا كل شيء ، ستحتوي صورتك الآن على فئة إضافية. نظرًا لأنك تستخدم المكون الإضافي WP Image Borders ، فسيظهر حد على هذه الصورة.

الطريقة الثانية: استخدام HTML & CSS لإضافة حدود الصورة في WordPress

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

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

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

1

<img src=”http://www.example.com/wp-content/uploads/2015/04/bluebird-300×203.jpg” alt=”bluebird” width=”300″ height=”203″ class=”alignnone size-medium wp-image-36″ />

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

1

<img src=”http://www.example.com/wp-content/uploads/2015/04/bluebird-300×203.jpg” alt=”bluebird” width=”300″ height=”203″ class=”alignnone size-medium wp-image-36″ style=”border:3px solid #eeeeee; padding:3px; margin:3px;” />

لا تتردد في تغيير عرض الحدود واللون والحشو والهامش لاحتياجاتك الخاصة.

إضافة حدود الصورة في موضوع WordPress الخاص بك أو موضوع الطفل

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

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

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

img.alignright {

float:right; 

margin:0 0 1em 1em;

border:3px solid #EEEEEE;

}

img.alignleft {

float:left; 

margin:0 1em 1em 0;

border:3px solid #EEEEEE;

}

img.aligncenter {

display: block; 

margin-left: auto; 

margin-right: auto;

border:3px solid #EEEEEE;

}

img.alignnone { 

border:3px solid #EEE; 

}

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

1

2

3

4

5

img.border-image { 

border: 3px solid #eee;

padding:3px; 

margin:3px;

}

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

خدمات مميزة لآجلك

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

اشترك معنا لمزيد من المعرفة

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