איך לעבוד עם גוטנברג וורדפרס (“העורך החדש”)

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

לניווט מהיר בתוך הפוסט:

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

קצת על עורך הפוסט גוטנברג וורדפרס

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

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

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

איך לעבוד עם גוטנבג וורדפרס

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

בגוף הפוסטים, בתפריט בצד שמאל, מופיעות שתי אפשרויות: “פוסט” ו”בלוק”.
בחירה ב”פוסט” תאפשר לערוך את המידע על הפוסט – קטגוריות, קישור, תאריך, תמונה ראשית ועוד;
בחירה ב”בלוק” תאפשר לערוך את הבלוק הספציפי.

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

ליצור בלוק חדש ולערוך אותו

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

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

סרגל עריכת בלוק

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

1. סוג הבלוק: מסביר מה סוג הבלוג שאני משתמשת בו. במקרה שלי השתמשתי ב-P, כלומר בפסקה רגילה, אבל זה עובד עם כל בלוק. לחיצה עליו תציע סוגים קרובים של בלוקים שאפשר להחליף אליהם. למשל להפוך את הטקסט בפסקה לכותרת, רשימה וכו’.
2. שש הנקודות ושני החצים מאפשרים להעביר את הבלוק ממקום למקום במאמר. שש הנקודות מאפשרים לגרור את הבלוק כל זמן שאתם מחזיקים את העכבר, החצים מאפשרים להעביר אותו למעלה ולמטה.
   טיפ: אם אתם רוצים להעביר כמה בלוקים (למשל כותרת ושתי פסקאות) – פשוט תסמנו את כולם עם העכבר כמו שאתם רגילים לבחור הרבה טקסט בוורד, ותגררו אותם כקבוצה.
3. חץ למטה: אפשרות להוסיף/לערוך את הטקסט והשורה שלכם
4. שלוש נקודות אופקיות: אפשרות לערוך את הבלוק: בין היתר לשכפל, להעתיק או להסיר את הבלוק

שלושת הבלוקים שישמשו אתכם הכי הרבה בכתיבת פוסטים

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

פסקה רגילה

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

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

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

תמונה

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

כותרת

שימו לב שברירת המחדל של הכותרת תהיה H2. בדרך כלל זה מה שתצטרכו. אל תגעו ב-H1. כותרת שמוגדרת H1 אמורה להופיע פעם אחת בכל מאמר – וזאת הכותרת הראשית שלו.
H2 יהיו תתי הכותרות שמתחת לכותרת הראשית. אם יש תתי-כותרות שקשורות ל-H2, הן יהיו H3.

טעות נפוצה לחשוב שH2 זאת תת הכותרת הראשונה, H3 היא השניה וכך הלאה. אפשר לתאר היררכיית כותרות כמו סעיף בחוזה:
H1 הוא סעיף 1
H2 יהיו סעיפים סעיף 1.1 ו-1.2
H3 הם סעיפים 1.1.1 ו-1.2.1
ההשוואה כמובן לא מדוייקת כי יש H1 אחד בכל מאמר, בניגוד לחוזה שמורכב מהרבה סעיפים, והדוגמה נועדה להסביר את העיקרון ההיררכי בלבד.

בגיף הזה אפשר לראות איך אני הופכת פסקה לכותרת מסוג H3:

עוד בלוקים נפוצים בגוטנברג

YouTube

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

רשימה

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

ציטוט

ציטוט מאפשר, ובכן, לצטט. למעוניינים, יש גם בלוק של “פסוק”

תחת “הוספת ציטטה…” כותבים את מראה המקום. אם תשימו לב – הפונט פה נטוי

טבלה

1) אחרי שהגדרנו את מספר השורות ואת מספר העמודות	2) אפשר להתחיל לעבוד
3) מומלץ לעבור על הגדרות הטבלה בבלוק	4) ותחת “הגדרות טבלה” להגדיר את תאי הטבלה ברוחב קבוע
5) המינוס בטבלה הוא שהיא לא מאוד רספונסיבית.	6) כלומר לא מאוד ידידותית לתצוגה בטלפון נייד

גלריה

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

תוספות בגוטנברג שמקלות עלינו כתיבת פוסטים

סרגל עריכת בלוק

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

ספירת מילים ותוים

מצד ימין, של התמונה באייקון i שמוקף בעיגול, אפשר לראות את ספירת המילים והתוים. כלל אצבע בקידום אתרים הוא שמאמר לא יכול להיות פחות מ-300 מילה, וגם 500 לא פעם זה גבולי. יש אתרים שלא יעלו מאמרים בני פחות מ-1,000 מילה. כמי שכתבה וערכה המון תוכן לאתרים, הכפתור הזה הוא תוספת מדהימה שעוזרת מאוד לחיים שלי.

תצוגת רשימה

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

קישורי עוגן

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

למתקדמים: להטמיע אלמנטור בפוסט בוורדפרס

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

את הסקשן החתיך הזה עיצבתי באמצעות אלמנטור. התוסף Elementor Blocks for Gutenberg איפשר לי להטמיע בתוך פוסט בוורדפרס איזה ווידג’ט, אזור או עמודה שבא לי.

אפשר לראות איך לשלב את גוטנברג ואלמנטור במדריך הזה, שנוצר על ידי אלמנטור עצמם:

גוטנברג וורדפרס: עורך הבלוקים האהוב עלי

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

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

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