Chèn Including file Javascript Js và CSS vào trang bất kỳ hoặc toàn web Wordpress

Việc sử dụng các file CSS hay Javascript ngoài gắn vào thường được sử dụng khá nhiều khi coder cần thêm các thư viện bên ngoài vào để xử lý. Nếu bạn chèn các file này lên header của web bằng cách vào teamplate header trực tiếp sẽ không chuyên nghiệp và khó xử lý về sau cho các Dev khác hoặc chính bản thân của bạn sau này cần xóa sửa sẽ khá khó khăn.

Để chèn đúng cách và chuẩn của Wordpress vào header web và admin web thì bạn tham khảo các cách sử dụng chèn vào function.php sau:

Chèn vào web chính sử dụng wp_enqueue_scripts

PHP:

//khai báo sử dụng javascript và CSS
//Including javascript
add_action( 'wp_enqueue_scripts', 'cs_itseovn_scripts');
function cs_itseovn_scripts(){
  wp_enqueue_script(
    'name', 
    'url directory file .js', 
    false, // no dependencies
    null, // no version to show: phiên bản của bạn đang sử dụng
    true // in footer? yes: chèn ở footer hay ở đâu
   );
}
//Including CSS
add_action( 'wp_enqueue_scripts', 'cs_itseovn_styles' );
function cs_itseovn_styles() {
    wp_register_style('style-name', 'đường dẫn file .css', array(), null, 'all' );
    wp_enqueue_style( 'style-name' );
}


Ví dụ tổng quan:

PHP:

//Including javascript
add_action( 'wp_enqueue_scripts', 'cs_itseovn_scripts');
function cs_itseovn_scripts(){
  wp_enqueue_script('js-itseovn', get_stylesheet_directory_uri() . '/js/file.js', array(), '1.0.0', true );
}
//Including CSS
add_action( 'wp_enqueue_scripts', 'cs_itseovn_styles' );
function cs_itseovn_styles() {
 wp_register_style('css-itseovn', get_stylesheet_directory_uri() .'/css/style.css', array(), null, 'all' );
 wp_enqueue_style( 'css-itseovn' );
}

• get_stylesheet_directory_uri(): lấy url của themes xem chi tiết tại: get url themes

Chèn ở các trang chỉ định rõ như page, homepage,..

PHP:

//Including javascript
add_action( 'wp_enqueue_scripts', 'cs_itseovn_scripts');
function cs_itseovn_scripts(){
  $page_id = get_queried_object_id();
  //$frontpage_id = get_option( 'page_on_front' ); //lấy id homepage nếu cần
  if( $page_id == 12) { // if on a page = 12, nếu là trang bất kỳ có vd có id = 12
    wp_enqueue_script('js-page12', get_stylesheet_directory_uri() . '/js/page12.js', array(), '1.0.0', true );
  }else if(is_front_page()) //nếu là trang chủ
  {
     wp_enqueue_script('js-homepage', get_stylesheet_directory_uri() . '/js/homepage.js', array(), '1.0.0', true );
  }
}
//Including CSS
add_action( 'wp_enqueue_scripts', 'cs_itseovn_styles' );
function cs_itseovn_styles() {
  $page_id = get_queried_object_id();
  if( $page_id == 12) { // if on a page = 12, nếu là trang bất kỳ có vd có id = 12
    wp_register_style('css-page12', get_stylesheet_directory_uri() .'/css/page12.css', array(), null, 'all' );
    wp_enqueue_style( 'css-page12' );
  }else if(is_front_page()) //nếu là trang chủ
  {
    wp_register_style('css-homepage', get_stylesheet_directory_uri() .'/css/homepage.css', array(), null, 'all' );
    wp_enqueue_style( 'css-homepage' );
  }
}


Chèn vào admin web sử dụng admin_enqueue_scripts

Chèn ở các trang Dashboard, Posts, Pages pages chỉ định sẵn hoặc toàn bộ các trang trong admin.

Chèn JS Javascript ở toàn trang

PHP:

add_action( 'admin_enqueue_scripts', 'cs_itseovn_scripts_admin_all' );
function cs_itseovn_scripts_admin_all( $hook_wp ) {
     wp_enqueue_script( 'admin-js', $url, false, null, true );
}

Chèn JS Javascript chỉ ở các trang chỉ định rõ

PHP:

add_action( 'admin_enqueue_scripts', 'cs_itseovn_scripts_admin' );
function cs_itseovn_scripts_admin( $hook_wp ) {
    // chèn vào trang Dashboard, Posts, Pages pages
    if( $hook_wp == 'index.php' || $hook_wp == 'edit.php' ) {
        wp_enqueue_script( 'admin-js', $url, false, null, true );
    }
}

Chèn CSS style.css

PHP:

add_action( 'admin_enqueue_scripts', 'cs_itseovn_styles_admin' );
function cs_itseovn_styles_admin() {
    wp_register_style('style-name','đường dẫn file .css', array(), null, 'all' );
    wp_enqueue_style( 'style-name' );
}


Chèn ở backend ở trang admin thôi thì có thể sử dụng riêng Action admin_init

PHP:

add_action( 'admin_init', 'cs_itseovn_scripts_admin_backend' );
function cs_itseovn_scripts_admin_backend() {
  wp_enqueue_script( 'admin-js', $url, false, null, true );
}