كيف تضيف أيقونة الهويّة Favicon إلى موقع تديره باستخدام ووربريس

سنتعلم في هذا الدرس كيفية ترسيخ هويّة بصرية قوية لموقعك عبر تصميم أيقونة الهوية “fav icon” واستخدامها في ووردبريس، ليراها الزائر إلى موقعك بمجرد وصوله، وإبراز الموقع وسط زحام ألسنة المواقع التي لديه في المتصفح عن يمين موقعك وشماله، وسنتعرّف أيضًا كيف ننقل نفس الهوية البصرية عبر الأجهزة المختلفة التي قد يزورك منها المستخدمون.
 

تعريفٌ بأيقونة الهوية Favorite Icon

هي تلك الصور الصغيرة التي تراها في ألسنة المتصفح بجانب عنوان الموقع، وتراها أيضًا في تاريخ التصفح والمواقع المفضّلة، سواء في المتصفح العادي أو على الأجهزة المحمولة، وتكون عادة بمقاس 16*16 أو 32*32 بكسل

وتلعب تلك الرموز الصغيرة دورًا هامًا في إبراز هوية موقعك فهي تميزه وسط الألسنة الكثيرة التي قد تكون لدى المستخدم في نفس الوقت، ووجود ذلك الرمز في لسان موقعك يعني أن المستخدم لن يجد صعوبة تذكر في العودة إليه بمجرد التفكير في ذلك، وهذا في مصلحة موقعك والمحتوى الموجود به.

الصيغ المستخدمة في أيقونات الهويّة

شقّت أيقونات الهويّة طريقها بصورة رسمية لأول مرة في متصفح ميكروسوفت “إنترنت إكسبلورر” إصدار 5، في عام 1999، أي حين كان الإنترنت في أيام طفولته، وقد اعتمدتها W3C (اتحاد الويب العالمي) في غضون بضعة أشهر، واستخدمها مطورو الويب من حينها.
وتدعم أغلب متصفحات الويب الآن صيغ الصور الحديثة التي يمكن إخراج أيقونة الهوية بها، مثل png – gif – svg، إضافة إلى صيغة ico القديمة، وسنمر سريعًا على أشهرهم سريعًا فيما يلي:

صيغة ICO

تظل هذه الصيغة أكثر صيغة مدعومة لأيقونات الهوية عبر المتصفحات والأجهزة المختلفة، ويفضَل أن تُخرج نسخة من أيقونة الهوية لموقعك بهذه الصيغة، حتى لو كنت تستخدم صيغة حديثة مثل PNG.
لماذا؟ ببساطة لأن الصيغ الأحدث مثل PNG وGIF غير مدعومة من بعض المتصفحات القديمة، ولأن المكان الذي تبحث فيه المتصفحات عن أيقونة الهوية للموقع يختلف بشكل كبير من متصفح لآخر، وهناك احتمال لحدوث خطأ 404 إن لم يجد المتصفح أيقونة الهوية في المكان الافتراضي الذي يبحث فيه.
كما أن صيغة ICO تسمح بحفظ أكثر من صورة في نفس الملف، كأنها حاوية لمجموعة صور، وهذا يفيدنا في حفظ عدة نسخ من أيقونة الهوية بأكثر من كثافة نقطية في ملف واحد -مثلًا 16*16 و32*32 و48*48 كما تنصح مايكروسوفت-، كي يقرر المتصفح أي صورة أفضل للعرض حال فتح الموقع من جهاز بعينه.
ذلك أن نسخة 16*16 مثلًا لن تكفي وحدها، فهي لا تناسب العرض في شريط المهام أو على سطح المكتب للمستخدم مثلًا وإن كانت مناسبة تمامًا للعرض في لسان المتصفح، فحينها يكون وجود أكثر من نسخة في مصلحة هوية الموقع البصرية.

صيغة PNG

أحد المزايا الرئيسية لاستخدام صور PNG أن تصميمها وإخراجها سهل، وأن البرامج التي تقوم بذلك متوفرة للمختص وغير المختص، مثل PhotoShop وGIMP، كما أنها تدعم خيارات شفافية متطورة، ويدعمها اتحاد الويب العالمي كذلك W3C.
ورغم أن صيغة ICO تدعم شفافية قناة ألفا 8-بت “8bit alpha channel transparency”، إلا أن إيجاد برامج لتصميم الصورة وإظهار تأثير الشفافية من الصعوبة بمكان.

