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

להוסיף תמונה מוקטנת בגודל מותאם אישית

10 באוגוסט 2010 | מאת רמי | 4 תגובות | תגיות: , , , , ,

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

תמונת פוסט

תמונת פוסט

תמונות ברירת המחדל

כאשר מעלים תמונות לוורדפרס, התמונות נשמרות בשלושה גדלים – תמונה מוקטנת (thumbnail), תמונה בינונית (medium) ותמונה גדולה (large). כדי להשתמש בתמונות אלה בתבנית, נעזר בפונקציות הבאות:

/* Without Parameter (uses Thumbnail)  */
the_post_thumbnail();
/* With Parameter */
the_post_thumbnail( 'thumbnail' );
the_post_thumbnail( 'medium' );
the_post_thumbnail( 'large' );
/* Other resolutions */
the_post_thumbnail( array(100,100) );

לשינוי הפרופורציות של התמונות, ניכנס לתפריט הגדרות->מדיה:

בתפריט מדיה ניתן לשנות את הפרופורציות של התמונות.

בתפריט מדיה ניתן לשנות את הפרופורציות של התמונות.

שימו לב: אם ביום בהיר אחד החלטתם לשנות את הגדלים של התמונות, המערכת לא תשנה בעצמה את הכל התמונות הישנות שהועלו בעבר. כדי לעדכן גם את התמונות הישנות, מומלץ להשתמש בתוסף חיצוני – Regenerate Thumbnails. לא חובה, אבל מומלץ, כדי לשמור על תאימות לאחור.

תמונות ממוזערת בגודל מותאם אישית

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

add_image_size( 'category-thumb', 200, 200 );
add_image_size( 'hamepage-thumb', 150, 80, true );

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

כדי להשתמש בתמונות בתבנית, נעזר בפונקציות הבאות:

/* in category.php, tag.php or taxonomy.php  */
the_post_thumbnail( 'category-thumb' );
/* in home.php or index.php  */
the_post_thumbnail( 'hamepage-thumb' );

בהצלחה.

מאת רמי

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

4 תגובות »

  • אבי כותב :

    השאלה היא אחרת.

    למה וורדפרס מעלה 3 סוגי תמונות? א. זה תופס מקום בשרת ב. זה יוצר בלבול. האם אין אפשרות לבטל את שאר התמונות ורק תמונה אחת תעלה.?

  • רמי כותב :

    אבי,
    ראשית כל המערכת שומרת 4 העתקים על השרת. העתק ראשון הוא הקובץ המקורי + עוד 3 העתקים לפי המידות שהוגדרו. ואם אתה משתמש בעורך המדיה המובנה ומתקן את התמונה, זה יוצר עוד קבצי תמונה (אבל בעורך גם כפתור בעורך המדיה שמאפשר לחזור למקור לפני השינויים וזה מוחק את התמונות הנוספות שנערכו).

    לגבי שאלותייך:

    1. אתה יכול לקבוע מידות של 1×1 לכל הגדלים (בתפריט הגדרות->מדיה), ככה זה לא יתפוס הרבה מקום בשרת.

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

    3. אני לא בטוח לגבי ביטול של גדלים מסויימים, אבל אני אבדוק את זה בשבילך.

  • אריאל כותב :

    תודה רבה, פונקציה שימושית להפליא.
    אחלה אתר, פעם שמינית…

  • רמי כותב :

    תודה אריאל.

הוסף תגובה !

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

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