אם נדפדף ב ספריית ערכות נושא של וורדפרס, רוב הנושאים מציגים תמונות שער. זוהי תכונה בביקוש פופולרי. מגמת עמוד השער נכון אפילו ב ספריית ערכות לחסום גם צילומי מסך.
הבה נבחן את הדוגמה הבאה מ עשרים ועשרים (נושא קלאסי) הכולל א תבנית כריכה שניתן להשתמש בהם כדי להציג הן בפוסט בודד והן בעמוד, כאשר התמונה המוצגת של הפוסט מוצגת בחלק העליון הנמתח על פני מסך הדפדפן, עם כותרת הפוסט ומטא נתונים רצויים נוספים למטה. תבניות כיסוי מאפשרות ליצור תוכן הבולט מהאילוצים המסורתיים של הצגת תוכן.
יצירת תבניות כיסוי דורשת כרגע כתיבת קוד PHP כפי שנלכד כאן ב Twenty Twenty תבנית ברירת המחדל של ערכת הנושא. אם נסתכל על template-parts/content-cover.php קובץ, הוא מכיל את קוד להצגת תוכן כאשר cover-template משמש.
לפיכך, לא ניתן ליצור דף שער מותאם אם אין לך ידע מעמיק ב-PHP. עבור משתמשי וורדפרס רגילים רבים, האפשרות היחידה היא להשתמש בתוסף כמו UI Custom Post Type כמתואר ב הסרטון הקצר הזה.
כיסוי קטעים בנושאי בלוקים
השאלה היא איך? וורדפרס 5.8, מחברי נושאים יכולים ליצור תבניות מותאמות אישית (כמו פוסט בודד, מחבר, קטגוריה ואחרים) עם מדור גיבורים מובילים באמצעות עורך חסימות בלוק כיסוי ומצורף לנושאים שלהם עם קוד מינימלי או ללא קוד.
לפני שצולל לאופן שבו נוצרים קטעי כריכה גדולים עליונים בתבניות של ערכות נושא, הבה נסתכל בקצרה על שני נושאי הבלוק עשרים עשרים ושתיים ו וואבי מאת ריץ' תבור (סקירה מלאה כאן).
מאחורי הקלעים, Twenty Twenty-Two מיישמת כותרת גדולה על ידי הוספת תמונה נסתרת המאוחסנת כתבנית ב header-dark-large חלקים. בעוד שבנושא Wabi, צבע הרקע הגדול של הכותרת בפוסט בודד מיושם עם צבעי רקע מבטאים ובלוק מרווח בגובה 50 פיקסלים (שורות: 5-9). צבעי המבטא מנוהלים על ידי assets/js/accent-colors.js קובץ.
רבים אחרים בחרו ליצור קטע כיסוי עליון באמצעות שימוש בלוק כיסוי, שאפשרה למשתמשים לשנות את צבע הרקע ולהוסיף תמונה סטטית מספריית המדיה או להעלות ממכשירי מדיה - מבלי לכתוב שום קוד. עם גישה זו, תמונות מה- פרסם בלוק תמונה מוצג היה צורך להוסיף ידנית לכל פוסט בודד אם רצית שהפוסט מוצג כתמונת רקע בפוסטים בודדים.
בלוקים של כיסוי עם תמונה דינמית של פוסט מוצג
וורדפרס 6.0 זמינה עוד מגניב בלוקים של כיסוי תמונה מוצגים תכונה, המאפשרת שימוש בתמונה המוצגת של כל פוסט או עמוד כתמונת רקע בבלוק השער.
בהמשך סרטון קצר, מהנדסי Automattic דנים בהוספת תמונות מוצגות לכיסוי בלוקים עם דוגמה ממנה ארכיאו נושא:
ניתן להתאים יותר את בלוק התמונה כולל בלוק התמונה המוצגת באמצעות duotone צבע פנימה theme.json כפי שנדון בקצרה זו חיבור הנקודות סרטון יוטיוב (אן מקארתי של אוטומטטיק).
השתמש בדוגמאות למקרים (Wei, מצב בהיר)
אם נדפדף בתמונות הממוזערות ב- ספריית ערכות לחסום, אנו רואים שרובם כוללים קטעי כותרות גדולים של כריכה. אם נחפור בקבצי התבניות שלהם, הם עושים שימוש בלוקי כיסוי עם רקע תמונה סטטי.
כמה ערכות נושא שפותחו לאחרונה משתמשות בלוקים של כיסוי עם רקע תמונה דינמי בפוסט (למשל, Archeo, Wei, Frost, Bright Mode וכו'). סקירה קצרה של התכונה החדשה זמינה ב סרטון GitHub הקצר הזה.
שילוב של צבעי מבטא דינמיים תכונות של וואבי נושא עם כריכה ופוסטים עם בלוקים של תמונה, Rich Tabor מרחיב עוד יותר את היצירתיות שלו בחדש שלו ווים נושא (סקירה מלאה זמינה כאן) כדי להציג תמונות שער דינמיות מפוסט בודד.
בפוסט ההכרזה שלו ווי, כותב תבור עשיר: "מאחורי הקלעים, ה single.html התבנית משתמשת בלוק כיסוי שממנף את התמונה המוצגת של הפוסט. אז הדואוטון מוחל על ידי ערכת הצבעים שהוקצתה לפוסט. בדרך זו, כמעט כל תמונה תיראה בסדר".
אם תרצה לחפור עמוק יותר לתוך בלוק הכותרות של ערכת הנושא Wei וללמוד כיצד ליצור משלך, הנה סרטון קצר החל מ- פרנק קליין (קורסי פיתוח WP) שמסביר שלב אחר שלב כיצד הוא נוצר.
בדומה לנושא Wei, בריאן גרדנר גם עושה שימוש בבלוק כיסוי עם בלוק תמונה מוצגת לאחרונה שלו מצב מואר ערכת נושא להצגת תוכן בולט צבעים מרהיבים.
בריאן אמר ל-WPTavern: "הוא הכי אוהב שהנושא הוא הדרך שבה משתמשים ב-Cover Block עמודים בודדים. הוא מושך את התמונה המוצגת לתוך בלוק הכיסוי ומציע גם סגנונות בלוק מותאמים אישית עבור צללים ואפשרויות בגובה מלא. […] אני מרגיש כאילו זה באמת מציג את מה שאפשר עם וורדפרס מודרנית."
לפרטים נוספים, הנה זה אתר הדגמה ו סקירה מלאה של נושא ה-Bright Mode של בריאן.
עיצוב פריסות מורכבות עם עורך בלוקים
לאחרונה השיקה וורדפרס עורך בלוק חדש מעוצב דף הבית של הנחיתה וכן להוריד דף. ההכרזה משך תגובות מעורבות מקוראיו, כולל מ מאט Mullenweg (אוטומטי) שהגיב על 33 הימים שלוקחים לעצב ולהשיק "עמוד פשוט" שכזה. אתה יכול למצוא דיונים נוספים מאחורי הקלעים כאן.
בתגובה, ג'יימי מרסלנד מפוטלפרס יצר הסרטון הזה ביוטיוב שבו הוא משחזר דף בית כמעט זהה תוך כמעט 20 דקות.
תגובה על סרטון מרסלנד, כותבת שרה גודינג מ-WP Travern: "הוא מה שאפשר לתאר כמשתמש כוחני עם עורך הבלוק. הוא יכול לערבב במהירות שורות, עמודות וקבוצות מסביב, להתאים את הריפוד והשוליים לפי הצורך, ולהקצות לכל חלק את הצבע המתאים לעיצוב. בשלב זה, זה לא משהו שרוב משתמשי וורדפרס ממוצעים יכולים לעשות."
למרות שעורך הבלוקים עבר כברת דרך, יש עדיין נקודות כאב שהולכות וגדלות לרוב מפתחי ערכות הנושא ולמשתמשים רגילים ליצור ולעצב איתו פריסות מורכבות.
הוספת שיפור לבלוקים של TT2 Gopher
בחלק זה, אני אדריך אותך כיצד הוספתי שיפורים ל- נושא TT2 Gopher Blocks שהתייחסתי אליו במאמר הקודם שלי. בהשראת בלוקי כריכה מתוך נושאים שתיארתי קודם לכן, רציתי להוסיף שלוש תבניות כריכה (מחבר, קטגוריה וכריכה בודדת) לנושא.
בעת גלישה באתרים, אנו מבחינים בשני סוגים של כותרות כריכה. הכותרת הנצפית בעיקר היא קטע הכריכה המשולב עם כותרת האתר (כותרת האתר וניווט העליון) לתוך בלוק הכריכה (לדוגמה, Twenty Twenty, Twenty Twenty-Two, Wei, Wabi, Frost, Bright Mode וכו'). אנו מוצאים גם קטע כיסוי כותרת שאינו מעורבב עם כותרת האתר וממוקם ממש מתחת, כגון זה העתיד של ה- BBC אתר אינטרנט. עבור נושא בלוקים של TT2 Gopher, בחרתי באחרון.
יצירת דפוסי כותרות של כריכה
ראשית, בואו ניצור דפוסי כותרות כריכה עבור תבניות מחבר, יחיד ואחרות (קטגוריות, תגיות) באמצעות בלוקי כריכה. לאחר מכן נמיר אותם לדפוסים (כפי שמתואר כאן בעבר) וקרא לתבניות את דפוסי כיסוי הכותרת המתואמים.
אם אתה מכיר את העבודה עם עורך הבלוקים, עצב את קטע הכותרות שלך באמצעות בלוקים של כיסוי בעורך האתר ולאחר מכן המר את קוד הכותרת של השער לתבניות. עם זאת, אם אינך מכיר את עורך FSE, הדרך הקלה ביותר היא להעתיק דפוסים מה- ספריית דפוסים בפוסט, בצע את השינויים הדרושים והמיר אותו לדפוס.
בי מאמר CSS-Tricks קודם, דנתי בפירוט על יצירה ושימוש בדפוסי בלוקים. להלן סקירה קצרה של זרימת העבודה שבה אני משתמש כדי ליצור את תבנית הכותרת של הכריכה הבודדת:
דפוס כותרת כותרת של עמוד בודד
שלב 1: באמצעות ממשק FSE, בואו ניצור קובץ חדש ריק ונתחיל את מבנה אבני הבניין כפי שמוצג בחלונית השמאלית.
לחלופין, ניתן לעשות זאת בפוסט או בדף תחילה, ולאחר מכן להעתיק ולהדביק את הסימון בקובץ דפוס, מאוחר יותר.
שלב 2: לאחר מכן, כדי להסתיר את הסימון שלמעלה לתבנית, ראשית עלינו להעתיק את סימון הקוד שלו ולהדביק אותו בתבנית חדשה /patterns/header-single-cover.php בעורך הקוד שלנו. אנחנו צריכים גם להוסיף סימון כותרות של קובץ דפוס נדרש (למשל, כותרת, שבלול, קטגוריות, מוסיף וכו').
הנה כל הקוד של /patterns/header-single-cover.php קובץ:
|
How To Customize WordPress Block Theme Cover Templates with Dynamic Post Feature Images
שלב 3: להדגמה הזו השתמשתי תמונה זו מתוך ספריית התמונות כתמונת רקע מילוי, והחל את חצות צבע דואוטון. כדי להשתמש בתמונה מוצגת בפוסט באופן דינמי, עלינו להוסיף "useFeaturedImage":true בבלוק הכיסוי על ידי החלפת קישור תמונת המילוי לעיל ממש לפני ה- "dimRatio":50 כך שהשורה 10 צריכה להיראות כך:
לחלופין, ניתן לשנות את תמונת המילוי על ידי לחיצה חלף ובחירה השתמש בתמונה מוצגת אפשרות:
כעת, דפוסי כריכת הכותרת אמורים להיות גלויים בחלונית הוספת התבניות לשימוש בכל מקום בתבניות, בפוסטים ובדפים.
כותרות כריכת ארכיון
קיבל השראה מ הפוסט הזה של WP Tavern והדרכה שלב אחר שלב ליצירת כותרת תבנית מחבר, רציתי ליצור כותרת כריכה דומה ולהוסיף גם לנושא TT2 Gopher.
ראשית, בואו ניצור את תבנית הכותרת של כריכת הארכיון עבור author.html גם את התבנית, בעקבות זרימת העבודה לעיל. במקרה זה, אני יוצר את זה בדף ריק חדש, על ידי הוספת בלוקים (כפי שמוצג להלן בתצוגת רשימה):
ברקע לכריכה, השתמשתי באותה תמונה המשמשת בכריכת הכותרת הבודדת.
מכיוון שברצוננו להציג ביוגרפיה קצרה של מחבר על בלוק המחבר, יש להוסיף גם הצהרה ביוגרפית לדף פרופיל המשתמש, אחרת יוצג רווח ריק בחזית.
להלן קוד הסימון של header-author-cover, שנשתמש בתבנית, בשלב הבא:
Published by:
כדי להסתיר את הסימון לתוך א header-author-cover דפוס, עלינו להוסיף את סימון כותרת קובץ הדפוס הנדרש כפי שתואר קודם לכן. על ידי עריכת ה header-author-cover.php דפוס, נוכל ליצור כיסויי כותרות דומים עבור תגים, טקסונומיה ותבניות מותאמות אישית אחרות.
אל האני header-category-cover.php דפוס עבורי category.html התבנית זמינה ב-GitHub.
יצירת תבניות עם בלוקים של כיסוי כותרות
וורדפרס 6.0 ואת האחרון גוטנברג 13.7 תכונות מורחבות של יצירת תבניות לתוך עורך הבלוק, ובכך מאפשרת למשתמשי וורדפרס רבים, ללא ידע מעמיק בקידוד, ליצור את התבניות המותאמות אישית שלהם.
למידע מפורט יותר ומקרי שימוש, הנה א הערת התאמה אישית יסודית מאת ג'סטין טדלוק.
עורך בלוק מאפשר יצירת סוגים שונים של תבניות, כולל תבניות כריכה. בואו נסקור בקצרה את אופן השילוב בלוק כיסוי ו פרסם בלוק תמונה מוצג עם תבנית חדשה ממשק המשתמש מקל על יצירת סוגים שונים של תבניות כיסוי מותאמות אישית אפילו ללא כישורי קידוד או נמוכים.
יצירת תבניות נעשתה הרבה יותר קלה עם Gutenberg 13.7. כיצד ליצור תבניות בלוק עם קודים ו בעורך האתר מתואר ב מדריך נושאים וגם המאמר הקודם שלי.
תבנית מחבר עם בלוק כריכה
סימון עליון (סעיף כותרת) של ה author.html התבנית מוצגת להלן (שורה 6):
...
...
...
... להלן צילומי מסך של כותרות שער עבור author.html ו category.html תבניות:
כל קוד עבור שתי התבניות זמין ב-GitHub.
עמוד בודד עם בלוק כיסוי
כדי להציג בלוק כיסוי בפוסט היחיד שלנו, עלינו להתקשר ל- header-cover-single pattern מתחת לקטע הכותרת (שורה 3):
....
....
....להלן צילום מסך המציג את התצוגה הקדמית של הפוסט היחיד עם קטע כריכת הכותרת:
כל single-cover.html התבנית זמינה ב-GitHub.
תוכל למצוא הדרכות הדרכה נוספות שלב אחר שלב ליצירת א מדור פוסט כותרת גיבור ו באמצעות בלוקים של כיסוי רקע של תמונה מוצגת on טברנה WP ו עריכת אתר מלאה אתר אינטרנט.
הנה לך!
משאבים מועילים
בלוק עטיפת תמונה מוצג
הודעות בלוגים
למרות שהנושאים הבלוקים, באופן כללי, כן מקבל הרבה דחיפות מחברי קהילת וורדפרס, לדעתי, הם העתיד של וורדפרס, גם. עם ערכות נושא בלוק, מחברי נושא חובבים, ללא כישורי קידוד עמוקים ושליטה בשפות PHP ו-JavaScript, יכולים כעת ליצור ערכות נושא עם פריסות מורכבות עם קטע כיסוי גיבור כמתואר במאמר זה בשילוב עם דפוסי ו וריאציות בסגנון.
כמשתמש מוקדם של גוטנברג, לא יכולתי להתרגש יותר מכלי העיצוב החדשים כמו צור נושא לחסום תוסף ואחרים המאפשרים למחברי נושא להשיג את הדברים הבאים ישירות מממשק המשתמש של עורך החסימה מבלי לכתוב קוד כלשהו:
- (I) לִיצוֹר
- (ii) להחליף קובצי ערכת נושא ולייצא
- (iii) ליצור נושא ריק או צאצא, וכן
- (iv) לשנות ולשמור וריאציה בסגנון של הנושא הנוכחי
בנוסף, האיטרציות האחרונות של תוסף גוטנברג מאפשרות הפעלה טיפוגרפיה נוזלית ו יישור פריסה ופקדים סגנוניים אחרים באמצעות רק theme.json קובץ ללא JavaScript ושורה של כללי CSS.
תודה שקראת ושתף את ההערות והמחשבות שלך למטה!
