بخش «همین حالا تماس بگیرید» را در ده صفحه گذاشته‌اید و حالا شماره‌ی تلفن عوض شده است. اگر هر ده‌تا را دستی ساخته باشید، باید همه را یکی‌یکی باز کنید؛ اگر یک بار ساخته باشید و همگام کرده باشید، یک ویرایش کافی است. این تفاوت همان چیزی است که الگوهای بلوک و بلوک‌های قابل استفادهی مجدد را از هم جدا می‌کند.
اگر با اصول ویرایشگر هنوز آشنا نیستید، آموزش ویرایشگر بلوک وردپرس را اول بخوانید.
الگو و الگوی همگام#
در ویرایشگر بلوک دو چیز شبیه هم وجود دارد که رفتارشان فرق دارد:
| ویژگی | الگوی معمولی | الگوی همگام |
|---|---|---|
| وقتی درج می‌شود | یک کپی مستقل ساخته می‌شود | به همان منبع اصلی وصل است |
| ویرایش یک نمونه | فقط همان نمونه عوض می‌شود | همهی نمونه‌ها عوض می‌شود |
| مناسب | چیدمان‌هایی که هر بار متن و تصویر متفاوت دارند | بخش‌های ثابت مثل فوتر تماس، اعلان یا دعوت به اقدام |
الگوی همگام همان است که قبلاً «بلوک قابل استفادهی مجدد» نام داشت. اگر در راهنماهای قدیمی‌تر این اسم را دیدید، منظورشان همین است. نام گزینه‌ها در نسخههای مختلف وردپرس کمی فرق دارد؛ ساختار کلی ثابت مانده است.
قبل از همگام کردن یک بخش بپرسید: آیا واقعاً می‌خواهم همهی نمونه‌ها همیشه یکی باشند؟ اگر هر صفحه باید متن خودش را داشته باشد، الگوی معمولی بهتر است.
ساختن الگو از بلوک‌های موجود#
- در ویرایشگر، بلوک یا گروهی از بلوکها را بسازید و بهتر است داخل یک بلوک «گروه» بگذارید تا انتخاب و جابه‌جایی‌اش ساده باشد.
- گروه را انتخاب کنید و از منوی سه‌نقطه‌ی بلوک، گزینه‌ی ساخت الگو را بزنید.
- یک نام روشن بدهید، مثل «دعوت به اقدام: مشاوره‌ی رایگان».
- دسته‌ی الگو را انتخاب کنید و تعیین کنید همگام باشد یا نه.
- برای استفاده، از درج‌کننده‌ی بلوک سراغ تب الگوها بروید و آن را انتخاب کنید.
الگوهایی را که ساخته‌اید در بخش مدیریت الگوها هم می‌بینید. مسیر دقیقش به قالب شما بستگی دارد: در قالبهای بلوکی داخل ویرایشگر سایت و در قالبهای کلاسیک داخل منوی نمایش یا پیشخوان. اگر با قالب بلوکی کار میکنید، قالبهای بلوکی و ویرایشگر کامل سایت را ببینید.
الگوهای آماده و دسته‌بندی#
وردپرس و بسیاری از قالب‌ها الگوهای آماده دارند: سربرگ، فوتر، فهرست قیمت، نظر مشتریان و غیره. از آن‌ها به‌عنوان نقطه‌ی شروع استفاده کنید ولی همیشه متن، رنگ و فاصله‌ها را با هویت برند خودتان تطبیق دهید. الگوی آماده‌ای که رنگ و فونت قالب را رعایت نکند، صفحه را ناهمگون می‌کند.
برای سایت‌های فارسی، قبل از انتشار، جهت راست‌به‌چپ، فاصله‌ها و رفتار الگو در موبایل را بررسی کنید؛ بعضی الگوهای آماده برای زبان‌های چپ‌به‌راست طراحی شده‌اند.
ثبت الگوی اختصاصی با کد#
اگر چند سایت دارید یا می‌خواهید الگوها همراه قالب منتقل شوند، آن‌ها را با کد ثبت کنید. این نمونه در یک افزونهی ساده یا functions.php قالب فرزند کار می‌کند. قالب فرزند وردپرس توضیح داده چرا کد را نباید در قالب اصلی گذاشت.
add_action( 'init', function () {
register_block_pattern_category(
'di9-sections',
array( 'label' => __( 'بخش‌های سایت', 'di9' ) )
);
register_block_pattern(
'di9/cta-box',
array(
'title' => __( 'دعوت به اقدام', 'di9' ),
'description' => __( 'عنوان، متن کوتاه و دکمه', 'di9' ),
'categories' => array( 'di9-sections' ),
'content' => '<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:heading {"textAlign":"center"} -->
<h2 class="wp-block-heading has-text-align-center">نیاز به مشاوره دارید؟</h2>
<!-- /wp:heading -->
<!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center">برای هماهنگی یک تماس کوتاه رزرو کنید.</p>
<!-- /wp:paragraph -->
<!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"}} -->
<div class="wp-block-buttons"><!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button" href="/contact/">درخواست مشاوره</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:group -->',
)
);
} );محتوا همان نشانه‌گذاری ذخیره‌شده‌ی بلوک‌هاست. ساده‌ترین راه برای تولیدش این است که الگو را در ویرایشگر بسازید، بعد از منوی گزینه‌ها حالت ویرایشگر کد را باز کنید و متن را کپی کنید. مقدارهای متنی برای ترجمه‌پذیری با تابع __() آمده‌اند و آدرس دکمه را باید با آدرس واقعی صفحه‌ی خودتان عوض کنید.
در قالبهای امروزی روش ساده‌تری هم هست: در پوشهی patterns قالب، یک فایل PHP بسازید که سرآیند توضیحی (عنوان، نامک و دسته) داشته باشد و محتوای الگو را بعد از آن بگذارید. وردپرس این فایل‌ها را خودش ثبت می‌کند.
چه زمانی کدام را بسازیم#
- بخش تکرارشونده‌ی ثابت که همیشه باید یکسان بماند: الگوی همگام.
- چیدمانی که هر صفحه محتوای خودش را می‌گیرد: الگوی معمولی.
- الگویی که باید با قالب یا افزونه همراه شود و روی چند سایت نصب شود: الگوی ثبتشده با کد.
- چیدمان کامل یک صفحه: به‌جای ساختن از صفر، مقاله‌ی ساخت صفحه‌ی فرود با گوتنبرگ را ببینید.
اگر الگوی همگام را حذف کنید، جاهایی که از آن استفاده شده را هم تحت تأثیر قرار می‌دهید؛ پیش از حذف، فهرست استفاده‌ها را بررسی کنید و از سایت بکاپ بگیرید.
نگهداری الگوها در سایت‌های بزرگ‌تر#
وقتی تعداد الگوها زیاد می‌شود، اسم‌گذاری روشن اهمیت پیدا می‌کند. نام را بر اساس کارکرد بگذارید («فوتر تماس»، «جعبه‌ی هشدار») نه شکل ظاهری («جعبه‌ی آبی۲»). دسته‌بندی را هم محدود نگه دارید تا هم‌تیمی‌ها بدانند هر الگو را کجا پیدا کنند.
الگوهای همگام را با احتیاط به‌روز کنید: تغییر آن‌ها هم‌زمان همهی صفحه‌ها را عوض می‌کند. قبل از ویرایش یک الگوی پراستفاده، یک نسخهی کپی از آن بسازید یا بکاپ بگیرید. اگر چند نفر روی سایت کار میکنند، دسترسی ویرایش الگوهای همگام را فقط به کسانی بدهید که مسئول طراحی‌اند؛ نقش‌های وردپرس را در همین راستا بررسی کنید.
الگوها را فقط برای ساختار استفاده کنید و متن‌های حساس به زمان، مثل تاریخ تخفیف، داخل الگوی همگام نگذارید که فراموش شود. و در پایان، الگو را با نمایش موبایل و پیش‌نمایش راست‌به‌چپ بسنجید.
خلاصه#
- الگوی معمولی هر بار یک کپی مستقل میسازد؛ الگوی همگام یک منبع واحد برای همهی نمونه‌هاست.
- الگوی همگام همان بلوک قابل استفادهی مجدد است و برای بخش‌های ثابت مناسب است.
- الگو را از بلوک‌های موجود بسازید، یک نام و دسته‌ی روشن بدهید و از تب الگوها درج کنید.
- برای انتقال الگو با قالب یا افزونه، آن را با
register_block_patternیا فایل داخلpatternsثبت کنید. - الگوهای آماده را با رنگ، فونت و جهت راست‌به‌چپ سایت خودتان تطبیق دهید.
