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

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

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

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

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

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

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

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

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

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

  • ساخت یک فایل با نام main-slider.php و قرار دادن آن در دایرکتوری template-parts/header. پس از آن فراخوانی این فایل در فایل index.php (بخش ۰۱۹ موجود در کدها)

//۰۱۹-
get_template_part('template-parts/header/main-slider');

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

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

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

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_style

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

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

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

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

نکته مهم:

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

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

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

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

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

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

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