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

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


ב- WordCamp Europe 2018, Matt Mullenweg הציב מפת דרכים מחוספסת עבור גוטנברג במהלך החודשים הקרובים. ביולי צפוי להיות דחיפה גדולה להגדיל את אימוץ גוטנברג, עם משחק בטא של 5.0 באוגוסט (או מעבר לכך; למעשה, כנראה מעבר). ייתכן שהאינטגרציה הממשמשת ובאה תוהה כיצד מפתחים וורדפרס מתכננים לבנות עבור גוטנברג.

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

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

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

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

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

שש דוגמאות לאיך התוספים הקיימים פונים למתג לגוטנברג

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

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

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

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

  • טפסים של נינג’ה
  • תן
  • WooCommerce

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

הדוגמה הידועה ביותר תהיה דומה ליוסט SEO. אינך מוסיף תוכן, אך כל המידע על תיבת המטא הוא חיוני.

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

1. Ninja Forms מוסיף בלוק גוטנברג חדש

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

אתה מכניס את החסימה כמו כל גוש גוטנברג אחר:

איך צורות הנינג'ה בונות עבור גוטנברג

לאחר מכן תוכל לבחור את הטופס שלך מהתפריט הנפתח:

טפסים נינג'ה חסום

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

תצוגה מקדימה של טופס

כרגע זה כל מה שיש. אבל זו גישה בסיסית מוצקה מכיוון ש:

  • זה מבטל את הצורך לעבוד ישירות עם קודי קיצור
  • אתה יכול לראות תצוגה מקדימה של העיצוב שלך בזמן שאתה עדיין עורך את הדף שלך

שני התוספים הבאים יבנו על זה עם כמה אפשרויות עיצוב / בקרה עמוקות יותר.

2. Give מוסיף שני בלוקים של גוטנברג עם אפשרויות פריסה

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

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

תן שני חסימות מאפשרים לך להטמיע:

  • טופס תרומה יחיד
  • רשת של טפסי תרומה

תן קוביות גוטנברג

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

  • בחר את הפורמט
  • הפעל / השבת את יעד התרומה
  • בחר היכן למקם תוכן

חסום אפשרויות פריסה

ואם תרחף מעל הטופס שלך, תקבל קישור ישיר לעריכה של טופס זה:

עריכת חסימות

אז יש מבט כיצד בלוקים יכולים להעמיק מעט יותר מההטמעה הנוכחית של Ninja Forms. אבל WooCommerce הולכת צעד אחד קדימה …

3. WooCommerce מוסיפה בלוק מוצרים עם בקרת עמודות

בעוד ש- WooCommerce ככל הנראה תוסיף אינטגרציות נוספות של גוטנברג ככל ש- WordPress 5.0 תתקרב יותר (חלקן רעיונות כיצד להוסיף מוצרים כאן), הקבוצה כבר טבלה את בהונותיהם בגוטנברג עם הגורם הרשמי תוסף לחסימת מוצרי WooCommerce גוטנברג.

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

כשאתה מוסיף את מוצרים חסום, אתה יכול לבחור אילו מוצרים להציג:

גושנברוק

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

שינוי פריסת Woocommerce בגוטנברג

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

4. ביבר בונה מוסיף א "המרת לביבר בונה" אפשרות

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

בונה בונה גוטנברג

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

5. תיבות מטה צריכות עדיין לעבוד – SEO של יוסט היא דוגמא טובה

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

כפי שאתה יכול לראות, תיבת המטא העיקרית של ה- Yoast SEO מגיעה ללא פגע עם גוטנברג:

Gutenberg yoast seo meta box

אבל אתה מחמיץ את ציוני ה- SEO וניתוח התוכן שהיו בעבר בסרגל הצד.

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

דגם באזהרת SEO
דגם Cyoast seo ניתוח תוכן

6. כיצד אנו מטפלים בתיבות מטא בסקירת מוצר WP

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

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

סקירת מוצר wp גוטנברג

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

סקירה של wp פרו גוטנברג

מפתחים – הנה משאב נהדר להכין את התוסף שלכם לגוטנברג

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

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

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

גוטנברג החדשה חוסמת הרבה

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

  • טבלאות תמחור
  • המלצות
  • חברי צוות
  • וכו.

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

אבני גוטנברג חדשות

יש כבר חבורה של תוספים אלה ב- WordPress.org. אך מעבר לתוסף Stackable שהוזכר לעיל, נראה כי הצעות פופולריות אחרות הן:

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

אני חושב שגישה נישה זו מעניינת במיוחד. אולי בעתיד נראה ערכות חסימות של גוטנברג המיועדות ל:

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

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

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

זה מקל על הגדרת שדות מותאמים אישית או קבוצות שדות המשויכות לסוג הודעה מותאם אישית מסוים:

שדות מותאמים אישית לעורך גוטנברג

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

דוגמה בשדה מותאם אישית של גוטנברג

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

שלוש דוגמאות לאופן בו מפתחים נושאים מתמודדים עם המעבר לגוטנברג

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

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

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

הנה כמה דוגמאות לצביעת התמונה …

1. הוספת סגנונות מותאמים אישית לעורך גוטנברג

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

לדוגמה, בדוק כיצד נושא אוחנה של ThemeShaper מרגיע לחלוטין את כל תוכן גוטנברג, כולל כותרת ההודעה:

סגנונות של לוח גוטנברג בלוח המחוונים

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

2. הוספת אפשרויות יישור חדשות ברוחב מלא

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

שוב, אתה יכול לראות זאת למעשה עם נושא אוחנה:

פריסה רחבה של גוטנברג

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

3. בניית תוכן הדגמת נושא בעזרת בלוקים – למשל נושא הבלוק

לבסוף, גישה זו של ערכות נושא אורגניות די מגניבה:

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

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

מעבר לעיצוב ה- Block, לעיצוב Array יש גם נושא נושא בלוקים אטומיים זה תוכנן במיוחד כדי להשתלב עם התוסף ‘בלוקים אטומיים’ שהוזכר לעיל.

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

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

בהחלט יבואו דברים מגניבים יותר

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

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

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

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

עכשיו תגיע אליך – האם נתקלת בכל דוגמאות נהדרות לכך שכותבי תוסף או נושא מוצאים דרכים מעניינות לבנות עבור גוטנברג? נודיע בתגובות!

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

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