آموزش Pattern و Synced Pattern در وردپرس؛ ساخت و مدیریت الگوهای بلوکی

Pattern در وردپرس مجموعه‌ای آماده از چند بلوک است که می‌توانید آن را داخل نوشته، برگه یا Template درج کنید و سپس محتوای آن را تغییر دهید. برای مثال یک بخش معرفی خدمات، Call to Action، جدول قیمت، معرفی نویسنده، باکس دانلود، پرسش‌های متداول یا Hero می‌تواند به‌صورت Pattern ذخیره شود تا هر بار از ابتدا ساخته نشود.

Synced Pattern نسخه همگام الگوست. وقتی آن را در چند صفحه استفاده می‌کنید، تغییر نسخه اصلی می‌تواند تمام نمونه‌های متصل را به‌روزرسانی کند. این قابلیت برای بخش‌هایی مانند اعلان عمومی، اطلاعات تماس، بنر پشتیبانی، CTA ثابت، مشخصات شرکت و پیام کمپین بسیار مفید است؛ اما اگر بدون شناخت ویرایش شود، ممکن است چندین صفحه را هم‌زمان تغییر دهد.

در این آموزش کامل، تفاوت Pattern معمولی، Synced Pattern، Template Part و Block Style را توضیح می‌دهیم. سپس ساخت الگو از داخل Gutenberg، مدیریت در Site Editor، Duplicate، Rename، دسته‌بندی، Detach، Import و Export، قفل‌گذاری، Content-only Editing، طراحی واکنش‌گرا و رفع خطاهای رایج را بررسی می‌کنیم.

Pattern در وردپرس چیست؟

Pattern یا الگوی بلوکی ترکیبی از بلوک‌هاست که به‌عنوان یک چیدمان آماده ذخیره می‌شود. برخلاف یک بلوک منفرد، Pattern می‌تواند ساختاری پیچیده شامل Group، Columns، Image، Heading، Paragraph، Buttons و Spacer داشته باشد.

وقتی Pattern معمولی را در صفحه درج می‌کنید، بلوک‌های آن به محتوای مستقل تبدیل می‌شوند. تغییر نسخه درج‌شده روی سایر نسخه‌ها اثر ندارد. این رفتار برای بخشی مناسب است که ساختار یکسان ولی محتوای متفاوت دارد.

نمونه کاربرد Pattern معمولی

• بخش معرفی سه خدمت با Columns
• Hero صفحه فرود
• کارت اعضای تیم
• جدول قیمت
• باکس مزایا
• ساختار ثابت مقاله آموزشی
• FAQ با Details
• بخش تماس با ما

Synced Pattern چیست؟

Synced Pattern الگویی است که نمونه‌های آن با نسخه اصلی ارتباط دارند. اگر متن، لینک یا طراحی Pattern اصلی را تغییر دهید، تمام نمونه‌های متصل به‌روزرسانی می‌شوند.

این قابلیت قبلاً با نام Reusable Block شناخته می‌شد. در نسخه‌های جدید وردپرس، مفهوم Pattern و Synced Pattern جایگزین ساختار قدیمی شده و مدیریت آن‌ها یکپارچه‌تر است.

نمونه کاربرد Synced Pattern

• اعلان تغییر ساعت پشتیبانی
• CTA ثابت انتهای مقالات
• اطلاعات تماس شرکت
• باکس معرفی نویسنده
• پیام جشنواره یا تخفیف
• بنر عضویت در خبرنامه
• هشدار حقوقی یا افشای همکاری در فروش

تفاوت Pattern معمولی و Synced Pattern

تفاوت Pattern با Template Part

Template Part برای بخش ساختاری و عمومی قالب مانند Header، Footer یا Sidebar طراحی شده است. Pattern بیشتر برای چیدمان یا محتوای تکرارشونده داخل نوشته، برگه و Template استفاده می‌شود.

• Header و Footer: Template Part
• CTA، معرفی نویسنده و FAQ: Pattern یا Synced Pattern
• ساختار صفحه قیمت: Pattern معمولی
• اطلاعات تماس ثابت: Synced Pattern

برای جزئیات بیشتر، مقاله ساخت هدر و فوتر با Site Editor را مطالعه کنید.

تفاوت Pattern با Block Style

Block Style فقط ظاهر یک بلوک را تغییر می‌دهد؛ برای مثال دکمه Outline یا تصویر Rounded. Pattern چند بلوک را همراه چیدمان و محتوا ترکیب می‌کند. بنابراین Block Style جای Pattern را نمی‌گیرد.

