טעינת קבצי CSS ו JS לתוכנית וורדפרס

נובמבר 15, 2018
2:21 pm

הוספת קבצי JavaScript וקבצי CSS לוורדפרס בדרך הנכונה – Enqueue

באתר וורדפרס כנראה נרצה להכניס קבצי עיצוב – CSS או קבצי התנהגות – JavaScript לאתר שלנו, וחשוב מאוד לדעת איך עושים זאת בדרך הנכונה. הרבה מפתחים רגילים להכניס את הקוד לheader או לfooter של האתר אבל באתרי וורדפרס זה פשוט לא נכון. וכשלא עושים זאת נכון זה פתח לצרות.

פונקציות טעינת CSS ו JS לוורפרס

כדי להכניס את הפונקציות נהיה קודם צריכים לדעת איך לערוך את קבצי הוורדפרס שלנו

תוכלו להיכנס לכאן למאמר על עריכת קבצי וורדפרס

את כל השינויים נעשה בקובץ ה function.php

יש מספר פונקציות שנכיר כאן –

wp_enqueue_style פונקציה לטעינת קבצי עיצוב JS

wp_enqueue_script פונקציה לטעינת קבצי JS

wp_register_script פונקציה לרישום נכס

get_stylesheet_directory_uri פונקציה שתחזיר נתיב של תבנית הבת

get_template_directory_uri – פונקציה שתחזיר נתיב של תבנית האב.

ונסביר צעד צעד.

רישום נכסי CSS ו JavaScript באתרי וורדפרס

כדי להוסיף קבצי CSS וJS בצורה הנכונה לאתר וורדפרס נהיה צריכים לבצע רישום של הנכס ואז חישוב שלו (enqueue) . אנחנו קודם נרשום את הנכס כדי להודיע לוורדפרס שהנכס קיים , ואז נגיד לוורדפרס לבצע את החישוב שלו ולהוסיף אותו .

הוספת CSS לוורדפרס

אז בואו נכיר את הפונקצית הרישום לCSS – זה הסינטקס של הפונקציה

 
;(wp_register_style( $handle, $src, $deps, $ver, $media

ונסביר –

handle – זהו שם הנכס. הוא חייב להיות ייחודי וכדאי להכניס רק אותיות קטנות

src – הכתובת של הקובץ, יהיה נכון להשתמש get_template_directory_uri או get_stylesheet_directory_uri ואז את המיקום של הקובץ

deps – כאן נכניס את שמות הנכסים שנרצה לטעון לפני הנכס הזה בתוך מערך (array)

ver – מספר גירסה לנכס.

media – כאן נבחר באיזה סוג מדיה הנכס יטען.

אז בואו נרשום דוגמא –

נפתח פונקציה ונרשום את הנכס שלנו

Function superstyle(){

Wp_register_style('styles', get_template_directory_uri() . '/style.css, array(), '1.0');

 
Function superstyle(){
Wp_register_style('styles', get_template_directory_uri() . '/style.css, array(), '1.0');
Wp_enqueue_style('style') };

Add_action('wp_enqueue_scripts' , 'superstyle');

את הפונקציה הזו אנחנו רושמים בקובץ ה function.php

שימו לב שבדוגמא הזו ביקשנו מהפונקציה ללכת לתיקייה של תבנית האב ומשם לקחת את קובץ העיצוב שלנו כך נוכל גם להוסיף קבצי CSS נוספים שנרצה לטעון לתוכנית – בתוך הפונקציה פשוט נרשום עוד נכס

הוספת JS לוורדפרס

הסינטקס של של פונקציית הרישום לקבצי JavaScript הוא דומה מאוד לקבצי הCSS עם שינוי קטן –

 
wp_register_script( $handle, $src, $deps, $ver, $in_footer );

in_footer – כאן יש לנו אפשרות לקבוע מתי יטען הסקריפט ונעשה זאת ע"י רשימת שקר או אמת ( true or false ) אם נרשום אמת הפונקציה תיטען בפוטר.

ונראה דוגמא –

 
function superscript() {

wp_register_script('super', get_stylesheet_directory_uri() . '/js/funscript.js', array(),'1.1', true);
 wp_enqueue_script('super');
}

add_action( 'wp_enqueue_scripts', 'superscript' );

שימו לב שבדוגמא הזו פנינו לתבנית הבת

את הפונקציה הזו אנחנו רושמים בקובץ ה function.php

בצורה הזו נוכל להוסיף כמה קבצי CSS וJS שנרצה . בנוסף חשוב לדעת – יש אפשרות לטעון גם ללא רישום הנכס רק ע"י שימוש ב enqueue

מה זה בכלל enqueue ?

enqueue זו למעשה פונקציה שמאפשרת לנו להכניס קבצי CSS וקבצי JavaScript לתבנית שלנו ווורדפרס כבר תכניס אותה להאדר או לפוטר של האתר. את הפונקציה הזו אנחנו רושמים בקובץ ה function.php

כך רושמים אותה –

 
function my_custom_style() { wp_enqueue_style( 'my-style', get_stylesheet_directory_uri() . 'css/my_style.css' ); }

add_action( 'wp_enqueue_scripts', 'my_custom_style' );

שימו לב שגם כאן פתחנו פונקציה, רשמנו נכס ורשמנו מהיכן לטעון את קובץ העיצוב

טעינת JS עם enqueue

 
function my_custom_script() {  wp_enqueue_script( 'my-script', get_stylesheet_directory_uri() . '/js/my_script.js', array ( 'jquery' ), 1.3, true);}

add_action( 'wp_enqueue_scripts', 'my_custom_script' );

חשוב לציין שגם הדרך הזו עובדת והיא בסדר גמור . הסיבה שמשתמשים עם פונקציית הרישום היא בגלל שלפעמים לא נרצה לטעון את הנכס בדיוק איפה שרשמנו אותו ונרצה לטעון אותו במקום ספציפי.