بلوک های سفارشی: آموزش جامع ساخت و کاربرد (گام به گام)

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

مدیریت محتوا توی دنیای دیجیتال امروز، واقعاً به یک هنر تبدیل شده. وردپرس هم که ماشاءالله، خودش در صدر جدول سیستم های مدیریت محتوا نشسته و همیشه داره بهتر و بهتر میشه. یکی از بزرگ ترین و کارآمدترین تغییراتش هم معرفی ویرایشگر گوتنبرگ بود. یادتونه؟ از نسخه ۵ به بعد، ویرایشگر کلاسیک رفت و جای خودش رو به این دنیای بلوکی داد.

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

بلوک های سفارشی: مفهوم، مزایا و انواع آن

شاید بپرسید اصلاً بلوک سفارشی (Custom Block) چیه و چه فرقی با بلوک های معمولی داره؟ راستش رو بخواهید، بلوک سفارشی یک جور بلوک ویژه است که خودتون بر اساس نیازهای سایتتون طراحی و می سازید. یعنی دقیقاً اون چیزی رو که تو ذهنتونه، تبدیل به یک بلوک قابل استفاده می کنید. بلوک های پیش فرض وردپرس هم خوبن، ولی خب عمومی هستن. وقتی شما نیاز به یک چیز اختصاصی دارید، مثلاً یک بخش خاص برای معرفی اعضای تیم یا یک جدول قیمت گذاری با دیزاین منحصر به فرد، بلوک های سفارشی به کارتون میان. فرقشون با بلوک های تو در تو (Nested Blocks) هم اینه که بلوک های تو در تو، در واقع چند تا بلوک پیش فرض هستن که داخل یک بلوک دیگه (مثلاً بلوک گروه) قرار می گیرن تا یک ساختار پیچیده تر رو بسازن. ولی بلوک سفارشی، خودش از پایه یک بلوک جدید با قابلیت های کاملاً اختصاصی شماست.

چرا استفاده از بلوک های سفارشی ضروری است؟

استفاده از بلوک های سفارشی فقط یه آپشن نیست، بلکه برای خیلی ها یک ضرورت محسوب میشه. ببینید، این بلوک ها کلی مزیت دارن که می تونن کار شما رو از زمین تا آسمون تغییر بدن:

• انعطاف پذیری طراحی بی نهایت: شما دیگه محدود به بلوک های از پیش تعریف شده نیستید. هر طرحی که دوست دارید رو می تونید بسازید و به سایتتون اضافه کنید.
• برندسازی قوی تر: می تونید بلوک هایی بسازید که کاملاً با هویت بصری و برند شما همخوانی دارن. اینطوری سایتتون حرفه ای تر و یکپارچه تر به نظر میاد.
• بهبود تجربه کاربری (UX): محتوای سایتتون رو با بلوک های اختصاصی، منظم تر و جذاب تر نمایش می دید که باعث میشه کاربر راحت تر با سایت ارتباط برقرار کنه.
• کاهش زمان توسعه: به جای اینکه هر بار یک بخش خاص رو از اول طراحی کنید، یک بار بلوکش رو می سازید و هر جا نیاز داشتید، فقط اضافه اش می کنید. اینطوری حسابی در وقتتون صرفه جویی میشه.
• سئوی بهتر: می تونید بلوک هایی بسازید که ساختار محتوایی بهتری دارن و به موتورهای جستجو کمک می کنن تا محتوای شما رو راحت تر درک کنن.
• قابلیت استفاده مجدد: این یکی واقعاً طلاییه! یک بلوک رو یک بار می سازید و بعد می تونید بارها و بارها تو پست ها و صفحات مختلف استفاده کنید، بدون اینکه نیاز به تکرار کدنویسی یا طراحی مجدد باشه.

انواع بلوک های سفارشی و مثال های کاربردی

فکر نکنید بلوک سفارشی یعنی فقط یه دکمه یا یه تیتر خاص. نه! کاربردهاش خیلی وسیع تر از این حرفاست. بریم چند تا مثال کاربردی رو با هم ببینیم:

