مقدمه

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

روش نادرست اضافه کردن فایل های استایل و اسکریپت

در گذشته ما به صورت مستقیم فایل های css را در تگ هد و فایل های جاوا اسکریپت را در پابرگ قبل از بسته شدن تگ body فراخوانی میکردیم که در حال حاضر این روش فقط در html امکانپذیر است و ما نمی توانیم از آن در وردپرس استفاده نماییم.

اضافه کردن فایل های css و js در وردپرس

وردپرس برای فراخوانی فایل های استایل و اسکریپت در خود دارای تابعی به نام wp_enqueue_style می باشد.با این روش می توانیم بسیار راحت روی تمامی فایل ها مدیریت داشته باشیم.

روش صحیح اضافه کردن فایل های css و js به وردپرس

حال نوبت شروع کار است بنابراین فانکشنی ایجاد میکنیم و کد آن را در فایل functions.php قرار می دهیم.در کد زیر ما یک فایل استایل به نام style.css در فولدر css و یک فایل اسکریپت به نام script.js در فولدر js در روت اصلی قالب خود قرار داده ایم.

function dastyarweb_scripts() {
    wp_enqueue_style( 'style-name', get_template_directory_uri() . '/css/style.css' );
    wp_enqueue_script( 'script-name', get_template_directory_uri() . '/js/script.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'dastyarweb_scripts' );