تعریف فایل اسکریپت در قالب وردپرس – مقدمه:

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

برای این کار با توابع wp_enqueue_script و wp_register_script آشنا می شویم و آشنا می شویم که چگونه تابع wp_head از آن ها استفاده خواهد کرد.

شما با یادگیری این موارد به راحتی می توانید فایل های استایل خود را بدون قرار دادن در فایل header.php فراخوانی کنید و در قالب خود از آن ها استفاده نمایید.

تعریف فایل اسکریپت در قالب وردپرس

بخش اول: آشنایی با انواع روش های رجیستر فایل اسکریپت در قالب وردپرس

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

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

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

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

برای این کار مراحل زیر را می توانید دنبال کنید (این مراحل برای ثبت یا register کردن و نیز در صف آوردن فایل های اسکریپت یا enqueue کردن برای هر فایل اسکریپت در قالب وردپرس ، کاملا یکسان می باشد)

  • در قسمت قبل این آموزش، یک فایل با نام main-slider.php  ساختیم و آن را در دایرکتوری template-parts/header قرار دادیم و سپس  آن را در فایل index.php فراخوانی کردیم

  • تعریف یک add_action با استفاده از wp_enqueue_scripts و فراخوانی تابع با نام msn_add_responsive_slider_assets برای اجرای آن در هنگام فراخوانی تابع wp_head موجود در هدر قالب وردپرس

  • رجیستر کردن فایل اسکریپت در قالب وردپرس با استفاده از تابع wp_register_script و در تابع msn_add_responsive_slider_assets (بخش ۲-۰۱۸ موجود در کدها)

  • به صف درآوردن یا enqueue کردن فایل js رجیستر شده در مرحله قبل با استفاده از تابع wp_enqueue_script (بخش ۲-۰۱۸ موجود در کدها)

function msn_add_responsive_slider_assets()
{
    //۰۱۸-۱-Register your styles for slider
    wp_register_style('responsiveslider.style',get_template_directory_uri().'/css/responsive-test.css');
    wp_enqueue_style('responsiveslider.style');
    //۰۱۸-۲-Register your script for slider
    wp_register_script('responsiveSlider.script', get_template_directory_uri() . '/js/slider.js', array('jquery'), null, true);
    wp_enqueue_script('responsiveSlider.script');
    wp_register_script('responsiveslides.script', get_template_directory_uri() . '/js/responsiveslides.min.js', array('jquery'), null, true);
    wp_enqueue_script('responsiveslides.script');
}

/*Hook to wp_enqueue_scripts*/
add_action('wp_enqueue_scripts', 'msn_add_responsive_slider_assets');

دلیل استفاده کردن از wp_register_script

شما می توانید بدون استفاده از wp_register_script و به تنهایی، با استفاده از تابع  wp_enqueue_script ، فایل های js  را در قالب وردپرس خود، enqueue نمایید. دلیل رجستر کردن فایل اسکریپت پیش از در صف قرار دادن آن، این می باشد که در جاهایی از قالب که به این اسکریپت ها نیاز نداریم، می توانیم آن ها را deregister نماییم و به این ترتیب فایل های اضافه را از صفحه مورد نظر حذف کرده و با این کار صفحات سایت وردپرس خود را، سبک تر نماییم تا سرعت لود آن افزایش یابد.

در صورتی که ابتدا اسکریپتی را رجیستر نمایید، برای enqueue کردن آن کافی است فقط نام آن یا همان handle را به عنوان پارامتر به تابع  wp_enqueue_script ارسال نمایید

نکته کاربردی: دلیل استفاده از اکشن هوک wp_enqueue_scripts و فراخوانی تابع ما توسط این هوک، این می باشد که هر صفحه ای که لود می شود، در صورتی که تابع wp_head در هدر آن صفحه فراخوانی شده باشد، باعث فراخوانی do_action ای با نام wp_enqueue_scripts می گردد و همین باعث خواهد شد تا تابع ما که به وسیله add_action به آن هوک شده است، توسط آن به اجرا در بیاید.

بخش دوم : آشنایی با انواع با پارامتر های مورد استفاده در تابع wp_register_script

تابع های wp_register_script و همین طور wp_enqueue_script دارای پارامتر های به شکل زیر می باشند:

/*Syntax for wp_register_script */
wp_register_script( string $handle, string $src, array $deps = array(), string|bool|null $ver = false, bool $in_footer = false )

/*Syntax for wp_enqueue_script */
wp_enqueue_script( string $handle, string $src = '', array $deps = array(), string|bool|null $ver = false, bool $in_footer = false )

  • پارامتر اول یا handle نامی هست که شما برای اسکریپت خود در قالب استفاده می کنید. این نام نباید با نام های اسکریپت های register شده در وردپرس و همین طور نام های Default script های موجود در هسته وردپرس یکسان باشد. برای بررسی این امر می توانید به توضیحات مربوط به این تابع ها، در لینک های پایین صفحه مراجعه کنید.

  • پارامتر دوم یا src آدرس url کامل اسکریپتی است که می خواهید از آن استفاده کنید

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

  • پارامتر چهارم یا version مربوط به ورژن اسکریپت شما می باشد. این شماره ورژن در صورت موجود بودن، به انتهای نام اسکریپت شما متصل شده و سپس در سورس کدهای شما قرار می گیرد. این پارامتر می تواند مقادیر string و bool و null را قبول کند. در صورتی که این مقدار بر روی false باشد، ورژن وردپرس سایت شما، بصورت خودکار به انتهای نام اسکریپت اضافه خواهد شد.

  • پارامتر پنجم یا in_footer به وردپرس می فهماند که اسکریپت شما در کجای کدهای تولید شده قرار بگیرد. در صورتی که این مقدار true باشد، برای در صف قرار دادن اسکرییپ شما در کد، وردپرس آن را پیش از تگ بسته body و بعد از فوتر سایت شما، قرار خواهد داد. در غیر این صورت، اسکریپت شما به بخش head قالب سایت شما، اضافه خواهد شد.

نکته مهم:

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

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

راهنما برای چک لیست طراحی قالب وردپرس:

شما می توانید از لینک های زیر به عنوان مرجع های اصلی برای چک لیست طراحی قالب وردپرس در قسمت بالا استفاده نمایید:

راهنما برای خواندن سایر مقالات سایت به صورت دسته بندی شده:

شما می توانید از طریق لینک های کاربردی زیر به سایر مقالات سایت که کاملا بصورت طبقه بندی شده وجود دارد، مراجعه نموده و از آن ها استفاده کنید:

بازگشت به صفحه بلاگ وبمستر وردپرس