با عرض سلام خدمت کاربران محترم سایت پی وی لرن.
با جلسه ای دیگر از سری جلسات دوره جامع آموزش ساخت قالب وردپرس در خدمت شما هستیم.
در این جلسه قصد داریم به آموزش استفاده از JavaScript و CSS در قالب های وردپرس بپردازیم.
در هنگام ساخت قالب خود، ممکن است بخواهید تا از فایل های جاوا اسکریپت و CSS نیز استفاده کنید.
به هر حال به یاد داشته باشد که قالب شما تنها چیز فعال در سایت وردپرسی شما نیست.
سایت شما از تعدادی پلاگین نیز استفاده میکند. به همین دلیل همه چیز به صورت هماهنگ پیش میرود.
مهم است که قالب و پلاگین ها، اسکریپت ها و stylesheet هایی را بارگذاری کنند که از متد استاندارد وردپرس استفاده میکنند.
این امر از اینکه سایت همچنان کارآمد است و ناسازگاری به وجود نخواهد آمد، اطمینان حاصل میکند.
اضافه کردن اسکریپت ها و استایل ها در وردپرس یک فرآیند نسبتا ساده است.
شما یک تابع ایجاد میکنید که تمام اسکریپت ها و استایل ها را دربرمیگیرد.
هنگام اضافه کردن یک اسکریپت یا استایل، وردپرس یک دسته و مسیر برای فایل ها و وابستگی های آن ایجاد میکند.
سپس شما برای درج اسکریپت یا استایل، از hook ها استفاده میکنید.
راه مناسب برای اضافه کردن اسکریپت ها و استایل ها به قالب، قرار دادن ان ها در فایل functions.php است.
برای اضافه کردن اسکریپت ها و استایل ها از توابع ()wp_enqueue_scipt و ()wp_enqueue_style استفاده میکنیم.
از stylesheet های CSS برای سفارشی سازی ظاهر قالب استفاده میشود.
همچنین stylesheet فایلی است که اطلاعاتی را در مورد قالب در خود ذخیره میکند.
به همین دلیل وجود فایل style.css در تمامی قالب ها الزامی است.
به جای بارگذاری stylesheet در فایل header.php، باید آن را با استفاده از تابع ()wp_enqueue_style بارگذاری کنید.
برای بارگذاری stylesheet اصلی میتوانید آن را در فایل functions.php قرار دهید.
برای اضافه کردن یک فایل استایل به نام style.css به فایل style.css از کد زیر استفاده میکنیم:
1 | wp_enqueue_style( 'style', get_stylesheet_uri() ); |
به طور کلی ساختار تابع فوق به صورت زیر است:
1 | wp_enqueue_style( $handle, $src, $deps, $ver, $media ); |
دو پارامتر اول ضروری و باقی پارامتر ها اختیاری هستند.
بنابراین اگر برای بارگذاری یک stylesheet به نام slider.css که در پوشه ای به نام CSS که این پوشه در دایرکتوری اصلی قالب قرار دارد، از کد زیر استفاده میکنیم:
1 | wp_enqueue_style( 'slider', get_template_directory_uri() . '/css/slider.css',false,'1.1','all'); |
تمام فایل های جاوا اسکریپتی که مورد نیاز قالب هستند باید توسط تابع ()wp_enqueue_script بارگذاری شوند.
ساختار کلی تابع فوق به صورت زیر است:
1 | wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer); |
مثال:
1 | wp_enqueue_script( 'script', get_template_directory_uri() . '/js/script.js', array ( 'jquery' ), 1.1, true); |
اگر قرار است بیش از یک تابع enqueue را برای بارگذاری اسکریپت ها یا استایل ها استفاده کنید، بهتر است تا آن ها را در یک تابع مجتمع کرده و سپس با استفاده از اکشن wp_enqueue_script آن ها را فراخوانی کنید.
مثال:
1 2 3 4 5 6 7 8 9 10 11 12 | 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 در قالب های وردپرس نیز به پایان رسید.
در جلسه بعد به معرفی تگ های شرطی وردپرس خواهیم پرداخت.