כיצד להרכיב נושא נייד ראשון, נושא וורדפרס מונחה ביצועים [חלק 2]

אם תגלול למטה כדי לראות מה יש כאן בחנות, יתכן שאתה תוהה מה קרה לנקודות 1-5.


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

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

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

לחלק 1, ראה כאן: כיצד להרכיב נושא נייד ראשון, מונחה ביצועים וורדפרס [חלק 1]

6. עיצוב לכל הדפדפנים הניידים

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

לכן, כאשר אתה עובד על הנושא שלך, הקפד לזכור את הדברים הבאים:

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

7. ענייני UX

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

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

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

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

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

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

8. פחות זה יותר

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

הנה מה שאתה יכול לעשות כדי להשיג יותר בפחות:

  • השאירו פחות מקום לאלמנטים של מיתוג. מקום מסוים בלוגו האתר חשוב, זה ברור. עם זאת, זה עדיין לא חשוב כמו התוכן בפועל, לכן הקפד לא לאפשר ללוגו לתפוס את רוב השטח שמעל לקפל.
  • הציגו תפריטים נגישים. תפריטים היו תמיד בעיה בנייד. מצד אחד אתרי אינטרנט זקוקים לתפריטים. אך מצד שני, אפילו תפריט קצר (שיש בו רק ארבעה פריטים לערך) יכול להשתמש בקלות בשתי שורות טקסט ברוב המכשירים הניידים, מה שדוחף את התוכן בהמשך הדף. הנה מה שאתה יכול לעשות כדי לפתור את זה: (1) להציג את התפריט בדרך כלל אם הוא מתאים לשורת טקסט בודדת, (2) להפוך אותו לתפריט נפתח אם הוא לא.
  • היפטר מתפריטים לא חשובים. אני מסתכן באומרו שרוב הזמן, תפריט הכותרת התחתונה אינו מביא ערך למבקר הנייד. בשולחן העבודה זה משמש כסוג של תפריט תפוס הכול בו המבקרים יכולים למצוא קישורים לכל הדפים האחרים, אך בנייד אין כמעט סיבה שמישהו ישתמש בו. שקול להיפטר ממנו לחלוטין כאשר הנושא שלך נצפה בנייד.
  • היזהר עם תכונות נוספות באתר. יש אינספור אפשרויות בכל הקשור להכנסת תכונות מותאמות אישית בעיצוב חדש של WordPress. אתה יכול ליישם דברים כמו מחוון תמונות, שילוב מדיה חברתית, גלריות בהתאמה אישית ורבים אחרים. אבל אתה צריך? למרות שהרעיונות לתכונות האלה כולם נהדרים, הם יכולים לגרום לבעיות מסוימות למשתמשים בנייד. אם ברצונך לוודא שהנושא שלך עובד כמו שצריך ברוב הפלטפורמות, השתמש במקור הטבעי wp_is_mobile () פונקציה. זה יאפשר לך להבדיל בין מבקרים לנייד ולמחשבים שולחניים, כך שתוכל לפשט את הממשק של הראשונים בכדי למנוע בעיות.

9. טען רק את הקבצים הדרושים

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

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

מודרניזר

אבל מודרניזר לא יהיה הפיתרון לכל דבר. להלן כמה הנחיות אחרות שכדאי לזכור:

  • ככלל, זכור לא לייבא ספריות אם אינן חיוניות לחלוטין לפונקציונליות של העיצוב. ככל שיש יותר ספריות וסקריפטים חיצוניים, כך יידרש זמן רב לטעון את האתר הסופי (במיוחד בנייד).
  • נסה תמיד לטעון קבצי JavaScript בסוף מבנה ה- HTML ולא בהתחלה.
  • לנסות ל צמצם את מספר רכיבי ה- DOM מבנה ה- HTML שלך משתמש.
  • טען קבצי CSS ו- JavaScript עבור כל עמוד בנפרד. לדוגמה, אם יש לך קובץ CSS הנדרש רק בעמוד ספציפי אחד, השתמש בפונקציה is_page () בתוך הצהרה מותנית וסמן את הסגנון רק בדף זה..

10. בצע בדיקות מהירות בשרת מבחן

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

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

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

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

מהירות עמוד

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

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map