פרטי מדריך:
- קטגוריה:
- רמת קושי: משתמשים מתקדמים
- זמן ביצוע: 5 עד 10 דקות
שלום לכם לעוד מדריך שעוסק בוורדפרס בדרך כזאת או אחרת. היום אני רוצה להסביר איך אפשר לזהות את הדפדפן של הגולש ולמה זה חשוב. בעולם בו ישנם מגוון של דפדפנים פופולריים וכיום אפילו טלפונים ניידים, אייפדים ושאר טאבלטים חשוב להתאים את האתר שלכם לכמה שיותר דפדפנים וגם אני אשם בחטא זה כיוון שזמן רב אני רוצה להתאים את אתר שגיב SEO לאייפון ופשוט לא מצליח לפנות לכך זמן (וקצת מתעצל).
אם אתם כמוני כלומר מספקים שירותי בניית אתרי וורדפרס מעת לעת או אפילו בצורה עיקרית אתם יודעים בוודאי את הבעיות הקשות שאנו סובלים עם התאמה לדפדפנים השונים (הממ אינטרנט אקספלורר חרא!). זה נכון שישנם שיטות למיין את אינטרנט אקספלורר ולטעון בעבורו קובץ CSS שונה לחלוטין לצד הקובץ המקורי וכך לדרוס את הגדרות הCSS שעשינו עבור דפדפן אחר… את זה עושים בעזרת התניה שרק אינטרנט אקספלורר רואה בצורה כזאת..
<!–[if IE]> אותי רק אינטרנט אקספלורר רואה… <![endif]–>
השימוש העיקרי (בעיני) בקוד זה הוא כדי לטעון קובץ CSS נפרד מהקובץ Css הראשי של וורדפרס בצורה כזאת:
<!–[if IE]> <link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>/css/ie-only.css" /> <![endif]–>
החסרונות בשיטה זאת:
- איטי יותר – כל בקשת "טען לי קובץ" מאיטה את האתר
- מוגבל לדפדפן ספציפי והוא (בצדק) אינטרנט אקספלורר
- דורש מאיתנו להחזיק מספר קבצים פתוחים בזמן עריכה
- לוורדפרס יש פתרון טוב יותר בעבורנו! (ראו בהמשך)…
זיהוי דפדפן בצורה קלה באתר וורדפרס
אם יש לכם אתר וורדפרס או אתם בונים אתר וורדפרס בדיוק עכשיו ורוצים פתרון יש אחד והוא קל לביצוע! כל שאתם צריכים הוא להוסיף קוד קצר אל הFunctions.php שלכם ומעתה יתווסף אל תג הBody כקלאס בכל דף באתר שלכם את שם הדפדפן של המבקר לדוגמא <body class="ie"> או לדוגמה במקרה של פיירפוקס <body class="gecko"> אז איך עושים עושים את זה.
ניגשים לקוד
- מה: קוד שיוסיף לתג body כ-קלאס את סוג הדפדפן
- איפה: מוסיפים לקובץ functions.php
add_filter('body_class','browser_body_class');
function browser_body_class($classes) {
global $is_lynx, $is_gecko, $is_IE, $is_opera, $is_NS4, $is_safari, $is_chrome, $is_iphone;
if($is_lynx) $classes[] = 'lynx';
elseif($is_gecko) $classes[] = 'gecko';
elseif($is_opera) $classes[] = 'opera';
elseif($is_NS4) $classes[] = 'ns4';
elseif($is_safari) $classes[] = 'safari';
elseif($is_chrome) $classes[] = 'chrome';
elseif($is_IE) $classes[] = 'ie';
else $classes[] = 'unknown';
if($is_iphone) $classes[] = 'iphone';
return $classes;
}
מה קורה כאן?
רוצים להבין מה בדיוק עושה קוד זה? בואו נעבור על השורות בצורה פרטנית.
add_filter('body_class','browser_body_class');
שורה זאת קושרת את הפונקציה בשורות הבאות או ליתר דיוק את התוצר שלה אל הפילטר (המובנה של וורדפרס) שנקרא body_class. בצורה זאת אנו מדביקים לClass של תג הbody את הClass של הדפדפן / סוג הדפדפן… אם יש כבר Class הוא יתווסף אל הקיים בצורה כזאת body class="myClass ie".
function browser_body_class($classes)
בשורה זאת אנו יוצרים פונקציה בשם browser_body_class ומצהירים על הערך $classes כמשתנה ממנו נקבל ערך.
global $is_lynx, $is_gecko, $is_IE, $is_opera, $is_NS4, ....
בשורה זאת אנו קוראים ומצהירים על משתנים גלובלים של וורדפרס בהתאם לסוג הדפדפן שהגולש משתמש בו לשימוש מאוחר יותר בשורות הבאות בקוד.
בשורות הבאות אנו בודקים איזה סוג דפדפן אחד אחרי השני ואם הגענו לדפדפן הנכון מקצים עם השם של הדפדפן למשתנה $classes. בצורה כזאת תשלח הפונקציה את המשתנה הזה לClass של גוף הדף
והתוצאה
הנה דוגמה של הקוד אשר מופיע אם אני צופה באתר בעזרת מוזילה פיירפוקס. אם היית צופה באתר בעזרת אינטרנט אקספלורר היה מופיע התג ie דפדפן אופרה היה מוסיף את הקוד opera, דפדפן ספארי היה מוסיף את הקוד safari וכך הלאה על פי סוג הדפדפן'.
איך זה מתקשר לבניית אתרי וורדפרס וCSS?
אם אתם בונים אתרי וורדפרס אתם בוודאי צריכים לעשות מעת לעת הגדרות שונות בעבור דפדפנים שונים כדי להציג את האתר בצורה תקינה… בעזרת קוד זה תוכלו לשייך הגדרות CSS לפי סוג דפדפן.
לדוגמה:
.myDiv {padding: 10px;} || פיירפוקס .ie .myDiv {padding: 5px;} || אינטרנט אקספלורר
כפי שניתן לראות בעזרת הוספת שם הדפדפן כפי שהוא מוצג בפונקציה שהצגתי במדריך זה תוכלו להוסיף CSS מותאם פרטנית לסוג הדפדפן וכך לרכז את כל הגדרות העיצוב אל קובץ CSS אחד מסודר ולהגיש ללקוח אתר תקין אשר מותאם לכל סוגי הדפדפנים וגם לקצר את תהליך העבודה והטרחה.
דרך פשוטה ליצור CSS מותאם!
אין לכם מושג כמה פעמים חיפשתי דרכים לפתור בעיות תאימות (בעיקר עם אינטרנט אקספלורר ימח שמו!). מעתה אני כולל סניפט זה אל כל פרויקט בצורה מובנית וחוסך לעצמי זמן ומאמץ. אני מקווה שאהבתם, המון בהצלחה, שגיב SEO.
8 תגובות