גולש בסלולרי? שדרוג יכולת הזיהוי של וורדפרס!

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

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

למה לא להשתמש בCSS?

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

אבל…

מה אם יש לנו סליידר ברוחב 1200 ובגובה 400… אפילו אם הגדרנו אותו שיהיה רספונסיבי (שהתמונה תתאים את עצמה למימדי המסך) הרי שאנחנו עדיין טוענים תמונות גדולות מאוד למסך קטן מאוד. נוכל לחסוך זמן טעינה רב אם נטען תמונה ברוחב 480 פיקסלים – כמעט 1/3 מרוחב התמונה המקורית וכך לחסוך המון זמן!

אנחנו לא יכולים (כמעט אף פעם) לעשות את החיסכון המשמעותי הנ"ל בזמן טעינה בעזרת CSS – בשביל לעשות זאת אנחנו צריכים לטעון מראש את התמונות הראשונות בעזרת התנייה בשפת PHP….

הפונקציה המובנית של וורדפרס wp_is_mobile

וורדפרס מגיעה עם פונקציה מובנית שבודקת אם אנחנו נמצאים במצב סלולרי / נייד… פונקציה זאת נקראת wp_is_mobile. פונקציה זאת עובדת בצורה כזאת – דוגמה של קוד:

if(wp_is_mobile()) {
	echo 'I am only visible on Mobile!';
}

הבעיה?!

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

משדרגים את היכולות של וורדפרס עם Mobble

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

לאחר שהתקנו את Mobble נוכל להשתמש בהתניות הבאות:

<?php
is_iphone();
is_ipad();
is_ipod();
is_android();
is_blackberry();
is_opera_mobile();
is_symbian();
is_kindle();
is_windows_mobile();
is_motorola();
is_samsung();
is_samsung_tablet();
is_sony_ericsson();
is_nintendo();
?>

מעולה!

מעתה נוכל לבצע התניות עבור מכשירים סלולריים ואפילו מכשירים סלולריים שונים. במקום להחביא אלמנטים עם CSS לא לטעון אותם מראש וכך לחסוך זמן טעינה יקר ולהאיץ את האתר הסלולרי שלנו בקלות ובצורה משמעותית.

תוסף Mobble באתר וורדפרס

שימושי נכון? מקווה שאהבתם!

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

נפגש במדריך הבא, שגיב SEO.