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

ضعیفمتوسطخوببسیار خوبعالی
( 0 رای , میانگین : 0٫00 از 5)
بارگذاری...

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

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

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

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

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

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

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

در ادامه بخوانید:  نحوه مسدود کردن آدرس ip در وردپرس

حال برای استفاده از فونت آیکون ها نیاز هست تا آن را در فایل 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;
}

 

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

اطلاعات بیشتر



درباره نویسنده



SeyedAhmadReza
( عضو از 3 سال قبل )
  • 9 نوشته
  • 0 دیدگاه
  • 0 محصول
  • 0 دوره آموزشی

نظرات کاربران

ثبت دیدگاه

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

دیدگاهتان را بنویسید

مطالب مرتبط



دسته بندی مطالب

آخرین آپدیت محصولات

همکار ما شوید

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

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