• بلوک نظرات مشتریان (Testimonials): فرض کنید می خواید نظرات مشتری هاتون رو با یک طراحی شیک و یکپارچه نشون بدید. یک بلوک سفارشی می سازید که شامل عکس مشتری، نام، عنوان و متن نظر باشه و هر بار فقط اطلاعات رو پر می کنید.
• بلوک اعضای تیم (Team Members): برای معرفی تیمتون، یک بلوک شامل عکس، نام، سِمت و لینک شبکه های اجتماعی هر عضو می تونه خیلی شیک و کاربردی باشه.
• بلوک فراخوان به اقدام (Call-to-Action – CTA) با طراحی خاص: یه دکمه CTA با یک رنگ خاص، متن منحصر به فرد و حتی یک آیکون اختصاصی که دقیقاً با سلیقه شما جور در میاد.
• بلوک جداول قیمت گذاری (Pricing Tables): اگه محصول یا خدماتی دارید که چندین پلن قیمتی دارن، می تونید یک جدول قیمت گذاری با تمام جزئیات و استایل های دلخواه خودتون طراحی کنید.
• بلوک نمایش محتوای داینامیک (مثل فیلدهای سفارشی Custom Fields): تصور کنید می خواهید اطلاعاتی رو از فیلدهای سفارشی که برای پست هاتون تعریف کردید (مثلاً قیمت محصول یا مشخصات فنی) به شکلی خاص نمایش بدید. این بلوک ها بهتون کمک می کنن.
• بلوک های ساختاریافته (مثل Accordion، Tabs، FAQ): اگه محتوای زیادی دارید که می خواید توی فضایی کم و به صورت منظم نشون بدید (مثل سوالات متداول که با کلیک باز و بسته میشن)، این بلوک ها حسابی به کارتون میان.

روش اول: ساخت بلوک های سفارشی بدون کدنویسی (با افزونه ها – گام به گام)

خبر خوب برای کسایی که دلشون نمی خواد یا وقت ندارن سراغ کدنویسی برن، اینه که میشه با کمک افزونه ها هم بلوک های سفارشی ساخت! این روش کلی مزایا داره؛ مثلاً نیاز به دانش فنی خاصی نداره، سریع تر میشه بلوک رو ساخت و واسط کاربری (UI) ساده ای داره. اما خب، محدودیت هایی هم داره؛ شاید نتونید هر جزئیاتی رو که تو ذهنتونه پیاده کنید یا عملکرد بلوک به اندازه بلوک های کدنویسی شده، بهینه نباشه. ولی برای شروع یا برای نیازهای معمولی، واقعاً عالیه.

افزونه های برتر برای ساخت بلوک سفارشی

توی دنیای وردپرس، چند تا افزونه هستن که مثل «آچار فرانسه» عمل می کنن و بهتون اجازه میدن بلوک های سفارشی بسازید. اینجا دو تا از بهترین هاشون رو با هم مرور می کنیم:

ساخت بلوک سفارشی با Advanced Custom Fields (ACF) Pro

افزونه Advanced Custom Fields (ACF) Pro یکی از محبوب ترین و قدرتمندترین ابزارها برای اضافه کردن فیلدهای سفارشی و البته ساخت بلوک های سفارشی توی وردپرسه. اگه یک بار باهاش کار کنید، می بینید که چقدر کار رو راحت می کنه. چرا اینقدر محبوبه؟ چون خیلی انعطاف پذیره و بهتون اجازه میده هر نوع فیلدی رو بسازید و بعد هم از اون فیلدها توی بلوک هاتون استفاده کنید. بریم سراغ آموزش گام به گام:

گام ۱: نصب و فعال سازی افزونه ACF Pro

اول از همه، باید افزونه ACF Pro رو روی سایتتون نصب و فعال کنید. خب، می دونید که این افزونه نسخه رایگان و پرو داره. برای ساخت بلوک سفارشی، به نسخه پرو نیاز دارید. بعد از دانلود و نصب، از بخش افزونه ها (Plugins) اون رو فعال کنید. وقتی فعال شد، یک آیتم جدید به اسم ACF تو سایدبار پنل مدیریت وردپرس اضافه میشه.

