جت اسپیناس
جت اسپیناس ، طراحی سایت های خاص و جذاب
طراحی سایت , طراحی وب سایت

نحوه اضافه کردن حاشیه تصویر در وردپرس

طراحی سایت

 

آیا می خواهید با نحوه اضافه کردن حاشه تصویر در وردپرس آشنا شوید؟ یا یک مرز در اطراف تصاویر خود در طراحی سایت وردپرس اضافه کنید؟ اخیرا یکی از کاربران ما یک راه آسان برای اضافه کردن کادر در حاشیه تصویر در وردپرس خواسته است. قبل از شروع مقاله بهتر است بدانید می توانید از کدهای CSS نیز برای انجام این کار استفاده کنید. اگر چه برای مبتدیان کمی گیج کننده است. در ادامه به معرفی روش های نحوه اضافه کردن حاشیه تصویر در وردپرس می پردازیم.

استفاده از پلاگین برای اضافه کردن مرز تصویر در وردپرس

استفاده از پلاگین برای اضافه کردن مرز تصویر در وردپرس ویژه مبتدیانی است که تمایلی به ویرایش کدهای HTML یا CSS ندارند. اولین کاری که باید انجام دهید این است که پلاگین WP Image Borders را نصب و فعال کنید. پس از فعال سازی، شما باید از منوی تنظیمات یا settings گزینه WP Image Borders را انتخاب کنید تا بتوانید تنظیمات پیکربندی پلاگین را انجام دهید.

بخش اول تنظیمات پلاگین به شما اجازه می دهد تا تصاویر را هدف قرار دهید. شما می توانید کادر را به تمام تصاویر پست های درون سایت با زدن علامت داخل مربع کنار گزینه “اضافه کردن مرز به همه تصاویر در پست های وبسایت” اضافه کنید.

شما به طور مرتب و متناوب می توانید کلاس های خاص CSS را به بردرها یا همان مرزها اختصاص دهید. در حال حاضر می توانید هر چیزی مانند border-image را در کلاس CSS قرار دهید.

بخش دوم تنظیمات پلاگین به شما اجازه ویژه شدن یا زیباترشدن کادر را می دهد. به عنوان مثال می توانید یک سبک مرزی، عرض، شعاع و رنگ خاصی را کادر مربوطه انتخاب کنید.

همچنین آخرین بخش در صفحه تنظیمات اجازه می دهد سایه هایی را به تصاویر خود اضافه کنید. البته برای این سایه ها تنظیمات دیگری مانند فاصله افقی و عمودی، شعاع تاری، رنگ سایه جعبه و … را وارد کنید. اگر تمایلی به اضافه کردن سایه ها به تصاویر ندارید، می توانید این فیلدها را خالی بگذارید.

فراموش نکنید که بعد از انجام اقدامات فوق  روی دکمه  Save Changes یا ذخیره تغیرات کلیک کنید تا تنظیمات پلاگین ذخیره شوند. اکنون شما باید مرزهای مربوطه را در تمام تصاویر پست های وبسایت خود ببینید.

اما اگر گزینه دوم را برای کادربندی تصاویر خاص انتخاب کنید، باید قدم بعدی را نیز دنبال کنید.

طراحی سایت

 

اضافه کردن کلاس CSS به یک تصویر در وردپرس

اگر فقط بخواهید مرزها را در اطراف تصاویر انتخاب شده اضافه کنید، باید به وردپرس بگویید چه تصاویری باید مرز داشته باشند. شما می توانید با افزودن یک کلاس CSS به تصاویر مربوطه آن ها را حاشیه دار نمایید.

اکنون به سادگی تصویر خود را آپلود و آن را به پست خود اضافه کنید. پس از اضافه کردن تصویر آن را انتخاب کنید. سپس بر روی دکمه ویرایش در نوار ابزار کلیک کنید.

 

طراحی سایت

 

در مرحله بعد، بر روی دکمه به روز رسانی کلیک کنید تا تنظیمات تصویر را ذخیره و به روز کنید. اکنون تصویر شما دارای یک کلاس اضافی است. از آنجا که شما از افزونه فوق استفاده کرده اید، یک کادر در این تصویر ظاهر می شود.

استفاده از HTML و CSS برای اضافه کردن کادر تصاویر

استفاده از CSS  و  HTML یک راه سریع برای به دست آوردن مرزهای اطراف تصاویر در وردپرس است. راه های زیادی برای اضافه کردن حاشیه در اطراف تصاویر وجود دارد. در ادامه به معرفی دو روش می پردازیم:

اضافه کردن خطوط با استفاده از کدنویسی درون خطی

پس از آپلود و قرار دادن تصویر درون پست وردپرس، به قسمت ویرایشگر متن بروید. در آنجا کد HTML را برای تصاویر خود خواهید دید.

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

 

۱

شما می توانید ویژگی های CSS را به کدهای HTML زیر اضافه کنید.

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

  با کدهای فوق به راحتی می توانید رنگ، حاشیه و فاصله خطوط را تغییر دهید.

 

اضافه کردن کادر تصویر در تم وردپرس

اگر می خواهید کادرها را همیشه به تصاویر خود در پست های وبسایت داشته باشید، می توانید کدهای CSS را به طور مستقیم در تم کودک وردپرس اضافه کنید. اکثر این تم ها قوانین شکل دهی مناسبی را در فایل  style.css دارند. البته شما می توانید کدهای CSS موجود را تغییر دهید.

وردپرس کلاسهای پیش فرض تصاویر را به تمام تصاویر اضافه می کند. برای اطمینان از این که تصاویر در پست یا صفحات شما مرز تصویری دارند، باید تمام این کلاس ها را هدف قرار دهید. نمونه ای از قطعه کد CSS زیر را ملاحظه نمایید.

   ;img.align:right 

     ;float:right

   ; margin:0 0 1em 1em

    ;border:3px solid #EEEEEE

}

     ; img.align:left 

     ; 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.align= none }

;  border:3px solid #EEE

{


ااگر می خواهید از مرزهای تصویر فقط زمانی که به آنها نیاز دارید، استفاده کنید، می توانید کلاس های CSS فوق  ررا به تصاویر خود اضافه کنید.

 

آموزش قرار دادن فایل PDF در وردپرس آموزش وردپرس آموزش پاک کردن کش در وردپرس آپلود فایل pdf در وردپرس اضافه کردن تصویر پس زمینه وردپرس المان های ویژوال کامپوزر ایجاد فرم تماس در وردپرس ایجاد کادر در وردپرس خدمات طراحی سایت ساخت سایت طراحی سایت طراحی سایت در تهران طراحی سایت شرکتی طراحی سایت فروشگاهی عکس پس زمینه سایت فرم تماس حرفه ای وردپرس قرار دادن عکس در پس زمینه سایت مشکل کش در وردپرس معرفی visual composer نحوه اضافه کردن حاشیه تصویر در وردپرس نحوه ساخت فرم تماس نحوه قرار دادن فایل pdf در سایت نحوه پاک کردن کش سایت در وردپرس نسخه پرمیوم ویژوال کامپوزر نمایش pdf در سایت نمایش فایل های pdf در وردپرس پوشه cache در وردپرس پوشه کش وردپرس کادربندی در وردپرس گذاشتن بک گراند در وردپرس

ساعت کاری

  • شنبه تا پنجشنبه : از ساعت 8:30 الی ۱۷ (پشتیبانی آنلاین و انجام سفارشات)

پست الکترونیک

شماره تماس

  • 021-88897120
    ساعات پاسخ گویی شنبه تا پنجشنبه 8:30 الی 17