الاختيار بين الصيغتين

الإجابة المختصرة لسؤال “أي الصيغتين أستخدم؟” هي أن تستخدم كليهما، فيمكنك ضبط إعدادات أيقونة الهوية باستخدام وسم ، عبر تحديد المكان الذي يحتوي على أيقونة الهوية بصيغة PNG، مع الإبقاء على نسخة أخرى .ICO متاحة كخيار احتياطي في مجلد الجذر للموقع.
وبهذا فإنك تضمن تغطية أكبر قدر ممكن من إصدارات المتصفحات التي قد يدخل منها المستخدمون إلى موقعك مع تقليل احتمال ظهور خطأ 404.

ماذا عن الأجهزة المحمولة؟

لا شك أن أغلب حركة الويب تأتي من أجهزة محمولة سواء كانت هواتف أو حواسيب لوحية، لذا يجب ألا تهمل ذلك أثناء تصميم أيقونة الهوية.
لكن تلك الأجهزة متشعبة ومتنوعة أكثر من المتصفحات نفسه،ا حين نفكر في مقاسات الصورة المناسبة وأحجام الشاشات وأنظمة تشغيل تلك الأجهزة أيضًا، فليس هناك حل واحد يناسبهم جميعًا.
وحينها يجب أن يكون لديك نسخ بصيغة PNG، ونسخ لأيقونات Apple Touch، وأخرى لرسوميات Windows 8 Tile Graphics، وهكذا .. كي تغطي كافة النسخ المحتملة لأيقونة الهوية لموقعك أو هويتك البصرية بشكل عام.
ولكن بداعي التبسيط في هذا المقال، فإننا سنكتفي بإنشاء أيقونة هوية بصيغة ico فقط، أما إن أردت التوسع بعدها فاطلع إن شئت على هذه الخيارات للأجهزة المحمولة، وهذا الدليل الجامع لخيارات أيقونات الهوية.

كيفية إنشاء أيقونة هوية “Fav Icon”

إننا ننصح باستخدام برامج تصميم احترافية لإنشاء هويتك البصرية بشكل عام ولأيقونة الهوية في حالتنا هذه، وسنستخدم برنامج PhotoShop CS6 من شركة أدوبي لهذا الدليل، لكن لديك خيارات مجانية مثل GIMP أيضًا، وستجد الخيارات متشابهة نوعًا ما.

1. حمّل إضافة ICO Format الخاصة ببرنامج فوتوشوب، والتي سنحفظ صورتنا بامتداد ico من خلالها.
2. داخل فوتوشوب، اضغط File، ثم New، ثم أنشئ صورة بأبعاد 512*512 بكسل، بكثافة نقطية قدرها 72 بكسل/بوصة.
3. صمم أيقونتك داخل مساحة الصورة الفارغة التي أنشأناها قبل قليل.
4. حين يكون تصميمك جاهزًا، اضغط Image، ثم Image Size.
5. تأكد من تنشيط خيار Constrain Proportions واضبط أبعاد الصورة على 16*16 بكسل.
6. استخدم فلتر Unsharp Mask لتقليل التشويش في الأيقونة.
7. اضغط File ثم حفظ باسم، واحفظ تصميمك بامتداد ICO

وإليك مثالًا لأيقونة موقعي الخاص:

وهناك أدوات على الإنترنت يمكن أن تستخدمها إن لم تكن ترغب في تصميم أيقونتك بنفسك، وكل ما عليك فعله هو رفع الصورة التي ترغب فيها إلى أحد هذه المواقع -معظم تلك الأدوات يمكنها إخراج ملفات ICO تحتوي على أحجام مختلفة للصورة- :

•  Dynamic Drive – Favicon Generator
•  Favicon.cc
•  Favicon Generator

انتبه إلى أن المظهر الافتراضي لصورتك في لسان المتصفح ستكون بكثافة 16*16 بكسل، فلا تجعل تصميمك به تفاصيل كثيرة تجعل من الصعب رؤية تفاصيل منها، فألق نظرة على الأيقونات التي تستخدمها أغلب المواقع المشهورة -أو يمكنك النظر إلى أيقونة أكاديمية حسوب في أعلى لسان المتصفح لديك-، وستلاحظ أنها بسيطة ومباشرة.
والآن بما أن لديك أيقونة هوية لموقعك، دعنا نضيفها داخل ووردبريس:

كيفية إضافة أيقونة الهوية إلى ووردبريس

إن كنت تعرف ووردبريس فستقول لابد أن يكون أحدهم قد كتب إضافة هنا أو هناك تقوم بهذا عني، وصحيح أنه يمكنك استخدام إضافات لتنفيذ هذا بدلًا عنك لكن يجب أن تكون لديك هذه المعرفة على أي حال بشيء صغير كهذا، بدلًا من تحميل موقعك بإضافة أخرى لمجرد تنفيذ شيء صغير كهذا.
وفي هذا الدليل المختصر، سنرى كيف نضيف ايقونة الهوية إلى ووردبريس 4.3 -هذا الإصدار وقت كتابة المقال الأصلي، لكن يمكن تطبيقه على نسخة ووردبريس لديك، نسخة 4.8 وقت ترجمة المقال-:

1. سجّل دخولك إلى لوحة إدارة ووردبريس.
2. اضغط على Appearence (مظهر)، ثم Customize (تخصيص).
3.  اضغط على Site Identity أو (هوية الموقع) إن كنت تستخدم النسخة العربية من ووردبريس.
4. اضغط على Select file (اختر ملفًا) في الجزء الذي تجد مكتوبًا فيه Site Icon (أيقونة الموقع)، واختر أيقونة الهوية التي صممتها.
5. ستظهر أيقونة الهوية الآن تحت ترويسة Site Icon في Site Identity، اضغط Save and Publish (حفظ ونشر).

وهكذا نكون قد غيرنا أيقونة الهوية.
لاحظ أن ووردبريس تسمح لك بتعديل عملك قبل نشره باختيار جزء الصورة التي ترغب فيها كي تكون أيقونة الهوية، في حالة أن تكون الصورة التي رفعتها مستطيلة مثلًا وليست مربعة.

كيف تضيف أيقونة الهوية في ووردبريس 4.2 (والإصدارات الأقدم)

لأولئك الذين لم يرقّوا إصدرات ووردبريس لديهم لأي سبب كان، يمكن اتباع الخطوات التالية لإضافة أيقونة الهوية:

1. ارفع الصورة التي أنشأتها إلى المجلد الجذر لموقعك باستخدام برنامج لبروتوكول نقل الملفات FTP.
2. الصق الشفرة التالية في ملف header.php داخل السمة التي تستخدمها للموقع: https://gist.github.com/midoriberlin/111a3ce34672106eb620، انتبه إلى أنك ستغير الرابط وامتداد الملف إن كنت تستخدم صيغة أخرى غير PNG.
3. ارفع صورة أيقونة الهوية إلى مجلد السمة الرئيسي.

تأكد أن ترفع صورة الأيقونة إلى المجلد الجذر للموقع والمجلد الرئيسي للسمة، فلا تهمل هذه الخطوة الثالثة كي تضمن ظهور أيقونة الهوية حتى لمن يتصفح محتوى الموقع من قارئات الأخبار “feed readers”.

الخلاصة

آمل أنك بنهاية المقال قد رأيت أن تلك الأيقونة الصغيرة مهمة لهوية موقعك ومستخدميه، وأنها سهلة في إضافتها لووردبريس أيضًا -على الأقل في الإصدارات الحديثة منها-، أما الآن فدعني أعيد لك ملخص المقال في عجالة:

• أضف كلا الصيغتين ICO وPNG لتغطية أكبر قدر ممكن من المتصفحات الموجودة الآن.
• اطلع على الدليل الجامع لأيقونات الهوية كي تستهدف أكبر شريحة ممكنة من الأجهزة المحمولة (أو حالات الاستخدام عمومًا).
• استغل أدوات مثل Favicon.cc كي تخرج أكثر من حجم لأيقونتك في ملف واحد بكفاءة ويسر.
• استخدم خاصية Site Icon في ووردبريس 4.3+ كي تريح رأسك من عناء تثبيتها بالطريقة التقليدية في الإصدارات القديمة، لكن الإصدار القديم متوفر إن شئت.

دعنا نعرف في التعليقات إن واجهت مشكلة في عرضها في موقعك!

ترجمة -وبتصرّف- لمقال How to Add a Favicon to Your WordPress Site لصاحبه Tom Ewer