گام ۲: ایجاد گروه فیلد جدید

حالا باید فیلدهایی که می خواید تو بلوکتون داشته باشید رو تعریف کنید. این فیلدها تو یک گروه فیلد (Field Group) قرار می گیرن. از منوی ACF، روی Field Groups کلیک کنید و بعد Add New رو بزنید. یک اسم براش انتخاب کنید، مثلاً فیلدهای بلوک نظرات. این گروه فیلد، در واقع کانتینری برای فیلدهای شماست.

گام ۳: اضافه کردن فیلدهای مورد نیاز برای بلوک سفارشی

تو همین صفحه گروه فیلد که هستید، روی دکمه Add Field کلیک کنید. فرض کنید می خوایم یک بلوک برای نظرات مشتریان بسازیم. فیلدهای زیر رو اضافه می کنیم:

• نام مشتری: Field Type: Text، Field Label: نام مشتری
• سمت/عنوان: Field Type: Text، Field Label: سمت مشتری
• عکس مشتری: Field Type: Image، Field Label: عکس مشتری
• متن نظر: Field Type: Wysiwyg Editor (یک ویرایشگر کوچک برای متن)، Field Label: متن نظر

برای هر کدوم از این فیلدها، یک Field Name به صورت خودکار ایجاد میشه که بعداً توی کد بهش نیاز پیدا می کنیم. حواستون باشه که این فیلدها رو ذخیره کنید.

گام ۴: ایجاد یک نوع بلوک (Block Type) جدید در ACF

اینجا مرحله اصلی ساخت بلوک توی ACF هست. از منوی ACF، روی Blocks کلیک کنید و بعد Add New رو بزنید. حالا باید جزئیات بلوکتون رو تعریف کنید:

• Name (Slug): یک نام منحصر به فرد و انگلیسی براش انتخاب کنید، مثلاً testimonial-block.
• Label: اسمی که تو ویرایشگر گوتنبرگ به کاربر نشون داده میشه، مثلاً بلوک نظرات مشتریان.
• Description: یک توضیح کوتاه، مثلاً بلوکی برای نمایش نظرات مشتریان.
• Category: دسته ای که بلوک توش قرار می گیره (مثل Common، Layout، Widgets). می تونید یک دسته جدید بسازید یا از دسته های موجود انتخاب کنید.
• Icon: یک آیکون مناسب از لیست آیکون های وردپرس انتخاب کنید تا بلوکتون تو ویرایشگر قشنگ تر دیده بشه.
• Keywords: کلماتی که با جستجوشون، بلوکتون پیدا میشه (مثلاً testimonial، نظر، مشتری).
• Mode: حالت نمایش بلوک (Preview برای نمایش کامل، Edit برای نمایش فیلدها).
• Render Template: مهمترین قسمت! اینجا باید مسیری رو بدید که فایل قالب (Template) بلوکتون قرار داره. مثلاً /template-parts/blocks/testimonial-block.php. (این فایل رو توی گام بعد می سازیم)

حالا تو بخش Location Rules پایین صفحه، باید Field Group که تو گام ۲ ساختید رو به این بلوک لینک کنید. یعنی میگید این فیلدهایی که ساختید، برای این بلوک قابل استفاده باشن. اینو هم ذخیره کنید.

گام ۵: طراحی قالب (Template) بلوک با HTML و PHP

حالا نوبت به طراحی ظاهر بلوکه. یک فایل PHP با همون مسیری که تو گام ۴ مشخص کردید، بسازید. مثلاً wp-content/themes/your-theme-name/template-parts/blocks/testimonial-block.php. تو این فایل، با HTML و PHP، می تونید فیلدهایی که ساختید رو فراخوانی کنید و نشون بدید:

ببینید، اینجا ما از تابع the_field() استفاده کردیم که از ACF میاد و محتوای فیلدها رو نمایش میده. get_field() هم برای گرفتن مقدار فیلد استفاده میشه، مثلاً برای چک کردن اینکه آیا عکسی آپلود شده یا نه.

گام ۶: افزودن استایل های CSS به بلوک سفارشی

