چرا اسکریپتهای شرطی شما کار نمیکنند؟ راهنمای wp_register_script
تابع wp_register_script برای ثبت اسکریپت در وردپرس بدون بارگذاری فوری؛ بررسی پارامترها، handle یکتا، deps، version و بارگذاری شرطی.
چرا جدا کردن ثبت از بارگذاری ضروری است؟
در توسعه افزونه و قالب حرفهای، همیشه نمیخواهیم یک اسکریپت در همه صفحات بارگذاری شود. برای نمونه، اسکریپت اسلایدر تنها در صفحه اصلی نیاز است، اسکریپت فرم تماس تنها در صفحه تماس و اسکریپت نمودار تنها در صفحات آماری. اگر همه اسکریپتها در همه صفحات بارگذاری شوند، تعداد درخواستهای HTTP افزایش مییابد و سرعت سایت کاهش پیدا میکند. راهحل، جدا کردن فرایند ثبت از فرایند بارگذاری است: باwp_register_script اسکریپت را ثبت میکنیم (با تمام پارامترها) و سپس در نقطه مناسب با wp_enqueue_script بارگذاری میکنیم. این الگو پایه بهینهسازی سرعت است.
تابع wp_register_script چیست؟
تابعwp_register_script() یک تابع هسته وردپرس است که در فایل wp-includes/script-loader.php تعریف شده است. این تابع یک اسکریپت را در ساختار داخلی وردپرس ثبت میکند اما آن را بهصورت مستقیم در HTML درج نمیکند.
پس از ثبت، میتوان در هر نقطه از اجرای وردپرس، با فراخوانی wp_enqueue_script و پاس دادن فقط handle، اسکریپت را در صف بارگذاری قرار داد. وردپرس سپس در زمان مناسب، اسکریپت را در HTML درج میکند.
نکته مهم این است که اگر اسکریپت را با همان handle قبلاً ثبت شده باشد، فراخوانی مجدد wp_register_script مقدار قبلی را بازنویسی میکند. این رفتار در برخی سناریوها مفید است و در برخی خطرناک.
امضای تابع و پارامترها
امضای این تابع مشابهwp_enqueue_script است:
function wp_register_script( $handle, $src, $deps = array(), $ver = false, $args = array() ) {
// ...
}
پارامتر اول (handle) شناسه یکتای اسکریپت است. پارامتر دوم (src) آدرس فایل است. پارامتر سوم (deps) آرایه وابستگیها. پارامتر چهارم (ver) نسخه. پارامتر پنجم (args) میتواند بولی باشد یا آرایهای از تنظیمات.
نکته مهم: در wp_register_script، پارامتر src اجباری است. اگر src خالی باشد، وردپرس خطای Warning میدهد.
هوک صحیح ثبت
تابعwp_register_script باید در هوک wp_enqueue_scripts یا هوک زودتری مانند init فراخوانی شود. استفاده از wp_enqueue_scripts توصیه میشود چرا که در همان نقطه، بلافاصله پس از ثبت، میتوانید شرط بارگذاری را هم پیاده کنید.
نمونه صحیح در قالب:
add_action( 'wp_enqueue_scripts', 'mytheme_register_scripts' );
function mytheme_register_scripts() {
wp_register_script(
'mytheme-slider',
get_template_directory_uri() . '/assets/js/slider.js',
array( 'jquery' ),
'1.0.0',
true
);
wp_register_script(
'mytheme-analytics',
get_template_directory_uri() . '/assets/js/analytics.js',
array(),
'1.0.0',
true
);
if ( is_front_page() ) {
wp_enqueue_script( 'mytheme-slider' );
}
if ( is_singular() ) {
wp_enqueue_script( 'mytheme-analytics' );
}
}
این الگو امکان بارگذاری شرطی اسکریپتها را فراهم میکند و از بارگذاری غیرضروری جلوگیری میکند.
مدیریت وابستگی با deps
پارامترdeps در wp_register_script همانند wp_enqueue_script عمل میکند. اگر اسکریپت شما به jQuery نیاز دارد، این وابستگی را در این آرایه تعریف کنید.
نکته مهم: اگر اسکریپت شما به jQuery نیاز دارد، بهجای استفاده از URL خارجی، از handle داخلی jquery استفاده کنید. این handle در وردپرس ثبت شده است و به نسخه داخلی jQuery اشاره میکند. این رویکرد از بارگذاری تکراری جلوگیری میکند و امنیت را افزایش میدهد.
برای مطالعه دقیقتر روی سایر توابع مرتبط، به راهنمای wp_enqueue_script مراجعه کنید.
نسخهبندی و Cache Busting
پارامترver همان نقش wp_enqueue_script را ایفا میکند. از آن برای Cache Busting استفاده کنید. بهترین رویکرد، استفاده از زمان آخرین تغییر فایل است:
$version = file_exists( get_template_directory() . '/assets/js/slider.js' )
? filemtime( get_template_directory() . '/assets/js/slider.js' )
: '1.0.0';
wp_register_script(
'mytheme-slider',
get_template_directory_uri() . '/assets/js/slider.js',
array( 'jquery' ),
$version,
true
);
این الگو اطمینان میدهد که با هر تغییر فایل، مرورگر نسخه جدید را بارگذاری میکند.
بارگذاری شرطی و بهینهسازی
یکی از مزایای اصلیwp_register_script، امکان بارگذاری شرطی است. برای نمونه، میتوانید اسکریپت را تنها در صورت وجود شرط خاص در صفحه بارگذاری کنید:
if ( is_product() ) {
wp_enqueue_script( 'mytheme-product-zoom' );
}
if ( is_page_template( 'templates/contact.php' ) ) {
wp_enqueue_script( 'mytheme-form-validation' );
}
if ( has_block( 'core/gallery' ) ) {
wp_enqueue_script( 'mytheme-lightbox' );
}
این الگو در پروژههای پربازدید، تعداد درخواستهای HTTP را بهطور محسوس کاهش میدهد و سرعت بارگذاری را افزایش میدهد. برای مطالعه بیشتر درباره شرطهای وردپرس، میتوانید به راهنمای is_front_page، راهنمای is_single، راهنمای is_page و راهنمای is_archive مراجعه کنید.
کاربردهای عملی در قالب و افزونه
الگوی حرفهای در افزونهها:class MyPlugin_Assets {
public function init() {
add_action( 'wp_enqueue_scripts', array( $this, 'register' ) );
add_action( 'wp_enqueue_scripts', array( $this, 'enqueue' ), 20 );
}
public function register() {
wp_register_script(
'myplugin-core',
plugin_dir_url( __FILE__ ) . 'assets/js/core.js',
array( 'jquery' ),
MYPLUGIN_VERSION,
true
);
}
public function enqueue() {
if ( ! is_singular() ) {
return;
}
wp_enqueue_script( 'myplugin-core' );
}
}
این الگو امکان تستپذیری و نگهداری بهتر را فراهم میکند.
بارگذاری اسکریپت وابسته به داده PHP:
wp_register_script(
'mytheme-map',
get_template_directory_uri() . '/assets/js/map.js',
array(),
'1.0.0',
true
);
if ( is_page_template( 'templates/locations.php' ) ) {
wp_enqueue_script( 'mytheme-map' );
wp_localize_script(
'mytheme-map',
'mythemeMapData',
array(
'apiKey' => get_option( 'mytheme_maps_api_key' ),
'center' => array( 'lat' => 35.6892, 'lng' => 51.3890 ),
)
);
}
نکته مهم: wp_localize_script باید پس از wp_enqueue_script فراخوانی شود، وگرنه دادهها در JavaScript قابل دسترسی نخواهند بود. راهنمای این تابع در صفحه wp_localize_script آمده است.
نقش در Child Theme
در Child Theme، میتوانید اسکریپتهای Parent Theme را از صف خارج کنید و اسکریپت سفارشی خود را بارگذاری کنید:add_action( 'wp_enqueue_scripts', 'mychild_override_scripts', 20 );
function mychild_override_scripts() {
wp_dequeue_script( 'mytheme-slider' );
wp_deregister_script( 'mytheme-slider' );
wp_register_script(
'mychild-slider',
get_stylesheet_directory_uri() . '/assets/js/slider.js',
array( 'jquery' ),
filemtime( get_stylesheet_directory() . '/assets/js/slider.js' ),
true
);
if ( is_front_page() ) {
wp_enqueue_script( 'mychild-slider' );
}
}
نکته مهم: اولویت ۲۰ باعث میشود این تابع پس از تابع Parent Theme اجرا شود. برای مطالعه درباره ساختار Child Theme به راهنمای get_stylesheet_directory_uri و راهنمای get_stylesheet_directory مراجعه کنید.
نکات امنیتی و اشتباهات رایج
اشتباه اول، نبود handle یکتا است. اگر handle تکراری باشد، وردپرس اسکریپت جدید را نادیده میگیرد. اشتباه دوم، نبود نسخه است. اگرver ثابت باشد، مرورگر پس از بهروزرسانی فایل، نسخه قدیمی را بارگذاری میکند.
اشتباه سوم، ثبت تکراری است. اگر wp_register_script را چند بار با یک handle فراخوانی کنید، آخرین فراخوانی جایگزین قبلی میشود و ممکن است پارامترها ناخواسته تغییر کند.
اشتباه چهارم، نبود شرط بارگذاری است. اگر پس از ثبت، در همه صفحات wp_enqueue_script را فراخوانی کنید، مزیت اصلی این تابع از بین میرود.
اشتباه پنجم، نبود escape در URL است. اگر URL از منبع پویا باشد، از esc_url استفاده کنید.
اشتباه ششم، نبود تست است. باید در همه شرایط (فایل وجود دارد، فایل وجود ندارد، صفحات مختلف) رفتار اسکریپت را بررسی کنید.
اشتباه هفتم، استفاده از handle تکراری با سایر افزونهها است. برای جلوگیری از تداخل، از پیشوند اختصاصی استفاده کنید (مانند mytheme- یا myplugin-).
تحلیل فنی پیشرفته
در نگاه مهندسی، تابعwp_register_script() یک نقطه معماری در لایه صفبندی است که بر چند جنبه از سیستم اثر میگذارد. لایه اول لایه Registration است. وردپرس یک ساختار داخلی برای نگهداری اسکریپتهای ثبتشده دارد که در WP_Scripts پیادهسازی شده است. این ساختار امکان مدیریت وابستگیها، نسخهها و محل بارگذاری را فراهم میکند.
لایه دوم لایه Dependency Resolution است. وردپرس با تحلیل گراف وابستگیها، ترتیب صحیح بارگذاری را تعیین میکند. اگر یک وابستگی ثبت نشده باشد، وردپرس خطای Warning میدهد و ممکن است اسکریپت را بارگذاری نکند.
لایه سوم لایه Performance است. جدا کردن ثبت از بارگذاری، امکان بارگذاری شرطی را فراهم میکند که در پروژههای پربازدید تأثیر محسوسی بر سرعت دارد. کاهش تعداد درخواستهای HTTP یکی از مهمترین استراتژیهای بهینهسازی است.
لایه چهارم لایه کشینگ است. فایلهای JavaScript بر پایه URL کش میشوند. ترکیب ver با filemtime امکان Cache Busting دقیق را فراهم میکند.
لایه پنجم لایه امنیت است. اگر اسکریپت از منبع خارجی بارگذاری شود، باید منبع معتبر باشد. همیشه از URL داخلی یا منابع معتبر استفاده کنید.
لایه ششم لایه Integration است. wp_localize_script یا wp_add_inline_script ابزارهای استاندارد برای پاس دادن داده از PHP به JavaScript هستند. این الگو در افزونههای حرفهای بسیار رایج است.
لایه هفتم لایه Multisite است. در شبکههای Multisite، هر سایت میتواند اسکریپتهای متفاوتی ثبت کند.
لایه هشتم لایه تست است. تستهای End-to-End باید مطمئن شوند که اسکریپتها تنها در صفحات موردنیاز بارگذاری میشوند و هیچ خطای JavaScript رخ نمیدهد.
مفاهیم پایهای صفبندی در Queue در ویکیپدیا توضیح داده شده است.
برای مطالعه بیشتر روی توابع مرتبط، میتوانید به راهنمای wp_enqueue_script، راهنمای wp_localize_script، راهنمای wp_enqueue_style، راهنمای هوک wp_enqueue_scripts، راهنمای هوک admin_enqueue_scripts و راهنمای wp_get_theme مراجعه کنید.
پرسشهای پرتکرار
تفاوتwp_register_script و wp_enqueue_script چیست؟ اولی اسکریپت را ثبت میکند؛ دومی آن را در صف بارگذاری قرار میدهد.
آیا میتوان اسکریپت را بدون ثبت قبلی بارگذاری کرد؟ بله، اما در این حالت بارگذاری شرطی دشوارتر میشود.
آیا میتوان یک اسکریپت را چند بار ثبت کرد؟ بله، اما آخرین فراخوانی جایگزین قبلی میشود.
چطور از بارگذاری شرطی استفاده کنیم؟ با ثبت اسکریپت در wp_enqueue_scripts و سپس فراخوانی wp_enqueue_script در همان هوک با شرط مناسب.
آیا در Child Theme باید اسکریپتها را دوباره ثبت کرد؟ فقط در صورت نیاز به جایگزینی یا افزودن اسکریپت سفارشی.
نتیجه و مسیر ادامه
تابعwp_register_script() ابزار استاندارد وردپرس برای ثبت اسکریپتها بدون بارگذاری فوری است. استفاده درست از آن یعنی تعریف handle یکتا، تعریف وابستگیها، نسخهبندی مناسب و بارگذاری شرطی بر پایه نیاز صفحات. اشتباههای کوچک در این تابع اغلب به کاهش سرعت یا بارگذاری ناقص منجر میشوند.
اگر این تابع را در پروژهای واقعی به کار بردهاید و رفتار غیرمنتظرهای دیدهاید — بهخصوص در ترکیب با افزونههای کش یا افزونههای دیگر — تجربهتان میتواند راهگشای دیگران باشد. کدام بخش بیشترین زمان را از شما گرفت؟ دیدگاه خود را بنویسید.