ویژگی تصویر

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

  /  وردپرس   /  تابع wp_head در وردپرس
بنر تبلیغاتی الف
wp - wordpress - وردپرس

تابع wp_head() یکی از توابع پایه‌ای هر قالب وردپرس است که در فایل header.php قرار می‌گیرد و نقطه‌ای است که هسته وردپرس، افزونه‌ها و قالب‌ها می‌توانند عناصر مورد نیاز خود را در بخش <head> صفحه وارد کنند. فقدان یا جاگذاری اشتباه این تابع می‌تواند منجر به حذف استایل‌ها، اسکریپت‌ها و متاهای ضروری و به‌هم‌ریختن عملکرد سایت شود.

چرا wp_head() مهم است؟

  • محل خروجی استایل‌ها و اسکریپت‌های enqueue شده (مگر اینکه در footer درخواست شده باشند).
  • افزونه‌ها برای افزودن meta tags، لینک‌های API، shortlink، و سایر المان‌ها به این هوک متکی هستند.
  • قابلیت حذف یا افزودن برنامه‌ریزی‌شدهٔ عناصر head با استفاده از add_action و remove_action را فراهم می‌کند.

نحوه استفاده در قالب

<!– header.php –>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <?php wp_head(); ?>
</head>

کد بالا نشان می‌دهد که تابع wp_head() باید داخل تگ <head> قرار گیرد. هر المانی که افزونه‌ها یا قالب‌ها ثبت کنند، در زمان اجرای این فراخوانی چاپ خواهد شد.

نمونه‌های عملی: افزودن متای سفارشی

add_action( 'wp_head', 'my_custom_meta' );
function my_custom_meta() {
    if ( is_single() ) {
        echo '<meta name="author" content="نام شما">' . "n";
    }
}

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

چگونه موارد پیش‌فرض را حذف یا کنترل کنیم

وردپرس به‌صورت پیش‌فرض چندین callback به هوک wp_head متصل می‌کند (مثل generator، rsd link، wlmanifest و لینک‌های feed). در برخی مواقع جهت بهبود امنیت یا پاک‌سازی head لازم است برخی از آن‌ها حذف شوند.

// حذف متا generator
remove_action( 'wp_head', 'wp_generator' );

// حذف RSD link
remove_action( 'wp_head', 'rsd_link' );

// حذف WLW manifest
remove_action( 'wp_head', 'wlwmanifest_link' );

این کدها را در فایل functions.php قالب یا در یک افزونهٔ اختصاصی قرار دهید. دقت کنید که برخی افزونه‌ها برای عملکرد صحیح به این‌ها نیاز دارند؛ بنابراین حذف بدون بررسی می‌تواند باعث شکست برخی قابلیت‌ها شود.

بهترین روش برای افزودن اسکریپت‌ها و استایل‌ها

اگرچه می‌توان مستقیم در wp_head خروجی چاپ کرد، اما بهترین و استانداردترین روش استفاده از توابع enqueue است. به‌جای echo کردن تگ <link> یا <script>، آنها را با wp_enqueue_style و wp_enqueue_script ثبت کنید تا وردپرس مدیریت بهتری روی وابستگی‌ها، نسخه‌بندی و مکان چاپ (header یا footer) داشته باشد.

add_action( 'wp_enqueue_scripts', 'my_enqueue_assets' );
function my_enqueue_assets() {
    wp_enqueue_style( 'my-style', get_template_directory_uri() . '/css/style.css', array(), '1.0' );
    wp_enqueue_script( 'my-script', get_template_directory_uri() . '/js/main.js', array( 'jquery' ), '1.0', true );
}

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

بهینه‌سازی و امنیت مرتبط با wp_head()

  • سعی کنید اسکریپت‌های غیرضروری را به footer منتقل کنید (in_footer = true).
  • در صورت حذف المان‌ها از wp_head، تأثیر روی افزونه‌ها را بررسی کنید.
  • برای افزودن صفت‌هایی مانند async یا defer از فیلتر script_loader_tag استفاده کنید به جای ویرایش مستقیم خروجی wp_head.
add_filter( 'script_loader_tag', 'add_async_attr', 10, 3 );
function add_async_attr( $tag, $handle, $src ) {
    if ( 'my-script' !== $handle ) {
        return $tag;
    }
    return '<script src="' . esc_url( $src ) . '" async></script>';
}

این فیلتر به شما امکان می‌دهد به صورت ایمن به تگ اسکریپت، صفت async اضافه کنید؛ بهتر از چاپ دستی تگ در head است.

ابزارهای تشخیصی: مشاهده Callbackهای متصل به wp_head

function list_wp_head_hooks() {
    global $wp_filter;
    if ( ! isset( $wp_filter['wp_head'] ) ) {
        return;
    }
    foreach ( $wp_filter['wp_head']->callbacks as $priority => $callbacks ) {
        foreach ( $callbacks as $cb ) {
            echo '<pre>';
            print_r( $cb['function'] );
            echo '</pre>';
        }
    }
}
add_action( 'admin_notices', 'list_wp_head_hooks' );

کد بالا لیستی از توابع متصل به wp_head را در صفحه مدیریت نمایش می‌دهد. این روش برای دیباگِ اینکه چه افزونه‌ها یا قسمت‌هایی چه چیزهایی به head اضافه می‌کنند مفید است. پس از استفاده، بهتر است آن را حذف یا غیرفعال کنید تا صفحه ادمین شلوغ نشود.

جدول: موارد متداول متصل به wp_head

موردکاربرد
feed linksلینک‌های فید RSS
rsd_linkپشتیبانی Remote Publishing
wlwmanifest_linkپشتیبانی Windows Live Writer
wp_generatorمتای نسخه وردپرس
wp_enqueue_scripts / wp_print_stylesچاپ استایل‌ها و برخی اسکریپت‌های enqueue شده

نکات پایانی و توصیه‌های متخصصی

  • همیشه wp_head() را در header.php قالب قرار دهید؛ عدم وجود آن باعث مشکلات گسترده می‌شود.
  • برای مدیریت اسکریپت‌ها از enqueue استفاده کنید و تنها در صورت نیاز از add_action(‘wp_head’, …) برای متاها و لینک‌های کم‌حجم بهره ببرید.
  • قبل از حذف موارد پیش‌فرض، بررسی کنید کدام افزونه‌ها و قابلیت‌ها به آن وابسته‌اند.
  • در قالب‌های حرفه‌ای، یک مکانیزم برای بهینه‌سازی خروجی head (حذف CSS/JS غیرضروری، ترکیب، فشرده‌سازی) در نظر بگیرید ولی با رعایت سازگاری.

تابع wp_head() نقش کلیدی در معماری قالب وردپرس دارد. درک درست آن، توانایی کنترل خروجی head، و رعایت بهترین شیوه‌های enqueue و بهینه‌سازی، باعث افزایش سرعت، امنیت و سازگاری سایت شما می‌شود.

آیا این مطلب برای شما مفید بود ؟

خیر
بله
موضوعات شما در انجمن: