چگونه یک خانه جدید برای توسعه دهندگان WordPress.com با استفاده از تم بیست و بیست و چهار ساختیم – اخبار WordPress.com

در چند هفته گذشته، تیم ما در WordPress.com، developer.wordpress.com را از ابتدا بازسازی کرده است. اگر وب‌سایت‌هایی را برای افراد دیگر می‌سازید یا طراحی می‌کنید، در هر ظرفیتی، این سایت را نشانه‌گذاری کنید. این خانه جدید شما برای اسناد، منابع، آخرین اخبار درباره ویژگی‌های برنامه‌نویس و موارد دیگر است.

به جای ایجاد یک تم منحصربفرد و سفارشی، ما از Twenty Twenty Four استفاده کردیم، که تم پیش‌فرض برای همه سایت‌های وردپرس است.

درست است، با ترکیبی از قابلیت های داخلی ویرایشگر سایت و قالب های سنتی PHP، ما توانستیم یک سایت از ابتدا ایجاد کنیم تا تمام منابع توسعه دهنده خود را در خود جای دهد.

در زیر، من دقیقاً نحوه انجام این کار را توضیح می دهم.

تم کودک بیست و بیست و چهار

سایت developer.wordpress.com سال‌هاست که وجود داشته است، اما ما متوجه شدیم که برای مدرن کردن ظاهر و احساس سایت با نام تجاری فعلی‌مان، و همچنین تطبیق اسناد توسعه‌دهنده جدید ما، نیاز به یک بازسازی اساسی دارد.

احتمالاً موافقت خواهید کرد که سایت نیاز به به‌روزرسانی دارد. دو هفته پیش developer.wordpress.com به این شکل بود:

هنگامی که تصمیم به طراحی مجدد و بازسازی سایت گرفتیم، دو گزینه داشتیم: 1) آن را به طور کامل از ابتدا بسازیم یا 2) از یک تم موجود استفاده کنیم.

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

ما در نظر گرفتیم که از ابتدا شروع کنیم و از افزونه رسمی “Create Block Theme” استفاده کنیم. اگر به چیزی متناسب با نیازهای خاص خود نیاز دارید، ساختن یک تم جدید از ابتدا یک گزینه عالی است، اما Twenty Twenty-Four قبلاً به چیزی که می‌خواستیم نزدیک بود، و این به ما یک راه‌اندازی می‌دهد زیرا می‌توانیم بیشتر سبک‌ها، قالب‌ها و قالب‌ها را به ارث ببریم. کد از موضوع اصلی

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

با در نظر گرفتن این موضوع، ما یک تم کودک مینیمال بر اساس بیست و بیست و چهار ایجاد کردیم.

یک داربست را بچرخانید @wordpress/create-block

ما با اجرا کردن موضوع جدید خود را مقداردهی اولیه کردیم npx @wordpress/create-block@latest wpcom-developer.

این به ما یک پوشه با کد نمونه، اسکریپت های ساخت و افزونه ای داد که یک بلوک سفارشی را بارگیری می کند.

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

اما ما در اینجا یک موضوع می سازیم! در ادامه روی آن کار کنیم.

تنظیم را به یک تم کودک تغییر دهید

اول حذف کردیم wpcom-developer.php، فایلی که مسئول بارگیری بلوک ما از طریق یک افزونه است. ما همچنین یک را اضافه کردیم functions.php فایل و الف style.css فایل با نحو مورد انتظار مورد نیاز برای شناسایی این موضوع به عنوان یک موضوع کودک.

با وجود اینکه یک فایل CSS است، ما هیچ سبکی به آن اضافه نمی کنیم style.css فایل. در عوض، می توانید آن را مانند یک فایل مستندات در نظر بگیرید Template: twentytwentyfour مشخص می‌کند که تم جدیدی که ما ایجاد می‌کنیم، یک تم فرزند از بیست و بیست و چهار است.

/*
Theme Name: wpcom-developer
Theme URI: https://developer.wordpress.com
Description: Twenty Twenty-Four Child theme for Developer.WordPress.com
Author: Automattic
Author URI: https://automattic.com
Template: twentytwentyfour
Version: 1.0.0
*/

ما همه فایل‌های نمایشی را در پوشه src حذف کردیم و دو پوشه در داخل آن اضافه کردیم: یکی برای CSS و دیگری برای JS، که هر کدام حاوی یک فایل خالی است که نقطه ورودی برای ساخت کد ما خواهد بود.