روش اول: ساخت Pattern از داخل نوشته یا برگه

1. یک نوشته یا برگه را با Block Editor باز کنید.
2. بلوک‌های مورد نظر را بسازید.
3. همه بلوک‌ها را از List View انتخاب کنید.
4. در صورت نیاز آن‌ها را Group کنید.
5. منوی سه‌نقطه را باز کنید.
6. گزینه Create pattern را انتخاب کنید.
7. نام روشن وارد کنید.
8. نوع همگام یا معمولی را مشخص کنید.
9. دسته مناسب را انتخاب و ذخیره کنید.

نام Pattern باید کاربرد آن را توضیح دهد؛ مانند «CTA پایان مقاله»، «باکس دانلود نسخه آبی» یا «معرفی سه خدمت». نام‌هایی مانند Pattern 1 در پروژه بزرگ قابل مدیریت نیستند.

ساخت Pattern معمولی

هنگام ساخت، گزینه Sync را غیرفعال کنید. پس از درج Pattern در صفحه، هر نمونه مستقل خواهد بود. می‌توانید متن، تصویر، لینک و رنگ را بدون اثر روی نسخه‌های دیگر تغییر دهید.

این نوع برای Layoutهایی مناسب است که فقط اسکلت یکسان دارند. برای مثال کارت خدمات در هر صفحه ساختار مشابه دارد، اما عنوان و توضیح متفاوت است.

ساخت Synced Pattern

هنگام ساخت، گزینه Synced را فعال کنید. سپس Pattern را در چند صفحه درج کنید. برای تغییر سراسری، یکی از نمونه‌ها را انتخاب و وارد Edit original شوید یا از بخش مدیریت Patternها نسخه اصلی را باز کنید.

قبل از ذخیره تغییر، به محل‌های استفاده فکر کنید. تغییر یک لینک یا حذف یک دکمه ممکن است تمام صفحات را تحت‌تأثیر قرار دهد.

مدیریت Patternها در Site Editor

با Block Theme، از مسیر Appearance → Editor → Patterns می‌توانید Patternها و Template Partها را مدیریت کنید. در این بخش امکان مشاهده، جست‌وجو، ویرایش، Duplicate، Rename و حذف وجود دارد.

قالب‌های کلاسیک نیز می‌توانند از Pattern در ویرایشگر محتوا استفاده کنند، اما رابط کامل Site Editor فقط هنگام فعال بودن Block Theme نمایش داده می‌شود.

درج Pattern در نوشته یا برگه

1. روی + کلیک کنید.
2. تب Patterns را باز کنید.
3. دسته مورد نظر را انتخاب کنید.
4. Pattern را جست‌وجو کنید.
5. روی پیش‌نمایش کلیک کنید.
6. محتوا، لینک و تصویر را بررسی کنید.

Pattern در محل Cursor درج می‌شود. اگر داخل Columns یا Group اشتباه قرار گرفت، از List View برای جابه‌جایی استفاده کنید.

دسته‌بندی Patternها

دسته‌بندی باعث می‌شود Inserter شلوغ نشود. دسته‌های کاربردی می‌توانند شامل Hero، CTA، Pricing، Testimonials، FAQ، Team، Contact و Article Components باشند.

در پروژه فارسی نیز بهتر است نام داخلی Pattern کوتاه و منظم باشد. ترکیب زبان‌ها اشکالی ندارد، اما یک استاندارد ثابت انتخاب کنید.

Duplicate کردن Pattern

برای ساخت نسخه جدید از یک طراحی، Pattern را Duplicate کنید و نام تازه بدهید. این روش امن‌تر از تغییر Pattern اصلی است، به‌خصوص اگر نسخه اصلی در چند صفحه استفاده شده باشد.

Detach کردن Synced Pattern

Detach ارتباط نمونه انتخاب‌شده را با Pattern اصلی قطع می‌کند و آن را به بلوک‌های مستقل تبدیل می‌کند. پس از Detach، تغییرات Pattern اصلی روی آن نمونه اثر ندارند.

چه زمانی Detach کنیم؟

• فقط یک صفحه باید متن متفاوت داشته باشد.
• ساختار نسخه محلی قرار است تغییر کند.
• نمی‌خواهید تغییر آینده روی این نمونه اعمال شود.
• Pattern اشتباهی به‌صورت Synced ساخته شده است.

