روش قرار دادن اسکریپت ها با استفاده از wp_enqueue_scripts Hook در وردپرس

این wp_enqueue_scripts عمل hook یکی از اجزای حیاتی توسعه وردپرس است process.

همراه با wp_enqueue_script() و wp_enqueue_style() توابع، به خروجی محتوای وردپرس کمک می کند روی تارنما.

در این آموزش، ما را پوشش خواهیم داد wp_enqueue_scripts عمل hook همراه با توابع مکمل آن و ارائه موارد استفاده مختلف برای کمک به شما در بهبود پروژه های وردپرس خود.

روش کار در وردپرس

صف بندی در وردپرس به ثبت و اضافه کردن اسکریپت ها و شیوه نامه ها به سایت شما اشاره دارد.

این wp_enqueue_script() و wp_enqueue_style() توابع به سرور وردپرس دستور می دهد تا این اسکریپت ها و شیوه نامه ها را به یک صف برای بارگذاری اضافه کند روی قسمت جلویی وب سایت شما

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

آشنایی با wp_enqueue_script

نوبت دهی process متشکل از wp_enqueue_scripts وردپرس hook و دو تابع اضافی برای شیوه نامه ها و اسکریپت ها.

برای شروع، wp_enqueue_scripts یک عمل است hook برای ردیف کردن شیوه نامه ها و فایل های جاوا اسکریپت استفاده می شود روی سایت وردپرس شما این hook معمولا در قالب وردپرس استفاده می شود functions.php یا فایل های افزونه

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

در همین حال، wp_register_style() و wp_enqueue_style() توابع وردپرس هستند که با شیوه نامه ها کار می کنند. توابع ثبت در یک شیوه نامه برای استفاده در یک موضوع یا افزونه عمل می کند، در حالی که تابع enqueue یک شیوه نامه ثبت شده را در یک وب سایت وردپرس بارگیری می کند.

به طور پیش فرض، هر دوی این توابع دارای دو پارامتر اصلی هستند:

• $ handle – یک نام منحصر به فرد برای یک شیوه نامه برای شناسایی آن در پایگاه کد وردپرس. باید با دسته ای که هنگام ثبت شیوه نامه مشخص کرده اید مطابقت داشته باشد.
• $src – یک URL یا مسیری به فایل شیوه نامه. این می تواند یک مسیر فایل نسبی به یک stylesheet در قالب وردپرس یا دایرکتوری افزونه یا یک URL مطلق به یک stylesheet باشد که در جای دیگری میزبانی شده است. $src اختیاری است و فقط در صورتی باید مشخص شود که این کار را انجام نداده باشید wp_register_style() تابع.

در نتیجه، امکان استفاده از wp_enqueue_style() بدون استفاده از wp_register_style() اولین.

برای نشان دادن، در اینجا کد با هر دو تابع وجود دارد:

function register_plugin_styles() {
	wp_register_style( 'plugin-development', plugins_url( '/css/plugin.css' ) );
	wp_enqueue_style( 'plugin-development' );
}
add_action( 'wp_enqueue_scripts', 'register_plugin_styles' );

در حال حاضر، در اینجا کد با تنها است wp_enqueue_style():

function register_plugin_styles() {
wp_enqueue_style( 'plugin-development', plugins_url( '/css/plugin.css' ) );
}
add_action( 'wp_enqueue_scripts', 'register_plugin_styles' );

به میزان برابر اهمیت داشتن، wp_register_script() و wp_enqueue_script() هستند توابع وردپرس مسئول مدیریت اسکریپت های سفارشی است. تابع register فایل های جاوا اسکریپت سفارشی را ثبت می کند، در حالی که wp_enqueue_script() تابع اسکریپت های ثبت شده را در وب سایت بارگذاری می کند. این توابع هر دو دو پارامتر اصلی دارند:

• $ handle – نام منحصر به فرد برای اسکریپت. به یاد داشته باشید که دسته باید بین آنها مطابقت داشته باشد wp_register_script() و wp_enqueue_script() کارکرد.
• $src – URL یا مسیر فایل اسکریپت jQuery. این اختیاری است برای wp_enqueue_script() اگر قبلا آن را مشخص کرده اید روی تابع ثبت نام

علاوه بر این، می توانید سه پارامتر اضافی را مشخص کنید:

• $deps – آرایه ای از اسکریپت های دیگر که اسکریپت فعلی به آنها وابسته است روی. به عنوان مثال، فایل های جاوا اسکریپت جی کوئری یا json2.
• $ver – شماره نسخه اسکریپت اگر اسکریپت های مختلف زیادی دارید و می خواهید نسخه های آنها را دنبال کنید مفید است.
• $in_footer – تعیین می کند که آیا اسکریپت در فوتر بارگیری شود یا خیر. به طور پیش فرض، وردپرس اسکریپت ها را بارگیری می کند <سر> بخش.

مشابه به wp_enqueue_style()، می توانید از wp_enqueue_script() بدون اینکه ابتدا آن را ثبت کنید، کار کنید.