بلوکتون بدون استایل که قشنگ نیست! باید بهش CSS بدید. بهترین کار اینه که یک فایل CSS جداگانه برای بلوک هاتون بسازید و تو فایل functions.php قالب، اون رو به وردپرس معرفی کنید. مثلاً یک فایل به اسم testimonial-block.css کنار فایل PHP تون بسازید و کد CSS رو توش بنویسید:

.testimonial-item {
    background-color: #f9f9f9;
    border: 1px solid #eee;
    padding: 20px;
    margin-bottom: 20px;
    text-align: center;
    border-radius: 8px;
}

.reviewer-image {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 10px;
    border: 2px solid #ddd;
}

.reviewer-name {
    font-size: 1.2em;
    font-weight: bold;
    color: #333;
    margin-bottom: 5px;
}

.reviewer-title {
    font-size: 0.9em;
    color: #777;
    margin-bottom: 15px;
}

.testimonial-text {
    font-style: italic;
    color: #555;
    line-height: 1.6;
}

بعد، تو فایل functions.php قالبتون، این کد رو اضافه کنید تا فایل CSS لود بشه (مسیر رو بر اساس محل فایل CSS خودتون تنظیم کنید):

add_action('acf/init', 'my_acf_init_blocks');
function my_acf_init_blocks() {
    if( function_exists('acf_register_block_type') ) {
        wp_register_style(
            'testimonial-block-style',
            get_template_directory_uri() . '/template-parts/blocks/testimonial-block.css',
            array(),
            '1.0.0'
        );
    }
}

add_action('enqueue_block_assets', 'my_enqueue_block_styles');
function my_enqueue_block_styles() {
    if( function_exists('acf_register_block_type') ) {
        wp_enqueue_style('testimonial-block-style');
    }
}

گام ۷: استفاده و تست بلوک در ویرایشگر گوتنبرگ

تبریک! حالا بلوکتون آماده ست. به یک پست یا صفحه برید و ویرایشگر گوتنبرگ رو باز کنید. روی دکمه + برای اضافه کردن بلوک جدید کلیک کنید و اسم بلوکتون (مثلاً بلوک نظرات مشتریان) رو جستجو کنید. می بینید که بلوک شما ظاهر میشه. اون رو اضافه کنید و فیلدها رو پر کنید. حتماً پیش نمایش رو ببینید تا مطمئن بشید همه چیز درست کار می کنه.

نگاهی به Genesis Custom Blocks (روش جایگزین)

افزونه Genesis Custom Blocks هم یکی دیگه از افزونه های خوب برای ساخت بلوک های سفارشی بدون کدنویسیه. این افزونه که توسط تیم WP Engine توسعه داده شده، یک واسط کاربری ساده تر داره و برای توسعه دهندگانی که می خوان سریع یک بلوک رو با فیلدهای مشخص بسازن، خیلی کارآمده. مراحل ساخت بلوک با این افزونه شبیه به ACF هست؛ یعنی باید یک بلوک جدید بسازید، فیلدها رو تعریف کنید و بعد هم قالب (Template) بلوک رو با HTML و CSS (و در صورت نیاز PHP) طراحی کنید. تفاوت اصلیش توی واسط کاربری و نحوه مدیریت فیلدهاست که ممکنه برای بعضی ها راحت تر باشه. انتخاب بین ACF و Genesis Custom Blocks بیشتر به سلیقه و عادت شما برمی گرده، چون هر دو کارتون رو راه میندازن.

سایر افزونه ها (مثل Kadence Blocks Pro، CoBlocks)

به جز ACF و Genesis Custom Blocks، افزونه های دیگه ای هم هستن که امکانات ساخت بلوک های پیشرفته تر رو میدن یا بلوک های از پیش ساخته شده زیادی دارن که می تونید اون ها رو شخصی سازی کنید. Kadence Blocks Pro و CoBlocks نمونه هایی از این افزونه ها هستن که هر کدوم قابلیت ها و بلوک های خاص خودشون رو دارن و می تونن بهتون کمک کنن تا بدون کدنویسی، طراحی های پیچیده تری رو پیاده سازی کنید. این افزونه ها بیشتر برای کسایی خوبن که به دنبال بلوک های آماده و پرامکانات هستن و کمتر قصد ساخت بلوک از صفر رو دارن.

