إذا تصفحنا ملف وورد موضوع الدليل، تعرض غالبية الموضوعات صور الغلاف. إنها ميزة في الطلب الشعبي. اتجاه صفحة الغلاف صحيح حتى في دليل موضوع كتلة لقطات كذلك.
لنفكر في المثال التالي من عشرون وعشرون (موضوع كلاسيكي) يتضمن ملف قالب الغلاف يمكن استخدامها للعرض في كلٍ من منشور واحد وصفحة ، حيث يتم عرض الصورة المميزة للمنشور في الجزء العلوي والتي تمتد عبر شاشة المتصفح ، مع عنوان المنشور والبيانات الوصفية الأخرى المطلوبة أدناه. تسمح قوالب الغلاف بإنشاء محتوى متميز عن القيود التقليدية لعرض المحتوى.
يتطلب إنشاء قوالب الغلاف حاليًا كتابة كود PHP كما تم التقاطه هنا في ملف قالب غلاف قالب Twenty Twenty الافتراضي. إذا نظرنا إلى template-parts/content-cover.php يحتوي على ملف الكود لعرض المحتوى عندما يكون ملف cover-template .
وبالتالي ، لا يمكن إنشاء صفحة غلاف مخصصة إذا لم تكن لديك معرفة عميقة بلغة PHP. بالنسبة للعديد من مستخدمي WordPress العاديين ، فإن الخيار الوحيد هو استخدام البرنامج المساعد مثل Custom Post Type UI كما هو موضح في هذا الفيديو القصير.
أقسام الغلاف في قوالب الكتلة
منذ وورد 5.8، يمكن لمؤلفي السمات إنشاء قوالب مخصصة (مثل المنشور الفردي ، والمؤلف ، والفئة ، وغيرها) باستخدام قسم الأبطال الأعلى محرر كتلة كتلة الغلاف ومجمعة في موضوعاتها باستخدام رمز بسيط أو بدون رمز.
قبل التعمق في كيفية إنشاء أقسام الغلاف الكبيرة في قوالب قوالب القوالب ، دعنا نلقي نظرة سريعة على نسقَي الكتلتين اثنان وعشرون و وابي بواسطة ريتش تابور (مراجعة كاملة هنا).
وراء الكواليس ، تنفذ Twenty-Two رأسًا كبيرًا بواسطة إضافة صورة مخفية مخزنة كنمط في ال header-dark-large القطع. بينما ، في نسق Wabi ، يتم تنفيذ لون خلفية الرأس الكبير في منشور واحد باستخدام تمييز ألوان الخلفية وكتلة فاصل ارتفاع 50 بكسل (الأسطر: 5-9). تتم إدارة ألوان التمييز بواسطة assets/js/accent-colors.js ملف.
اختار العديد من الأشخاص الآخرين إنشاء قسم غلاف علوي باستخدام كتلة الغطاء، مما سمح للمستخدمين بتغيير لون الخلفية وإضافة صورة ثابتة من مكتبة الوسائط أو تحميلها من أجهزة الوسائط - دون كتابة أي كود. مع هذا النهج ، الصور من نشر كتلة مميزة من الصور يجب إضافته يدويًا إلى كل منشور فردي إذا كنت ترغب في الحصول على صورة مميزة للمنشور كصورة خلفية في منشورات فردية.
كتل الغلاف مع مشاركة ديناميكية صورة مميزة
أتاح WordPress 6.0 أمرًا رائعًا آخر مميزة كتل غلاف الصورة الميزة التي تسمح باستخدام الصورة المميزة لأي منشور أو صفحة كصورة خلفية في قالب الغلاف.
في ما يلي فيديو قصير، يناقش مهندسو Automattic إضافة صور مميزة لتغطية الكتل مع مثال من أركايو موضوع:
يمكن تخصيص كتلة الصورة بما في ذلك كتلة الصورة المميزة للنشر باستخدام duotone اللون في theme.json كما تمت مناقشته في هذا باختصار توصيل النقاط فيديو يوتيوب (أوتوماتيك آن مكارثي).
استخدام أمثلة الحالة (Wei، وضع مشرق)
إذا تصفحنا الصور المصغرة في ملف دليل موضوع كتلة، نرى أن الغالبية منها تتضمن أقسامًا كبيرة لرؤوس الغلاف. إذا بحثنا في ملفات القوالب الخاصة بهم ، فإنهم يستخدمون كتل الغلاف ذات الخلفية الثابتة للصورة.
تستخدم بعض السمات التي تم تطويرها مؤخرًا قوالب الغلاف مع خلفية الصورة المميزة للمنشور الديناميكي (على سبيل المثال ، Archeo و Wei و Frost و Bright Mode وما إلى ذلك). نظرة عامة موجزة عن الميزة الجديدة متوفرة في هذا الفيديو القصير GitHub.
الجمع بين ميزات ألوان التمييز الديناميكي لـ وابي موضوع مع غلاف ونشر كتل صور مميزة ، يوسع ريتش تابور إبداعه في مجموعته الجديدة الباحثون: وي الموضوع (مراجعة كاملة متاحة هنا) لعرض صور غلاف ديناميكية من منشور واحد.
في منشور إعلان Wei الخاص به ، يكتب ريتش تابور: "وراء الكواليس ، single.html يستخدم النموذج كتلة غلاف تستفيد من الصورة المميزة للمنشور. ثم يتم تطبيق الثنائي من خلال نظام الألوان المخصص للمنشور. بهذه الطريقة ، ستبدو أي صورة تقريبًا رائعة ".
إذا كنت ترغب في التعمق أكثر في كتلة غلاف رأس سمة Wei ومعرفة كيفية إنشاء قالب خاص بك ، فإليك فيديو قصير تبدأ من فرانك كلاين (دورات تطوير WP) الذي يشرح خطوة بخطوة كيفية إنشائه.
على غرار موضوع وي ، براين جاردنر يستخدم أيضًا قالب الغلاف مع قالب الصورة المميز المنشور في كتابه الأخير وضع مشرق سمة لعرض محتويات مميزة بها ألوان نابضة بالحياة.
قال بريان لـ WPTavern: "أكثر ما يحبه في الموضوع هو طريقة استخدام Cover Block فيه صفحات مفردة. إنه يسحب الصورة المميزة إلى كتلة الغلاف ويوفر أيضًا أنماط كتلة مخصصة للظلال وخيارات الارتفاع الكامل. [...] أشعر كما لو أن هذا يقدم حقًا ما هو ممكن مع WordPress الحديث. "
لمزيد من التفاصيل ، ها هي موقع تجريبي و مراجعة كاملة لموضوع براين برايت مود.
تصميم المخططات المعقدة باستخدام محرر الكتلة
في الآونة الأخيرة ، أطلق WordPress محرر كتلة جديدًا مصممًا الصفحة الرئيسية المقصودة و تحميل الصفحة. الإعلان جذبت ردود فعل متباينة من قرائها ، بما في ذلك من مات مولينويج (أوتوماتيكي) الذي علق على 33 يومًا استغرقها تصميم وإطلاق مثل هذه "الصفحة البسيطة". يمكنك إيجاد مزيد من المناقشات وراء الكواليس هنا.
ردا على ذلك ، أنشأ Jamie Marsland من Pootlepress هذا الفيديو يوتيوب حيث يعيد إنتاج صفحة رئيسية متطابقة تقريبًا في حوالي 20 دقيقة.
بالتعليق على فيديو Marsland ، كتبت سارة جودينج من WP Travern: "إنه ما قد يصفه المرء بأنه مستخدم قوي مع محرر الكتلة. يمكنه تبديل الصفوف والأعمدة والمجموعات بشكل عشوائي ، وضبط الحشو والهوامش حسب الضرورة ، وتعيين اللون المقابل لكل قسم للتصميم. في هذه المرحلة ، هذا ليس شيئًا يمكن لمعظم مستخدمي WordPress العاديين فعله ".
على الرغم من أن محرر الكتلة قد قطع شوطًا طويلاً ، إلا أنه لا تزال هناك نقاط ضعف متزايدة لمعظم مطوري السمات والمستخدمين العاديين لإنشاء وتصميم تخطيطات معقدة باستخدامه.
إضافة تحسين لكتل TT2 Gopher
في هذا القسم ، سوف أطلعك على كيفية إضافة تحسينات إلى موضوع TT2 Gopher Blocks التي أشرت إليها في مقالتي السابقة. مستوحى من قوالب الغلاف من السمات التي وصفتها سابقًا ، أردت إضافة ثلاثة قوالب غلاف (المؤلف والفئة والغلاف الفردي) إلى السمة.
أثناء تصفح مواقع الويب ، نلاحظ نوعين من رؤوس الغلاف. الرأس الذي تمت ملاحظته في الغالب هو قسم الغلاف الممزوج برأس الموقع (عنوان الموقع والتنقل العلوي) في كتلة الغلاف (على سبيل المثال ، Twenty Twenty و Twenty-Two و Wei و Wabi و Frost و Bright Mode ، إلخ). نجد أيضًا قسم غطاء الرأس غير الممزوج برأس الموقع والموضع أسفله مباشرةً ، مثل هذا بي بي سي فيوتشر موقع الكتروني. بالنسبة لموضوع TT2 Gopher block ، اخترت هذا الأخير.
إنشاء أنماط رأس الغلاف
أولاً ، دعنا ننشئ أنماط رأس غلاف لقوالب المؤلف ، الفردية ، وغيرها (الفئات والعلامات) باستخدام قوالب الغلاف. ثم سنقوم بتحويلها إلى أنماط (كما هو موضح هنا سابقا) واستدعاء أنماط غلاف الرأس المعنية في القوالب.
إذا كنت معتادًا على العمل مع محرر الكتلة ، فقم بتصميم قسم الرأس الخاص بك باستخدام كتل الغلاف في محرر الموقع ، ثم قم بتحويل رمز رأس الغلاف إلى أنماط. ومع ذلك ، إذا لم تكن معتادًا على محرر 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 القالب متاح على جيثب.
إنشاء قوالب مع كتل غطاء الرأس
وورد 6.0 والأخيرة غوتنبرغ 13.7 توسيع ميزات إنشاء القالب في محرر الكتلة ، مما يجعل من الممكن للعديد من مستخدمي WordPress ، دون معرفة عميقة بالبرمجة ، إنشاء قوالبهم المخصصة.
لمزيد من المعلومات التفصيلية وحالات الاستخدام ، إليك ملف مذكرة تخصيص شاملة من قبل جاستن تادلوك.
محرر الكتلة يسمح بإنشاء أنواع مختلفة من القوالب ، بما في ذلك قوالب الغلاف. دعونا نلقي نظرة موجزة على كيفية الجمع كتلة الغطاء و نشر كتلة مميزة من الصور باستخدام واجهة مستخدم للقالب الجديد ، يسهل إنشاء أنواع مختلفة من القوالب المخصصة للغلاف حتى مع عدم وجود مهارات ترميز أو انخفاضها.
أصبح إنشاء القوالب أسهل بكثير مع Gutenberg 13.7. كيفية إنشاء قوالب الكتلة مع الرموز و في محرر الموقع يوصف في كتيب الموضوع وفي مقالتي السابقة.
قالب المؤلف مع كتلة الغلاف
أعلى (قسم الرأس) هو ترميز ملف author.html القالب موضح أدناه (السطر 6):
...
...
...
... فيما يلي لقطات من رؤوس الغلاف الخاصة بـ author.html و category.html القوالب:
كامل كود كلا النموذجين متاح على جيثب.
وظيفة واحدة مع غطاء كتلة
لعرض كتلة الغلاف في منشورنا الفردي ، يتعين علينا الاتصال بـ header-cover-single pattern أسفل قسم الرأس (السطر 3):
....
....
....فيما يلي لقطة شاشة تعرض عرض الواجهة الأمامية للمنشور الفردي مع قسم غلاف الرأس:
كامل single-cover.html القالب متاح على جيثب.
يمكنك العثور على مزيد من البرامج التعليمية التفصيلية خطوة بخطوة حول إنشاء ملف البطل قسم آخر رأس البطل و باستخدام كتل غلاف خلفية الصورة المميزة للنشر on الفسفور الابيض الحانة و تحرير الموقع الكامل موقع الكتروني.
هناك لديك!
الموارد مفيدة
قالب غلاف الصورة المميز
المدوّنة
على الرغم من أن سمات الكتلة ، بشكل عام ، هي الحصول على الكثير من الصد من أعضاء مجتمع WordPress، فى رايى، هم مستقبل WordPress، جدا. باستخدام سمات الكتل ، يمكن لمؤلفي قوالب الهواة ، بدون مهارات الترميز العميقة وإتقان لغات PHP و JavaScript ، إنشاء سمات ذات تخطيطات معقدة مع قسم غلاف رئيسي كما هو موضح في هذه المقالة جنبًا إلى جنب مع أنماط و اختلافات النمط.
باعتباري أحد مستخدمي Gutenberg الأوائل ، لا يمكنني أن أكون أكثر حماسًا مع أدوات التخصيص الجديدة مثل إنشاء موضوع كتلة المكون الإضافي وغيره مما يسمح لمؤلفي القوالب بتحقيق ما يلي مباشرةً من واجهة مستخدم محرر الكتلة دون كتابة أي رمز:
- (i) خلق
- (XNUMX) الكتابة فوق ملفات السمات والتصدير
- (XNUMX) إنشاء موضوع فارغ أو فرعي ، و
- (XNUMX) تعديل وحفظ تنوع النمط للموضوع الحالي
بالإضافة إلى ذلك ، تسمح التكرارات الأخيرة للمكوِّن الإضافي Gutenberg بالتمكين طباعة السوائل و محاذاة التخطيط وغيرها من الضوابط الأسلوبية باستخدام فقط theme.json ملف بدون JavaScript وسطر من قواعد CSS.
نشكرك على قراءة ومشاركة تعليقاتك وأفكارك أدناه!
