פעמים רבות אני נתקל בשאלה כיצד לייצר נראות שונה לעמוד ספציפי באתר המותקן על וורדפרס. עד היום נתקלתי במספר רעיונות שהם פחות או יותר משחק על אותו הפיתרון ורובם ככולם הצריכו עבודה רבה למרות שניתן היה לעשות את זה בפשטות רבה.
על מה מדובר.
צריך להפריד פה למעשה בין שינויים מינוריים לבין שינויים גדולים שמצריכים בניה מחודשת של שלד הדף. אם מבנה ה XHTML של העמוד החדש שונה משמעותית מהעיצוב הכללי ככל הנראה המאמר הזה לא יעזור לכם. אבל, אם מדובר בשינויים קטנים לאובייקטים כגון – תמונת הדר שונה, רוחב שונה של העמודות, גדלים שונים של פונטים וכ' מאמר זה יעזור לכם רבות.
הפיתרון הנפוץ:
עד היום נתקלתי בשתי דרכים נפוצות. הראשונה, משתמש בנה עמוד XHTML שלם, הכניס לתוכו את תגיות ה PHP הרלוונטיות, יצר קובץ CSS נפרד ושמר כתבנית עמוד חדשה. כשהמשתמש נזקק למבנה שונה, הוא בחר את המבנה החדש והשתמש בו.
כאמור, זו שיטה מצויינת כשיש לנו עמוד שנראה שונה לחלוטין מהנראות הכללית של האתר, רוב הסיכויים שזו גם הדרך הנוחה באמת לעשות את זה.
אופציה אחרת, הנפוצה בעיקר כשעושים שינויים מינוריים עושה שימוש ב is_page_template כאשר תוצאה חיובית לבדיקה טוענת קובץ CSS שונה מהקובץ הראשי.
הפיתרון הנכון
מאז וורדפרס 2.8 נוספה למערכת הפונקציה body_class שמדפיסה אל הקוד שורה של מחלקות רלוונטיות המיצגות את העמוד, המשתמש וכיוצ"ב.
שימוש:
<body <?php body_class($class); ?>>
המשתנה class מחזיק מחרוזת או מערך עם מחלקות נוספות שאנחנו רוצים להוסיף (למשל, משתמשי YUI צריכים להכניס רשימת מחלקות משלהם).
התוצאה:
<body class="rtl single single-post postid-1981 single-format-standard chrome">
במקרה הספציפי, שלפתי את רשימת המחלקות מעמוד של פוסט. כפי שאפשר להבין מרשימת המחלקות מדובר בעמוד מיושר מימין לשמאל (rtl), זה עמוד של פוסט (single) שהמזהה שלו הו 1981 ( postid-1981). מידע נוסף שאפשר לקבל הוא שאני משתמש בדפדפן מסוג Chrome.
דוגמא אחרת:
<body class="home page page-id-26 page-template page-template-frontpage-php">
מה יש פה? אנחנו נמצאים בעמוד הבית (home) אבל עמוד הבית הוא בעצם עמוד ספציפי של וורדפרס (page-id-26) שמשתמש בתבנית עמוד (page-template). שם הקובץ של הטמפלט לצורך העיניין הוא frontpage.php (מתוך: page-template-frontpage-php).
אז מה אפשר לעשות עם זה.
נניח שאנחנו מעוניינים לשנות את ההגדרות הבאות מקובץ ה CSS שלנו:
body{font-size:12px;background:#ccc}
#header {background:url(images/header.png) no-repeat}
h1{font-size:1.4em; font-weight:bold;}
בשיטה הישנה, בדרך כלל היו יוצרים קובץ css חדש, וטוענים אותו בעזרת הבדיקה של is_page_template, אבל השימוש במחלקות המתווספות מקל עלינו את העבודה. לכן, ניצור תבנית עמוד חדשה, שלצורך הדוגמא תישמר כ test.php. לכן, כשאני אציג עמוד שמשתמש בדוגמת העמוד הזו תתוסף אל תגית ה body גם המחלקה page-template-test-php. עכשיו את כל ההתאמות ניתן לעשות בעזרת התיחסות לתגית הזו.
בכל מקום בו נוסיף body.page-template-test-php לפני הגדרות הכלל, אנחנו בעצם מציינים לדפדפן שיתיחס אל הכלל אך ורק במקרה שאנחנו נמצאים בעמוד המשתמש בתבנית הספציפית הזו.
body.page-template-test-php{font-size:14px;background:#c3c3c3}
body.page-template-test-php #header {background:url(images/big_header.png) no-repeat}
body.page-template-test-php h1{font-size:1.3em; font-weight:normal;}
זהו, התוספת של שלושת השורות הללו אל קובץ ה CSS תופעל אך ורק כשתיטען התבנית הרלוונטית והדפדפנים יתעלמו ממנה לחלוטין כאשר מדובר בעמודים אחרים.
מה עוד אפשר לעשות עם זה?
כפי שהראתי, התווספה מחלקה הנושאת את שם הדפדפן (chrome), התוספת הזו היא שינוי שהוכנס (למיטב ידיעתי) בגירסה 3.1 ומשמשת תחליף מצוין לפיתרון בעיות תאימות של דפדפנים.
כך אני יכול לכוון לשינויים המיועדים לכרום, לפיירפוקס (gecko) או אקספלורר (ie) או אפילו לאיפון (iphone).
#sidebar {width: 200px; padding:5px;}
#sidebar.ie{width:190px;padding:5px;}
כתיבת תגובה