آموزش استفاده از Genericons در قالب وردپرس

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

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

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

Automattic , نام استارتاپی است که توسط بنیان گذاران وردپرس به وجود آمده است. این تیم با پلاگین های منبع باز عالی، تم ها و پروژه های دیگر وردپرس را بهبود می بخشند. پروژه اخیر آنها به نام Genericons یک فونت آیکون منبع باز است که می تواند در تم های وردپرس  جایگزینی مناسب آیکون های تصویری (عکس آیکون ها) باشد.

بنابراین، در این پست من به شما نشان خواهم داد که چگونه می توانید از فونت آیکون های Genericons برای جایگزینی عکس آیکون های مورد استفاده در هر تم وردپرس استفاده کنید.

پیاده سازی Genericons در قالب وردپرس

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

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

@font-face {
    font-family: 'Genericons';
    src: url('genericons/Genericons.eot');
    src: url('genericons/Genericons.eot?#iefix') format('embedded-opentype'),
         url('genericons/Genericons.woff') format('woff'),
         url('genericons/Genericons.ttf') format('truetype'),
         url('genericons/Genericons.svg#genericonsregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

دقت نمایید اگر اسم پوشه genericons را تغییر داده اید در این قسمت نیز باید آن را تغییر بدهید و آدرس درست پوشه را قرار بدهید.

بعد از اضافه کردن کد شما موفق شدید Genericons  را به قالب خود اضافه کنید.برای استفاده از آیکون ها دو روش وجود دارد

روش اول استفاده از آیکون به صورت مستقیم در کدهای HTML است و روش دوم استفاده در کدهای CSS می باشد.

نحوه استفاده از آیکون ها در HTML به شکل زیر می باشد :

در مثال زیر ایکون چت را به نمایش درمی آوریم.که دارای کد genericon-chat می باشد.

<div class="genericon genericon-chat"></div>

برای استفاده در CSS نیز بسیار آسان است و تنها کافی است تا کد HEX آیکون را به صورت زیر قرار بدهید.

content: '\f108';

به عنوان مثال برای نمایش آیکون چت در کامنت های یک پست از کد زیر استفاده می نماییم.

.entry-meta .entry-comments-link:before {
content: '\f108';
display: inline-block;
-webkit-font-smoothing: antialiased;
font: normal 16px/1 'Genericons';
vertical-align: top;
}

یک مثال دیگر نیز برای نمایش آیکون قبل از قسمت دسته بندی ها به شکل زیر است:

.entry-meta .entry-categories:before {
content: '\f301';
display: inline-block;
-webkit-font-smoothing: antialiased;
font: normal 22px/1 'Genericons';
vertical-align: top;
}

به پایان رسید.