در اینجا یک مثال با هر دو تابع آورده شده است:

function register_plugin_script() {
	wp_register_script( 'new-script', plugins_url( '/script.js' ) );
	wp_enqueue_script( 'new-script' );
}
add_action( 'wp_enqueue_scripts', 'register_plugin_script' );

حالا بیایید یک مثال را با یک تک ببینیم wp_enqueue_script() تابع:

function register_plugin_script() {
wp_enqueue_script( 'new-script', plugins_url( '/script.js' ) );
}
add_action( 'wp_enqueue_scripts', 'register_plugin_script' );

روش استفاده از wp_enqueue_script در وردپرس

همانطور که ما جنبه های اصلی را پوشش دادیم wp_enqueue_script() عملکرد، وقت آن است که چند مورد استفاده رایج را بررسی کنید تا به شما در درک بهتر آن کمک کند.

روش استفاده از wp_enqueue_script با jQuery

این wp_enqueue_script() تابع یک اضافی دارد آرایه() پارامتری که به کاربران امکان می دهد وابستگی های مورد نیاز اسکریپت را مشخص کنند.

function my_custom_script() {
    wp_enqueue_script( 'registered-script', get_template_directory_uri() . '/js/my-script.js', array('jquery'), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_custom_script' );

در کد بالا، ما از آن استفاده کرده ایم wp_enqueue_scripts() تابع برای قرار دادن یک اسکریپت به نام my-script.js.

ما مشخص کردیم که بستگی دارد روی کتابخانه jQuery و بارگذاری خواهد شد pageپاورقی ما هم استفاده کردیم get_template_directory_uri() تابع برای دریافت URL فهرست موضوع فعلی.

روش بارگیری اسکریپت ها در پاورقی با wp_enqueue_script

با بارگذاری اسکریپت ها در فوتر می توانید سرعت وب سایت خود را افزایش دهید. به طور پیش فرض، وردپرس اسکریپت ها را در قسمت هدر سایت شما بارگیری می کند، به این معنی که آنها قبل از محتوای دیگر بارگیری می شوند.

این می تواند منجر به کندتر شود page زمان بارگذاری زمانی که مرورگر منتظر این اسکریپت ها است.

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

function plugin_assets() {
wp_enqueue_script( 'custom-script', plugins_url( '/js/my-script.js' , __FILE__ ), array( 'jquery' ), true );
}
add_action( 'wp_enqueue_scripts', 'plugin_assets' );

اینجا، ما داریم را تنظیم کنید wp_enqueue_script() کارکرد $in_footer پارامتر به عنوان درست است، واقعی، که به جای اسکریپت در فوتر قرار می گیرد <سر>.

روش استفاده از wp_enqueue_scripts برای تعیین رسانه برای سبک ها

این wp_register_style() و wp_enqueue_style() توابع با یک پارامتر رسانه ارائه می شوند. نوع رسانه مورد نظر را برای شیوه نامه مشخص می کند. به طور پیش فرض، این پارامتر به صورت تنظیم شده است همه، به این معنی که شیوه نامه برای همه انواع رسانه اعمال می شود.

در اینجا روش ظاهر یک تابع اصلاح شده است:

function my_custom_styles() {
  // Register custom stylesheet
  wp_register_style( 'my-styles', get_template_directory_uri() . '/css/my-styles.css', array(), '1.0', 'screen' );
  // Enqueue custom stylesheet
  wp_enqueue_style( 'my-styles' );
}
// Add the hook to the wp_enqueue_scripts action
add_action( 'wp_enqueue_scripts', 'my_custom_styles' );

در این مثال، ما یک تابع به نام ایجاد کرده ایم سبک_های_سفارشی_من که یک stylesheet سفارشی به نام را ثبت و در نوبت قرار داد my-styles.css.

ما همچنین پارامتر رسانه را روی آن تنظیم کرده ایم صفحه نمایش، به این معنی که صفحه سبک برای رسانه های صفحه نمایش مانند صفحه نمایش دسکتاپ، لپ تاپ یا رایانه لوحی اعمال می شود.

همچنین می توانید از انواع رسانه های مختلف مانند چاپ برای رسانه های چاپی یا دستی برای دستگاه های دستی

نتیجه

این wp_enqueue_scripts hook و توابع مکمل مانند wp_enqueue_script() wp_enqueue_style() برای افزودن اسکریپت ها و سبک های سفارشی به سایت وردپرس خود به راحتی و کارآمد مفید هستند.

در این آموزش، صف بندی وردپرس را پوشش داده ایم process و مثال های مورد استفاده مختلفی را برای wp_register_script()، wp_register_style()، wp_enqueue_script()، و wp_enqueue_style() کارکرد.

امیدواریم این آموزش برای شما مفید بوده باشد و صف بندی را درک کرده باشید process الان بهتره اگر سوالی دارید، راهنمای وردپرس ما را بررسی کنید یا در زیر نظر بگذارید.