דף הבית » חדשות ועדכונים, טריקים וטיפים

החשיבות של המשתנה content_width

16 בדצמבר 2012 | מאת רמי | 9 תגובות | תגיות: , ,

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

מידות מרביות להטמעה

מידות מרביות להטמעה

הבעיה בוורדפרס 3.5

הבעיה דווחה לראשונה בבלוג wpBegginer ששם לב שהסרטונים המוטמעים שלו קטנים מבעבר. מאחר ולא ניתן להגדיר רוחב מרבי של סרטונים מוטמעים, הוא הציע פתרון פשוט – להגדיר את המשתנה $content_width בקובץ functions.php בערכת העיצוב, באופן הבא:

if ( ! isset( $content_width ) ) $content_width = 600;

מטרת content_width

מטרתו של המשתנה $content_width להגדיר את הרוחב המקסימלי של אזור התוכן בערכת העיצוב שלכם כדי שתמונות וסרטונים מוטמעים לא יחרגו ממנו. המשתנה הזה נמצא בקובץ הפונקציות בכל ערכות העיצוב שמגיעות עם וורדפרס, Twenty Twelve, Twenty Eleven, Twenty Ten ואפילו Kubric ההיסטורית. מקור המשתנה בוורדפרס 2.6, אז היא נוספה לקובריק.

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

רוחב שונה בדפים שונים

אם ננתח את קובץ הפונקציות של תבנית ברירת המחדל החדשה Twenty Twelve נוכל ללמוד ממנה טריק חדש להגדרת רוחב שונה לדפים שונים בעזרת הקוד הבא:

if ( ! isset( $content_width ) )
    $content_width = 625;

function twentytwelve_content_width() {
    if ( is_page_template( 'page-templates/full-width.php' ) || is_attachment() || ! is_active_sidebar( 'sidebar-1' ) ) {
        global $content_width;
        $content_width = 960;
    }
}
add_action( 'template_redirect', 'twentytwelve_content_width' );

הקוד בעצם מגדיר רוחב של 625 פיקסלים לעמודי התוכן השונים באתר, ורוחב של 960 פיקסלים לתבנית-עמוד ברוחב מלא (full-width), לקבצי מדיה (attachments) ועמודים ללא סיידבר. דרך מאוד יצירתית, אם אתם שואלים אותי, להגדרת רוחב שונה בדפים שונים.

באותו אופן ניתן להשתמש בתנאים מותנים כדי להגדיר רוחב שונה לעמודים אחרים בערכת העיצוב. למשל, רוחב X לפוסטים, רוחב Y לעמודים, ורוחב Z לתכנים מסוג "סרט". ניתן אפילו להגדיר רוחב שונה לכל עמוד לפי מספר ה-ID שלו או פוסטים עם תגית/קטגוריה מסויימת ועוד. יש אינסוף אפשריות. תלוי בצרכים שלכם. אבל לדעתי מומלץ להגדיר רוחב שונה רק לסוגי פוסטים שונים, לא לרדת לרזולוציות נמוכות מדי. אפשרי, אבל אני לא ממליץ.

ומה יהיה בעתיד?

לפני כחצי שנה החלטתי לקחת את כל הנושא הזה שני שלבים קדימה ויצרתי טיקט (#21256) בשאיפה להפוך את המשתנה content_width למאפיין תבנית (Theme Feature). אשמח לשמוע את דעתכם.

מאת רמי

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

9 תגובות »

  • Ariel כותב :

    אני אוהב את הרעיון של Theme Feature
    אבל אני חושב שהכיוון הוא שהכל יעבוד לפי אחוזים (%) ולא לפי פיקסלים (pixel) בעיקר בגלל התבניות רספונסיב והתאמות לסוגי מסכים שונים.

    לכן, בשביל הטמעת סרטונים
    width:100%
    hight:auto
    יכול לתת מענה הכי טוב לכל עמוד באתר בצורה הכי נכונה.

    כאשר הפונקציה $content_width תהיה אחראית אך ורק על max-width של עמודת ה content

  • רמי כותב :

    אריאל, אני מסכים איתך, כל תחום עיצוב האתרים צועד (יותר נכון רץ) לכיוון האתרים הרספונסיביים. אבל בוורדפרס, ללא שימוש ב-$content_width עדיין יש בעיות עם סרטונים מוטמעים ותמונות רחבות מרוחב המסך.

    אני חושב שיעברו לפחות 3-4 שנים עד שהפרקטיקה תשיג את התאוריה, והמפתחים יבנו אתרים שמראש מותאמים לכל המסכים. זה יקח הרבה זמן. אתה זוכר כמה שנים לקח למפתחים לעבור להשתמש בקובץ CSS נפרד מה-HTML? היום זה טריביאלי אבל לא תמיד זה היה כך. אותו הדבר לגבי פרקטיקות SEO, פעם לא הכירו והיום כולם עושים.

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

  • אהרל'ה כותב :

    מסכים בהחלט עם אריאל.
    width:100%
    hight:auto
    יתנו את המענה הטוב ביותר.
    אני מקווה רמי שלא תמיד טומנים את הראש בחול 3-4 שנים 🙂

  • אורן כותב :

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

  • אברהם כותב :

    תודה. מסכים עם אריאל ועם אהרלה. האם יש אפשרות היום להגדיר את זה כך? באחוזים?

  • רמי כותב :

    לא, כיום $content_width מקבל ערך מספרי בפיקסלים בלבד.

  • רמי כותב :

    אברהם,

    בתבנית (function.php) מגדירים רוחב מקסימלי (ערך מספרי בפיקסלים) לשימוש של וורדפרס לצורך חישוב אוטומטי של הפרופורציות לסרטונים המוטמעים:

    if ( ! isset( $content_width ) )
        $content_width = 600;

    ובקובץ CSS מגדירים (באחוזים) את הרוחב המקסימלי של התמונות, באופן הבאה:

    .size-auto,
    .size-full,
    .size-large,
    .size-medium,
    .size-thumbnail {
        max-width: 100%;
        height: auto;
    }

    הוספתי לקודקס ערך חדש בנושא:

    http://codex.wordpress.org/Content_Width

  • אברהם כותב :

    תודה 🙂

  • דני כותב :

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

הוסף תגובה !

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

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