Chèn file scripts/css trên website (Frontend):
- WordPress có hàm wp_head cho phép bạn nạp mọi thành phần html lên cặp thẻ head, và bạn có thể thêm thẻ script trực tiếp bằng cách này.
|
add_action('wp_head', 'wpb_bad_script');
function wpb_bad_script() {
echo '<script src="https://code.jquery.com/jquery-2.1.4.js"></script>';
}
|
Note: Cách này không kiểm soát được các file .js được thêm vào. Ví dụ: bạn sử dụng cách này để thêm thư viện jQuery và một plugin khác cũng nạp jQuery vì chúng sử dụng 2 cách khác nhau nên không kiểm soát được 2 jquery được nạp lên 1 site gây mâu thuẫn và lỗi jquery.
- Bằng cách sử dụng hàm wp_enqueue_script và cung cấp URL tới file .js, những thư viện cần đi load trước để hoạt động được. ví dụ thư viện khác sử dụng jquery thì jquery cần phải được nạp trước (gọi là: dependencies)
Đoạn code sau thêm file amazing_script.js ở plugin của bạn, cho biết cần nạp jquery trước.
|
wp_register_script('amazing_script', '../path/amazing_script.js', array('jquery'));
wp_enqueue_script('amazing_script');
|
Giải thích: đầu tiên đăng ký script bằng hàm wp_register_script, sau đó tiến hành đưa script vào trong thẻ head. Khi chạy hàm wp_enqueue_script script sẽ đưa vào hàng đợi và được gọi bởi hàm wp_head() trong your-theme/header.php vì vậy chúng ta không được quên hàm này.
Cấu trúc:
wp_register_script( $handle, $src, $deps, $ver, $in_footer );
Trong đó:
-
$handle (string): tên script chú ý viết thường. Tham số này để dùng cho hàm
wp_enqueue_script.
-
$src (string): đường dẫn đến file script .js , không nên dùng absolute path để lấy path của plugin nên dùng hàm
plugins_url và theme thì dùng
get_template_directory_uri() Ngoại trừ external script.
-
$deps (array): liệt kê những tên script khác ($handle) được yêu cầu nạp trước khi nạp script này. $deps=false nếu không có.
-
$ver: phiên bản của script. =false hoặc trống wordpress sẽ tự động thêm phiên bản của script = phiên bản của wordpress bạn đang dùng. Nếu =null không có phiên bản.
-
$in_footer: Nếu =true script được thêm vào trước thẻ , điều này yêu cầu chèn wp_footer ở file footer.php
Sau khi cung cấp đầy đủ thông tin về file cần chèn, và bạn chỉ việc gọi hàm wp_enqueue_script() kết hợp với hook wp_enqueue_scripts.
|
add_action('wp_enqueue_scripts', '_wp_enqueue_scripts');
function _wp_enqueue_scripts() {
wp_enqueue_script('amazing_script');
}
|
+ Đường dẫn URL:
-
plugins_url(): sử dụng hàm này để trỏ vào file trong plugin hiện tại.
|
wp_enqueue_script('script-name',plugins_url('my-js.js', __FILE__));
|
-
get_template_directory_uri(): sử dụng hàm này để trỏ vào thư mục theme đang kích hoạt.
Hoặc:
bloginfo('template_url') cũng cho ra kết quả tương tự.
|
wp_enqueue_script('script-name',get_template_directory_uri().('/js/my-js.js'));
|
+ Một số hàm chèn file tài nguyên/thư viện js/css:
wp_register_script : đăng ký file js
wp_enqueue_script: chèn file js
wp_register_style: đăng ký file .css
wp_enqueue_style: chèn file .css
+ Để đăng ký script/css bạn nên sử dụng hook 'init' hoặc 'admin_init' cho trang quản lý admin.
|
add_action( 'init', 'my_plugin_init' ); #for frontend
add_action( 'admin_init', 'my_plugin_admin_init' ); #for admin
function my_plugin_admin_init() {
/* Register our script. */
wp_register_script( 'my-plugin-script', plugins_url( '/script.js', __FILE__ ) );
}
|
- Ngoài ra, bạn có thể thêm file js/css với hook 'get_header'.
|
add_action( 'get_header', 'wsm_load_scripts' );
function wsm_load_scripts() {
wp_enqueue_script( 'browserselect', CHILD_URL.'/lib/js/css_browser_selector.js', array('jquery'), '0.4.0', TRUE );
}
|
Ví dụ mẫu:
Sửa thay thế thư viện jquery mặc định trong wordpress.
|
function my_init() {
if (!is_admin()) {
// comment out the next two lines to load the local copy of jQuery
wp_deregister_script('jquery');
wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js', false, '1.3.2');
wp_enqueue_script('jquery');
}
}
add_action('init', 'my_init');
|
Chèn script/styles ở trang wordpress admin:
- Nếu như bạn chèn trong trang admin thì thay vì sử dụng hook wp_enqueue_scripts, bạn sử dụng hook admin_enqueue_scripts.
|
//Load CSS File on All Admin Pages
add_action( 'admin_enqueue_scripts', 'load_custom_wp_admin_style' );
function load_custom_wp_admin_style($page){
wp_register_style( ..);
wp_enqueue_style( ..);
}
|
- Cách đơn giản hơn chúng ta có thể in trực tiếp thẻ html vào trong cặp thẻ head. Để làm điều này bạn có hook 'admin_head'.
|
<?php
function my_custom_admin_head() {
echo '<style>[for="wp_welcome_panel-hide"] {display: none !important;}</style>';
}
add_action( 'admin_head', 'my_custom_admin_head' );
?>
|
Bạn cũng có thể thực hiện với hook 'admin_print_scripts' , với mục đích giống nhau:
|
function admin_inline_js(){
echo "<script type='text/javascript'>\n";
echo 'var pluginUrl = "'.WP_PLUGIN_URL . '/my_plugin/'.'"';
echo "\n</script>";
}
add_action( 'admin_print_scripts', 'admin_inline_js' );
|
Chèn vào page cụ thể:
Bạn không muốn chèn script sử dụng cho mọi trang điều này làm chậm website, cách tốt hơn là chỉ sử dụng script cho trang bạn có nhu cầu. Xem ví dụ sau:
|
add_action( 'admin_menu', 'my_plugin_admin_menu' );
function my_plugin_admin_menu() {
/* Add our plugin submenu and administration screen */
$page_hook_suffix = add_submenu_page( 'edit.php', // The parent page of this submenu
__( 'My Plugin', 'myPlugin' ), // The submenu title
__( 'My Plugin', 'myPlugin' ), // The screen title
'manage_options', // The capability required for access to this submenu
'my_plugin-options', // The slug to use in the URL of the screen
'my_plugin_manage_menu' // The function to call to display the screen
);
/*
* Use the retrieved $page_hook_suffix to hook the function that links our script.
* This hook invokes the function only on our plugin administration screen,
* see: http://codex.wordpress.org/Administration_Menus#Page_Hook_Suffix
*/
add_action('admin_print_scripts-' . $page_hook_suffix, 'my_plugin_admin_scripts');
}
function my_plugin_admin_scripts() {
/* Link our already registered script to a page */
wp_enqueue_script( 'my-plugin-script' );
}
|
Bằng cách xác định page hook slug, bạn chỉ định gọi hook vào page đó.
