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

הוספת קבצי 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' );

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

סיכום

חשוב מאוד להעלות קבצי עיצוב והתנהגות בצורה הנכונה, ככה נוכל לנהל אותם בקלות ולא נפתח פתח לשגיאות, צרות והתנגשויות.

כמו תמיד אשמח לשמוע ממכם בתגובות על כל נושא ואשמח לענות על כל שאלה !

 

Facebook
Google+
Twitter
LinkedIn
ספאמר בוורדפרס
טיפול בתגובות ספאם בוורדפרס

אם אתם משתמשים ותיקים בוורדפס כבר למדתם להכיר את תגובות הזבל שמקבלים באתר – רוב אתרי הוורדפרס מלאים בטפסים ובתגובות בצורה שלבוט קל מאוד לסרוק,

קרא עוד »
מה זה תבנית בת בוורדפרס
יצירת תבנית בת בוורדפרס

מה זה תבניות בת ואיך עושים אותן תבנית בת בוורדפרס (Child Themes) במאמרים הקודמים הסברנו על תבנית וורדפרס ומה היא יכולה לעשות ולמרות זאת יש

קרא עוד »
עריכת קבצי וורדפרס
עריכת קבצי וורדפרס

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

קרא עוד »
לוגו וורדפרס
מדריך וורדפרס למתחילים חלק ב

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

קרא עוד »
לוגו וורדפרס
מדריך וורדפרס למתחילים

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

קרא עוד »
css-js-super-web