#4 – WP Dev – Load css và js cho theme goclamweb – enqueue style script

Qua những bài đầu tiên, chúng ta đã nắm được một số thuật ngữ quan trọng như Action và Filter Hook, các file cần có cho theme, hiển thị được theme trong phần quản lý giao diện của WordPress. Trong bài học này, chúng ta sẽ tìm hiểu cách load css và js cho theme goclamweb để theme có thể hiển thị được giao diện hoàn chỉnh.

Video Load style và script cho theme goclamweb – enqueue css js

Hướng dẫn chi tiết

Tải giao diện HTML

Giao diện chúng ta sẽ sử dụng là Cultura. Giao diện này mình mua trên themeforest nên các bạn yên tâm là không có virus đâu nhé. Source HTML này để học hoặc dùng mục đích cá nhân. Còn muốn làm thương mại, viết theme bán cho khách hàng nhớ mua bản quyền từ tác giả nhé.

Link Themforest cho bạn nào muốn mua bản quyền thương mại: 1.envato.market/2v6Ra

Link tải template HTML để học thui nhé: Google Drive

Load giao diện trang chủ

Trong thư mục themes/goclamweb, các bạn tạo cho mình file functions.php, index.php. Thông thường, functions.php sẽ chứa những mã nguồn xử lý nhưng để tiện cho việc quản lý code, các bạn tạo thêm một thư mục có tên includes. Mã nguồn logic, các hàm (function) sẽ nằm trong thư mục này. File functions.php chúng ta chỉ include và gọi hàm thui nhé.

Các bạn giải nén template HTML mình share bên trên sẽ được 1 thư mục như hình bên dưới.

Chúng ta sẽ dùng blog.html để làm giao diện cho trang chủ nhé.

Các bạn mở file blog.html, copy tất cả source và bỏ vào file index.php trong thư mục theme của chúng ta. Load lại trang, chắc chắn sẽ lỗi không hiển thị được như giao diện html đâu. Đừng nản nhé, đó là do chúng ta chưa thêm style (css) và script (js) vào html.

Khi mở file blog.html, chúng ta thấy rằng cần thêm link css trong thẻ head

Và thêm source script trước khi đóng thẻ body

Vậy thêm như thế nào?

Enqueue style và script

Các bạn copy thư mục assets trong html, dán vào thư mục theme goclamweb.

Phân tích style và script

Các bạn nhìn thật kỹ nhé. File css chúng ta thêm vào, không phải là style.css nằm trong thư mục assets, mà là file style.css nằm trong thư mục template cultura, ngang hàng với file blog.html. Vậy nên, mở file style.css lên xem họ ghi gì trong đó.

À, thì ra họ không thêm tất cả các file css trong thư mục assets vì sẽ làm html rối tung lên. Họ gọi tất cả file css đã sử dụng vào 1 file tổng hợp. Sau đó mới gọi file tổng hợp trong html. Đó là lý do vì sao chỉ có 1 thẻ link style.css trong phần head.

Thêm các HOOK wp_head và wp_footer

Để có thể thêm css và js vào thêm đúng vị trí mong muốn. Các bạn mở tag php và gọi 2 hook wp_head và wp_footer tại các vị trí như trong hình nha.

wp_head nằm trong thẻ head của file index.php

wp_footer gọi ra trước khi đóng thẻ body.

Viết file enqueue.php

Trong thư mục goclamweb/includes, các bạn tạo file enqueue.php, khởi tạo hàm glw_enqueue.