Detach معمولاً بازگشت خودکار ندارد. اگر دوباره همگام‌سازی لازم است، Pattern اصلی را مجدداً درج کنید.

ویرایش Content-only در Pattern

در برخی Patternها می‌توان ساختار را قفل و فقط فیلدهای محتوایی را قابل ویرایش کرد. این حالت برای تیم محتوا مفید است؛ طراح Layout را می‌سازد و نویسنده فقط متن و تصویر را تغییر می‌دهد.

در WordPress 7.0 امکانات ویرایش محدودشده Patternها توسعه یافته‌اند، اما رفتار دقیق به تنظیم Pattern، Block Theme و ابزار توسعه بستگی دارد.

قفل کردن بلوک‌های Pattern

Block Locking می‌تواند حذف یا جابه‌جایی بلوک‌ها را محدود کند. برای Patternهای سازمانی، Group والد، Columns و دکمه اصلی را قفل کنید تا ساختار ناخواسته خراب نشود.

قفل بلوک جای مدیریت نقش و دسترسی نیست. کاربران مدیر ممکن است قفل را باز کنند.

ساخت Pattern حرفه‌ای

یک Pattern خوب باید:

• هدف مشخص داشته باشد.
• ساختار List View تمیز داشته باشد.
• Groupهای مهم نام‌گذاری شوند.
• از رنگ و فونت Global Styles استفاده کند.
• در موبایل درست نمایش داده شود.
• تصویر Placeholder منطقی داشته باشد.
• متن نمونه کوتاه و قابل جایگزینی باشد.
• لینک آزمایشی یا خراب نداشته باشد.

نمونه پروژه: ساخت CTA پایان مقاله

1. یک Group با پس‌زمینه روشن بسازید.
2. Padding و Border Radius تنظیم کنید.
3. Heading با متن «مرحله بعدی را شروع کنید» اضافه کنید.
4. یک Paragraph کوتاه قرار دهید.
5. Buttons با لینک صفحه هدف بسازید.
6. Group را در List View نام‌گذاری کنید.
7. همه بخش را به Synced Pattern تبدیل کنید.
8. آن را در چند مقاله آزمایشی درج کنید.

اگر مقصد دکمه در همه مقالات یکسان است، Synced Pattern مناسب است. اگر هر مقاله CTA متفاوت دارد، Pattern معمولی انتخاب بهتری است.

نمونه پروژه: ساخت باکس معرفی نویسنده

یک Media & Text یا Row با Avatar، نام، توضیح و Social Icons بسازید. اگر اطلاعات نویسنده ثابت است، آن را Synced کنید. اگر سایت چند نویسنده دارد، Pattern معمولی یا Block پویا منطقی‌تر است.

Import و Export Pattern

Patternهای کاربر می‌توانند با فرمت JSON صادر یا وارد شوند. این قابلیت برای انتقال بین Staging و سایت اصلی، اشتراک با تیم یا نگهداری نسخه پشتیبان مفید است.

فایل JSON را فقط از منبع معتبر وارد کنید. پس از Import، تصاویر، لینک‌ها، کلاس‌های CSS و وابستگی به افزونه‌ها را بررسی کنید.

Pattern Directory وردپرس

مخزن رسمی WordPress Pattern Directory مجموعه‌ای از الگوهای آماده ارائه می‌دهد. می‌توانید Pattern را کپی و داخل ویرایشگر Paste کنید، سپس متن، تصویر و رنگ را تغییر دهید.

هر Pattern آماده الزاماً با زبان فارسی، RTL، برند و قالب شما هماهنگ نیست. پیش‌نمایش موبایل و دسترس‌پذیری را بررسی کنید.

ساخت Pattern در قالب با فایل PHP

توسعه‌دهنده قالب می‌تواند Pattern را داخل پوشه patterns ثبت کند. نمونه ساختار:

my-theme/
└── patterns/
    ├── hero.php
    ├── call-to-action.php
    └── pricing.php

در Header فایل Pattern، عنوان، Slug، Categories و Block Types تعریف می‌شوند. محتوای فایل از Block Markup تشکیل می‌شود.

ثبت Pattern با PHP API

افزونه یا قالب می‌تواند با تابع register_block_pattern() Pattern ثبت کند. این روش برای محصول نرم‌افزاری، سایت چندمحیطی و کنترل نسخه مناسب است.

Patternهایی که فقط داخل دیتابیس ساخته می‌شوند برای کاربر نهایی ساده‌اند؛ Patternهای فایل‌محور برای توسعه تیمی و Git قابل کنترل‌تر هستند.

