آموزش تابع add_theme_support() در وردپرس و کاربرد آن

تابع add_theme_support() یکی از توابع کلیدی در توسعه قالب‌های وردپرس است که به تم اجازه می‌دهد تا از قابلیت‌های داخلی وردپرس استفاده کند. این تابع تعیین می‌کند که قالب شما از چه ویژگی‌هایی پشتیبانی کند؛ مثل تصویر شاخص، عنوان خودکار، لوگوی سفارشی، پشتیبانی HTML5 و قابلیت‌های ویرایشگر گوتنبرگ.

محل و نحوه استفاده: after_setup_theme

بهترین شیوه قرار دادن فراخوانی‌های add_theme_support() داخل یک تابع است که به هوک after_setup_theme متصل می‌شود تا مطمئن باشیم قبل از اجرا شدن بخش‌های دیگر تم، این تنظیمات اعمال شده‌اند.

function mytheme_setup() {
    add_theme_support( 'title-tag' );
    add_theme_support( 'post-thumbnails' );
    add_theme_support( 'html5', array( 'search-form', 'comment-form', 'gallery', 'caption' ) );
}
add_action( 'after_setup_theme', 'mytheme_setup' );

در این مثال سه قابلیت فعال می‌شوند: مدیریت عنوان توسط وردپرس، تصویر شاخص برای نوشته‌ها و پشتیبانی از عناصر HTML5. قرار دادن کد در after_setup_theme تضمین می‌کند که وردپرس و افزونه‌ها فرصت کافی برای بررسی این پشتیبانی داشته باشند.

نمونه‌های پرکاربرد و توضیحات

• post-thumbnails — فعال‌سازی تصویر شاخص (Featured Image).
• title-tag — اجازه می‌دهد وردپرس تگ <title> را مدیریت کند.
• custom-logo — پشتیبانی از لوگوی سفارشی با آرگومان‌های تنظیمی.
• custom-header و custom-background — مدیریت سربرگ و پس‌زمینه قابل تنظیم.
• html5 — خروجی فرم‌ها و اجزا با مارک‌آپ HTML5.
• align-wide, responsive-embeds — مخصوص ویرایشگر گوتنبرگ.

فعال‌سازی تصویر شاخص و اندازه‌های دلخواه

function mytheme_images() {
    add_theme_support( 'post-thumbnails' );
    add_image_size( 'homepage-thumb', 600, 400, true );
}
add_action( 'after_setup_theme', 'mytheme_images' );

کد بالا اولین خط تصویر شاخص را فعال می‌کند و سپس اندازه سفارشی homepage-thumb را تعریف می‌کند. پارامتر آخر در add_image_size، برش سخت (crop) را فعال کرده تا ابعاد دقیق تولید شود.

پیکربندی لوگوی سفارشی

function mytheme_logo() {
    add_theme_support( 'custom-logo', array(
        'height'      => 80,
        'width'       => 240,
        'flex-height' => true,
        'flex-width'  => true,
    ) );
}
add_action( 'after_setup_theme', 'mytheme_logo' );

در این مثال پارامترها مشخص می‌کنند که لوگو چه حداقل یا حداکثر اندازه‌ای داشته باشد و آیا اندازه انعطاف‌پذیر قابل قبول است یا نه. سپس می‌توان از توابعی مثل the_custom_logo() در قالب استفاده کرد.

پشتیبانی HTML5 و دلایل استفاده

استفاده از add_theme_support( 'html5', ... ) باعث می‌شود که وردپرس فرم‌ها، نظرات و اجزای دیگر را با تگ‌های HTML5 خروجی دهد، که از نظر سئو و دسترسی (accessibility) بهتر است.

نمونه‌ای از پشتیبانی گوتنبرگ (Block Editor)

function mytheme_gutenberg_support() {
    add_theme_support( 'editor-styles' );
    add_theme_support( 'align-wide' );
    add_theme_support( 'responsive-embeds' );
    add_theme_support( 'editor-color-palette', array(
        array( 'name' => 'Primary', 'slug' => 'primary', 'color' => '#0073aa' ),
        array( 'name' => 'Dark', 'slug' => 'dark', 'color' => '#111' ),
    ) );
}
add_action( 'after_setup_theme', 'mytheme_gutenberg_support' );

این نمونه نشان می‌دهد چگونه تم می‌تواند با گوتنبرگ هماهنگ شود: استایل‌های ویرایشی، امکان بلوک‌های عریض و پالت رنگ سفارشی برای سازگاری ظاهری بین ویرایشگر و فرانت‌اند.

چک کردن پشتیبانی و حذف قابلیت‌ها

if ( current_theme_supports( 'post-thumbnails' ) ) {
    // بر اساس پشتیبانی، کاری انجام شود
}

remove_theme_support( 'custom-header' );

با current_theme_supports() می‌توانید در فایل‌های قالب یا افزونه بررسی کنید که آیا قابلیت فعال است یا خیر. همچنین با remove_theme_support() می‌توان قابلیت‌هایی را که نیاز ندارید غیرفعال کرد (مثلاً در child theme).

نمونه بهینه و نکات حرفه‌ای

یکسری نکات برای کدنویسی بهتر و بهینه:

• فقط قابلیت‌هایی را فعال کنید که واقعا استفاده می‌شوند تا بار اضافی روی تم و مدیریت تنظیمات وجود نداشته باشد.
• همیشه after_setup_theme را استفاده کنید تا افزونه‌ها و child themeها امکان override داشته باشند.
• برای پشتیبانی گوتنبرگ، استایل و پالت رنگ را همگام نگه دارید تا تجربه ویرایشگر با فرانت‌اند یکسان شود.
• در تم‌های عمومی (public) دقت کنید که مقادیر custom-logo و custom-header مستند باشد تا کاربر به سادگی تنظیم کند.

جدول خلاصهٔ برخی مقادیر رایج

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

تابع add_theme_support() نقطهٔ ورود اصلی برای تعریف قابلیت‌های قالب در وردپرس است. استفادهٔ صحیح از آن باعث می‌شود قالب شما با هسته وردپرس، افزونه‌ها و ویرایشگر جدید هماهنگ شود و تجربهٔ کاربری و مدیریت محتوا بهبود یابد. رعایت بهترین شیوه‌ها مانند قرار دادن تنظیمات در هوک after_setup_theme و فعال‌سازی تنها قابلیت‌های مورد نیاز، به پایداری و کارایی قالب کمک می‌کند.

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

لطفاً از کمبود ها و مشکلات این محتوا برای ما بنویسید

ارسال