האם אפשר לטרגט מכשיר מובייל לפי User agent באתרי וורדפרס?
במדריך זה אסביר כיצד:
פעמים רבות אנחנו רוצים להעלים פרטים או לשנות עיצוב של אלמנטים במכשירי מובייל בלבד. אחת הבעיות הנפוצות היא "לתפוס" ב -CSS את סוג המכשיר. בעיה נוספת היא שאנו מרבים לתת פקודות ב CSS לפי גדלי מסך, פעולה שהיא לא תמיד הדרך הנכונה והטובה.
אז איך מטרגטים מכשירי מובייל ב-CSS?
קודם כל, חשוב ליצור תבנית בת כך שבעזרתה נוכל לעדכן את התבנית ולשמור על השינויים שנעשו.
אחרי שייצרנו את תבנית הבת (בהמשך תוכלו לקרוא את המאמר שלנו שמסביר איך יוצרים תבנית בת)
נכנסים לקובץ functions.php
מדביקים בתחתית הקובץ את השורות הבאות:
// add class mobile/desktop to body
add_filter('body_class', 'device_class');
function device_class($classes) {
$device_class = wp_is_mobile() ? 'mobile' : 'desktop';
$classes[] = $device_class;
return $classes;
}
זהו, עכשיו תוכלו להכניס לקובץ ה CSS שלכם פקודות יעודיות למובייל, לדוגמה:
.mobile .logo {
text-align: center;
}
או שתוכלו לתת פקודות רק למחשב (desktop)
.desktop .logo {
text-align: center;
}
המדיך מתאים לכלל התבניות הבנויות לפי התקן של וורדפרס.
חשוב לציין: אם אתם עושים שימוש בתוספי קאש למיניהם – צריך לוודא שנוצר קאש נפרד למובייל.