افزودن css و جاوا اسکریپت سفارشی به قالب وردپرس

سلام مجدد به دوستان عزیز و کاربران گرامی مِستر آموز.

 

یکی از مهم ترین مسائل در جذب بازدیدکنندگان به سایت خود ، داشتن یک سایت زیبا می باشد. برای این منظور شما اگر به کد نویسی زبان های css و java script مسلط هستید می توانید با اضافه کردن کدهای سفارشی این زبان ها سایت خود را زیباتر و واکنش گرا کنید. اگر قصد چنین کاری را دارید در این مقاله آموزشی در مِستر آموز به شما آموزش داده می شود که چگونه می توان این کار را به درستی انجام داد. با ما همراه باشید.

 

نکته:

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

 

در وردپرس یک تابعی وجود دارد به نام wp_head ، که با این تابع می توانیم هر چیزی را در بخش بالای سایت بار گذاری کنیم. به عنوان مثال می توانید به راحتی کدی مانند کد زیر را اضاف کنید.
وردپرس دارای یک تابع wp_head میباشد که به شما اجازه ی بارگذاری هر چیزی در بخش بالای سایت را میدهد. میتوانند براحتی اسکریپت خود را با استفاده از کدی مانند زیر اضافه کنند:

<?php
   add_action('wp_head', 'wpb_bad_script');
   function wpb_bad_script() {
      echo 'jQuery goes here';
   }
?>

 

مثال بالا با اینکه راحت است اما کار صحیحی به شمار نمی رود. فرض کنید که ما jQuery را بصورت دستی بارگذاری کردیم، و یک بار دیگر افزونه های دیگر را از جی کوئیری از راه مناسب استفاده کنیم. در این حالت جی کوئری ما دو بار بارگذاری شده است و طبیعتا دو نسخه مختلف باعث تضاد میشود.

 

دلیل قرار دادن اسکریپت در نوبت

همانطور که می دانید وردپرس طرفداران زیادی دارد، هزاران نفر در کل جهان هستند که قالب طراحی و افزونه می نویسند. پس باید گفت که وردپرس جامعه توسعه دهنده ی خیلی قوی دارد. جهت مطمئین شدن درستی کار و اینکه هیچ کدام برای کار همدیگر اختلال انجام نمی دهند، وردپرس تابع اسکریپت ها را در نوبت قرار می دهد. این تابع یک راه استاندارد برای بارگذاری جاوا اسکریپت و سبک فراهم میکند. و برای اعلام مکان بارگذاری در وردپرس از تابع wp_enqueue_script استفاده می کند.

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

 

گذاشتن صحیح اسکریپت در صف

برای انجام این کار کدی که در زیر نوشته ایم را در فایل افزونه یا تابع قالب قرار دهید. فایل php سکریپت را بدرستی در وردپرس بارگذاری میکند.

<?php

    function wpb_adding_scripts() {
        wp_register_script('my_amazing_script', plugins_url('amazing_script.js', __FILE__), array('jquery'),'1.1', true);
        wp_enqueue_script('my_amazing_script');
    }

    add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' );
?>

توضیح:

با ثبت نام اسکریپت خود با استفاده از تابع () wp_register_script شروع میکنید. که این تابع 5 پارامتر را قبول می کند:

handle$: این پارامتر یک نام منحصر به فرد برای اسکریپت محسوب می شود که آن را  “my_amazing_script” می نامند.
src$: آدرس مکان اسکریپت است. برای بدست آوردن آدرس صحیح از پوشه افزونه از تابع آدرس افزونه استفاده می کنیم. و بعد از اینکه وردپرس آن را پیدا کرد سپس به دنبال فایل amazing_script.js در پوشه میگردد.
deps$: جهت وابستگی می باشد. از آنجا که اسکریپت از جی کوئری استفاده میکند ما جی کوئری را در بخش وابستگی اضافه میکنیم. وردپرسبصورت خودکار جی کوئری را اگر در سایت در حال بارگذاری نباشد بار گذاری میکند.
ver$: این پارامتر ضروری نیست و نسخه ی اسکریپت ما را نشان می دهد.
in_footer$: اگر میخواهید اسکریپت را در فوتر بارگذاری کنید برای درست بودن باید ارزش تعیین کنید. و اگر بخواهید اسکریپت را در هدر بارگذاری کنید به شما اعلام می کند که نادرست است.

اکنون که تمام پارامترها در wp_register_script را فراهم کردید فقط می توانید اسکریپت را در ()wp_enqueue_script که سبب می شود همه چیز اتفاق بیفتد صدا بزنیم. رفتن به گام ثبت نام و در صف قرار دادن اسکریپت به سایتهای دیگر اجازه ی ثبت نام اسکریپت شما اگر بخواهند بدون تغییر کد افزونه استفاده کنند را میدهد.

در صف قرار دادن صحیح سی اس اس

برای قرار دادن صحیح CSS در صف باید مانند اسکریپیت عمل کنید. کد زیر را ببینید:

<?php
function wpb_adding_styles() {
wp_register_script('my_stylesheet', plugins_url('my-stylesheet.css', __FILE__));
wp_enqueue_script('my_stylesheet');
}

add_action( 'wp_enqueue_scripts', 'wpb_adding_styles' );
?>

به یاد داشته باشید که ما از قلاب عمل wp_enqueue_scripts هم برای اسکریپت و هم برای CSS استفاده کرده ایم. یعنی این تابع برای هر دو حالت کار می کند. اگر توجه کرده باشید ما در مثال بالا از plugins_url برای اشاره کردن به مکان اسکریپت و یا CSS که میخواهیم در صف قرار دهیم استفاده کرده ایم. با این حال اگر از تابع اسکریپت صف در قالب خود استفاده میکنید پس از ()get_template_directory_uri استفاده کنید. اگر با قالب کودک کار میکنید از () get_stylesheet_directory_uri استفاده کنید مانند مثال زیر:

 

<?php<br>function wpb_adding_scripts() {
wp_register_script('my_amazing_script', get_template_directory_uri() . '/js/amazing_script.js', array('jquery'),'1.1', true);
wp_enqueue_script('my_amazing_script');
}

add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' );
?>

 

 

موفق باشید.