דף הבית » טריקים וטיפים, מומלצים

להוסיף favicon לערכת העיצוב

15 בפברואר 2010 | מאת רמי | 3 תגובות | תגיות: , , , ,

ה-favicon או בשמו החלופי shortcut icon היא "צלמית" המוצגת בשורת ה-URL של הדפדפן ומטרתה לתאר ויזואלית את האתר או העמוד הנוכחי. מיקרוסופט הייתה הראשונה להציג מאפיין זה באינטרנט אקספלורר 4, ובפתרון שלהם הקובץ היה צריך להימצא בספריית המקור ושמו היה צריך להיות favicon.ico. בהמשך הפך האייקון הקטן לסטנדרט חדש שהוכר על ידי ה-WC3 והוא שופר כך שלכל עמוד יהיה ניתן להגדיר אייקון משלו, בקבצים שונים עם שמות שונים, ובגדלים שונים (16×16, 32×32 או 64×64 פיקסלים). למידע נוסף בקרו בערך favicon בויקיפדיה.

להוסיף favicon

מספר דרכים להוסיף את favicon לוורדפרס.

קוד HTML

הדרך הפשוטה ביותר היא לערוך את הקובץ header.php בערכת העיצוב ולהוסיף בתוך ה-

את הקוד הבא:

<link rel="shortcut icon" type="image/x-icon" href="http://www.example.coml/favicon.ico" />

אקשן וורדפרס

דרך נוספת, והמועדפת, היא בעזרת האקשנים (Action) של וורדפרס. בערכת העיצוב של וורדפרס, ב–

מופעלת הפונקציה wp_head() והיא מפעילה את האקשן wp_head, עליו כבר דיברנו בעבר . מה שאנו נרצה לעשות הוא להוסיף קוד HTML מסוים כאשר מופעלת הפונקציה הזו תוך שימוש באקשן שצוין.

את הקוד הבא יש להזין לקובץ functions.php בערכת העיצוב:

function site_favicon() {
    echo '<link rel="shortcut icon" type="image/x-icon" href="'. get_bloginfo('stylesheet_directory') .'/images/favicon.ico" />';
}
add_action('wp_head', 'site_favicon');

התוצאה

אייקון של ויקיפדיה בדפדפן פיירפוקס

אייקון של ויקיפדיה בדפדפן פיירפוקס

קוד מורכב

עכשיו כשלמדנו את הבסיס, אפשר להתחיל לשחק עם הקוד. שימוש נכון בתנאי מותנים מאפשר לנו להציג אייקונים שונים לעמודים שונים. כך למשל אפשר להגדיר שלעמוד ראשי אייקון אחד, לפוסטים אייקון שני, ולקטגוריות אייקון שלישי ולעמודי משתמשים אייקון רביעי.

אפשר להגדיר גם אייקונים לפי קטגוריות, למשל אתר שיש לו 4 קטגוריות ראשיות (חדשות עולם, ספורט, מזג אוויר, בידור), לכל קטגוריה היה אייקון אחר, לפי ה-ID של הקטגוריה (הראשון cat1.ico השני cat2.ico וכך הלאה).

סיכום

ראשית יש לציין כי הוספת favicon היא עוד דרך למיתוג האתר. האייקון מופיע בשורת ה-URL, בסימניות (Bookmarks) ואפילו באתרי אינטרנט שונים (שתומכים בהצגת אייקונים). בניגוד לכלים אחרים המאפשרים לחשוף את הלוגו של האתר, כלי זה זמין ליותר קוראים, או יותר נכון הוא זמין לכולם ובאופן מיידי.

מאת רמי

אחראי על אתר וורדפרס בעברית ועל תרגום ושחרור גרסאות וורדפרס בעברית. מפתח ליבה, בכל גרסה החל מגרסה 2.8, מפתח מוביל בגרסה 4.4 ובגרסה 4.6. מספק שירותי פיתוח אתרים, פיתוח תוספי וורדפרס לסטרטאפים ופיתוח כלים למפתחי וורדפרס - GenerateWP.com.

3 תגובות »

  • אורן כותב :

    ניסיתי לשנות בfunctions ונפל לי האתר…
    אולי תוכל לעזור ??? בבקשה

  • אורן כותב :

    שכחתי לסמן V על עדכון במייל…
    בכל מקרה זה דחוף !

  • רמי כותב :

    אורן, ראה תשובה במייל.

הוסף תגובה !

נא לא לשאול שאלות שלא קשורות לפוסט, זהו לא פורום תמיכה. לבעיות אישיות ונושאים מורכבים אפשר ליצור איתי קשר.

תגיות HTML מורשות לשימוש:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>