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

Thảo luận trong 'Mã nguồn mở Wordpress' bắt đầu bởi admin, 27/10/21.

  1. admin

    admin Phạm Công Sơn Thành viên BQT

    Tham gia ngày:
    22/5/13
    Bài viết:
    4,524
    Đã được thích:
    1,096
    Điểm thành tích:
    113
    Giới tính:
    Nam
    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'$urlfalsenulltrue );
    }
    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'$urlfalsenulltrue );
        }
    }
    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'$urlfalsenulltrue );
    }
     
    Cảm ơn đã xem bài:

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

    Chỉnh sửa cuối: 27/10/21


Like và Share ủng hộ ITSEOVN