توابع وردپرس برای نوشتن کدهای درون خطی

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

برای مثال زمانی که شما نیاز دارید در بخشی از قالب وردپرس یا افزونه وردپرس خودتون تکه کد درون خطی CSS یا JS بنویسید آنها را در هدر یا فوتر یا بدنه استفاده میکنید که خیلی از نظر وردپرس استاندارد نیست!

تا انتهای این مطلب آموزشی را بخوانید تا به شما طراح قالب وردپرس یا طراح افزونه وردپرس دو تابع کاربردی و استاندار وردپرس به نام های wp_add_inline_style و wp_add_inline_script را برای نوشتن کدهای درون خطی معرفی کنم.

نوشتن کدهای درون خطی CSS به کمک تابع wp_add_inline_style

ساختار و پارامتر های تابع :

wp_add_inline_style($handle, $data )

تابع wp_add_inline_style دارای ۲ پارامتر می باشد:

handle$: انتخاب نام هندل فایل CSS که لود کردید ( وارد کردن آن اجباری است) 

data$: کدهای CSS شما.(این پارامتر اجباری است)

به عنوان مثال تکه کد زیر برای زمانیست که شما بخواهید یک متغیر PHP برای انتخاب رنگ انتخاب کنید و آن را به صورت درون خطی به قالب وردپرس خود اضافه کنید :‌

function iwp_custom_color() {
    wp_enqueue_style('custom-style',get_template_directory_uri() . '/css/custom_script.css');
    $color = '#fff';
    $custom_css = ".color{background: {$color};}";
    wp_add_inline_style( 'custom-style', $custom_css );
}
add_action( 'wp_enqueue_scripts', 'iwp_custom_color' );

توضیحات بیشتر :‌ در تکه کد بالا ابتدا به وسیله تابع wp_enqueue_style یک فایل CSS را لود کردیم و در مرحله بعد به کمک تابع wp_add_inline_style تکه کد CSS خود را اضافه کردیم.

نکته: نام $handle که برای تابع wp_add_inline_style انتخاب میکنید باید نام handle تابع wp_enqueue_style باشد.(در مثال بالا ما custom-style را انتخاب کردیم)

نوشتن کدهای درون خطی JS به کمک تابع wp_add_inline_script

ساختار و پارامتر های تابع :

wp_add_inline_script( $handle, $data, $position = 'after' )

تابع wp_add_inline_style دارای ۲ پارامتر می باشد:

handle$: انتخاب نام هندل فایل js که لودی کردید ( وارد کردن آن اجباری است) 

data$: کدهای JS شما.(این پارامتر اجباری است)

position$: این پارامتر برای اضافه کردن کدهای درون خطی برای قبل یا بعد handle$ است. (این پارامتر اختیاری است)

به عنوان مثال تکه کد زیر برای اضافه کردن یک کد درون خطی جاوااسکریپت هست:

function iwp_custom_script() {
   wp_enqueue_script( 'main-js', '/main.js', array(), '1.0' );
   wp_add_inline_script( 'main-js', 'alert("hello world");' );
}
add_action( 'wp_enqueue_scripts', 'iwp_custom_script' );

توضیحات بیشتر: ابتدا به کمک تابع wp_enqueue_script یک فایل js لود کردیم و در نهایت با تابع wp_add_inline_script تکه کدجاوااسکریپتمون رو اضافه کردیم.

نکته: نام $handle که برای تابع wp_add_inline_script انتخاب میکنید باید نام handle تابع wp_enqueue_script باشد.(در مثال بالا ما main-js را انتخاب کردیم)