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

تابع get_header_image() یکی از توابع مفید برای کار با «تصویر سربرگ» (Header Image) در وردپرس است. این تابع URL تصویر سربرگ فعلی را برمی‌گرداند و معمولاً در قالب‌ها (themes) برای نمایش هدر سفارشی استفاده می‌شود. در این مقاله نحوه فعال‌سازی، استفاده امن و بهینه‌سازی این تابع همراه با مثال‌های عملی و نکات تخصصی شرح داده می‌شود.

چرا از get_header_image() استفاده کنیم؟

• تفکیک منطق از نمایش: تابع فقط URL تصویر را برمی‌گرداند و امکان پردازش قبل از چاپ را فراهم می‌کند.
• سازگاری با سفارشی‌ساز (Customizer): وقتی کاربر از سفارشی‌ساز وردپرس تصویر هدر را آپلود یا انتخاب می‌کند، get_header_image() آن تصویر را بازمی‌گرداند.
• کنترل بهتر روی خروجی: به جای چاپ مستقیم، می‌توانید از esc_url، alt مناسب، یا ویژگی‌های responsive استفاده کنید.

فعال‌سازی پشتیبانی از Custom Header در فایل functions.php

add_theme_support( 'custom-header', array(
    'width'              => 1600,
    'height'             => 400,
    'flex-height'        => true,
    'flex-width'         => false,
    'default-image'      => get_template_directory_uri() . '/assets/img/default-header.jpg',
    'uploads'            => true,
) );

این کد در فایل functions.php قالب قرار می‌گیرد و به وردپرس می‌گوید که قالب از «تصویر سربرگ» پشتیبانی می‌کند. پارامترها ابعاد پیش‌فرض، تصاویر پیش‌فرض و اجازه آپلود از طریق سفارشی‌ساز را مشخص می‌کنند.

نمونه کاربرد ساده در header.php

<?php
$header_image = get_header_image();
if ( $header_image ) : ?>
  <a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">
    <img src="<?php echo esc_url( $header_image ); ?>"
         width="<?php echo esc_attr( get_custom_header()->width ); ?>"
         height="<?php echo esc_attr( get_custom_header()->height ); ?>"
         alt="<?php bloginfo( 'name' ); ?>">
  </a>
<?php endif; ?>

در این مثال ابتدا مقدار get_header_image() دریافت می‌شود. اگر مقداری وجود داشت، تصویر داخل تگ <img> نمایش داده می‌شود. از esc_url برای امن‌سازی URL و از get_custom_header() برای دسترسی به عرض و ارتفاع پیش‌فرض استفاده شده است.

نسخه بهینه‌تر: استفاده از srcset و پشتیبانی از attachment

<?php
$header = get_custom_header();
$header_image = get_header_image();
if ( $header_image ) {
    $attachment_id = isset( $header->attachment_id ) ? $header->attachment_id : 0;
    $srcset = $attachment_id ? wp_get_attachment_image_srcset( $attachment_id, 'full' ) : '';
    echo '<img src="' . esc_url( $header_image ) . '"'
        . ( $srcset ? ' srcset="' . esc_attr( $srcset ) . '"' : '' )
        . ' width="' . esc_attr( $header->width ) . '"'
        . ' height="' . esc_attr( $header->height ) . '"'
        . ' alt="' . esc_attr( get_bloginfo( 'name' ) ) . '" loading="lazy"'
        . '>';
}
?>

این نسخه تلاش می‌کند در صورتی که شناسه ضمیمه (attachment_id) در اطلاعات هدر موجود باشد، از wp_get_attachment_image_srcset برای ایجاد srcset بهره ببرد تا تصاویر ریسپانسیو و بهینه‌تر باشند. همچنین از loading=”lazy” برای تأخیر در بارگذاری تصاویر استفاده شده است.

نکات امنیتی و دسترسی‌پذیری

• همیشه از esc_url برای خروجی URL استفاده کنید و مقادیر خروجی را با esc_attr یا esc_html ایمن کنید.
• برای ویژگی alt متن مناسبی قرار دهید (معمولاً نام سایت یا توضیح کوتاه) تا دسترسی‌پذیری بهتر شود.
• در صورت نیاز به متن روی تصویر، از عناصر HTML جداگانه با aria-hidden و یا aria-label مناسب استفاده کنید.

موارد کاربردی و سناریوهای واقعی

• نمایش هدر سراسری سایت یا صفحه خانه با تصویر سفارشی.
• استفاده به‌عنوان تصویر «قهرمان» (hero) بالای صفحه با overlay و متن CTA.
• تغییر تصویر هدر به صورت داینامیک بر اساس نوع نوشته یا دسته‌بندی (با شرط‌های قالب).
• ترکیب با Customizer برای ارائه پیش‌نمایش زنده به کاربر.

نمونه: هدر متفاوت برای یک دسته‌بندی خاص

<?php
$header_image = get_header_image();
if ( is_category( 'news' ) ) {
    $custom = get_field( 'category_header_image', 'category_news' ); // مثال ACF
    if ( $custom ) {
        $header_image = $custom;
    }
}
if ( $header_image ) {
    echo '<img src="' . esc_url( $header_image ) . '" alt="' . esc_attr( get_bloginfo( 'name' ) ) . '">';
}
?>

در این مثال، اگر صفحه دسته‌بندی «news» باشد، ابتدا تلاش می‌شود تصویر خاصی از متای دسته گرفته شود (مثلاً با ACF). اگر وجود داشته باشد، آن را جایگزین تصویر پیش‌فرض هدر می‌کنیم.

جدول خلاصه‌وار توابع مرتبط

پیشنهادات حرفه‌ای برای بهینه‌سازی

• تصاویر هدر را قبل از آپلود فشرده و در چند اندازه تولید کنید تا بار صفحه کمتر شود.
• از CDN برای سرو تصاویر استفاده کنید تا سرعت تحویل بالا رود.
• از فرمت‌های جدید مثل WebP در صورت پشتیبانی مرورگرها استفاده کنید و برای مرورگرهای قدیمی fallback در نظر بگیرید.
• در صورت طراحی ریسپانسیو، از srcset و sizes بهره ببرید تا مرورگر بهترین اندازه را انتخاب کند.

جمع‌بندی

get_header_image() یک ابزار ساده ولی قدرتمند برای مدیریت تصویر هدر در قالب وردپرس است. با ترکیب آن با get_custom_header()، wp_get_attachment_image_srcset و بهترین روش‌های امنیتی و بهینه‌سازی می‌توانید هدرهای زیبا، دسترس‌پذیر و سریع بسازید. همیشه خروجی‌ها را امن کنید و تجربه کاربری (بارگذاری، ریسپانسیو، alt) را در اولویت قرار دهید.

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

ارسال