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

در توسعهٔ قالب‌های وردپرس، تنظیم پس‌زمینهٔ سایت یکی از امکانات پایه‌ای و پرکاربرد است. تابع get_custom_background() یکی از توابع تاریخی وردپرس برای دسترسی به تنظیمات پس‌زمینه بوده است؛ در این مقاله توضیح می‌دهیم این تابع چه کاری انجام می‌دهد، چرا منسوخ شده و چگونه به روش‌های مدرن‌تر به جای آن عمل کنید. همچنین نمونه‌‌کدهای کاربردی، نکات بهینه‌سازی و سناریوهای واقعی را بررسی می‌کنیم.

get_custom_background() چیست و وضعیت فعلی آن

get_custom_background() یک تابع قدیمی در وردپرس بود که برای گرفتن تنظیمات پس‌زمینهٔ سفارشی (رنگ، تصویر و تنظیمات مرتبط) به کار می‌رفت. از نسخه‌های نسبتاً قدیمی وردپرس به بعد این رویکرد به سمت API جدید تم‌ها و توابعی مانند get_background_image() و get_background_color() منتقل شد. بنابراین این تابع در بسیاری از حالت‌ها منسوخ است و بهتر است از توابع مدرن استفاده کنید تا با هستهٔ جدیدتر وردپرس سازگاری حفظ شود.

چرا باید به روش‌های مدرن مهاجرت کنید؟

• تضمین سازگاری با نسخه‌های جدید وردپرس و افزونه‌ها
• تفکیک بهتر داده‌ها: تصویر و رنگ جداگانه خوانده و مدیریت می‌شوند
• قابلیت استفاده از add_theme_support(‘custom-background’) و callback‌های سفارشی
• امکان تولید CSS پایدار و قابل کش با wp_add_inline_style به جای چاپ مستقیم

نمونهٔ قدیمی (مروری بر رفتار تابع منسوخ)

<?php
// مثال قدیمی (توضیح: این سبک مربوط به نسخه‌های قدیمی‌تر وردپرس است)
$bg = get_custom_background();
if ( ! empty( $bg ) ) {
    $image = $bg['url'];    // آدرس تصویر پس‌زمینه
    $color = $bg['color'];  // کد رنگ
    // خروجی CSS یا استفادهٔ دیگر
}
?>

توضیح: در برخی پیاده‌سازی‌های قدیمی این تابع یک آرایه شامل کلیدهایی مانند ‘url’ و ‘color’ برمی‌گرداند. اما به‌دلیل تغییرات API بهتر است به توابع جدید رجوع کنید تا رفتار دقیق و پایداری داشته باشید.

روش پیشنهادی و مدرن — استفاده از get_background_image() و get_background_color()

<?php
// روش مدرن: گرفتن تصویر و رنگ پس‌زمینه
$image = get_background_image();
$color = get_background_color();

if ( $image ) {
    echo '<style>body { background-image: url(' . esc_url( $image ) . '); background-size: cover; }</style>';
} elseif ( $color ) {
    echo '<style>body { background-color: #' . esc_attr( $color ) . '; }</style>';
}
?>

توضیح: این کد با استفاده از توابع استاندارد وردپرس تصویر یا رنگ پس‌زمینه را می‌گیرد و به صورت inline CSS در خروجی قرار می‌دهد. تابع esc_url و esc_attr برای امنیت و جلوگیری از تزریق استفاده شده‌اند. در بخش بهینه‌سازی پایین‌تر روش بهتر برای درج CSS را نیز نشان می‌دهیم.

فعال‌سازی پشتیبانی از پس‌زمینه در قالب (add_theme_support)

<?php
// در functions.php قالب
function mytheme_setup() {
    add_theme_support( 'custom-background', array(
        'default-color' => 'ffffff',
        'default-image' => '',
        'wp-head-callback' => 'mytheme_custom_background_cb',
    ) );
}
add_action( 'after_setup_theme', 'mytheme_setup' );

function mytheme_custom_background_cb() {
    $color = get_background_color();
    $image = get_background_image();
    if ( $image ) {
        printf( '<style>body{background-image:url(%s);background-size:cover;}</style>', esc_url( $image ) );
    } elseif ( $color ) {
        printf( '<style>body{background-color:#%s;}</style>', esc_attr( $color ) );
    }
}
?>

توضیح: با add_theme_support قالب شما به تنظیمات پس‌زمینهٔ سفارشی در سفارشی‌ساز (Customizer) دسترسی می‌یابد. wp-head-callback تابعی است که هنگام چاپ head فراخوانی می‌شود تا CSS تولید شود. باز هم بهتر است برای بهره‌وری و سازگاری، از روش wp_add_inline_style استفاده کنید.

روش پیشرفته‌تر: استفاده از wp_add_inline_style برای کش بهتر

<?php
// enqueue style و افزودن CSS پس‌زمینه به صورت inline (بهتر برای کش)
function mytheme_enqueue_styles() {
    wp_enqueue_style( 'mytheme-style', get_stylesheet_uri() );
    $color = get_background_color();
    $image = get_background_image();
    $css = '';

    if ( $image ) {
        $css .= "body{background-image:url(" . esc_url( $image ) . ");background-size:cover;}";
    } elseif ( $color ) {
        $css .= "body{background-color:#" . esc_attr( $color ) . ";}";
    }

    if ( $css ) {
        wp_add_inline_style( 'mytheme-style', $css );
    }
}
add_action( 'wp_enqueue_scripts', 'mytheme_enqueue_styles' );
?>

توضیح: این روش CSS را به استایل اصلی قالب متصل می‌کند و مزیت آن این است که با فایل CSS کش می‌شود و از چاپ پراکندهٔ استایل در بخش head جلوگیری می‌شود. همچنین نگهداری و دیباگ راحت‌تر می‌شود.

مقایسهٔ توابع مرتبط

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

• برای تصاویر بزرگ از background-size: cover استفاده کنید اما توجه به عملکرد داشته باشید؛ تصاویر را از نظر حجم بهینه کنید.
• برای اجرای CSS بهتر از wp_add_inline_style استفاده کنید تا کش مرورگر بهتر عمل کند.
• تنظیمات پیش‌فرض در add_theme_support را معقول انتخاب کنید تا تجربهٔ کاربری در سفارشی‌ساز بهتر شود.
• در صورت نیاز به رفتارهای پیچیده (مثلاً پس‌زمینهٔ مختلف برای صفحات خاص)، از شرط‌های قالب (is_home, is_page, etc.) در تابع callback استفاده کنید.
• برای دسترسی‌پذیری، مطمئن شوید رنگ‌ها دارای کانتراست مناسب با متن هستند یا گزینهٔ انتخاب تصویر را همراه با جایگزین بصری مناسب ارائه دهید.

نتیجه‌گیری

تابع get_custom_background() بخشی از تاریخچهٔ وردپرس بوده اما در توسعهٔ مدرن قالب‌ها بهتر است از APIهای جدید مانند get_background_image()، get_background_color() و add_theme_support(‘custom-background’) استفاده کنید. این روش‌ها سازگاری، امنیت و قابلیت نگهداری بهتر را فراهم می‌کنند و امکان استفاده از تکنیک‌های بهینه‌سازی مثل wp_add_inline_style را نیز می‌دهند.

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

ارسال