ساختار پوشه تم اکنون به شکل زیر است:

اسکریپت های ساخت در @wordpress/create-block می تواند SCSS/CSS و TS/JS را خارج از جعبه بسازد. از Webpack در پشت صحنه استفاده می کند و یک پیکربندی استاندارد را ارائه می دهد. ما می‌توانیم پیکربندی پیش‌فرض را با نقاط ورودی و افزونه‌های سفارشی با اضافه کردن خودمان گسترش دهیم webpack.config.js فایل.

با انجام این کار می توانیم:

1. فایل های خروجی خاصی را برای بخش های خاصی از سایت بسازید. در مورد ما، هم الگوهای PHP و هم قالب‌های ویرایشگر سایت را از کد سفارشی و تم مادر بیست و بیست و چهار داریم. قالب‌های ویرایشگر سایت به حداقل (در صورت وجود) سبک سفارشی (به لطف) نیاز دارند theme.json)، اما منطقه اسناد توسعه دهنده ما در سایت از نوع پست سفارشی و الگوهای صفحه استفاده می کند که به CSS نیاز دارند.
2. فایل های خالی JS را حذف کنید پس از ساخت *.asset.php فایل ها. بدون این، یک فایل JS خالی برای هر فایل CSS ایجاد می شود.

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

در مرحله بعد، بسته های مورد نیاز را نصب کردیم:

​​npm install path webpack-remove-empty-scripts --save-dev

ما webpack.config.js در نهایت شبیه به کد زیر شد. توجه داشته باشید که ما به سادگی در حال تمدید آن هستیم defaultConfig با چند ویژگی اضافی

هر نقطه ورودی اضافی، در مورد ما src/docs، می تواند به عنوان یک ورودی جداگانه در اضافه شود entry هدف – شی.

// WordPress webpack config.
const defaultConfig = require( '@wordpress/scripts/config/webpack.config' );

// Plugins.
const RemoveEmptyScriptsPlugin = require( 'webpack-remove-empty-scripts' );

// Utilities.
const path = require( 'path' );

// Add any new entry points by extending the webpack config.
module.exports = {
	...defaultConfig,
	...{
		entry: {
			'css/global':  path.resolve( process.cwd(), 'src/css',   'global.scss' ),
			'js/index': path.resolve( process.cwd(), 'src/js', 'index.js' ),
		},
		plugins: (
			// Include WP's plugin config.
			...defaultConfig.plugins,
			// Removes the empty `.js` files generated by webpack but
			// sets it after WP has generated its `*.asset.php` file.
			new RemoveEmptyScriptsPlugin( {
				stage: RemoveEmptyScriptsPlugin.STAGE_AFTER_PROCESS_PLUGINS
			} )
		)
	}
};

که در functions.php، بسته به شرایط خاص، دارایی ها و فایل های ساخته شده خود را در صف قرار می دهیم. به عنوان مثال، ما فایل‌های CSS جداگانه‌ای را برای ناحیه اسناد سایت ساختیم و فقط آن فایل‌های CSS را برای اسناد خود در صف قرار دادیم.

<?php

function wpcom_developer_enqueue_styles() : void {
    wp_enqueue_style( 'wpcom-developer-style',
        get_stylesheet_directory_uri() . '/build/css/global.css'
    );
}

add_action( 'wp_enqueue_scripts', 'wpcom_developer_enqueue_styles' );

ما نیازی به ثبت فایل‌های سبک از Twenty Twenty Four نداشتیم، زیرا وردپرس این فایل‌ها را به صورت درون خطی مدیریت می‌کند.

ما انجام داد باید سبک‌ها را برای قالب‌های کلاسیک و غیر ویرایشگر سایت (در مورد اسناد توسعه‌دهنده ما) یا هر سبک دیگری که می‌خواهیم به سبک‌های ویرایشگر سایت اضافه کنیم، در صف قرار دهیم.

برای ساخت JS و CSS تولیدی به صورت محلی، اجرا می کنیم npm run build.

برای توسعه محلی، می توانید اجرا کنید npm run start در یک پنجره ترمینال و npx wp-env start (با استفاده از بسته wp-env) در دیگری برای راه اندازی یک سرور توسعه محلی وردپرس که تم شما را اجرا می کند.