if(!function_exists('glw_enqueue')){
    $version = time();
    function glw_enqueue(){
        
        //css
        wp_register_style( 'glw_googlefont', 'https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700,800');
        wp_register_style( 'glw_bootstrap', THEME_URI.'/assets/css/bootstrap.min.css');
        wp_register_style( 'glw_material_design_iconic_font', THEME_URI.'/assets/css/material-design-iconic-font.min.css');
        wp_register_style( 'glw_custom_animate.css', THEME_URI.'/assets/css/custom-animate.css.css');
        wp_register_style( 'glw_slick', THEME_URI.'/assets/css/slick.min.css');
        wp_register_style( 'glw_swiper', THEME_URI.'/assets/css/swiper.min.css');
        wp_register_style( 'glw_venobox', THEME_URI.'/assets/css/venobox.css');
        wp_register_style( 'glw_progressbar', THEME_URI.'/assets/css/progressbar.css');
        wp_register_style( 'glw_style', THEME_URI.'/assets/css/style.css');
        wp_register_style( 'glw_responsive', THEME_URI.'/assets/css/responsive.css');

        wp_enqueue_style('glw_googlefont');
        wp_enqueue_style('glw_bootstrap');
        wp_enqueue_style('glw_material_design_iconic_font');
        wp_enqueue_style('glw_custom_animate');
        wp_enqueue_style('glw_swiper');
        wp_enqueue_style('glw_venobox');
        wp_enqueue_style('glw_progressbar');
        wp_enqueue_style('glw_style');
        wp_enqueue_style('glw_responsive');
        
        //js
        wp_register_script('glw_modernizr_js', THEME_URI.'/assets/js/vendor/modernizr-2.8.3.min.js');
        wp_deregister_script( 'jquery-core' );
        wp_register_script('jquery-core', THEME_URI.'/assets/js/vendor/jquery-1.12.4.min.js',[], $version,'in_footer');
        wp_register_script('glw_bootstrap_js', THEME_URI.'/assets/js/bootstrap.min.js',[], $version,'in_footer');
        wp_register_script('glw_validate_js', THEME_URI.'/assets/js/jquery.validate.min.js',[], $version,'in_footer');
        wp_register_script('glw_slick_js', THEME_URI.'/assets/js/slick.min.js',[], $version,'in_footer');
        wp_register_script('glw_swiper_js', THEME_URI.'/assets/js/swiper.min.js',[], $version,'in_footer');
        wp_register_script('glw_isotope_js', THEME_URI.'/assets/js/isotope.pkgd.min.js',[], $version,'in_footer');
        wp_register_script('glw_plugins_js', THEME_URI.'/assets/js/plugins.js',[], $version,'in_footer');
        wp_register_script('glw_main_js', THEME_URI.'/assets/js/main.js',[], $version,'in_footer');

        wp_enqueue_script( 'glw_modernizr_js' );
        
        wp_enqueue_script( 'jquery-core');
        wp_enqueue_script( 'glw_bootstrap_js' );
        wp_enqueue_script( 'glw_validate_js' );
        wp_enqueue_script( 'glw_slick_js' );
        wp_enqueue_script( 'glw_swiper_js' );
        wp_enqueue_script( 'glw_isotope_js' );
        wp_enqueue_script( 'glw_plugins_js' );
        wp_enqueue_script( 'glw_main_js' );
    }
}

Để thêm css chúng ta dùng hàm wp_register_style( string $handle, string $src, $deps = array(), string|bool|null $ver = false, string $media = ‘all’ );

• $handle: (string) tên mà chúng ta đặt cho file css muốn thêm vào.
• $src: (string) đường dẫn nguồn cho file css (local hoặc online đều được).
• $deps: (array) dependencies nghĩa là những phần phụ thuộc. Ví dụ, file css của bạn viết code dựa trên bootstrap, không có bootstrap là không được. Trong trường hợp đó, bạn có thể cho WordPress biết rằng, cần load bootstrap trước bằng cách dùng đối số array(‘handle của file css cần thêm trước’).
• $ver (string|bool|null): phiên bản của file css, để quản lý cache
• $media: lọai phương tiện mà file.css này định dạng (không bắt buộc)

Sau đó chúng ta sẽ gọi hàm wp_enqueue_style.

Các bạn có thể tham khảo thêm vào 2 hàm này tại trang Codex của WordPress

Link: https://developer.wordpress.org/reference/functions/wp_register_style

Làm tương tự cho script nhé. Điểm mà các bạn cần quan tâm là jQuery. Bản thân WordPress đã có sẵn jQuery gọi là jquery-core. Tuy nhiên, có thể jQuery-core có phiên bản khác với phiên bản mà các bạn đang dùng cho template html. Vậy nên, chúng ta phải gỡ jquery-core bằng hàm wp_deregister_script(‘jquery-core’) và register lại jquery mà chúng ta đang sử dụng.

Add_action

Trong file functions.php, chúng ta sẽ chia làm 4 phần DEFINE, INCLUDES, HOOK và SHORTCODES

• DEFINE: xác định các hàm số.
• INCLUDES: gọi các file chứa hàm cần dùng
• HOOK: thêm action hoặc filter cho hook
• SHORTCODES: khai báo shortcodes

Chúng ta sẽ include file enqueue.php và add_action cho HOOK có tên wp_enqueue_scripts.

// DEFINE
define('THEME_URI',get_theme_file_uri( ));
// INCLUDES
include(get_theme_file_path( 'includes/enqueue.php' ));

// HOOK
add_action( 'wp_enqueue_scripts', 'glw_enqueue' );

// SHORTCODE

Các bạn load lại trang bằng ctrl+F5 (xóa cache và load lại trang) để xem kết quả nhé. Lưu ý: Hình ảnh vẫn chưa hiển thị do sai đường dẫn nhưng về cấu trúc cơ bản thì website của chúng ta đã hiển thị đúng rồi nha.

Link code mẫu trong bài học: DOWNLOAD

Nếu có thắc mắc, đặt câu hỏi bằng cách comment bên dưới, qua email, hoặc nhắn tin qua Fanpage Góc làm web.

Đừng quên Like, Share nếu thấy bài viết thú vị.

Liên hệ