آیا می خواهید حاشیه ای برای تصاویر خود در وردپرس اضافه کنید؟ اخیراً ، یکی از کاربران ما راهی آسان برای افزودن حاشیه به دور تصویر در وردپرس از ما خواسته است. در حالی که می توانید از CSS استفاده کنید ، برای مبتدیان گیج کننده است. در این مقاله ، ما یک روش آسان برای اضافه کردن حاشیه تصویر در وردپرس بدون ویرایش هیچ کد HTML یا CSS به شما نشان خواهیم داد.
آموزش فیلم h4>
اگر فیلم را دوست ندارید یا به دستورالعمل های بیشتری احتیاج دارید ، به خواندن ادامه دهید.
روش 1: استفاده از یک افزونه برای افزودن حاشیه تصویر در وردپرس h4>
این روش برای مبتدیانی است که مایل به ویرایش هیچ HTML یا CSS نیستند. اولین کاری که باید انجام دهید نصب و فعال سازی پلاگین WP Image Borders . پس از فعال سازی ، برای پیکربندی تنظیمات افزونه باید از Settings »WP Image Borders بازدید کنید.
اولین بخش در تنظیمات افزونه به شما امکان می دهد تصاویر را هدف قرار دهید. با علامت زدن در کادر کنار گزینه borders افزودن حاشیه به همه تصاویر در پست های وبلاگ ’ می توانید حاشیه ها را به تمام تصاویر موجود در پست های وردپرسی خود اضافه کنید.
همچنین می توانید کلاسهای CSS خاص را هدف قرار دهید تا حاشیه داشته باشند. ما بعداً در این مقاله به شما نحوه افزودن کلاس CSS به یک تصویر خاص را نشان خواهیم داد. در حال حاضر می توانید هر چیزی را در کلاس CSS مانند .border-image قرار دهید.
بخش دوم در تنظیمات افزونه به شما امکان می دهد تنظیمات مرز را سفارشی کنید. می توانید سبک حاشیه ، عرض ، شعاع و رنگ را انتخاب کنید.
آخرین بخش در صفحه تنظیمات به شما امکان می دهد سایه های قطره ای را به تصاویر خود اضافه کنید. شما می توانید یک فاصله افقی و عمودی ، تاری و شعاع گسترش ، و همچنین رنگ سایه جعبه را وارد کنید. اگر نمی خواهید سایه ها را به تصاویر خود اضافه کنید ، می توانید این قسمت ها را خالی بگذارید.
برای ذخیره تنظیمات افزونه فراموش نکنید که روی دکمه ذخیره تغییرات کلیک کنید.
اگر گزینه اول borders اضافه کردن حاشیه به همه تصاویر موجود در پست های وبلاگ را انتخاب کرده اید ، دیگر نیازی به انجام کار دیگری نیست.
شما باید حاشیه های تصویر را در تمام تصاویر ارسال وبلاگ خود مشاهده کنید.
اما اگر گزینه دوم را انتخاب کرده اید تا فقط حاشیه تصاویر خاص را نشان دهد ، باید مرحله بعدی را دنبال کنید.
افزودن کلاس CSS به یک تصویر در وردپرس h4>
اگر فقط می خواهید حاشیه اطراف تصاویر انتخاب شده اضافه کنید ، باید به وردپرس بگویید کدام تصاویر باید حاشیه داشته باشند. این کار را می توانید با افزودن کلاس CSS به تصاویر نیاز به حاشیه انجام دهید.
به سادگی تصویر خود را بارگذاری کرده و به پست خود اضافه کنید. پس از افزودن تصویر ، روی آن در ویرایشگر ویژوال کلیک کنید و سپس روی دکمه ویرایش در نوار ابزار کلیک کنید.
با این کار پنجره ویرایش تصویر نمایش داده می شود که جزئیات تصویر شما را نشان می دهد. برای گسترش آن باید روی Advanced Options کلیک کنید و سپس کلاس css تصویر خود را وارد کنید.
نکته: این .border-image است زیرا ما آن را در تنظیمات افزونه خود انتخاب کرده ایم.
بعد ، برای ذخیره و به روزرسانی تنظیمات تصویر ، روی دکمه بروزرسانی کلیک کنید. این همه ، تصویر شما اکنون یک کلاس اضافی خواهد داشت. از آنجا که شما از پلاگین WP Image Borders استفاده می کنید ، یک حاشیه در این تصویر نشان داده می شود.
روش 2: استفاده از HTML و CSS برای افزودن حاشیه های تصویر در وردپرس h4>
افزودن حاشیه های تصویر با استفاده از CSS / HTML راهی سریعتر و سریعتر برای بدست آوردن حاشیه در اطراف تصاویر خود در وردپرس است. روش های مختلفی برای انجام این کار وجود دارد که ما همه آنها را به شما نشان خواهیم داد. شما می توانید هر آنچه که برای شما بهتر باشد انتخاب کنید.
افزودن حاشیه ها با استفاده از سبک های درون خطی در وردپرس h4>
بعد از بارگذاری و قرار دادن تصویر خود در یک پست وردپرس ، به ویرایشگر متن . کد HTML را برای تصویر خود مشاهده خواهید کرد. چیزی شبیه به این خواهد بود:
به راحتی می توانید سبک CSS را در کد HTML مانند این اضافه کنید:
در صورت تمایل عرض و رنگ حاشیه و حاشیه را به نیازهای خود تغییر دهید.
افزودن حاشیه تصویر در قالب وردپرس یا طرح زمینه کودک h4>
اگر می خواهید برای همه تصاویر موجود در پست ها و صفحات وبلاگ وردپرس خود مرز اضافه کنید ، می توانید CSS را مستقیماً در قالب WordPress یا تم کودک .
اکثر تم های وردپرس از قبل این قوانین سبک را در صفحه سبک قالب که معمولاً فایل style.css است ، تعریف کرده اند. شما می توانید CSS موجود را اصلاح کنید ، یا می توانید CSS خود را در یک طرح زمینه کودک اضافه کنید.
وردپرس کلاسهای تصویری پیش فرض را به همه تصاویر اضافه می کند. برای اینکه مطمئن شوید تصاویر موجود در پست ها / صفحات شما حاشیه تصویر دارند ، باید همه این کلاس ها را هدف قرار دهید. در اینجا یک قطعه ساده CSS برای شروع وجود دارد:
img.alignright {
شناور: درست؛
حاشیه: 0 0 1em 1em؛
حاشیه: 3px solid #EEEEEE؛
}
img.alignleft {
شناور به سمت چپ؛
حاشیه: 0 1em 1em 0؛
حاشیه: 3px solid #EEEEEE؛
}
img.aligncenter {
نمایش: بلوک؛
حاشیه چپ: خودکار؛
margin-right: خودکار؛
حاشیه: 3px solid #EEEEEE؛
}
img.alignnone {
حاشیه: 3 پیکسل جامد #EEE؛
}
اگر می خواهید فقط هنگام نیاز به حاشیه های تصویر استفاده کنید ، می توانید کلاس CSS را به تصاویر خود اضافه کنید (به بالا مراجعه کنید). قوانین مربوط به سبک این کلاس CSS را در طرح زمینه یا طرح زمینه کودک خود اضافه کنید.
img.border-image {
حاشیه: 3px solid #eee؛
بالشتک: 3px؛
حاشیه: 3px؛
}
امیدواریم این مقاله به شما کمک کند حاشیه تصویر را در اطراف تصاویر وبلاگ وردپرس خود اضافه کنید. همچنین ممکن است بخواهید راهنمای ما را در نحوه ذخیره تصاویر بهینه شده برای وب برای سرعت بخشیدن به سایت وردپرس شما.
اگر این مقاله را دوست داشتید ، لطفاً در کانال YouTube مشترک شوید برای آموزش های ویدئویی وردپرس. همچنین می توانید ما را در Twitter و فیس بوک .
منبع:
https://www.wpbeginner.com/beginners-guide/how-to-add-a-border-around-an-image-in-wordpress/.