اگر مرور کنیم دایرکتوری موضوع وردپرس، اکثر تم ها تصاویر جلد را به نمایش می گذارند. این ویژگی در تقاضای عمومی است. روند صفحه جلد حتی در مورد نیز صادق است مسدود کردن دایرکتوری تم اسکرین شات ها نیز

بیایید مثال زیر را در نظر بگیریم بیست و بیست (یک تم کلاسیک) که شامل الف قالب جلد که می تواند برای نمایش هم در یک پست و هم در صفحه استفاده شود، جایی که تصویر برجسته پست در بالای صفحه نمایش مرورگر با عنوان پست و سایر متا داده های دلخواه در زیر نمایش داده می شود. قالب های جلد امکان ایجاد محتوایی را فراهم می کند که از محدودیت های سنتی نمایش محتوا متمایز باشد.

ایجاد قالب های جلد در حال حاضر نیاز به نوشتن کد PHP دارد که در اینجا در تصویر گرفته شده است Twenty Twenty قالب پیش‌فرض روی جلد. اگر نگاه کنیم به template-parts/content-cover.php فایل، حاوی رمز برای نمایش محتوا زمانی که cover-template استفاده می شود.

بنابراین، اگر دانش عمیقی از PHP ندارید، امکان ایجاد یک صفحه جلد سفارشی وجود ندارد. برای بسیاری از کاربران عادی وردپرس، تنها گزینه استفاده از افزونه مانند است سفارشی نوع ارسال UI همانطور که در توضیح داده شده است این فیلم کوتاه.

بخش‌ها را در مضامین بلوکی پوشش دهید

پس از وردپرس 5.8، نویسندگان تم می توانند الگوهای سفارشی (مانند پست تک، نویسنده، دسته و موارد دیگر) را با بخش قهرمان برتر ایجاد کنند. ویرایشگر بلوک بلوک جلد و همراه با مضامین آنها با حداقل یا بدون کد.

قبل از پرداختن به نحوه ایجاد بخش‌های پوششی بزرگ در قالب‌های تم بلوکی، اجازه دهید به طور خلاصه به دو تم بلوک نگاهی بیندازیم. بیست و بیست و دو و وابی توسط Rich Tabor (بررسی کامل اینجا کلیک نمایید).

پشت صحنه، Twenty Twenty-Two یک هدر بزرگ را توسط اضافه کردن یک تصویر مخفی که به عنوان الگو ذخیره شده است در header-dark-large قطعات. در حالی که در تم Wabi، رنگ پس‌زمینه هدر بزرگ در یک پست واحد با آن پیاده‌سازی می‌شود رنگ‌های پس‌زمینه برجسته و بلوک فاصله‌دهنده با ارتفاع 50 پیکسل (خطوط: 5-9). رنگ های تاکیدی توسط assets/js/accent-colors.js فایل.

بسیاری دیگر انتخاب کردند که با استفاده از آن، یک بخش پوشش بالایی ایجاد کنند بلوک پوششی، که به کاربران امکان می داد رنگ پس زمینه را تغییر دهند و یک تصویر ثابت از کتابخانه رسانه اضافه کنند یا از دستگاه های رسانه آپلود کنند - بدون نوشتن هیچ کدی. با این رویکرد، تصاویری از پست بلوک تصویر برجسته اگر می‌خواهید تصویر ویژه پست را به عنوان تصویر پس‌زمینه در پست‌های تکی داشته باشید، باید به صورت دستی به هر پست اضافه می‌شد.

بلوک‌های جلد را با تصویر ویژه پست پویا پوشش دهید

وردپرس 6.0 جالب دیگر را در دسترس قرار داد بلوک های پوشش تصویر برجسته ویژگی، که امکان استفاده از تصویر برجسته هر پست یا صفحه را به عنوان تصویر پس‌زمینه در بلوک جلد فراهم می‌کند.

در زیر ویدئو کوتاهمهندسان Automattic در مورد افزودن تصاویر برجسته به بلوک‌ها با مثالی از آن بحث می‌کنند آرکئو موضوع:

[محتوای جاسازی شده]

