با عرض سلام خدمت کاربران محترم سایت پی وی لرن.
با جلسه ای دیگر از سری جلسات دوره جامع آموزش ساخت قالب وردپرس در خدمت شما هستیم.
در این جلسه قصد داریم به آموزش استفاده از JavaScript و CSS در قالب های وردپرس بپردازیم.
مقدمه
در هنگام ساخت قالب خود، ممکن است بخواهید تا از فایل های جاوا اسکریپت و CSS نیز استفاده کنید.
به هر حال به یاد داشته باشد که قالب شما تنها چیز فعال در سایت وردپرسی شما نیست.
سایت شما از تعدادی پلاگین نیز استفاده می‌کند. به همین دلیل همه چیز به صورت هماهنگ پیش می‌رود.
مهم است که قالب و پلاگین ها، اسکریپت ها و stylesheet هایی را بارگذاری کنند که از متد استاندارد وردپرس استفاده می‌کنند.
این امر از اینکه سایت همچنان کارآمد است و ناسازگاری به وجود نخواهد آمد، اطمینان حاصل می‌کند.
اضافه کردن اسکریپت ها و استایل ها در وردپرس یک فرآیند نسبتا ساده است.
شما یک تابع ایجاد می‌کنید که تمام اسکریپت ها و استایل ها را دربرمی‌گیرد.
هنگام اضافه کردن یک اسکریپت یا استایل، وردپرس یک دسته و مسیر برای فایل ها و وابستگی های آن ایجاد می‌کند.
سپس شما برای درج اسکریپت یا استایل، از hook ها استفاده می‌کنید.
اضافه کردن اسکریپت ها و استایل ها
راه مناسب برای اضافه کردن اسکریپت ها و استایل ها به قالب، قرار دادن ان ها در فایل functions.php است.
برای اضافه کردن اسکریپت ها و استایل ها از توابع ()wp_enqueue_scipt و ()wp_enqueue_style استفاده می‌کنیم.
Stylesheet ها
از stylesheet های CSS برای سفارشی سازی ظاهر قالب استفاده می‌شود.
همچنین stylesheet فایلی است که اطلاعاتی را در مورد قالب در خود ذخیره می‌کند.
به همین دلیل وجود فایل style.css در تمامی قالب ها الزامی است.
به جای بارگذاری stylesheet در فایل header.php، باید آن را با استفاده از تابع ()wp_enqueue_style بارگذاری کنید.
برای بارگذاری stylesheet اصلی می‌توانید آن را در فایل functions.php قرار دهید.
برای اضافه کردن یک فایل استایل به نام style.css به فایل style.css از کد زیر استفاده می‌کنیم:
مثال :
| wp_enqueue_style( 'style', get_stylesheet_uri() ); |
به طور کلی ساختار تابع فوق به صورت زیر است:
مثال :
| wp_enqueue_style( $handle, $src, $deps, $ver, $media ); |
- handle – نام stylesheet
- src – مکانی که فایل قرار دارد
- deps – این پارامتر وابسته بودن stylesheet را مشخص می‌کند. اگر تنظیم شود، تا وقتی که فایلی که به ان وابسته است بارگذاری نشود، این استایل نیز بارگذاری نخواهد شد
- ver – شماره نسخه
- media – مشخص می‌کند چه نوع رسانه ای می‌تواند در stylesheet بارگذاری شود. مانند all, print, screnn و یا handheld
دو پارامتر اول ضروری و باقی پارامتر ها اختیاری هستند.
بنابراین اگر برای بارگذاری یک stylesheet به نام slider.css که در پوشه ای به نام CSS که این پوشه در دایرکتوری اصلی قالب قرار دارد، از کد زیر استفاده می‌کنیم:
مثال :
| wp_enqueue_style( 'slider', get_template_directory_uri() . '/css/slider.css',false,'1.1','all'); |
Script ها
تمام فایل های جاوا اسکریپتی که مورد نیاز قالب هستند باید توسط تابع ()wp_enqueue_script بارگذاری شوند.
ساختار کلی تابع فوق به صورت زیر است:
مثال :
| wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer); |
- handle – نام اسکریپت
- src – مکان اسکریپت
- deps – یک آرایه است که شامل تمام دیگر اسکریپت هایی که این اسکریپت به آن ها وابسته است
- ver – شماره نسخه
- in_footer – به صورت boolean است. اگر true باشد، اسکریپت به جای قرار گیری در هدر، در فوتر قرار می‌گیرد که این امر باعث بهبود سرعت بارگذاری صفحات می‌شود
مثال:
مثال :
| wp_enqueue_script( 'script', get_template_directory_uri() . '/js/script.js', array ( 'jquery' ), 1.1, true); |
مجتمع کردن توابع Enqueue
اگر قرار است بیش از یک تابع enqueue را برای بارگذاری اسکریپت ها یا استایل ها استفاده کنید، بهتر است تا آن ها را در یک تابع مجتمع کرده و سپس با استفاده از اکشن wp_enqueue_script آن ها را فراخوانی کنید.
مثال:
مثال :
| function add_theme_scripts() { wp_enqueue_style( 'style', get_stylesheet_uri() ); wp_enqueue_style( 'slider', get_template_directory_uri() . '/css/slider.css', array(), '1.1', 'all'); wp_enqueue_script( 'script', get_template_directory_uri() . '/js/script.js', array ( 'jquery' ), 1.1, true); if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) { wp_enqueue_script( 'comment-reply' ); } } add_action( 'wp_enqueue_scripts', 'add_theme_scripts' ); |
جلسه آموزش استفاده از javascript و css در قالب های وردپرس نیز به پایان رسید.
در جلسه بعد به معرفی تگ های شرطی وردپرس خواهیم پرداخت.
فروشگاه
فیلم های آموزشی
کتاب های آموزشی
مقالات آموزشی
وردپرس
