۴ راه برای اضافه کردن favicon در وردپرس

“فاو آیکن”  یکی از مشخصه های  ظاهری و البته مهم در وب سایت های تجاری است، که متاسفانه معمولا زیاد بهش توجه نمیشه.  فاوآیکن یه عکس کوچیک هستش (معمولا لوگو) که کنار عنوان سایت
در تب مرورگر قرار میگیره.

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

نشان دادن هویت بصری آنلاین

بهبود تجربه کاربر

کمک به تقویت نام تجاری شما

شروع به کار …

در این پست ما ۴ روش اضافه کردن فاوآیکن در سایت وردپرسی رو به شما آموزش میدیم.

قبل از شروع کار شما باید یک عکس مربعی ۵۱۲ در ۵۱۲ پیکسلی تهیه کنید. برای فاوآیکن معمولا از لوگو استفاده میشه.

روشهای رو که اینجا مطرح میکنیم از ورژن ۴٫۳ به بعد قابل دسترس هستش. اگر به هر دلیلی شما از ورژن قدیمی تر از ۴٫۳ وردپرس استفاده می کنید برای تنظیمات فاوآیکن می تونین از روش زیر استفاده کنید:

اول یه فایل ۱۶ در ۱۶ پیکسل یا ۳۶ در ۳۶ پیکس با فرمت “.ico” بسازید که البته این فایل رو با این فرمت نمیتونید مسقیم درستش کنید پس اول فایل رو با پسوند “.png” درست کنید بعدش فایل رو تبدیل کنید. حالا فقط کافیه فایلتون رو ابزارهای آنلاین ساخت فاوآیکن تبدیل کنید.

 

روش اول: آپلود فاوآیکن توسط “سفارشی سازی وردپرس”

یکی از بهترین و ترجیحی ترین راه برای فاوآیکن استفاده از این روش هستش البته این روش از ورژن ۴٫۳ به بعد در دسترس هستش.

یک راه سریع و ساده!

فقط کافیه یه عکس ۵۱۲ در ۵۱۲ پیکس داشته باشید و البته لازم هم نیست به فرمت “.ico” تبدیلش کنید.

حالا پنل مدیریت وردپرس رو باز کنید و “سفارشی سازی” رو از منو “نمایش” کلیک کنید. این مسیر توی سایت انگلیسی به صورت زیر می باشد.

Apearance -> Customize

فاوآیکن وردپرس

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

 

طراحی سایت

خب حالا کافیه عکس رو آپلود کنید و ذخیره رو بزنید. کش مرورگر رو خالی کنید و سایتتون رو دوباره لود کنید. برای خالی کردن کش هم می تونید از یکی از پلاگین های کش استفاده کنید یا از کلید ترکیبی Ctrl+F5  استفاده کنید.

ساخت اپلیکیشن موبایل

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

به همین راحتی!

 روش دوم: آپلود توسط تنظیمات قالب

فاوآیکن وردپرس

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

 

روش سوم: استفاده از پلاگین

پلاگین فاوآیکن وردپرس

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

۱- RealFaviconGenerator: این پلاگین نه تنها این امکان رو در اختیار شما قرار میده که فاوآیکون رو آپلود کنید بلکه یه ابزار خوب برای ساخت فاوآیکون هم هستش. بدین گونه که فاوآیکون شما در کتابخانه رسانه ذخیره می کنه و این امکان رو در اختیار شما قرار می ده تا نحوه نمایش فاوآیکن رو در دستگاه های مختلف مشاهده کنید.

۲- Favicon Rotator: با این پلاگین می تونین فاوآیکن خودتون از منو “پوسته ها” به قالبتون اضافه کنید. یه امکان جالبی که این پلاگین داره اینه که اجازه می ده کاربر چند تا عکس رو آپلود کنه و به تور تصادفی عکسها رو به بازدیدکننده ها نشون می ده.

 

۳- All In One Favicon: با این پلاگین هم خیلی راحت می تونید فاوآیکن خودتون رو آپلود بکنید. و البته دستگاه های اپل رو هم پشتیبانی می کنه.

 

روش چهارم: اضافه کردن فاوآیکن با کد

کد favicon وردپرس

 

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

 

در این روش شما می تونید کد خودتون رو به فایل header.php  و یا functions.php اضافه کنید که البته فایل functions.php بیشتر توصیه میشه. بدلیل اینکه وقتی این کد رو توی هدر قرار میدین، جزئی از قالبتون می شه اما اگر در فایل functions.php قرار بدهید این کد مثل یک پلاگین عمل میکنه. و البته اگر این تنظیمات در قسمت زیر قالب انجام بدهید بسیار بهتر هستش.

 

حالا باید فایلتون رو از طریق FTP ، CPANEL، DIRECT ADMIN و یا هر پنل دیگه ای که دارین آپلود کنید. البته پیشنهاد میشه فایل رو در ریشه اصلی سایت قرار بدین. فراموش نکنین فاوآیکن قبلی از قبل پاک کرده باشین.

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

function my_favicon() { ?>

<link rel="shortcut icon" href="yourimagepathgoeshere" >

<?php }

add_action(‘wp_head’, ‘my_favicon’);

این تابع، فاوآیکن شما رو در هدر بین  تگ <head> </head>  قرار میده.

 

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

99

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

فقط کافیه کد زیر رو در فایل function.php  کپی کنید و به جای ‘you@yourdomain.com’ ایمیل خودتون رو قرار بدین. و البته قبلش مطمئن بشید که از گراواتار استفاده می کنید. برای استفاده از گراواتار هم می تونید به بخش کاربران وب سایت برید و از اونجا استفاده از گراواتار رو بزنید. بعد از انتخاب گراواتار سایتش باز میشه و شما می تونید مراحل ثبت نام و آپلود عکس خودتون رو با ایمیلی که برای کاربر ادمین سایت استفاده می کنید ثبت نام کنید. به همین راحتی!

function GravatarAsFavicon() {

//We need to establish the hashed value of your email address

$GetTheHash = md5(strtolower(trim('you@yourdomain.com')));

echo 'http://www.gravatar.com/avatar/' . $GetTheHash . '?s=16';

}

حالا ذخیره رو بزنید و فایل header.php رو باز کنید و کد زیر رو اضافه کنید

&amp;amp;lt;link rel=&amp;amp;quot;shortcut icon&amp;amp;quot; href=&amp;amp;quot;&amp;amp;lt;?php GravatarAsFavicon(); ?&amp;amp;gt;&amp;amp;quot; /&amp;amp;gt;

حالا شما ۴ روش اضافه کردن فاوآیکن به سایت وردپرسی رو یاد گرفتین. حالا شما بر اساس نوع وب سایتتون می تونید از یکی از روش های بالا استفاده کنید. فراموش نکنید استفاده از فاوآیکن باعث میشه وب سایت شما در دنیای مجازی به عنوان سایت حرفه ای به نظر بیاد.

و حتی زمانی که بازدید کننده ای تعداد زیادی سایت رو توی مرورگرش باز کرده باشه خیلی راحت میتونه سایت شما رو از بین تب ها پیدا کنه چون شما فاوآیکن دارید!

نظر بدهید

ایمیل شما منتشر نخواهد شد. Required fields are marked *

شما می توانید استفاده نمایید از HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>