افزونه Simple Social Icons

افزونه Simple Social Icons

 افزونه Simple Social Icons یکی از محبوب ترین افزونه های شبکه های اجتماعی وردپرس است که توسط StudioPress ساخته شده و در حال حاضر در بیش از 200 هزار وب سایت به صورت فعال نصب است. با استفاده از این افزونه، به راحتی می توانید به پروفایل شبکه های اجتماعی خود لینک دهید، رنگ و اندازه آیکون های شبکه های اجتماعی را سفارشی سازی کنید و همچنین آنها را در چپ ، مرکز یا راست تراز کنید. نکته جالب توجه این است که تمام تنظیمات را می توانید در فرم ابزارک، بدون نیاز به صفحه تنظیمات، انجام دهید.از سری مقاله های آموزش رایگان طراحی سایت امروز به آموزش افزونه Simple Social Icons می پردازیم.

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

شبکه های اجتماعی که این افزونه از آنها پشتیبانی می کند شامل Behance، Bloglovin، Dribbble، Email، Facebook، Flickr، GitHub، Google+، Instagram، Linkedin، Medium، Periscope، Phone، Pinterest، RSS، Snapchat، StumbleUpon، Tumblr، Twitter، Vimeo، Xing و YouTube است.

افزونه Simple Social Icons برای دسترسی و خوانایی بهتر، به جای فونت های وب از SVG (scalable vector graphics) استفاده می کند. فونت های وب برای ارائه متن بسیار مناسب هستند اما استفاده از آنها برای آیکون ها یک رویکرد غیربهینه است.

در نسخه 3.0 افزونه Simple Social Icons گزینه های سفارشی سازی بهتری بخصوص برای توسعه دهندگان که از CSS سفارشی برای بازنویسی ظاهر آیکون ها در قالب فرزند استفاده می کنند، ارائه شده است.

شما می توانید رنگ، اندازه و وضعیت هاور آیکون سفارشی را برای هر ابزارک تنظیم کنید. تنظیمات رنگ و اندازه ابزارک را ویرایش کنید و تنظیمات را به گونه ای پیکربندی کنید که استایل مورد نظر شما فقط برای آن ابزارک اعمال شود. همچنین افزونه Simple Social Icons 3.0 نشانه گذاری های بهتری برای لینک های باز شده در پنجره های جدید دارد.

آموزش افزونه Simple Social Icons و افزودن آیکون شبکه های اجتماعی به نوار کناری وردپرس

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

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

در بین ابزارک های موجود در صفحه به دنبال ابزارک Simple Social Icons بگردید. آن را کشیده و در نوار کناری یا هر ناحیه ابزارک دیگری که مورد نظر شما است، رها کنید. پس از آن باکس تنظیمات افزونه مشابه شکل زیر باز می شود.

کار با افزونه Simple Social Icons بسیار ساده است. کافی است URL صفحات شبکه های اجتماعی خود را در باکس های مربوطه وارد کرده و روی دکمه ذخیره کلیک کنید.

تنظیماتی که می توانید در ابزارک Simple Social Icons تغییر دهید، عبارتند از:

• Title: عنوانی که در این قسمت وارد می کنید، در بالای آیکون ها ظاهر می شود.
• Open links in new window?: در این قسمت می توانید انتخاب کنید که لینک ها در یک پنجره جدید باز شوند یا خیر.
• Icon Size: در این قسمت می توانید اندازه مورد نظر خود برای آیکون ها را به پیکسل وارد کنید.
• Icon Border Radius: در این قسمت می توانید میزان گردی آیکون ها را انتخاب کنید.
• Border Width: با وارد کردن مقدار در این قسمت، در اطراف آیکون یک حاشیه رنگی ایجاد می شود. هر چه این عدد بزرگتر باشد، حاشیه ضخیم تر خواهد بود.
• Alignment: در این قسمت می توانید آیکون ها را در چپ ، مرکز یا راست تنظیم کنید.

اگر می خواهید دکمه ها را استایل دهی کنید، می توانید از انتخابگرهای رنگ استفاده کنید یا کد هگزادسیمال رنگ را در باکس های مربوطه در ابزارک Simple Social Icons جای گذاری کنید.

در صورت تمایل می توانید شعاع حاشیه (border radius)، رنگ حاشیه (border color)، اندازه آیکون و تراز قرارگیری آیکون ها را تغییر دهید.

اگر تعداد محدودی آیکون دارید بهتر است آنها را در مرکز قرار دهید، بزرگ کنید و رنگ آنها را تغییر دهید.

برای گرد کردن آیکون ها border radius را افزایش دهید.

تنظیمات لازم برای گرد کردن Simple Social Icons بسته به تنظیمات اندازه آیکون تغییر می کند. اگر آیکون ها را بزرگ کرده اید، برای گرد کردن آیکون ها باید اندازه پیکسل border radius را نیز افزایش دهید.

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

یک وب سایت خوب برای یافتن طرح های رنگی Adobe Color (https://color.adobe.com/create/image) است.

شما می توانید رنگ آیکون، رنگ پس زمینه آیکون و رنگ حاشیه اطراف آیکون را تغییر دهید.

نحوه اضافه کردن لینک شبکه های اجتماعی

برای اضافه کردن لینک شبکه های اجتماعی به تنظیمات ابزارک Simple Social Icons به ترتیب زیر عمل کنید:

• از صفحات شبکه های اجتماعی خود مانند فیس بوک ، توییتر و اینستاگرام دیدن کنید.
• URI را از باکس بالای صفحه کپی کنید.
• URI را در باکس مربوط به آن شبکه اجتماعی در ابزارک Simple Social Icons پیست کنید. تمام باکس ها به وضوح برچسب گذاری شده اند.

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