روش دوم: ساخت بلوک های سفارشی با کدنویسی (برای توسعه دهندگان – گام به گام مقدماتی)

اگه شما یک توسعه دهنده هستید و می خواید نهایت کنترل و انعطاف پذیری رو روی بلوک هاتون داشته باشید، یا اگه نیاز به قابلیت های خیلی خاص و پیچیده ای دارید که با افزونه ها نمیشه پیاده کرد، پس کدنویسی بهترین راهه. این روش به شما اجازه میده بلوک هایی با عملکرد کاملاً سفارشی، بهینه و با بهترین پرفورمنس بسازید. البته خب، چالش های خودش رو هم داره و نیاز به دانش فنی خوبی توی زمینه های مختلف داره.

مقدمه و پیش نیازها

خب، بیاین راستش رو بگیم، این بخش برای اونایی هست که با کد سروکار دارن و نمی ترسن دست به PHP و جاوااسکریپت بزنن! ساخت بلوک با کدنویسی، همونطور که گفتم، نهایت قدرت رو بهتون میده، اما باید پیش نیازهایی رو هم داشته باشید. مثلاً باید با HTML و CSS آشنا باشید، PHP رو در حد قابل قبولی بلد باشید و از همه مهم تر، یه دانش مقدماتی از جاوااسکریپت، به خصوص فریم ورک React.js و همینطور Node.js و npm (Node Package Manager) داشته باشید. نترسید، قرار نیست از اول React رو یاد بگیرید، فقط در حدی که بتونید با کامپوننت های ساده کار کنید.

ساختار کلی یک بلوک گوتنبرگ با کد

هر بلوک گوتنبرگ که با کد ساخته میشه، معمولاً از چند تا فایل اصلی تشکیل شده. این فایل ها با هم کار می کنن تا بلوک شما هم تو ویرایشگر وردپرس خوب عمل کنه و هم تو صفحه اصلی سایت به درستی نمایش داده بشه:

• block.json: این فایل مثل شناسنامه بلوک شماست. تمام اطلاعات مهم بلوک مثل نام، عنوان، توضیحات، آیکون، دسته بندی و حتی مسیر فایل های جاوااسکریپت و CSS بلوک، اینجا تعریف میشه.
• index.js: این فایل نقطه ورود بلوک شما به دنیای جاوااسکریپته. اینجا بلوک Register میشه و فایل های edit.js و save.js رو ایمپورت می کنه.
• edit.js: این فایل مسئول تعریف چیزیه که کاربر توی ویرایشگر گوتنبرگ میبینه و باهاش کار می کنه. با استفاده از React و کامپوننت های وردپرس، شما ظاهر و منطق بلوک رو تو حالت ویرایش تعریف می کنید.
• save.js: این فایل تعریف می کنه که وقتی بلوک ذخیره میشه، خروجی نهایی HTML اون چی باشه. این چیزیه که کاربر تو فرانت اند سایت میبینه.
• style.css و editor.css: این فایل ها هم برای استایل دهی بلوک هستن. style.css برای ظاهر بلوک تو فرانت اند و editor.css برای ظاهر بلوک تو ویرایشگره.

گام ۱: آماده سازی محیط توسعه

اولین قدم، آماده کردن محیط کارتون هست. برای این کار، نیاز به Node.js دارید. اگه نصب نیست، از سایت رسمی Node.js اون رو دانلود و نصب کنید. بعد از نصب Node.js، ابزار خط فرمان npm هم همراهش نصب میشه. حالا می تونید با دستور زیر، ابزار ساخت بلوک وردپرس رو نصب کنید و یک پروژه جدید ایجاد کنید:

npm install -g @wordpress/create-block
npx @wordpress/create-block your-custom-block

با اجرای دستور دوم، your-custom-block رو با نام دلخواه بلوکتون عوض کنید (مثلاً my-testimonial-block). این دستور یک فولدر جدید با تمام فایل های اولیه بلوک براتون می سازه. وارد این فولدر بشید (با cd your-custom-block) و برای نصب وابستگی ها، npm install رو بزنید.

