הוספת קבצי סטייל וסקריפט לוורדפרס

הוספת קבצי סטייל לוורדפרס :

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

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

הפונקציות שמשמשות להוסיף סקריפטים וסטיילים הם

wp_register_style( 'events-style', get_template_directory_uri() . '/assets/css/event.css' , array(),'2','all' );
wp_enqueue_style( 'events-style' );

הוספת קבצי סקריפט לוורדפרס :

wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' , array(),'2','all' );
wp_enqueue_script( 'jquery' );

נתיב הקובץ

תמיד יחזיר את הנתיב לתבנית ההורה:

get_template_directory_uri()

יחזיר את הנתיב בתבנית הילד אם קיים :

get_stylesheet_directory_uri()

עדיף להשתמש בנתיב בפונקציה הזאת ( האחרונה ) כי היא תחזיר את הנתיב לתבנית הילד במידה וקיים.

דוגמא טובה להוספת סקריפט לקובץ function.php

wp_register_script( 'main_js', get_stylesheet_directory_uri() . '/assets/js/main.js' , array(),'2','all' );
wp_enqueue_script( 'main_js' );

עוד להטעין אחרון

wp_register_script( string $handle, string $src, array $deps = array(), string|bool|null $ver = false, bool $in_footer = false )
add_action( $hook, $function_to_add, $priority, $accepted_args );

function my_scripts() {
        //wp_register_script('app-js', get_template_directory_uri() . '/javascripts/app.js', array('jquery'), null, true );
        //wp_enqueue_script('app-js');
    
  wp_register_script( 'main_js', get_stylesheet_directory_uri() . '/main.js' , array('jquery'), null, true  );
  wp_enqueue_script( 'main_js' );
    
}
add_action( 'wp_enqueue_scripts', 'my_scripts', 20, 1);

נטען בפוטר

הטענת סקריפטים וסטיילים יחד

function my_scripts_and_styles() {
  $template_url  = get_stylesheet_directory_uri() ;
  wp_enqueue_script('lity.min', $template_url . '/js/lity.min.js', array('jquery'),'', TRUE);
  wp_enqueue_script('scripts-custom', $template_url . '/js/scripts.js', array('jquery'),'', TRUE);
  wp_enqueue_style( 'style-custom', $template_url . '/css/style.css' );
  wp_enqueue_style( 'lity.min', $template_url . '/css/lity.min.css' );
}
add_action( 'wp_enqueue_scripts', 'my_scripts_and_styles' );