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

تابع has_custom_logo() در وردپرس ابزاری ساده ولی حیاتی برای تشخیص وجود لوگوی سفارشی در قالب است. این تابع به صورت بولی (true/false) کار می‌کند و معمولاً همراه با توابع دیگری مانند add_theme_support(‘custom-logo’) و the_custom_logo() در هدر قالب برای نمایش یا ارائهٔ جایگزین استفاده می‌شود.

چرا استفاده از has_custom_logo() مهم است؟

• کنترل منطقی: با این تابع می‌توان نمایش لوگو را منوط به وجود فایل لوگو کرد.
• دسترسی و سئو: در صورت نبود لوگو می‌توان به‌صورت خودکار عنوان سایت یا تگ‌های مناسب برای موتورهای جستجو قرار داد.
• سفارشی‌سازی: امکان تعریف فالو بک (fallback) و تغییر Markup بسته به وجود لوگو.

نحوه فعال‌سازی پشتیبانی از لوگوی سفارشی در قالب

اولین قدم اضافه کردن پشتیبانی توسط قالب با استفاده از add_theme_support است. معمولاً این کار در فایل functions.php یا اکشن after_setup_theme انجام می‌شود.

function mytheme_setup() {
    add_theme_support( 'custom-logo', array(
        'height'      => 100,
        'width'       => 400,
        'flex-height' => true,
        'flex-width'  => true,
        'header-text' => array( 'site-title', 'site-description' ),
        'unlink-homepage-logo' => true,
    ) );
}
add_action( 'after_setup_theme', 'mytheme_setup' );

این قطعه کد پشتیبانی از لوگوی سفارشی را فعال می‌کند و پارامترها مانند اندازهٔ پیش‌فرض و انعطاف‌پذیری را مشخص می‌سازد. گزینهٔ unlink-homepage-logo باعث می‌شود که در صفحهٔ نخست لوگو لینک به صفحهٔ نخست نداشته باشد (از نسخه‌های جدید وردپرس پشتیبانی می‌شود).

چگونه در header لوگو را نمایش دهیم؟

در فایل header.php معمولاً از ترکیب has_custom_logo() و the_custom_logo() استفاده می‌شود تا اگر لوگو وجود داشت نمایش داده شود و در غیر این صورت عنوان سایت چاپ شود.

<header class="site-header">
    <div class="site-branding">
        <?php
        if ( has_custom_logo() ) {
            the_custom_logo();
        } else {
            if ( is_front_page() && is_home() ) :
                <h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a></h1>
            else :
                <p class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a></p>
            endif;
            <p class="site-description"><?php bloginfo( 'description' ); ?></p>
        }
        ?>
    </div>
</header>

این مثال نشان می‌دهد که در صورت نبود لوگو از عنوان و توضیحات سایت به‌عنوان جایگزین استفاده می‌شود. استفاده از تگ h1 برای صفحهٔ اصلی به هدف سئو و ساختار معنایی کمک می‌کند.

دستیابی به URL یا اطلاعات فایل لوگو

گاهی لازم است که فقط آدرس تصویر یا اطلاعات سایز آن را استخراج کنیم. برای این کار از get_theme_mod و wp_get_attachment_image_src استفاده می‌شود.

$custom_logo_id = get_theme_mod( 'custom_logo' );
$logo = wp_get_attachment_image_src( $custom_logo_id , 'full' );

if ( $logo ) {
    $logo_url = $logo[0];
    echo '<img src="' . esc_url( $logo_url ) . '" alt="' . esc_attr( get_bloginfo( 'name' ) ) . '">';
}

در این قطعه ابتدا شناسهٔ رسانه (attachment ID) استخراج شده و سپس آدرس تصویر از اندازهٔ full گرفته می‌شود. اگر تصویر موجود باشد، URL چاپ می‌شود و ویژگی alt به اسم سایت تنظیم می‌شود تا دسترسی بهتر شود.

افزایش دسترسی: تنظیم مقدار alt و ویژگی‌های تصویر

تابع the_custom_logo به صورت پیش‌فرض alt را از عنوان رسانه می‌گیرد. برای اطمینان از وجود alt یا تنظیم آن به نام سایت می‌توان از فیلتر wp_get_attachment_image_attributes یا get_custom_logo استفاده کرد.

add_filter( 'wp_get_attachment_image_attributes', 'my_custom_logo_alt', 10, 2 );
function my_custom_logo_alt( $attr, $attachment ) {
    $custom_logo_id = get_theme_mod( 'custom_logo' );
    if ( $attachment->ID == $custom_logo_id ) {
        if ( empty( $attr['alt'] ) ) {
            $attr['alt'] = get_bloginfo( 'name' );
        }
    }
    return $attr;
}

این فیلتر برای هر تصویر اجرا می‌شود اما فقط زمانی که ID تصویر با لوگوی سفارشی مطابقت داشته باشد، مقدار alt را به نام سایت تنظیم می‌کند. این کار باعث بهبود دسترسی و سئوی تصاویر می‌شود.

نکات پیشرفته و نکات عملکردی

• استفاده از اندازهٔ مناسب و تولید تصاویر responsive: از wp_get_attachment_image() بهره ببرید تا srcset و sizes تولید شود.
• فیلترها: با فیلتر get_custom_logo می‌توانید خروجی HTML لوگو را تغییر دهید یا یک wrapper اضافی اضافه کنید.
• فوکوس سئو: در صورتی که لوگو لینک دارد، مطمئن شوید rel و aria-label مناسب تعیین شده باشد.
• حالت‌های چندسایتی: هر سایت در شبکه می‌تواند لوگوی مجزا داشته باشد؛ get_theme_mod در هر بلاگ به صورت جداگانه عمل می‌کند.

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

if ( has_custom_logo() ) {
    $logo = get_custom_logo();
    // اضافه کردن کلاس به عنصر خروجی
    $logo = str_replace( '<a ', '<a class="custom-logo-link" ', $logo );
    echo $logo;
} else {
    // fallback
    echo '<a class="site-title" href="' . esc_url( home_url( '/' ) ) . '">' . esc_html( get_bloginfo( 'name' ) ) . '</a>';
}

در این مثال خروجی تابع get_custom_logo گرفته و با str_replace کلاس دلخواه به تگ a اضافه می‌شود. سپس یا لوگو یا عنوان سایت چاپ می‌شود. این روش ساده و قابل‌فهم است اما در پروژه‌های بزرگ بهتر است از فیلترها برای ویرایش مارکاپ استفاده شود تا با تغییرات آینده سازگار بماند.

نتیجه‌گیری و بهترین شیوه‌ها

• همیشه ابتدا add_theme_support(‘custom-logo’) را تعریف کنید.
• با has_custom_logo بررسی کنید و در صورت نبود لوگو جایگزین متنی ارائه دهید.
• مطمئن شوید ویژگی‌های alt و srcset به‌درستی تنظیم شده‌اند تا دسترسی و کارایی بهتر شود.
• برای تغییر ساختار HTML از فیلترهای مناسب استفاده کنید تا از بازنویسی مستقیم اجتناب شود.

تابع has_custom_logo() یک قطعهٔ کوچک ولی کلیدی در مجموعه ابزارهای قالب‌نویسی وردپرس است. با ترکیب آن با توابع دیگر، می‌توان تجربهٔ کاربری بهتر، دسترسی بیشتر و خروجی سئوی قوی‌تری ایجاد کرد.

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

ارسال