وردپرس چگونه جاوا اسکریپت را به درستی معرفی می کند؟بارگیری سفارشی فایل های JS و CSS

برنامه‌نویسانی که از وردپرس برای ساخت وب‌سایت استفاده می‌کنند ، هنگام توسعه افزونه‌های وردپرس یا سفارشی‌سازی قالب‌های وردپرس، به برخی منابع اسکریپت جاوا اسکریپت و CSS مراجعه خواهند کرد.

• معمولاً افراد از برچسب‌های پیوند، اسکریپت مستقیماً برای HTML استفاده می‌کنند.
• در واقع، وردپرس دارای توابع و روش های پیچیده ای برای ارجاع به اسکریپت ها است.
• بنابراین، استفاده از مراجع روش داخلی وردپرس حرفه ای تر و قابل توسعه تر است.

روش استناد ناقص

دو روش رایج استناد وجود دارد، خوب است، فقط کامل یا معقول نیست.

روش اول: استفاده از تگ لینک برای ارجاع به یک فایل CSS

• تگ های اسکریپت فایل های JS را اعمال می کنند.اینجا به تفصیل نیست

روش دوم: استفاده از تابع wp_head

• تابع wp_head برای خروجی برخی از محتوای سفارشی یا تعریف شده توسط سیستم استفاده می شود.
• گاهی اوقات از کد زیر برای ارجاع به این فایل استفاده می کنیم:

<?php
add_action('wp_head', 'wpcwl_normal_script');
function wpcwl_normal_script() {
echo '资源文件的链接';
}
?>

• کد بالا را در فایل functions.php کپی کنید تا به فایل های مربوطه مراجعه کنید.

مکانیسم منبع اسکریپت‌های صف وردپرس

همانطور که همه ما می دانیم، وردپرس دارای افزونه های زیادی است:

• تقریباً هر افزونه به یک فایل منبع ارجاع می دهد.
• به ناچار بین منابع ارجاع شده توسط دو افزونه تضادهایی وجود خواهد داشت که ناپایدار می شود و ممکن است بر کارایی تأثیر بگذارد.

از تابع wp_enqueue_script استفاده کنید

• برای ارجاع به یک منبع در وردپرس باید از آن استفاده کنیدwp_enqueue_scriptتابعی که کلمه enqueue را در نام تابع ردیف شده یا مرتب شده دارد.
• با استفاده از این روش وردپرس در صف بندی منابع (Enqueue Scripts)، مراجع از فایل های مربوطه و کد اصلی جدا می شوند.
• اگر کاربر بخواهد منبع را غیرفعال کند، می‌تواند آن را بدون تغییر از کد اصلی حذف، تغییر و نظر دهد.

همچنین، برخی از کتابخانه های رایج مانند jQuery، jQuery UI و غیره در وردپرس تعبیه شده اند.

می‌توانیم از تابع wp_enqueue_script برای فراخوانی مستقیم کتابخانه داخلی استفاده کنیم، که کد و مشخصات پاک‌تر را ذخیره می‌کند.

اگر از این تابع برای ارجاع به فایل های JS و CSS خود استفاده می کنید، باید از آن استفاده کنیدwp_register_scriptتابع یک شناسه (دسته) را ثبت می کند و سپس استفاده می کندwp_enqueue_scriptتابع منبع مربوط به این پرچم را فراخوانی می کند.

چگونه فایل های JS و CSS را به درستی در وردپرس وارد کنیم؟

وردپرس روش های واردات معقولی را برای روش های JS و CSS ارائه می دهد.

برای وارد کردن فایل plugin.css به افزونه ▼ می توانید از کد زیر استفاده کنید

<?php
function wpcwl_add_styles() {
wp_register_script('plugin_stylesheet', plugins_url('plugin.css', __FILE__));
wp_enqueue_script('plugin_stylesheet');
}

add_action( 'wp_enqueue_scripts', 'wpcwl_add_styles' ); 
?>

در بالا از تابع wp_register_script برای ایجاد یک منبع با شناسه plugin_stylesheet استفاده می شود.

سپس، درخواست های در صف آن را به آن اضافه کنیدwp_enqueue_scriptsاقدامات در حال انجام است.

اگرچه نام تابع یک اسکریپت است، اما ربطی به نوع فایل منبع ندارد و برای CSS و JS معتبر است.

تابع wp_register_script واقعاً به این سادگی نیست، می تواند پنج پارامتر داشته باشد:

۱) ‎$handle: شناسه منبع.

• 由wp_enqueue_scriptمنتقل کردن.

۲) $src: محل منبع.

• آدرس های نسبی یا مطلق از توابع داخلی وردپرس برای دریافت آدرس و غیره استفاده می کنند.
• مشترکموقعیت یابیعملکرد داردplugins_url،get_template_directory_uri。

۳) $deps: وابستگی.

• اگر به افزونه jQuery اشاره می کنید و برای ساختن باید به jQuery تکیه کنید، باید jQuery را پر کنید.
• توجه داشته باشید که به عنوان یک آرایه ارسال می شود.

۴) $ver: نسخه منبع، اختیاری.

۵) $in_footer: آیا باید در پایین قرار گیرد؟

• به طور معمول، فایل‌های JS باید در پایین صفحه قرار گیرند، می‌توانید این پارامتر را روی True قرار دهید، آن را خالی یا False بگذارید تا خروجی به بالا باشد.

بیایید به مثال مرجع فایل جاوا اسکریپت کاملتر ▼ نگاه کنیم

<?php
function wpcwl_add_scripts() {
wp_register_script('plugin_script', plugins_url('plugin_script.js', __FILE__), array('jquery'),'1.1', true);
wp_enqueue_script('plugin_script');
}

add_action( 'wp_enqueue_scripts', 'wpcwl_add_scripts' ); 
?>

تم های وردپرس از wp_enqueue_script برای وارد کردن منابع استفاده می کنند

برنامه نویسان در توسعه تم وردپرس، استفاده می کنندwp_enqueue_scriptمنابع وارداتی

• مثال های بالا نمونه هایی از منابع مرجع برای توسعه افزونه وردپرس هستند.
• روش ارجاع شده در تاپیک مشابه است.

تفاوت اصلی استفاده از تابع مربوطه برای دریافت فهرست تم برای دریافت آدرس فایل منبع در زیر موضوع است.

شما می توانید استفاده کنیدget_template_directory_uriتابع برای دریافت فهرست موضوع فعلی.

اگر از طرح زمینه کودک استفاده می کنید، باید از آن استفاده کنیدget_stylesheet_directory_uriتابع دایرکتوری تم والد را برای دریافت منابع مربوطه دریافت می کند.