Pattern Overrides چیست؟

Pattern Overrides اجازه می‌دهد ساختار یک Synced Pattern ثابت بماند اما بعضی فیلدهای محتوایی در هر نمونه متفاوت باشند. این قابلیت برای کارت‌هایی مفید است که Layout مشترک دارند ولی عنوان یا تصویر هر نمونه فرق می‌کند.

پشتیبانی دقیق این قابلیت به نسخه وردپرس، نوع Block و نحوه تعریف Pattern بستگی دارد. قبل از استفاده گسترده، روی Staging آزمایش کنید.

Pattern و طراحی واکنش‌گرا

یک Pattern ممکن است در پیش‌نمایش Inserter زیبا باشد اما در موبایل مشکل داشته باشد. موارد زیر را کنترل کنید:

• Columns به ترتیب منطقی Stack شوند.
• Heading از عرض خارج نشود.
• Buttonها قابل لمس باشند.
• تصاویر Crop نامناسب نداشته باشند.
• Padding در موبایل کاهش یابد.
• Rowها Wrap شوند.
• جدول و کد اسکرول کنترل‌شده داشته باشند.

Pattern و Global Styles

Pattern حرفه‌ای باید تا حد ممکن از Presetهای Global Styles استفاده کند. اگر رنگ و فونت به‌صورت دستی داخل هر بلوک ذخیره شوند، تغییر برند در آینده دشوار می‌شود.

مقاله آموزش Global Styles و تنظیم رنگ و فونت روش ساخت پالت و Typography مرکزی را توضیح می‌دهد.

Pattern و سئو

Pattern به‌خودی‌خود مزیت یا ضرر مستقیم سئو ندارد؛ خروجی HTML و محتوای آن مهم است. با این حال اشتباه‌های زیر می‌توانند مشکل ایجاد کنند:

• تکرار H1 داخل Pattern در همه صفحات
• لینک‌های ثابت و نامرتبط در صدها صفحه
• متن تکراری طولانی
• تصویر بدون Alt
• دکمه با لینک شکسته
• CTA بسیار سنگین در همه مقالات

برای CTA عمومی، متن کوتاه و مرتبط نگه دارید. Pattern نباید بخش اصلی محتوای اختصاصی صفحه را تکراری کند.

Pattern و سرعت سایت

خود Pattern فقط روش سازمان‌دهی بلوک‌هاست، اما محتوای آن می‌تواند سنگین باشد. ویدئو، Slider، فرم، فونت، تصویر بزرگ و افزونه بلوکی روی هر صفحه تکرار می‌شوند.

• تصاویر را WebP و بهینه کنید.
• اسکریپت غیرضروری وارد Pattern نکنید.
• DOM تودرتو را محدود کنید.
• افزونه بلوکی فقط برای یک Pattern نصب نکنید.
• Patternهای عمومی را روی Core Web Vitals بررسی کنید.

Pattern در WoodMart

قالب WoodMart می‌تواند در محتوای Gutenberg از Patternهای وردپرس استفاده کند، اما برای بخش‌های اختصاصی قالب ابزار HTML Blocks نیز دارد. این دو مفهوم را اشتباه نگیرید.

• WordPress Pattern: مجموعه بلوک‌های Gutenberg
• WoodMart HTML Block: نوع محتوای اختصاصی قالب برای مگامنو، فوتر و بخش‌های تکراری

برای مقاله و برگه بلوکی، Pattern مناسب است. برای بخشی که WoodMart Header Builder یا Layout Builder مستقیماً HTML Block می‌خواهد، از ابزار اختصاصی قالب استفاده کنید.

رفع مشکل تغییر ناخواسته چند صفحه

احتمالاً Synced Pattern را ویرایش کرده‌اید. Revision یا نسخه قبلی Pattern را بررسی کنید. اگر فقط یک صفحه باید متفاوت باشد، نمونه آن را Detach و سپس ویرایش کنید.

رفع مشکل پیدا نکردن Pattern

• نام و دسته را بررسی کنید.
• تب My Patterns را باز کنید.
• نقش کاربر و دسترسی را کنترل کنید.
• مطمئن شوید Pattern حذف نشده است.
• کش مرورگر را پاک کنید.
• تداخل افزونه را روی Staging بررسی کنید.

رفع خطای Invalid Content

