לערוך את הגרסה לטלפון נייד

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

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

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

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

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

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

כדי להתאים את התנהגות הערימה, יש לבצע את השלבים הבאים:

1. יש לנווט אל מראה ← עורך מתוך לוח הבקרה של האתר.
2. יש לערוך את העמוד או התבנית המכילים את הבלוק שברצונך להתאים.
3. יש לפתוח את תצוגת רשימה ולבחור את הבלוק.
4. בהגדרות הבלוק, יש להפעיל או לכבות את "ערמה במכשיר נייד".

בלוקים עם ההגדרה "ערמה במכשיר נייד":

• עמודות
• מדיה וטקסט
• הפוסטים האחרונים מ-Instagram

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

כדי לאפשר גלישת שורות, יש לבצע את השלבים הבאים:

1. יש לנווט אל מראה ← עורך מתוך לוח הבקרה של האתר.
2. יש לערוך את העמוד או התבנית המכילים את הבלוק שברצונך להתאים.
3. יש לפתוח את תצוגת רשימה ולבחור את הבלוק.
4. בהגדרות הבלוק, יש להפעיל את "לאפשר גלישה למספר שורות".

בלוקים עם ההגדרה "לאפשר גלישה למספר שורות":

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

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

לשינוי טקסט מפיקסלים ליחידות יחסיות, יש לבצע את השלבים הבאים:

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

לבחור בין em לבין rem:

• em – גודל הטקסט משתנה ביחס לגורם המכיל שלו (מתאים לכיתובים, תוויות או טקסט בתוך בלוקים ספציפיים)
• rem – גודל הטקסט נשאר עקבי בכל האתר (מתאים לטקסט בגוף המסמך, לכותרות ולכפתורים)

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

סעיף זה במדריך מתייחס לאתרים שמנויים על התוכניות Premium‏, Business ו-Commerce ב-WordPress.com ועל התוכנית Pro (מדור קודם). באתרים בתוכנית החינמית או בתוכנית Personal, ניתן לשדרג את התוכנית כדי לגשת לאפשרות הזאת.

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

1. יש לערוך את העמוד, הפוסט או התבנית המכילים את הבלוק שברצונך להסתיר.
2. יש לבחור את הבלוק על ידי לחיצה עליו או בחירה בו בתצוגת רשימה.
3. בתוך הגדרות הבלוק, יש ללחוץ על מתקדם.
4. בתיבה "סיווג/י CSS נוספים", יש להזין hide-desktop או hide-mobile:

5. יש לנווט אל הגדרות CSS מותאמות אישית של האתר:
   • תבניות של בלוקים: 'מראה' ← 'עורך' ← 'סגנונות' ← ⋮ ← CSS נוסף
   • תבניות קלאסיות: מראה ← להתאים אישית ← CSS נוסף
6. יש להדביק את הקוד הבא וללחוץ על לשמור:

/* להסתיר אלמנטים במכשיר נייד*/
@media (רוחב מרבי: 768 פיקסלים) {
 .hide-mobile { display: none !important; }
}
/* להסתיר אלמנטים במחשב שולחני*/
@media (רוחב מינימלי: 769 פיקסלים) {
 .hide-desktop { display: none !important; }
}

יש להוסיף את קוד ה-CSS לאתר פעם אחת. לאחר מכן, אפשר להוסיף את הסיווג hide-mobile או hide-desktop לכל בלוק, וה-CSS יסתיר אותו באופן אוטומטי במכשיר שצוין.