در این آموزش روش استاندارد فراخوانی فایل های css و js در قالب وردپرس را بررسی خواهیم کرد و روش های نادرست را هم مثال خواهیم زد.استفاده و فراخوانی نادرست فایل های در وردپرس می تواند مشکلات زیادی را برای سایت وردپرسی ایجاد کند و بهینه اسزی را کاهش دهد، اگر شما هم تاکون جزو این دسته از افراد هستید پیشنهاد میکنیم در ادامه با ما همراه باشید.
روش نادرست اضافه کردن فایل های استایل و اسکریپت
در گذشته ما به صورت مستقیم فایل های css را در سربرگ و فایل های جاوا اسکریپت را در پابرگ فراخوانی میکردیم که در حال حاضر این روش فقط در html امکانپذیر است و ما نمی توانیم از آن در وردپرس استفاده نماییم.کد زیر نمونه ای از اضافه کردن فایل های css و js برای شما قرار داده شده
<!DOCTYPE html>
<html lang="en" dir="rtl">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="name.css">
</head>
<body>
<script src="name.js"></script>
</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' );
