همیشه راه های بیشماری برای تغییر دادن در ظاهر یک وب سایت وجود دارد ، یکی از روش و راه های مجذوب نمودن بیشتر و هر چه تمام تر مخاطب در یک وب سایت می‌تواند طراحی زیبا و هم چنین دقت در جذابیت های ظاهری آن وب سایت باشد ، برای مثال طراحی در رنگ بندی خاص و استفاده از افکت‌ها و همینطور استفاده از فونت و آیکون و موارد دیگری می توانند شامل این تغییرات باشند.
می توان با بهره گیری و هم چنین استفاده نمودن از فونت آیکون در وردپرس باعث زیبایی و جذابیت بسیاری در وب سایت وردپرسی خود شوید . و هم چنین می توان با این کار در واقع نشانه های بصری برای کاربران خود ایجاد کنید . حال باید بدانیم که فونت آیکون چیست و چه کاربردی دارد ؟ در واقع فونت آیکون شامل تصاویر کوچک از کاراکتر هایی است که می توانید با فونت مشخص آیکون هایی ایجاد کنید . که این آیکون ها سرویس‌هایی مانند :
اپلیکیشن‌ها ، اجتماعی ، سرویس ها , دسته‌بندی و… را در برمی گیرد .
وجود تصاویر در وب سایت باعث افزایش محبوبیت و ماندگاری منظور در ذهن مخاطبان می گردد به طوری که تصاویر کوچک و بزرگ تاثیر دار هستند اما برای نمایش برخی از قسمت ها لازم است از تصویرک های کوچکی استفاده شود که به صورت مفهومی هستند مانند تصویر چرخ دنده که عموما برای نمایش قسمت تنظیمات از آن استفاده می شود به این سبک و دسته از تصاویر آیکون گفته می شود تصور کنید که ما قسمت و بخش های زیادی در وب سایت داریم که باید برای آن یک آیکون در نظر بگیریم و حال تصویر ها را جایگذاری میکنیم چه اتفاقی خواهد افتاد ؟ کاملا درست است حجم وب سایت بسیار بالا خواهد رفت اما چاره چیست عدم استفاده از آیکون ؟ خیر راه حلی که در سال های اخیر شاهد رو نمایی آن بودیم وجود فونت آیکون بوده است فونت آیکون همان آیکون های ما را به صورت فونت در آورده و قابل استفاده در وب سایت و هر نرم افزار دیگری کرده است با این تفاوت که فونت آیکون ها به صورت فونت به وب سایت اضافه میشوند و حجم بالایی ندارند و قابلیت هایی که فونت ها به خود میگرند را نیز میتوان به فونت آیکون ها داد برای مثال اندازه ، رنگ ، و حالت های مختلف که در Css اجرا میکنیم .
در این قسمت به مثالی در رابطه با افزودن فونت آیکون به وردپرس خواهیم پرداخت .
در این مطلب می‌خوانید:
افزودن آیکون در منو وردپرس
برای آنکه بتوانید زیبایی وب سایت را دو چندان کنید میتوانید از فونت آیکون ها در منو استفده کنید بعلاوه افزودن جلوه های بصری ایجادحس های مفوهمی تری نسبت به منو ها را ایجاد خواهد کرد برای مثال به منوی خانه میتوانید آیکون خانه های کوچک را اضافه کنید که مفهوم صفحه اصلی یا خانه را میرساند برای اینکار هم از روش استفاده از افزونه و هم استفاده از کد میتوانید انجام دهید در اینجا افزونه ای که به معرفی آن در این قسمت می پردازیم Menu Image نام دارد که در مخزن وردپرس به ثبت رسیده است و تا به حال موفق بوده است تا بیش از ۴۰.۰۰۰ نصب فعال و کسب امتیاز ۵ را به خود اختصاص داده است .
این نوع از افزونه وردپرس دارای صفحه تنظیمات خاصی نمی باشد ، بنابراین پس از نصب و فعال نمودن آن به منوی نمایش فهرست‌ها در پیشخوان مراجعه کرده ، و همانطور که در تصویر مشاهده می‌کنید دو گزینه در پنجره‌ای که لینکهای منو را وارد می‌کنید به آن افزوده خواهند شد .
ساخت منو آیکون دار در وردپرس
برای ساخت منو آیکون دار در وردپرس در ابتدا بر روی دکمه set image کلیک کنید تا آیکون منو ی مورد نظر را انتخاب کرده و آن را آپلود نمایید ، در مرحله ی بعدی برای این که جذابیت و زیبایی آیکون را دو برابر کنید بر روی گزینه set image on hover کلیک کنید و همان آیکون را با رنگ دیگری آپلود کنید ، با این کار هنگام رفتن نشانگر موس بر روی منو ی مورد نظر و یا مشاهده لینک منو رنگ آیکون نیز تغییر خواهد کرد . و همین امر باعث زیبایی آن می شود .
استفاده از تصاویر در دسته بندی وردپرس با افزونه Categories Images
در بخش image size قادر خواهید بود تا اندازه مورد نظر برای آیکون را وارد کنید که در حالت پیش فرض اندازه استاندارد در این افزونه در دو اندازه ۲۴ و ۳۶ می‌باشد . اما اگر قصد دارید تا اندازه آن را به دلخواه و مطابق با سلیقه و نظر خود تغییر دهید می توانید کد زیر را در فایل فانکشن قالب وردپرس خود قرار داده و به جای اندازه ها موجود که در این کد ۳۶ و ۵۰ می‌باشند اندازه دلخواه خود را تعیین کنید .
add_filter( 'menu_image_default_sizes', function($sizes){
// remove the default ۳۶x۳۶ size
unset($sizes['menu-۳۶x۳۶']);
// add a new size
$sizes['menu-۵۰x۵۰'] = array(۵۰,۵۰);
// return $sizes (required)
return $sizes;
در این قسمت به آموزش و هم چنین به معرفی فونت آیکون Font Awesome می پردازیم .
Font Awesome چیست ؟
سرویس فونت Font Awesome یک مجموعه کامل از وکتور هایی می باشد که به صورت آیکون وجود دارند . این مجموعه ی بزرگ تا کنون بیش از ۶۳۴ آیکون را طراحی نموده و به مرحله ی تولید رسانده است تا به راحتی بتوانید برای هر بخشی از آیکون های مختلف در وردپرس استفاده کنید .
این آیکون ها علاوه بر زیبایی دارای قابلیت های قابل توجه دیگری نیز هستند که از جمله ی آن ها می توان به موارد زیر اشاره نمود .
قابلیت های مورد استفاده از فونت آیکون Font Awesome
1 . شما کاربران گرامی می توانید توسط css با حفظ کیفیت آیکون سایز مورد نظر و دلخواه خود را ایجاد کنید . با این کار کیفیت آیکون ها تغییری پیدا نمی کند و همان کیفیت مطلوب شما خواهد بود .
2 . همه ی مرورگر ها از این برنامه حمایت و پشتیبانی می کنند .
3 . می توان با استفاده از این برنامه استایل های متفاوت و دلخواه خود را مانند رنگ , پس زمینه و … اعمال کرد .
4 . این برنامه قابلیت استفاده آسان توسط کد های کوتاه را دارا می باشد .
روش های استفاده از فونت آیکون (font awesome) در وردپرس
1 . استفاده از افزونه وردپرس Better Font Awesome
2 . استفاده از کدنویسی در قالب وردپرس
بعلاوه روش های بالا میتوانید با استفاده از فونت آیکون های آماده نیز که در وب سایت و کتابخانه های عظیم فونت آیکون ها اینکار را انجام دهید کافیست که در فایل سربرگ پوسته خود آنها را به روش فراخوانی استایل css فراخوانی کنید سپس با استفاده از کد های مخصوص خود فونت آیکون را در هر جایی از وب سایت نمایش دهید که در این بخش هدف ما منوی وب سایت می باشد گفتنی است که در برخی از قالب ها این قابلیت به صورت خودکار و پیشفرض وجود دارد مانند قالب گود نیوز ، صحیفه و مولتی نیوز که عموما قالب های خبری هستند.
