דף הבית » טריקים וטיפים

הוספת גדלים נוספים של סמל אתר

23 באוגוסט 2015 | מאת רמי | אין תגובות | תגיות: , ,

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

הגדרת סמל אתר בוורדפרס 4.3

הגדרת סמל אתר בוורדפרס 4.3

רקע

בעבר נדרשנו להשתמש בתוספים חיצוניים כדי להוסיף לאתר התגיות meta עבור favicon, עבור apple-touch-icon-precomposed, ושאר השירותים. החל מגרסה 4.3 ניתן להגדיר תמונה שתשמש כסמל של האתר – זו פונקציונאליות פנימית של וורדפרס!

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

בעיה

הבעיה היא שהמערכת מייצרת ארבע גדלים סטנדרטיים בלבד:

  • 32×32 פיקסלים עבור favicon סטנדרטי.
  • 192×192 פיקסלים עבור favicon מוגדל.
  • 180×180 פיקסלים עבור apple-touch-icon-precomposed
  • 270×270 פיקסלים עבור msapplication-TileImage

הקוד המופק עבורם הוא:

<link rel="icon" href="..." sizes="32x32" />
<link rel="icon" href="..." sizes="192x192" />
<link rel="apple-touch-icon-precomposed" href="...">
<meta name="msapplication-TileImage" content="...">

נשאלת השאלה, איך להוסיף גדלים נוספים ותגיות meta נוספות?

פתרון

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

בואו נוסיף סמל חדש בגודל 128×128 פיקסלים:

// Set new sizes
function custom_new_site_icon_size( $sizes ) {
    $sizes[] = 128;
    return $sizes;
}
add_filter( 'site_icon_image_sizes', 'custom_new_site_icon_size' );

ועכשיו בואו נגדיר תגית meta כמו favicon רגיל שתשמש את הסמל בגודל החדש שהגדרנו:

// Set new tags
function custom_new_site_icon_tag( $meta_tags ) {
    $meta_tags[] = sprintf(
        '<link rel="icon" href="%s" sizes="128x128" />',
        esc_url( get_site_icon_url( null, 128 ) )
    );
    return $meta_tags;
}
add_filter( 'site_icon_meta_tags', 'custom_new_site_icon_tag' );

פשוט ביותר! כל אחד יכול לעשות את זה.

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

מאת רמי

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

הוסף תגובה !

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

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