افزونه Image Widget

افزونه Image Widget

نوار کناری رایج ترین مکان برای نمایش تبلیغات بنری و اضافه کردن تصویر در سایت وردپرس است. وردپرس به صورت پیش فرض ابزارک هایی را در اختیار شما قرار می دهد که با استفاده از آنها می توانید به نوار کناری سایت خود تصویر اضافه کنید. اما مانند هر ویژگی دیگری در وردپرس، این کار را می توان با افزونه نیز انجام داد.از سری مقاله های آموزش رایگان طراحی سایت امروز به آموزش افزونه Image Widget می پردازیم که این افزونه یک ابزارک تصویر را به بخش ابزارک های سایت وردپرس شما اضافه می کند.

این افزونه در عین حال که ساده است بسیار مؤثر می باشد. با استفاده از آن می توانید تصاویر را به راحتی به نوار کناری سایت خود اضافه کنید.

آموزش افزونه Image Widget و نحوه اضافه کردن تصویر به نوار کناری وردپرس

ابتدا افزونه Image Widget را دریافت نموده و آن را در سایت خود در بخش افزونه ها نصب کنید.

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

ابزارک Image Widget را کشیده و در نوار کناری وب سایت خود یا هر ناحیه ابزارک دیگری که قالب شما در اختیارتان قرار می دهد رها کنید.

باکس تنظیمات افزونه مشابه شکل زیر باز می شود.

روی دکمه Select an Image کلیک کنید. کتابخانه رسانه وردپرس برای شما باز می شود که می توانید یکی از عکس های موجود را در آن انتخاب کنید یا یک تصویر جدید آپلود کنید.

پس از انتخاب تصویر، تنظیمات مربوط به آن نمایش داده می شود. در باکس تنظیمات تصویر می توانید موارد زیر را پیکربندی کنید:

• Title یا عنوان شرح مختصری در مورد تصویر است، پس از اضافه کردن تصویر به نوار کناری ، وقتی روی تصویر هاور می شود، این گزینه قابل مشاهده است.
• گزینه Alternate Text یا متن جایگزین توسط موتورهای جستجو استفاده می شود. از آنجا که ربات ها نمی توانند بدانند تصویر درباره چیست، این فیلد برای درک بهتر محتوای تصویر توسط آنها استفاده می شود.
• در قسمت Related می توانید کدهای HTML را وارد کنید.
• Caption یا توضیحات اختیاری است و می توانید چیزی در آن وارد نکنید، هر آنچه که در این قسمت می نویسید در نوار کناری، زیر تصویر/بنر نمایش داده می شود.   
• در صورتی که تصویر شما تبلیغات بنری است، می توانید لینک های افیلیت را در قسمت Link وارد کنید.
• افزونه Image Widget به شما امکام می دهد ارتفاع و عرض تصویر و یا بنر را انتخاب کنید. برای این کار در قسمت Size گزینه custom را انتخاب کنید. پس از آن می توانید عرض و ارتفاع تصویر را وارد کنید.
• تراز کردن تصویر (چپ / راست / مرکز)

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

اضافه کردن تصویر به نوار کناری وردپرس بدون افزونه Image Widget

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

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

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

برای این کار کافی است ابزارک تصویر را کشیده و در مکان مورد نظر خود رها کنید.

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

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

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

تغییرات را ذخیره کنید و ابزارک را در فرانت اند سایت مشاهده نمایید.

قرار دادن تصویر در نوار کناری با ابزارک متن

 افزودن تصویر به نوار کناری با استفاده از ابزارک پیش فرض تصویر افزونه Image Widget بسیار آسان است. با این وجود ، بعضی اوقات ممکن است نیاز به اضافه کردن تصویری با HTML سفارشی یا متن با فرمت بندی داشته باشید. در این صورت ، به جای ابزارک تصویر باید از ابزارک “متن” استفاده کنید.

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

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

پس از انتخاب تصویر خود ، روی دکمه “‘گذاشتن در نوشته” کلیک کنید. اکنون می توانید پیش نمایش تصویر را در تنظیمات ابزارک متن مشاهده کنید.

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

پس از اتمام کار ، فراموش نکنید که روی دکمه “ذخیره” کلیک کنید تا تنظیمات ابزارک را ذخیره کنید.

اکنون می توانید به وب سایت خود مراجعه کنید تا تصویر مورد نظر خود را در نوار کناری سایت مشاهده کنید.

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

گاهی اوقات هنگام اضافه کردن تصویر به نوار کناری لازم است کد HTML دیگری را به تصویر خود اضافه کنید. این کار با افزونه Image Widget امکان پذیر است اما ابزارک پیش فرض تصویر چنین ویژگی را ارائه نمی دهد. در چنین مواردی ابزارک متن پیش فرض اجازه برخی کدهای HTML بسیار پایه را می دهد ، اما ممکن است با HTML پیشرفته یا فرمت بندی کار نکند. در این حالت ، باید به صورت دستی اقدام به اضافه کردن تصویر به نوار کناری وبلاگ خود کنید.

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

پس از بارگذاری تصویر ، باید روی لینک ویرایش کنار تصویر کلیک کنید.

وردپرس شما را به صفحه “ویرایش رسانه” می برد. در این صفحه می توانید URL فایل تصویر را در سمت چپ صفحه مشاهده کنید. شما باید این URL را کپی کرده و آنرا در یک ویرایشگر متن مانند Notepad قرار دهید.

سپس در پیشخوان وردپرس به مسیر نمایش » ابزارک ها بروید و ابزارک HTML سفارشی را کشیده و در نوار کناری در مکانی که می خواهید تصویر نشان داده شود، رها کنید.

در ناحیه متنی ابزارک، باید تصویر خود را با استفاده از کد زیر اضافه کنید.

<img src="Paste The File URL Here" alt="enter your image alt" /> 

برچسب img در HTML برای نمایش تصاویر استفاده می شود. به دو ویژگی نیاز دارد ، اولین مورد src است که موقعیت فایل تصویر را مشخص می کند. در اینجا می توانید URL ای که قبلاً کپی کرده بودید را قرار دهید.

مورد دوم alt است که برای تهیه متن جایگزین برای تصویر استفاده می شود. برچسب نهایی img شما شبیه این خواهد بود:

<img src="http://www.example.com/wp-content/uploads/2020/09/yourimage.jpg" alt="your image alt" />

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