ליצור אתר ידידותי למכשירים ניידים

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

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

כל התבניות שמוצעות ב-WordPress.com ריספונסיביות למכשירים ניידים, כלומר הן תוכננו להיראות טוב בדפדפנים שבמכשירים ניידים ובמחשבים שולחניים.

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

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

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

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

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

לאחר לחיצה על האפשרות 'להציג תצוגה מקדימה בלשונית חדשה', אפשר לראות את גרסת הנייד באמצעות הכלי Inspector (בדיקה) בדפדפן. כדי להשתמש במצב Inspect (בדיקה) בדפדפן שלך על מנת לראות תצוגה מקדימה של עמוד או פוסט בתצוגה של מכשיר נייד:

1. יש ללחוץ על הסמל של תצוגה מקדימה בפינה הימנית העליונה של עורך WordPress.
2. יש לבחור את האפשרות 'להציג תצוגה מקדימה בלשונית חדשה'.
3. יש ללחוץ לחיצה ימנית על עמוד התצוגה המקדימה וללחוץ על Inspect (ב-Chrome, ב-Firefox, ב-Edge) או על Inspect Element (בדיקת רכיב) (ב-Safari).
4. במצב Inspect (בדיקה) בדפדפן, יש ללחוץ על הסמל של המכשיר הנייד כדי להחליף את התצוגה לתצוגה במכשירים ניידים.

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

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

אם לתמונה יש טקסט שמעוצב בתמונה עצמה, ייתכן שהטקסט לא יוצג במלואו במסכים קטנים יותר, כך:

הבעיה הזאת נוצרת מאחר שטקסט שמעוצב בתוך תמונה אינו ריספונסיבי.

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

כדי לשפר את הריספונסיביות של גודל הגופנים בעמוד כמה שניתן, כדאי להשתמש ביחידות של em או rem במקום בפיקסלים (px). השימוש בפיקסלים לקביעת גודל הגופן מאלץ את הגודל הספציפי הזה על העמוד – כלומר הגופן תמיד יוצג בגודל המדויק הזה, לא משנה מהו גודל המסך. מנגד, ערכים של em ו-rem הם יחידות של גודל יחסי ואפשר להגדיל או להקטין אותם בהתאם למרחב שזמין במסך של הצופה.

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

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

ההגדרה 'סידור אנכי למכשירים ניידים' זמינה בבלוקים הבאים:

• הבלוק 'טורים'
• הבלוק 'מדיה וטקסט'
• להציג פוסטים מאינסטגרם

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

האפשרות 'לאפשר גלישת שורות' זמינה בהגדרות הפריסה של הבלוקים הבאים:

• הבלוק 'כפתורים'
• הבלוק 'כפתורי שיתוף'
• הבלוק 'ניווט'
• הבלוק 'אייקונים חברתיים'
• הבלוק 'תגובות'
• הבלוקים 'שורה' ו'ערימה'

התוסף Accelerated Mobile Pages (AMP)‎ הוא מסגרת של צד שלישי בקוד פתוח שמאפשרת יצירה של אתרים שנטענים באופן כמעט מיידי במכשירים ניידים, כדי להעניק למבקרים חוויית גלישה מהירה. כדי להוסיף את AMP לאתר שלך, אפשר להתקין את התוסף AMP. באתרים של WordPress.com שמאפשרים הפעלה של תוספים, ושנוצרו לפני 13 ביוני 2022, התוסף AMP הותקן כברירת מחדל.

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

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

אם האתר שלך משתמש ב-AMP כבר זמן רב, חשוב לזכור שהתוצאות ב-Google לא מתעדכנות באופן מיידי, והן ימשיכו להציג עמודי AMP גם לאחר ההשבתה. כדאי להגדיר הפניות עמוד לאחר השבתה של AMP. מנועי חיפוש יוסיפו את כתובת ה-URL של עמודי AMP, אבל יידרש זמן מה כדי להסיר את כתובות ה-URL האלה מרשימת התוצאות. לכן, מבקרים מסוימים שייכנסו לאתר מהמכשיר הנייד עלולים לראות עמוד עם שגיאת 404.

יש כמה תוספים פופולריים וחינמיים לניתוב מחדש שניתן לבחור. עליך להגדיר הפניה מחדש של 301 וכנראה להשתמש בביטוי של Regex שדומה לביטוי ‎/(.*)\/amp. אנחנו ממליצים לבצע בדיקות כדי לוודא שהגדרת את הניתוב מחדש בצורה תקינה, ולעיין במדריכי ההוראות של התוסף לניתוב מחדש.