ویرایش دستی HTML، حذف افزونه Block یا تغییر Markup می‌تواند Pattern را نامعتبر کند. از Attempt Recovery استفاده کنید، اما قبل از بازیابی محتوای مهم را کپی کنید.

اگر Pattern به Block افزونه وابسته است، حذف افزونه ممکن است Missing Block ایجاد کند.

رفع مشکل استایل متفاوت Pattern

Pattern ممکن است از رنگ یا فونت قالب مبدأ استفاده کرده باشد. Global Styles، کلاس‌های CSS، افزونه‌های مورد نیاز و تنظیمات Local Override را بررسی کنید.

پس از Import، ظاهر Front-end و حالت ناشناس را کنترل و کش را پاک کنید.

اشتباهات رایج

• ساخت همه Patternها به‌صورت Synced
• نام‌گذاری نامفهوم
• ویرایش Pattern همگام بدون بررسی محل‌های استفاده
• استفاده از H1 داخل Pattern عمومی
• قرار دادن لینک آزمایشی
• استفاده زیاد از Spacer
• وابستگی به افزونه بلوکی غیرضروری
• تست نکردن RTL و موبایل
• Import از منبع ناشناس
• اشتباه گرفتن Pattern با Template Part و HTML Block

چک‌لیست ساخت Pattern حرفه‌ای

• هدف Pattern مشخص است.
• نوع معمولی یا Synced آگاهانه انتخاب شده است.
• نام و دسته روشن هستند.
• ساختار List View مرتب است.
• رنگ و فونت از Global Styles می‌آیند.
• موبایل و RTL تست شده‌اند.
• لینک و دکمه صحیح‌اند.
• تصویر Alt دارد.
• Heading منطقی است.
• بلوک‌های حیاتی در صورت نیاز Lock شده‌اند.
• نسخه Export یا بکاپ موجود است.

📌 همچنین بخوانید: دسترس‌پذیری در Gutenberg و Site Editor وردپرس، طراحی ریسپانسیو در Gutenberg و Site Editor وردپرس و ساخت لندینگ پیج با Gutenberg در وردپرس

پرسش‌های متداول

تفاوت Pattern و Reusable Block چیست؟

Reusable Block نام قدیمی مفهوم محتوای همگام بود. در نسخه‌های جدید وردپرس، Synced Pattern جای آن را گرفته است.

آیا Pattern معمولی بعد از ویرایش نسخه اصلی تغییر می‌کند؟

خیر. نمونه درج‌شده مستقل است.

چگونه فقط یک Synced Pattern را تغییر دهیم؟

آن نمونه را Detach کنید و سپس بلوک‌های مستقل را ویرایش کنید.

آیا Pattern در قالب کلاسیک کار می‌کند؟

بله، ویرایشگر بلوکی می‌تواند Pattern را داخل نوشته و برگه استفاده کند؛ اما مدیریت کامل Site Editor مخصوص Block Theme است.

Pattern بهتر است یا HTML Block در WoodMart؟

برای محتوای Gutenberg از Pattern استفاده کنید. برای بخش‌هایی که ابزار اختصاصی WoodMart به HTML Block وابسته است، HTML Block مناسب‌تر است.

آیا Pattern روی سرعت اثر دارد؟

روش Pattern به‌تنهایی نه؛ اما بلوک‌ها، تصاویر و اسکریپت‌های داخل آن می‌توانند سرعت را تغییر دهند.

جمع‌بندی

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

برای Layoutهای مشابه با محتوای متفاوت از Pattern معمولی استفاده کنید. برای اعلان، CTA یا اطلاعات ثابت از Synced Pattern کمک بگیرید. قبل از ویرایش نسخه همگام، محل‌های استفاده را بررسی کنید و برای تغییر یک نمونه از Detach استفاده کنید.

Pattern حرفه‌ای باید نام روشن، ساختار مرتب، طراحی واکنش‌گرا، وابستگی کم و هماهنگی با Global Styles داشته باشد. در سایت WoodMart نیز تفاوت Pattern وردپرس و HTML Block اختصاصی قالب را در نظر بگیرید.

برای تکمیل این مسیر، مقاله آموزش کامل Gutenberg، راهنمای Site Editor و مقاله Global Styles وردپرس را مطالعه کنید.

منابع رسمی

• راهنمای رسمی Block Patterns
• مدیریت Patterns در Site Editor
• کار با Block و Synced Pattern
• Block Patterns API
• راهنمای توسعه Pattern
• WordPress Pattern Directory