بلوک تصویر از جمله بلوک تصویر ویژه پست را می توان با استفاده از آن سفارشی کرد duotone رنگ در theme.json همانطور که در این کوتاه بحث شده است اتصال نقاط ویدیوی یوتیوب (Automattic's Anne McCarthy).

از مثال های موردی استفاده کنید (Wei, حالت روشن)

اگر تصاویر بند انگشتی را در قسمت مرور کنیم مسدود کردن دایرکتوری تم، می بینیم که اکثر آنها شامل بخش های هدر جلد بزرگ هستند. اگر در فایل‌های الگوی آنها جستجو کنیم، آنها از بلوک‌های پوششی با پس‌زمینه تصویر ثابت استفاده می‌کنند.

برخی از تم‌های اخیراً توسعه‌یافته از بلوک‌های پوششی با پس‌زمینه تصویر ویژه پست پویا استفاده می‌کنند (مانند Archeo، Wei، Frost، Bright Mode، و غیره). مروری کوتاه بر ویژگی جدید در دسترس است این ویدیوی کوتاه GitHub.

ترکیب رنگ های تاکیدی پویا ویژگی های وابی تم با پوشش و بلوک های تصویر برجسته، ریچ تابور خلاقیت خود را در جدید خود گسترش می دهد وی موضوع (بررسی کامل موجود است اینجا کلیک نمایید) برای نمایش تصاویر جلد پویا از یک پست.

در پست اطلاعیه وی، ریچ تابور می نویسد: «پشت صحنه، single.html الگو از یک بلوک پوششی استفاده می کند که از تصویر ویژه پست استفاده می کند. سپس رنگ دوتایی توسط طرح رنگی که به پست اختصاص داده شده اعمال می شود. به این ترتیب تقریباً هر تصویری خوب به نظر می رسد.

اگر می‌خواهید در بلوک پوشش هدر تم Wei عمیق‌تر شوید و یاد بگیرید که چگونه خودتان را ایجاد کنید، در اینجا یک ویدئو کوتاه از جانب فرانک کلاین (دوره های توسعه WP) که گام به گام نحوه ایجاد آن را توضیح می دهد.

شبیه به تم Wei، برایان گاردنر همچنین از بلوک پوششی با بلوک تصویر ویژه پست در اخیر خود استفاده می کند حالت روشن تم برای نمایش مطالب برجسته با رنگهای پر جنب و جوش.

برایان به WPTavern گفت: "او بیشتر از همه این موضوع را دوست دارد که از Cover Block استفاده می شود صفحات تک. این تصویر برجسته را به بلوک پوشش می کشد و همچنین سبک های بلوک سفارشی را برای گزینه های سایه ها و تمام ارتفاع ارائه می دهد. […] من احساس می کنم که این واقعاً آنچه را که با وردپرس مدرن امکان پذیر است را نشان می دهد.

برای جزئیات بیشتر، در اینجا آن است سایت آزمایشی و بررسی کامل تم حالت روشن برایان.

طراحی چیدمان های پیچیده با ویرایشگر بلوک

اخیراً وردپرس یک ویرایشگر بلوک جدید طراحی شده راه اندازی کرده است صفحه اصلی فرود و یک صفحه دانلود. اعلامیه واکنش های متفاوتی را به دنبال داشت از خوانندگان آن، از جمله از مت مولنوهگ (اتوماتیک) که در مورد 33 روز صرف شده برای طراحی و راه اندازی چنین "صفحه ساده" نظر داد. میتونی پیدا کنی بحث های اضافی پشت صحنه در اینجا.

در پاسخ، جیمی مارسلند از Pootlepress ایجاد کرد این ویدیوی یوتیوب جایی که او یک صفحه اصلی تقریباً یکسان را در نزدیک به 20 دقیقه بازتولید می کند.

نظر دادن در مورد ویدیوی Marsland، سارا گودینگ از WP Travern می نویسد: «او همان چیزی است که می توان به عنوان یک کاربر قدرتمند با ویرایشگر بلوک توصیف کرد. او می‌تواند به سرعت ردیف‌ها، ستون‌ها و گروه‌ها را به هم بزند و در صورت لزوم، لایه‌ها و حاشیه‌ها را تنظیم کند و به هر بخش رنگ مربوط به طرح را اختصاص دهد. در این مرحله، این کاری نیست که اکثر کاربران معمولی وردپرس بتوانند انجام دهند.

اگرچه ویرایشگر بلوک راه درازی را طی کرده است، اما هنوز هم برای اکثر توسعه دهندگان تم و کاربران عادی نقاط دردناکی وجود دارد که با آن طرح‌بندی‌های پیچیده ایجاد و طراحی کنند.

افزودن بهبود به بلوک های TT2 Gopher

در این بخش، نحوه افزودن پیشرفت‌ها را به شما توضیح خواهم داد تم TT2 Gopher Blocks که در مقاله قبلی به آن اشاره کردم. با الهام از بلوک های جلد از تم هایی که قبلا توضیح دادم، می خواستم سه قالب جلد (نویسنده، دسته بندی و تک جلدی) را به موضوع اضافه کنم.

هنگام مرور وب‌سایت‌ها، متوجه دو نوع هدر جلد می‌شویم. هدر که بیشتر مشاهده می‌شود، بخش پوششی است که با هدر سایت (عنوان سایت و پیمایش بالا) در بلوک پوشش ترکیب شده است (به عنوان مثال، بیست بیست، بیست و بیست و دو، وی، وابی، فراست، حالت روشن، و غیره). ما همچنین بخش پوشش سرصفحه را پیدا می کنیم که با هدر سایت ترکیب نشده و دقیقاً در زیر قرار دارد، مانند این آینده بی بی سی سایت اینترنتی. برای تم بلوک‌های TT2 Gopher، دومی را انتخاب کردم.

ایجاد الگوهای هدر جلد

ابتدا، بیایید الگوهای هدر جلد را برای الگوهای نویسنده، تک، و سایر (دسته‌ها، برچسب‌ها) با استفاده از بلوک‌های پوششی ایجاد کنیم. سپس آنها را به الگوها تبدیل می کنیم (همانطور که توضیح داده شد قبلا اینجا) و الگوهای پوشش هدر مربوطه را در قالب ها فراخوانی کنید.

اگر به کار با ویرایشگر بلوک آشنایی دارید، بخش هدر خود را با استفاده از بلوک های پوششی در ویرایشگر سایت طراحی کنید و سپس کد هدر جلد را به الگو تبدیل کنید. با این حال، اگر با ویرایشگر FSE آشنا نیستید، ساده ترین راه این است که الگوها را از روی آن کپی کنید دایرکتوری الگوها در یک پست، اصلاحات لازم را انجام دهید و آن را به یک الگو تبدیل کنید.

من در مقاله قبلی CSS-Tricks، من به طور مفصل در مورد ایجاد و استفاده از الگوهای بلوک بحث کردم. در اینجا مروری مختصر از گردش کاری است که من برای ایجاد الگوی سربرگ تک پست استفاده می کنم:

الگوی سربرگ تک پست

1 گام: با استفاده از رابط FSE، بیایید یک فایل خالی جدید ایجاد کنیم و ساختار بلوک را همانطور که در پانل سمت چپ نشان داده شده است شروع کنیم.

از طرف دیگر، می‌توان این کار را ابتدا در یک پست یا صفحه انجام داد و سپس علامت‌گذاری را در یک فایل الگو کپی و جای‌گذاری کرد.

2 گام: در مرحله بعد، برای مخفی کردن نشانه گذاری بالا در یک الگو، ابتدا باید نشانه گذاری کد آن را کپی کرده و در یک الگوی جدید قرار دهیم. /patterns/header-single-cover.php در ویرایشگر کد ما همچنین باید نشانه‌گذاری هدر فایل الگوی مورد نیاز (به عنوان مثال، عنوان، اسلاگ، دسته‌ها، درج کننده و غیره) را اضافه کنیم.

در اینجا کل کد آن است /patterns/header-single-cover.php فایل:

    
    

    

    
September 23, 2022
    
    
    
|
    
    
    
    
    
    
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:
    
    
    
Republished By Plato
    
    
    
    
    
    

    
    
    
    
    

برای پنهان کردن نشانه گذاری به یک header-author-cover الگو، ما باید نشانه گذاری هدر فایل الگوی مورد نیاز را همانطور که قبلا توضیح داده شد اضافه کنیم. با ویرایش header-author-cover.php الگو، می‌توانیم پوشش‌های هدر مشابهی برای برچسب‌ها، طبقه‌بندی و سایر قالب‌های سفارشی ایجاد کنیم.

La 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 و جاوا اسکریپت، اکنون می توانند تم هایی با طرح بندی های پیچیده با بخش جلد قهرمان همانطور که در این مقاله توضیح داده شده است، ایجاد کنند. الگوهای و تغییرات سبک.

به عنوان یک کاربر اولیه گوتنبرگ، نمی‌توانستم بیشتر از این با ابزارهای قالب‌بندی جدید هیجان‌زده باشم ایجاد تم بلوک افزونه و سایر افزونه‌ها که به نویسندگان تم اجازه می‌دهند تا مستقیماً از رابط کاربری ویرایشگر بلوک بدون نوشتن کد به موارد زیر دست یابند:

• (I) ایجاد
• (ب) فایل‌های تم را بازنویسی کنید و صادر کنید
• (iii) ایجاد طرح زمینه خالی یا کودک، و
• (IV) تغییر سبک موضوع فعلی را تغییر داده و ذخیره کنید

علاوه بر این، تکرارهای اخیر افزونه گوتنبرگ امکان فعال کردن را فراهم می کند تایپوگرافی سیال و ترازهای چیدمان و سایر کنترل های سبکی فقط با استفاده از theme.json فایل بدون جاوا اسکریپت و خطی از قوانین CSS.

از اینکه خواندید و نظرات و افکار خود را در زیر به اشتراک گذاشتید متشکرم!