Import mã css, js vào head của admin bằng wp_enqueue_style và wp_enqueue_script

03/12/2012 14:17 16637

Trong quá trình thiết kế theme có phần theme option chúng ta muốn đưa style và script vào phẩn head của admin thì phải làm sao đây. WordPress đã có sẵn hai function làm điều này đó là:

Table of Contents

Code để copy vào dự án và chỉnh sửa theo nhu cầu :

1.Code đơn giản load theo page

<?php
class KimCommunityPage{
	private $page_id = '124955';
	function __construct(){
		add_action( 'wp_enqueue_scripts', array($this,'include_css_js') );
	}
	function include_css_js(){
	   if(is_page($this->page_id)){
		   $version_theme = wp_get_theme();
		   $version_theme = $version_theme->get( 'Version' );
			wp_enqueue_style( 'kim-community-page',get_stylesheet_directory_uri().'/assets/slick/slick.css', array(),$version_theme,  'all' );
		
			wp_enqueue_script( 'kim-community-page',get_stylesheet_directory_uri().'/assets/slick/slick.min.js', array('jquery'),$version_theme, true );
	   
		}
	}
}
new KimCommunityPage();

<?php

class KimCommunityPage{

private $page_id = '124955';

function __construct(){

add_action( 'wp_enqueue_scripts', array($this,'include_css_js') );

}

function include_css_js(){

if(is_page($this->page_id)){

$version_theme = wp_get_theme();

$version_theme = $version_theme->get( 'Version' );

wp_enqueue_style( 'kim-community-page',get_stylesheet_directory_uri().'/assets/slick/slick.css', array(),$version_theme, 'all' );

wp_enqueue_script( 'kim-community-page',get_stylesheet_directory_uri().'/assets/slick/slick.min.js', array('jquery'),$version_theme, true );

}

new KimCommunityPage();

2. Code tổng hợp

add_action( 'wp_enqueue_scripts', array($this,'include_css_js') );
function include_css_js(){
    $css=array(
        'cdt-all-min' => 'assets/css/all.min.css',
        'cdt-bootstrap' => 'assets/bootstrap/css/bootstrap.min.css',
        'cdt-owl-carousel' => 'assets/css/owl.carousel.css',
        'cdt-magnific-popup' => 'assets/css/magnific-popup.css',
        'cdt-animate' => 'assets/css/animate.css',
        'cdt-meanmenu-min' => 'assets/css/meanmenu.min.css',
        'cdt-main' => 'assets/css/main.css',
        'cdt-responsive' => 'assets/css/responsive.css'
    );
    foreach($css as $key=>$val):
        wp_enqueue_style( $key,CDT_URL.$val, array(),CDT_VERSION,  'all' );
    endforeach;
    $js=array(
        'cdt-bootstrap' => 'assets/bootstrap/js/bootstrap.min.js',
        'cdt-jquery-countdown' => 'assets/js/jquery.countdown.js',
        'cdt-jquery-isotope' => 'assets/js/jquery.isotope-3.0.6.min.js',
        'cdt-waypoints' => 'assets/js/waypoints.js',
        'cdt-owl-carousel' => 'assets/js/owl.carousel.min.js',
        'cdt-jquery-magnific-popup' => 'assets/js/jquery.magnific-popup.min.js',
        'cdt-jquery-meanmenu' => 'assets/js/jquery.meanmenu.min.js',
        'cdt-sticker' => 'assets/js/sticker.js',
        'cdt-main' => 'assets/js/main.js'
    );
    foreach($js as $key=>$val):
        wp_enqueue_script( $key,CDT_URL.$val, array('jquery'), CDT_VERSION, true );
    endforeach;
    if(is_singular( 'product' )):
        wp_enqueue_script( 'product-single',get_stylesheet_directory_uri().'/assets/js/single-product.js', array('jquery'), CDT_VERSION, true );
    endif;
    wp_enqueue_script( 'cdt-global',get_stylesheet_directory_uri().'/assets/js/global.js', array('jquery'), CDT_VERSION, true );
    //for load file style.css
    wp_localize_script( 'cdt-global', 'global_object', array( 
        'ajaxurl' => admin_url( 'admin-ajax.php' ),
        'home_url' => home_url(),
    ) );
    if(is_page(84)){
        wp_enqueue_script( 'cdt-cart',get_stylesheet_directory_uri().'/assets/js/cart.js', array('jquery'), CDT_VERSION, true );
    }
    if(is_page(91)){
        wp_enqueue_script( 'cdt-check-out',get_stylesheet_directory_uri().'/assets/js/check-out.js', array('jquery'), CDT_VERSION, true );
    }
    if(is_page(127)){
        wp_enqueue_script( 'cdt-login',get_stylesheet_directory_uri().'/assets/js/login.js', array('jquery'), CDT_VERSION, true );
    }
    wp_enqueue_style( 'style', get_stylesheet_uri() );
}

add_action( 'wp_enqueue_scripts', array($this,'include_css_js') );

function include_css_js(){

$css=array(

'cdt-all-min' => 'assets/css/all.min.css',

'cdt-bootstrap' => 'assets/bootstrap/css/bootstrap.min.css',

'cdt-owl-carousel' => 'assets/css/owl.carousel.css',

'cdt-magnific-popup' => 'assets/css/magnific-popup.css',

'cdt-animate' => 'assets/css/animate.css',

'cdt-meanmenu-min' => 'assets/css/meanmenu.min.css',

'cdt-main' => 'assets/css/main.css',

'cdt-responsive' => 'assets/css/responsive.css'

);

foreach($css as $key=>$val):

wp_enqueue_style( $key,CDT_URL.$val, array(),CDT_VERSION, 'all' );

endforeach;

$js=array(

'cdt-bootstrap' => 'assets/bootstrap/js/bootstrap.min.js',

'cdt-jquery-countdown' => 'assets/js/jquery.countdown.js',

'cdt-jquery-isotope' => 'assets/js/jquery.isotope-3.0.6.min.js',

'cdt-waypoints' => 'assets/js/waypoints.js',

'cdt-owl-carousel' => 'assets/js/owl.carousel.min.js',

'cdt-jquery-magnific-popup' => 'assets/js/jquery.magnific-popup.min.js',

'cdt-jquery-meanmenu' => 'assets/js/jquery.meanmenu.min.js',

'cdt-sticker' => 'assets/js/sticker.js',

'cdt-main' => 'assets/js/main.js'

);

foreach($js as $key=>$val):

wp_enqueue_script( $key,CDT_URL.$val, array('jquery'), CDT_VERSION, true );

endforeach;

if(is_singular( 'product' )):

wp_enqueue_script( 'product-single',get_stylesheet_directory_uri().'/assets/js/single-product.js', array('jquery'), CDT_VERSION, true );

endif;

wp_enqueue_script( 'cdt-global',get_stylesheet_directory_uri().'/assets/js/global.js', array('jquery'), CDT_VERSION, true );

//for load file style.css

wp_localize_script( 'cdt-global', 'global_object', array(

'ajaxurl' => admin_url( 'admin-ajax.php' ),

'home_url' => home_url(),

) );

if(is_page(84)){

wp_enqueue_script( 'cdt-cart',get_stylesheet_directory_uri().'/assets/js/cart.js', array('jquery'), CDT_VERSION, true );

}

if(is_page(91)){

wp_enqueue_script( 'cdt-check-out',get_stylesheet_directory_uri().'/assets/js/check-out.js', array('jquery'), CDT_VERSION, true );

}

if(is_page(127)){

wp_enqueue_script( 'cdt-login',get_stylesheet_directory_uri().'/assets/js/login.js', array('jquery'), CDT_VERSION, true );

}

wp_enqueue_style( 'style', get_stylesheet_uri() );

}

Các bài viết khác có thể hữu ích với bạn

3. Include script và style theo page trong admin

Với mỗi page trong admin nếu chúng ta include vào tất cả page đôi lúc có một số mã js sẽ gây lỗi cho các page khác của các plugin khác do vậy chúng ta chỉ include theo page để tránh xung đội js

Sau đây là code mẫu (code được dùng trong class):

add_action('admin_menu', array($this, 'render_admin_menu'));
function render_admin_menu() {
    add_menu_page(__('Landing Page'),  __('Landing Page'), 'read', 'mypro-landingpage', array($this, 'controller'), 'dashicons-align-full-width', 4);
    $mypro_landingpage = add_submenu_page( 'mypro-landingpage',  __('Landing Page'),  __('Landing Page'), 'read', 'mypro-landingpage', array( $this, 'controller' ) );
    add_action( 'admin_print_styles-' . $mypro_landingpage, array($this, 'admin_styles' ) );
    add_action( 'admin_print_scripts-' . $mypro_landingpage, array($this, 'admin_scripts' ) );
}
public function admin_styles() {
    $suffix = defined('SCRIPT_DEBUG') && SCRIPT_DEBUG ? '' : '.min';
    $version = defined('SCRIPT_DEBUG') && SCRIPT_DEBUG ? time() : MYPROCORE_PLUGIN_VER;
    if ( ! wp_style_is( 'font-awesome-styles', 'registered' ) ) {
        wp_register_style( 'font-awesome-styles', MYPROCORE_CSS_URL . 'font-awesome' . $suffix . '.css', array(), '4.5.0', 'all' );
    }
    wp_register_style( 'bootstrap', MYPROCORE_CSS_URL . 'bootstrap.css', null, time(), false );
    wp_register_style( 'bootstrap-select',MYPROCORE_URL . 'assets/bootstrap-select/bootstrap-select.css', null, '4.0.0', false );
    wp_register_style( 'jquery-ui', MYPROCORE_CSS_URL . 'jquery-ui.min.css', array(), $version, false );
    wp_register_style( 'jquery-ui-timepicker', MYPROCORE_CSS_URL . 'jquery.ui.timepicker.css', null, $version, false );
    wp_register_style( 'mypro-core', MYPROCORE_CSS_URL  . 'mypro-core-admin.css', array( 'font-awesome-styles', 'bootstrap','bootstrap-select', 'jquery-ui', 'jquery-ui-timepicker' ), $version, false );
    wp_enqueue_style( 'mypro-core' );
}

public function admin_scripts() {
    $suffix = defined('SCRIPT_DEBUG') && SCRIPT_DEBUG ? '' : '.min';
    $version = defined('SCRIPT_DEBUG') && SCRIPT_DEBUG ? time() : MYPROCORE_PLUGIN_VER;
    wp_register_script( 'tether', MYPROCORE_JS_URL . 'tether.min.js', array(), '4.0.0', false );
    wp_register_script( 'bootstrap', MYPROCORE_JS_URL . 'bootstrap' . $suffix . '.js', array( 'jquery', 'tether' ), '4.0.0', false );
    wp_register_script( 'bootstrap-select', MYPROCORE_URL . '/assets/bootstrap-select/bootstrap-select.min.js', array( 'jquery', 'tether' ), '4.0.0', false );
    wp_register_script( 'jquery-ui-timepicker', MYPROCORE_JS_URL . 'jquery.ui.timepicker.js', array( 'jquery' ), $version, true );
    wp_register_script( 'mypro-core', MYPROCORE_JS_URL  . 'mypro-core.js', array( 'jquery', 'bootstrap','bootstrap-select', 'jquery-ui-datepicker', 'jquery-ui-timepicker' ), $version, true );
    wp_enqueue_script( 'mypro-core' );
    wp_localize_script( 'mypro-core',
        'myprocore_vars',
        apply_filters( 'myprocore_vars', array(
            'ajax_url'                       => admin_url( 'admin-ajax.php', 'relative' ),
            //'security_nonce'                 => wp_create_nonce( 'mailright-system-event' )
        ) )
    );
}

add_action('admin_menu', array($this, 'render_admin_menu'));

function render_admin_menu() {

add_menu_page(__('Landing Page'), __('Landing Page'), 'read', 'mypro-landingpage', array($this, 'controller'), 'dashicons-align-full-width', 4);

$mypro_landingpage = add_submenu_page( 'mypro-landingpage', __('Landing Page'), __('Landing Page'), 'read', 'mypro-landingpage', array( $this, 'controller' ) );

add_action( 'admin_print_styles-' . $mypro_landingpage, array($this, 'admin_styles' ) );

add_action( 'admin_print_scripts-' . $mypro_landingpage, array($this, 'admin_scripts' ) );

}

public function admin_styles() {

$suffix = defined('SCRIPT_DEBUG') && SCRIPT_DEBUG ? '' : '.min';

$version = defined('SCRIPT_DEBUG') && SCRIPT_DEBUG ? time() : MYPROCORE_PLUGIN_VER;

if ( ! wp_style_is( 'font-awesome-styles', 'registered' ) ) {

wp_register_style( 'font-awesome-styles', MYPROCORE_CSS_URL . 'font-awesome' . $suffix . '.css', array(), '4.5.0', 'all' );

}

wp_register_style( 'bootstrap', MYPROCORE_CSS_URL . 'bootstrap.css', null, time(), false );

wp_register_style( 'bootstrap-select',MYPROCORE_URL . 'assets/bootstrap-select/bootstrap-select.css', null, '4.0.0', false );

wp_register_style( 'jquery-ui', MYPROCORE_CSS_URL . 'jquery-ui.min.css', array(), $version, false );

wp_register_style( 'jquery-ui-timepicker', MYPROCORE_CSS_URL . 'jquery.ui.timepicker.css', null, $version, false );

wp_register_style( 'mypro-core', MYPROCORE_CSS_URL . 'mypro-core-admin.css', array( 'font-awesome-styles', 'bootstrap','bootstrap-select', 'jquery-ui', 'jquery-ui-timepicker' ), $version, false );

wp_enqueue_style( 'mypro-core' );

}

public function admin_scripts() {

$suffix = defined('SCRIPT_DEBUG') && SCRIPT_DEBUG ? '' : '.min';

$version = defined('SCRIPT_DEBUG') && SCRIPT_DEBUG ? time() : MYPROCORE_PLUGIN_VER;

wp_register_script( 'tether', MYPROCORE_JS_URL . 'tether.min.js', array(), '4.0.0', false );

wp_register_script( 'bootstrap', MYPROCORE_JS_URL . 'bootstrap' . $suffix . '.js', array( 'jquery', 'tether' ), '4.0.0', false );

wp_register_script( 'bootstrap-select', MYPROCORE_URL . '/assets/bootstrap-select/bootstrap-select.min.js', array( 'jquery', 'tether' ), '4.0.0', false );

wp_register_script( 'jquery-ui-timepicker', MYPROCORE_JS_URL . 'jquery.ui.timepicker.js', array( 'jquery' ), $version, true );

wp_register_script( 'mypro-core', MYPROCORE_JS_URL . 'mypro-core.js', array( 'jquery', 'bootstrap','bootstrap-select', 'jquery-ui-datepicker', 'jquery-ui-timepicker' ), $version, true );

wp_enqueue_script( 'mypro-core' );

wp_localize_script( 'mypro-core',

'myprocore_vars',

apply_filters( 'myprocore_vars', array(

'ajax_url' => admin_url( 'admin-ajax.php', 'relative' ),

//'security_nonce' => wp_create_nonce( 'mailright-system-event' )

) )

);

}

4.9/5 (16 Đánh giá)

Gửi Phản Hồi

0 Bình Luận

có thể bạn cần xem:

Function xử lý upload to media wordpress [ 18/07/2022 11:11 ]
Function get ip address [ 28/02/2022 02:00 ]
Thay thế file_get_contents [ 10/05/2021 08:10 ]
Code tích hợp acf vào theme và plugin [ 23/08/2020 05:26 ]
Một số function thường dùng khi làm theme wordpress (some functions popular for work do theme worpdress) [ 05/08/2019 03:22 ]
Custom header và custom background- tạo tùy biến logo nền banner của header và tùy biến nền body [ 04/12/2012 14:35 ]
Tìm hiểu function add_action trong wordpress [ 25/11/2012 12:58 ]
Tìm hiểu function add_theme_page trong wordpress [ 24/11/2012 08:55 ]

Import mã css, js vào head của admin bằng wp_enqueue_style và wp_enqueue_script

1.Code đơn giản load theo page

2. Code tổng hợp

3. Include script và style theo page trong admin

có thể bạn cần xem:

Đăng ký nhận bài viết mới

Hướng dẫn thiết kế theme

Thiết kế theme wordpress phần 8

Thiết kế theme wordpress phần 7

Thiết kế theme wordpress phần 6

Thiết kế theme wordpress phần 5

Thiết kế theme wordpress-phần 4

Các functions thường dùng

Function xử lý upload to media wordpress

Function get ip address

Thay thế file_get_contents

Code tích hợp acf vào theme và plugin

Một số function thường dùng khi làm theme wordpress (some functions popular for work do theme worpdress)