گام ۲: ثبت بلوک در سمت سرور (PHP)

حالا باید وردپرس رو خبردار کنیم که یک بلوک جدید داریم. این کار رو تو فایل اصلی افزونه ای که برای بلوکتون ساختید (مثلاً your-custom-block.php) یا تو فایل functions.php قالبتون انجام میدیم. اما بهترین کار اینه که یک افزونه جدا برای بلوکتون بسازید. فایل your-custom-block.php رو باز کنید:

تابع register_block_type() به وردپرس میگه که بلوک ما کجاست. __DIR__ . '/build' هم مسیر پوشه build (که بعد از کامپایل شدن جاوااسکریپت ها و CSS ها توش قرار می گیرن) رو مشخص می کنه. تو فایل block.json که تو پوشه src بلوک قرار داره، تمام جزئیات دیگه بلوک (مثل عنوان، دسته، آیکون و مسیر اسکریپت ها) تعریف میشه.

گام ۳: تعریف منطق ویرایشگر بلوک (edit.js)

فایل src/edit.js جاییه که شما ظاهر و منطق بلوک رو تو ویرایشگر طراحی می کنید. اینجا از React Components و کامپوننت های UI وردپرس استفاده می کنید. فرض کنید می خوایم یه بلوک ساده برای نمایش متن بسازیم:

import { useBlockProps, RichText } from '@wordpress/block-editor';
import { Fragment } from '@wordpress/element';
import './editor.scss'; // یا editor.css

export default function Edit( { attributes, setAttributes } ) {
    const blockProps = useBlockProps();
    const { content } = attributes;

    const onChangeContent = ( newContent ) => {
        setAttributes( { content: newContent } );
    };

    return (
        
            

                
            
        
    );
}

اینجا RichText یک کامپوننت وردپرس برای ویرایش متن هست. attributes هم مقادیر بلوک رو نگه میداره و setAttributes برای تغییر اونها استفاده میشه. می تونید کامپوننت های دیگه ای مثل InspectorControls رو هم اضافه کنید تا تنظیمات بلوک تو سایدبار ویرایشگر نمایش داده بشه.

گام ۴: تعریف خروجی بلوک در فرانت اند (save.js)

فایل src/save.js مسئول تعریف خروجی نهایی HTML بلوکه که تو فرانت اند (یعنی همون چیزی که کاربر معمولی تو سایت میبینه) نمایش داده میشه. اینجا هم از React استفاده می کنیم، اما منطق پیچیده ای نداره، فقط باید خروجی HTML رو برگردونید:

import { useBlockProps, RichText } from '@wordpress/block-editor';

export default function save( { attributes } ) {
    const blockProps = useBlockProps.save();
    const { content } = attributes;

    return (
        

            
        
    );
}

همونطور که می بینید، اینجا RichText.Content فقط متن ذخیره شده رو نمایش میده و دیگه قابلیت ویرایش نداره.

گام ۵: افزودن استایل ها به بلوک

همونطور که گفتیم، دو نوع فایل CSS داریم: editor.css (یا editor.scss اگه از SASS استفاده می کنید) برای ویرایشگر و style.css (یا style.scss) برای فرانت اند. این فایل ها رو تو پوشه src بلوکتون بسازید و استایل های مورد نظرتون رو توشون بنویسید. مثلاً:

src/style.scss (برای فرانت اند):

.wp-block-create-block-your-custom-block {
    background-color: #f0f0f0;
    padding: 20px;
    border-radius: 5px;
    font-family: sans-serif;
    color: #333;
}

src/editor.scss (برای ویرایشگر):

.wp-block-create-block-your-custom-block {
    border: 1px dashed #ccc;
    background-color: #fefefe;
}

مسیر این فایل ها تو block.json تعریف میشه و ابزار @wordpress/scripts اونا رو کامپایل و تو پوشه build قرار میده.

گام ۶: کامپایل کردن و تست بلوک

بعد از اینکه فایل ها رو نوشتید، باید اونها رو کامپایل کنید. تو ترمینال، تو پوشه اصلی بلوکتون، دستور زیر رو اجرا کنید:

npm start

این دستور فایل های جاوااسکریپت و CSS رو کامپایل می کنه و تو پوشه build قرار میده و اگه تغییری تو فایل های src بدید، به صورت خودکار دوباره کامپایل می کنه. برای ساخت نسخه نهایی بلوک (برای انتشار)، از دستور زیر استفاده کنید:

npm run build

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

کاربردهای پیشرفته و مثال های عملی از بلوک های سفارشی

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

بلوک های داینامیک (Dynamic Blocks)

تصور کنید می خواهید محتوایی رو تو بلوکتون نمایش بدید که از دیتابیس یا یک API خارجی میاد و همیشه در حال تغییره. مثلاً لیست آخرین پست های یک دسته بندی خاص، قیمت لحظه ای ارز یا حتی وضعیت آب و هوای یک شهر. اینجاست که بلوک های داینامیک به کار میان. این بلوک ها خروجی HTMLشون رو هر بار که صفحه لود میشه، از سمت سرور (با PHP) تولید می کنن. یعنی دیگه مثل بلوک های معمولی، محتوای استاتیک ذخیره نمیشه و همیشه اطلاعات جدید رو نشون میدن. این کار رو میشه با تابع render_callback توی register_block_type انجام داد و به وردپرس گفت که برای نمایش این بلوک، چه تابعی رو تو PHP اجرا کنه.

بلوک های شرطی

گاهی اوقات شاید بخواهید یک بلوک فقط تو شرایط خاصی نمایش داده بشه. مثلاً فقط به کاربران وارد شده، یا فقط تو صفحات خاصی از سایت، یا شاید هم برای نقش های کاربری متفاوت. بلوک های شرطی بهتون اجازه میدن که این قوانین رو اعمال کنید. این کار رو میشه هم تو PHP (با چک کردن شرایط مختلف تو فایل قالب بلوک) و هم تو جاوااسکریپت (با استفاده از if/else و منطق های شرطی برای نمایش/عدم نمایش عناصر) انجام داد.

ساخت Layouts پیچیده: ترکیب بلوک های سفارشی با بلوک های تو در تو (Nested Blocks)

شما می تونید بلوک های سفارشی خودتون رو با بلوک های تو در تو ترکیب کنید تا لی آوت های (Layouts) پیچیده تر و حرفه ای تری بسازید. مثلاً یک بلوک سفارشی برای کارت محصول بسازید که خودش شامل یک بلوک تصویر، یک بلوک متن برای عنوان و یک بلوک دکمه برای افزودن به سبد خرید باشه. بعد می تونید این بلوک کارت محصول رو توی یک بلوک ستون (Columns Block) قرار بدید و چندین کارت محصول رو کنار هم بچینید. اینطوری، یک ساختار کاملاً شخصی سازی شده و منعطف دارید که هر بار می تونید ازش استفاده کنید.

ادغام با Custom Post Types

اگه با Custom Post Types (انواع پست سفارشی) کار می کنید (مثلاً برای محصولات، خدمات یا رزومه ها)، می تونید بلوک هایی بسازید که محتوای این CPTها رو به صورت خاصی نمایش بدن. مثلاً یک بلوک سفارشی لیست خدمات بسازید که به صورت خودکار، تمام خدمات شما رو که تو یک CPT خدمات تعریف کردید، با یک طراحی زیبا نمایش بده. این کار با استفاده از کوئری های وردپرس (WP_Query) تو PHP و ترکیب اون با بلوک سفارشی انجام میشه.

بهترین روش ها و نکات کلیدی برای توسعه بلوک های سفارشی

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

بهینه سازی عملکرد (Performance)

هیچ کس سایت کُند رو دوست نداره، درسته؟ بلوک های سفارشی هم اگه درست بهینه سازی نشن، می تونن سرعت سایت رو کم کنن. برای جلوگیری از این مشکل، چند تا نکته هست:

• بارگذاری شرطی اسکریپت ها و استایل ها: فقط وقتی فایل های CSS و JS بلوکتون رو لود کنید که اون بلوک واقعاً تو صفحه وجود داره. چرا بی خودی منابع رو بارگذاری کنیم؟
• استفاده از SSR (Server-Side Rendering) برای بلوک های کدنویسی شده: برای بلوک های داینامیک یا بلوک هایی که خروجی پیچیده ای دارن، بهتره که رندرینگ بلوک از سمت سرور (با PHP) انجام بشه. اینطوری هم سرعت اولیه لود صفحه بیشتر میشه و هم برای سئو بهتره.
• حجم کم فایل ها: سعی کنید فایل های جاوااسکریپت و CSS بلوکتون رو تا حد امکان کوچک نگه دارید.

امنیت و اعتبارسنجی

امنیت، خط قرمز ماست! وقتی بلوک سفارشی می سازید، حتماً باید به مسائل امنیتی توجه کنید. هر ورودی که از کاربر می گیرید، باید اعتبارسنجی و فیلتر بشه تا جلوی حملاتی مثل XSS گرفته بشه. همیشه از توابع امنیتی وردپرس (مثل wp_kses_post()، sanitize_text_field()) برای پاکسازی ورودی ها استفاده کنید.

قابلیت دسترسی (Accessibility)

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

• از تگ های HTML معنایی (Semantic HTML) استفاده کنید (مثل
  

  ،

  ،

  ،

  ).

• برای تصاویر، حتماً متن جایگزین (alt text) بذارید.
• اگه از تعاملات پیچیده استفاده می کنید، از ویژگی های ARIA (Accessible Rich Internet Applications) کمک بگیرید.

ریسپانسیو بودن

توی دنیای امروز، بخش زیادی از کاربران با موبایل وارد سایت میشن. پس بلوک های سفارشی شما باید روی همه دستگاه ها (موبایل، تبلت، دسکتاپ) به درستی و زیبایی نمایش داده بشن. از CSS Media Queries برای طراحی ریسپانسیو استفاده کنید و حتماً روی دستگاه های مختلف تستشون کنید.

مستندسازی

شاید الآن بگید مستندسازی برای چیه؟ خودم که می دونم چی نوشتم! ولی باور کنید، اگه بعد از چند ماه برگردید سراغ بلوکتون یا یه نفر دیگه بخواد روش کار کنه، نبود مستندات مثل یک کابوس میمونه. کدتون رو با کامنت های واضح توضیح بدید، یک README.md برای بلوکتون بنویسید که نحوه نصب، استفاده و شخصی سازی اون رو شرح بده.

مراقبت از تجربه کاربری ویرایشگر (Editor UX)

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

«ساخت بلوک های سفارشی مثل داشتن یک جعبه ابزار اختصاصیه. هر ابزاری رو که نیاز داشته باشی، خودت می سازی و هر وقت خواستی، فقط ازش استفاده می کنی. اینجوری هم کارها سریع تر پیش میره و هم نتیجه کار دقیقاً همونی میشه که تو ذهنت بوده.»

جمع بندی و نتیجه گیری

خب، رسیدیم به انتهای ماجرای بلوک های سفارشی! واقعاً وردپرس با معرفی گوتنبرگ و قابلیت بلوک ها، یک انقلاب تو مدیریت محتوا ایجاد کرد. دیدیم که بلوک های سفارشی چه قدرت و انعطاف پذیری بی نظیری بهمون میدن؛ از ساخت بخش های جذاب برای معرفی تیم و نظرات مشتریان گرفته تا جداول قیمت گذاری و فراخوان های به اقدام منحصر به فرد.

توی این آموزش جامع، با هم دو تا روش اصلی برای ساخت این بلوک ها رو بررسی کردیم: یکی روش بدون کدنویسی که با کمک افزونه های قدرتمندی مثل ACF Pro (و جایگزین هایی مثل Genesis Custom Blocks) به راحتی می تونید بلوک های دلخواهتون رو بسازید و دردسر کد رو نداشته باشید؛ و دومی، روش کدنویسی که برای توسعه دهنده های حرفه ای تره و بهشون اجازه میده نهایت کنترل و بهینه سازی رو روی بلوک ها داشته باشن.

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

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