بکارگیری جاوا اسکریپت و استایل در وردپرس

کتابخانه جی کوئری (jQuery) یکی از کتابخانه های کم حجم و پرطرفدار در میان کتابخانه های جاوا اسکریپت است که وردپرس از آن در ساختار داخلی اش بهره می برد. شما می توانید از سایر کتابخانه هایی که برای جاوا اسکریپت توسعه یافته اند در وردپرس استفاده نمایید اما تمرکز ما در این آموزش استفاده از جی کوئری است.

در این بخش از آموزش پلاگین نویسی وردپرس به بحث در مورد فراخوانی فایل ها جاوا اسکریپت و CSS در وردپرس می پردازیم.

الحاق فایل جاوا اسکریپت به صفحات وردپرس

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

این تابع پنج پارامتر ورودی می پذیرد:

پارامتر اول نام اسکریپت که می تواند توسط وردپرس یا پلاگینی ثبت شده باشد، پارامتر دوم آدرس اسکریپت، پارامتر سوم آرایه ای از اسکریپت های ثبت شده که اجرای اسکریپت مورد نظر به آنها وابسته است، پارامتر چهارم شماره نسخه اسکریپت و پارامتر پنجم تعیین کننده قرارگیری اسکریپت در هد سایت (با مقدار false) یا قرارگیری در فوتر سایت (با مقدار true) است.  

برای افزودن اسکریپت ها و استایل ها به صفحات سایت وردپرس تابع اکشن مورد نظر باید با هوک wp_enqueue_scripts فراخوانی شود و برای افزودن اسکریپت ها و استایل ها در بخش مدیریت وردپرس باید از هوک اکشن admin_enqueue_scripts استفاده شود.

مثال: افزودن اسکریپت prototype به صف اسکریپت های مورد نیاز

< ?php
add_action( 'wp_enqueue_scripts', ' bmpt_js_add_script ' );        
// Add prototype.js which is bundled with WordPress
function bmpt_js_add_script() {
    wp_enqueue_script( ‘prototype’ );
}
? >  

مثال:

< ?php
 add_action( 'wp_enqueue_scripts', ' bmpt_js_add_script3 ' );        
       
// Add a custom script that relies on jQuery components
function bmpt_js_add_script3() {
    wp_enqueue_script(
        ‘bmpt-new’,
        ‘http://example.com/script2.js’,
        array( ‘jquery-ui-tabs’, ‘jquery-ui-draggable’ )
    );
}
? >  

در مثال فوق اسکریپتی که از مسیر مشخص شده بارگذاری می شود برای اجرای نیاز به دو اسکریپت جی کوئری jquery-ui-tabs و jquery-ui-draggable دارد.

حذف اسکریپت از صف

به منظور جلوگیری از بارگذاری یک اسکریپت ثبت شده و حذف از صف اسکریپت ها می توان از تابع wp_dequeue_script استفاده نمود. این تابع نام اسکریپت ثبت شده را به عنوان پارامتر ورودی می پذیرد.

عملیات حذف یک اسکریپت از صف می توانید در تابع اکشن هوک wp_print_scripts انجام دهید تا پس از افزوده شدن به صف و پیش از نمایش تگ اسکریپت در خروجی حذف شود.

<?php
function bmpt_dequeue_script() {
    wp_dequeue_script( 'jquery-ui-core' );
}
add_action( 'wp_print_scripts', 'bmpt_dequeue_script', 100 );
?>

ثبت یک اسکریپت

در مواردی که لازم است اسکریپتی چندین بار در صف اسکریپت ها قرار گیرد، روش بهتر این است که به جای قرارگیری و حذف مکرر از صف، اسکریپت ابتدا تنها ثبت شده و در صورت لزوم در صف اسکریپت ها قرار گیرد.

تابع wp_register_script برای تعریف اسکریپت در وردپرس استفاده می گردد و دقیقا همان پارامترهای ورودی تابع wp_enqueue_script را به همان ترتیب می پذیرد.

مثال: تعریف اسکریپت

< ?php
wp_register_script( $handle, $src, $deps, $ver, $in_footer );
? >   

و برای استفاده از اسکریپت ثبت شده در صورت لزوم:

< ?php
wp_enqueue_script( $handle );
? >    

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

برای الحاق صفحات CSS به وردپرس از توابع مشابهی برای ثبت استایل و قراردادن استایل ثبت شده در صف استایلهای مورد نیاز استفاده می شود.

تابع wp_enqueue_style فایل CSS مورد نظر را ثبت کرده و در صف استایل ها قرار می دهد. این تابع پنج پارامتر ورودی می پذیرد. پارامتر اول نام استایل، پارامتر دوم آدرس فایل CSS، پارامتر سوم آرایه ای از استایلهای ثبت شده مورد نیاز، پارامتر چهارم شماره نسخه استایل و پارامتر پنجم عنوان رسانه ای که استایل برای آن تعریف شده است.

<?php
function bmpt_theme_name_scripts() {
    wp_enqueue_style( 'style-name', get_stylesheet_uri() );
    wp_enqueue_script( 'script-name', get_template_directory_uri() . '/js/example.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'wpdocs_theme_name_scripts' );
?>

اگر بخواهیم یک استایل را بدون قرار دادن در صف استایل ها تعریف کنیم می توانیم از تابع wp_register_style استفاده نماییم. پارامترهای ورودی تابع wp_register_style دقیقا مشابه پارامترهای wp_enqueue_style می باشد.

<?php

function bmpt_register_plugin_styles() {
    wp_register_style( 'my-plugin', plugins_url( 'my-plugin/css/plugin.css' ) );
    wp_enqueue_style( 'my-plugin' );
}	
// Register style sheet.
add_action( 'wp_enqueue_scripts', 'bmpt_register_plugin_styles' );
?>