پوسته‌های وردپرس امکان تغییر ظاهر سایت را فراهم می‌کنند. هزاران پوسته پرمیوم و رایگان وجود دارند که می‌توانید از آن‌ها برای طراحی و استایلیزه کردن وب سایت خود استفاده کنید.
شما همچنین می‌توانید طراحی پوسته خود را از صفر شروع کنید. پوسته‌های کلاسیک معمولاً از فایل‌های PHP خاص حاوی توابع وردپرس و نشانه گذاری HTML و منابع موجود صف‌بندی شده (CSS، js، SVG، تصاویر و غیره) تشکیل شده اند.
با این حال، نسخه جدید پوسته‌ی «twenty-twenty» در پکیج‌های آفیشیال، در مقایسه با نسخه‌های قدیمی خود، ساختار بسیار عجیبی خواهد داشت.
چه چیزی تغییر نمی‌کند؟
حداقل چیزی که تغییر نمی‌کند این است که شما هنوز برای اعمال کردن پوسته، به فایلی به نام style.css در روتِ فولدر قالب با سربرگ‌های خاص (رشته یادداشت‌های ~ CSS) و یک فایل index.php نیاز دارید.
سلسله مراتب پیش‌فرض قالب همچنان اعمال می‌شوند و می‌توانید توابع خاصی را در فایل functions.php تعریف کنید.
برای رجیستر کردن اسکریپت‌ها و استایل‌ها، و فعال کردن ویژگی‌های خاص (مانند add_theme_support) همچنان به چند هوک اکشن نیاز دارید.
برای مثال:
cadd_action( 'after_setup_theme', function() {
// remove default core patterns
remove_theme_support( 'core-block-patterns' );
// support alingments
add_theme_support( 'align-wide' );
// make the Block Editor look like the front
add_theme_support( 'editor-styles' );
add_editor_style( get_theme_file_uri( 'css/admin/editor-styles.css' ) );// the /css/ folder is a relative path in theme folder
} );
onsole.log( 'Code is Poetry' );
منبع: theme supports – block editor
پیکربندی جهانی جدید برای پوسته‌های وردپرس
ویرایشگر جدید بلوک‌ها (گوتنبرگ)، بلوک‌ها، الگوها و قالب‌ها را مستقیماً از لایه‌های زیرین کدنویسی به پنل ویرایش پست منتقل کرد.
تیم‌های وردپرس نیز ادمین وب سایتشان را تحت فشار قرار می‌دهند تا تقریباً تمام صفحات سایت را با ویرایشگر جدید بازسازی کند و بنابراین، او مجبور به ویرایش کامل سایت (FSE) خواهد بود.
این موضوع بسیار جالب است، زیرا ویرایشگرجدید «به‌طور پیش‌فرض قابلیت سفارشی سازی بیشتر نسبت به ویرایشگر کلاسیک دارد.» اما این کار می‌تواند بسیار پیچیده‌تر نیز باشد.
این پیچیدگی به ویژه در هنگام نادیده گرفتن سبک‌های CSS که به طور پیش فرض در بلوک‌ها لحاظ شده اند، صدق می‌کند.
در وردپرس نسخه 5.8 توسعه دهندگان مرکزی، مجموعه‌ای از سبک‌ها و تنظیمات جهانی را برای رفع این مشکل معرفی کردند.
توسعه دهندگان اکنون می‌توانند یک فایل جدید به نام theme.json در روت فولدر پوسته ایجاد کنند. شما همچنین می‌توانید دستورالعمل‌های سفارشی سازی خود را به پوسته اضافه کنید.
برای مثال در پوسته‌ی «twenty-twenty»:
"spacing": {
"units": [
"%",
"px",
"em",
"rem",
"vh",
"vw"
]
},
"typography": {
"dropCap": false,
"fontFamilies": [
{
"fontFamily": "-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif",
"name": "System Font",
"slug": "system-font"
},
{
"fontFamily": "\"Source Serif Pro\", serif",
"name": "Source Serif Pro",
"slug": "source-serif-pro"
}
],
"fontSizes": [
{
"size": "1rem",
"slug": "small"
},
{
"size": "1.125rem",
"slug": "medium"
},
{
"size": "1.75rem",
"slug": "large"
},
{
"size": "clamp(1.75rem, 3vw, 2.25rem)",
"slug": "x-large"
}
]
}
این فایل برای تعریف تنظیمات جهانی یا زمینه‌ای- متنی پوسته بسیار مفید است و از سوء استعمال این کاربرد جلوگیری می‌کند؛ به عنوان مثال، یکی از این تنظیمات غیر فعال کردن رنگ‌ها در برخی بلوک‌ها است.
با توجه به این‌که twenty-twentytwo بیش از 350 لاین دارد، می‌توانید طیف وسیعی از تنظیمات را در آن تغییر دهید.
منبع: Introduction to WordPress’s Global Styles and Global Settings
الگوی شگفت‌انگیز بلوک‌ها (بلوک پترن) در وردپرس
وردپرس اکنون از الگوها استفاده می‌کند. به‌طور کلی، آن‌ها بلوک‌های از پیش تعریف شده هستند. هدف از این کار، سهولت در استفاده از بلوک‌ها و صرفه‌جویی در زمان در هنگام ویرایش است.
شما به توانید به سلیقه‌ی خود آن‌ها را شخصی‌سازی و با هم ترکیب کنید. همچنین می‌توانید الگوهای موجود را در فهرست الگوها پیدا کنید؛ اما گزینه شخصی‌سازی کامل الگوها به روش دستی نیز هنوز بر روی میز است:
add_action( 'init', function() {
register_block_pattern(
'twentytwentytwo/footer-logo',
[
'title' => __( 'Footer with logo and citation', 'twentytwentytwo' ),
'categories' => ['footer' ],
'blockTypes' => [ 'core/template-part/footer' ],
'content' =>
'<!-- wp:group {"align":"full","layout":{"inherit":true}} -->
<div class="wp-block-group alignfull"><!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"top":"4rem","bottom":"4rem"}}},"layout":{"type":"flex","justifyContent":"space-between"}} -->
<div class="wp-block-group alignwide" style="padding-top:4rem;padding-bottom:4rem"><!-- wp:site-logo {"width":60} /-->
<!-- wp:paragraph {"align":"right"} -->
<p class="has-text-align-right">' .
sprintf(
esc_html__( 'Proudly powered by %s', 'twentytwentytwo' ),
'<a href="' . esc_url( __( 'https://wordpress.org', 'twentytwentytwo' ) ) . '" rel="nofollow">WordPress</a>'
) . '</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->
',
]
);
} );
منبع: twenty-twentytwo – inc
تابع register_block_pattern به شما اجازه می‌دهد تا آرایشی از پارامترهایی را ارسال کنید که حاوی یک سری نشانه‌گذاری HTML خاص است که توسط وردپرس برای تعریف و ذخیره بلوک‌ها استفاده می‌شود.
نحوه نگارش (سینتکس) جدید برای قالب‌های پیش‌فرض وردپرس
برای هرکسی که با تم‌های کلاسیک وردپرس کار کرده است، مشاهده فایل‌های HTML در فولدر قالب کمی عجیب است.
با این حال، ممکن است فایل‌های HTML از فایل‌های PHP که حاوی ترکیبی از دستورالعمل‌های HTML و PHP هستند، مناسب‌تر باشند. علاوه بر این، من برای سال‌ها از روش‌های جایگزین مانند Timber استفاده کرده‌ام. این روش به شما اجازه می‌دهد که برای نوشتن قالب‌های تمیزتر از twig استفاده کنید.
اگر به «twenty-twenty» نگاهی بیاندازید، یک فولدر از قالب‌های حاوی فایل HTML خواهید یافت. هر فایل حاوی دستورالعمل‌هایی برای تعریف و سازماندهی بلوک‌ها است.
// templates/404.html
<!-- wp:template-part {"slug":"header","tagName":"header"} /-->
<!-- wp:group {"tagName":"main"} -->
<main class="wp-block-group"><!-- wp:group {"layout":{"inherit":true}} -->
<div class="wp-block-group">
<!-- wp:pattern {"slug":"twentytwentytwo/hidden-404"} /-->
</div>
<!-- /wp:group --></main>
<!-- /wp:group -->
<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->
منبع: twenty-twentytwo – templates
وردپرس بلوک‌های شما را می‌شناسد و به صورت خودکار آن‌ها را با سینتکس بالا تعریف می‌کند. به جای استفاده از فایل‌های خاص PHP با توجه به سلسله مراتب پیش‌فرض قالب، می‌توانید از قالب‌های HTML با دستورالعمل‌های بلوک‌ها استفاده کنید:
templates/
│
├── 404.html
├── home.html
├── single.html
├── page.html
نتیجه‌گیری
من هنوز احساسات دوگانه‌ای در مورد FSE (ویرایش کامل سایت) دارم؛ علی‌الخصوص در مورد سینتکس بلوک‌ها، که از ترکیبی از توضیحات HTML و فرمت‌های JSON مانند تشکیل شده باشد.
با این حال، نتیجه نهایی در ویرایشگر بسیار جالب به نظر می‌رسد، و می‌توانید تغییرات را گروه بندی کرده و از ترکیبات خود تقریباً در هر جایی استفاده مجدد کنید.
یادگیری این کار برای توسعه دهندگان کمی سخت‌تر است، اما به نظر بنده حقیر، کاربران می‌توانند انتظار پیشرفت‌های قابل توجهی را داشته باشند.
و در آخر در کار با پوسته‌ی «twenty-twenty» مراقب باشید. در زمان نوشتن نمی‌توانید با نسخه کنونی وردپرس این پوسته را فعال کنید. شما حداقل به آپدیت 5.9 نیاز دارید!
