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
    Tham gia ngày:
    22/5/13
    Bài viết:
    4,884
    Đã được thích:
    1,194
    Đ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


Chủ để tương tự : Chèn Including
Diễn đàn Tiêu đề Date
Mã nguồn mở Wordpress Không chèn nhúng được youtube hay vieo vào bài viết wordpress 10/9/22
Mã nguồn mở Wordpress Chèn chi tiết sản phẩm woocommerce vào bài viết Posts wordpress 11/10/21
Mã nguồn mở Wordpress Add Products WooCommerce to Posts, Chèn chi tiết sản phẩm vào bài viết wordpress 31/3/21
Mã nguồn mở Wordpress Chèn shortcode Contract Form 7 vào code php như thế nào? 26/10/19
Mã nguồn mở Wordpress Bị lỗi khi chèn Fanpage FB vào wordpress 27/9/19