در حین ساخت این سایت، تیم طراحان، توسعه دهندگان و نویسندگان محتوا از یک سایت استیج WordPress.com استفاده کردند تا زمانی که ما آماده راه اندازی این موضوع جدید نباشیم، تغییرات بر سایت موجود developer.wordpress.com تأثیری نگذارد.

theme.json

بیست و بیست و چهار جامع است theme.json فایلی که سبک های آن را تعریف می کند. به‌طور پیش‌فرض، تم ترکیبی ما تمام تعاریف سبک را از والد به ارث می‌برد (Twenty Twenty Four) theme.json فایل.

ما به‌طور انتخابی قسمت‌هایی را که می‌خواستیم تغییر دهیم بازنویسی کردیم (پالت رنگ، فونت‌ها و سایر عناصر برند)، و بقیه را از موضوع اصلی بارگذاری کردیم.

وردپرس این ادغام و همچنین هر تغییری را که در ویرایشگر ایجاد می کنید انجام می دهد.

بسیاری از سبک‌های پیش‌فرض برای ما به خوبی کار می‌کردند و در نهایت به یک سبک فشرده رسیدیم theme.json فایلی که رنگ ها، فونت ها و گرادیان ها را تعریف می کند. داشتن یک کپی از تم اصلی theme.json فایل مشاهده نحوه ارجاع رنگ ها را آسان تر می کند.

تو می تونی تغییر کنی theme.json در ویرایشگر کد مورد علاقه خود، یا می توانید آن را مستقیماً در ویرایشگر وردپرس تغییر دهید و سپس فایل های تم را از گوتنبرگ دانلود کنید.

چرا ممکن است بخواهید تغییرات ویرایشگر خود را صادر کنید؟ سپس می‌توان سبک‌ها را به کد بازگرداند تا اطمینان حاصل شود که مطابقت دارند و توزیع تم شما یا انتقال آن از یک سایت توسعه محلی به یک سایت زنده آسان‌تر است. این تضمین می کند که قالب های صفحه ویرایشگر سایت در کد با کنترل نسخه نگهداری می شوند.

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

سبک های جهانی در SCSS/CSS

استایل های سراسری به عنوان متغیرهای CSS اضافه می شوند و می توان آنها را در CSS ارجاع داد. تغییر مقدار در theme.json همچنین اطمینان حاصل می کند که رنگ های دیگر به روز می شوند.

به عنوان مثال، در اینجا نحوه ارجاع رنگ “کنتراست” خود به عنوان رنگ حاشیه آمده است:

border-color: var(--wp--preset--color--contrast);

برخی از افزونه ها به این فایل ها در یک موضوع نیاز دارند، به عنوان مثال با تماس get_header()، که به طور خودکار قالب هدر Site Editor بارگیری نمی شود.

ما نمی خواستیم سرصفحه و پاورقی خود را برای پوشش آن موارد بازسازی کنیم. داشتن تنها یک منبع حقیقت بسیار بهتر است.

با استفاده از do_blocks()، توانستیم بلوک هدر مورد نیاز خود را رندر کنیم. در اینجا یک مثال از یک فایل قالب هدر آورده شده است:

<head>
<?php
wp_head();
$fse_header_block = do_blocks( '<!-- wp:template-part {"slug":"header","theme":"a8c/wpcom-developer","tagName":"header","area":"header", "className":"header-legacy"} /-->' );
?>
</head>
<body <?php body_class(); ?>>
<?php
echo $fse_header_block;

خانه جدید ما برای توسعه دهندگان اکنون فعال است!

امروز سایت جدید و بهبود یافته developer.wordpress.com ما را بررسی کنید و نظر خود را در زیر بنویسید و به ما بگویید چه فکر می کنید. ما از بازخورد شما خوشحال خواهیم شد.

استفاده از کد سفارشی و سایت‌های مرحله‌بندی تنها دو مورد از بسیاری از ویژگی‌های توسعه‌دهنده موجود در سایت‌های WordPress.com است که برای ساختن developer.wordpress.com جدید و بهبودیافته خود از آنها استفاده کردیم.

اگر شما یک توسعه دهنده هستید و علاقه مند به دسترسی زودهنگام به سایر ویژگی های مرتبط با توسعه هستید، اینجا را کلیک کنید تا تنظیمات «من یک توسعه دهنده هستم» ما را در حساب WordPress.com خود فعال کنید.