• WordPress
    • Tất cả
    • Lỗi Wordpress thường gặp
    • WordPress PLUGINS
    • WordPress SEO
    • WordPress THEMES

    EXAMPLEARTICLE

    EXAMPLEARTICLE

    EXAMPLEARTICLE

    Exploring Dating Trends and Platforms

    Exploring Dating Trends and Platforms

    Free Trade Signals Telegram ➤ Join Top Crypto Trading Group Now

    Hướng dẫn tắt chức năng comment trong wordpress

    Mẹo sử dụng Ping list hiệu quả để tăng tốc độ index google

    Mẹo sử dụng Ping list hiệu quả để tăng tốc độ index google

    9 Plugin tạo bài quiz đố vui tốt nhất cho WordPress (2020)

    9 Plugin tạo bài quiz đố vui tốt nhất cho WordPress (2020)

    Trending Tags

      • WordPress PLUGINS
      • WordPress SEO
      • WordPress THEMES
    • Công cụ
      7 công cụ tạo tên blog tốt nhất giúp bạn tìm ý tưởng cho tên blog WordPress

      7 công cụ tạo tên blog tốt nhất giúp bạn tìm ý tưởng cho tên blog WordPress

      Hướng dẫn sử dụng FOMO trên trang web WordPress để tăng lượt chuyển đổi

      Hướng dẫn sử dụng FOMO trên trang web WordPress để tăng lượt chuyển đổi

      Thiết lập dịch vụ đặt hàng trực tuyến trong WordPress

      Cách thiết lập dịch vụ đặt hàng trực tuyến cho nhà hàng với WordPress

      Các công cụ cần thiết cho một lớp học trực tuyến WordPress

      Các công cụ cần thiết cho một lớp học trực tuyến WordPress

      7 công cụ kiểm tra Backlink tốt nhất

      7 công cụ kiểm tra Backlink tốt nhất

      Cách tạo bố cục WordPress tùy chỉnh với Elementor

      Cách tạo bố cục WordPress tùy chỉnh với Elementor

      Hướng dẫn tối ưu hóa hình ảnh cho WordPress mà không làm giảm chất lượng ảnh

      Hướng dẫn tối ưu hóa hình ảnh cho WordPress mà không làm giảm chất lượng ảnh

      So sánh 6 phần mềm kế toán tốt nhất cho doanh nghiệp vừa và nhỏ

      So sánh 6 phần mềm kế toán tốt nhất cho doanh nghiệp vừa và nhỏ

      Hướng dẫn chặn thực thi PHP tại một thư mục cụ thể để bảo mật website WordPress

      Hướng dẫn chặn thực thi PHP tại một thư mục cụ thể để bảo mật website WordPress

      • Design
    • Hosting

      FTP là gì? hướng dẫn tạo tài khoản ftp trên hosting

      Pasted 81 1

      WooCommerce Hosting tốt nhất năm 2020 (đánh giá và kiểm tra hiệu suất)

      Hướng dẫn cách cài đặt WordPress lên hosting 2020

      Hướng dẫn cách cài đặt WordPress lên hosting 2020

      Hướng dẫn cách lưu trữ trang web đơn giản cho người mới bắt đầu

      Hướng dẫn cách lưu trữ trang web đơn giản cho người mới bắt đầu

      Huong Dan Tang Maximum Size Khi Upload File Tren Wordpress 49146

      Hướng dẫn tăng kích thước file tối đa khi upload trên WordPress

      Luu Ban Nhap Tu Dong 15826

      Cách cài đặt WordPress trên hệ điều hành Windows bằng WAMP

      Hướng dẫn tải hàng loạt file media WordPress qua FTP

      Hướng dẫn tải hàng loạt file media WordPress qua FTP

      9 plugin tốt nhất giúp bạn di chuyển website WordPress sang host mới (Plugin Migration)

      9 plugin tốt nhất giúp bạn di chuyển website WordPress sang host mới (Plugin Migration)

      Cách khắc phục lỗi  403 Forbidden trong WordPress

      Cách khắc phục lỗi 403 Forbidden trong WordPress

      • Domain Hosting
    • News
      chuyen-doi-so-la-gi

      Chuyển đổi số là gì? Giới thiệu 3 phần mềm chuyển đổi số hiệu quả

      Top 7 chủ đề blog giúp kiếm tiền online hot nhất năm 2020

      Top 7 chủ đề blog giúp kiếm tiền online hot nhất năm 2020

      share-plugin-wordpress-wp-rocket

      [Share Plugin WordPress] WP Rocket bản mới nhất – Cập nhật liên tục

      So sánh 15 nền tảng CMS phổ biến nhất năm 2020

      So sánh 15 nền tảng CMS phổ biến nhất năm 2020

      So sánh 6 phần mềm kế toán tốt nhất cho doanh nghiệp vừa và nhỏ

      So sánh 6 phần mềm kế toán tốt nhất cho doanh nghiệp vừa và nhỏ

      So sánh ưu, nhược điểm giữa Wix và WordPress

      So sánh ưu, nhược điểm giữa Wix và WordPress

      Hướng dẫn xóa bộ nhớ Cache trong website WordPress

      Hướng dẫn xóa bộ nhớ Cache trong website WordPress

    • WordPress
      • Tất cả
      • Lỗi Wordpress thường gặp
      • WordPress PLUGINS
      • WordPress SEO
      • WordPress THEMES

      EXAMPLEARTICLE

      EXAMPLEARTICLE

      EXAMPLEARTICLE

      Exploring Dating Trends and Platforms

      Exploring Dating Trends and Platforms

      Free Trade Signals Telegram ➤ Join Top Crypto Trading Group Now

      Hướng dẫn tắt chức năng comment trong wordpress

      Mẹo sử dụng Ping list hiệu quả để tăng tốc độ index google

      Mẹo sử dụng Ping list hiệu quả để tăng tốc độ index google

      9 Plugin tạo bài quiz đố vui tốt nhất cho WordPress (2020)

      9 Plugin tạo bài quiz đố vui tốt nhất cho WordPress (2020)

      Trending Tags

        • WordPress PLUGINS
        • WordPress SEO
        • WordPress THEMES
      • Công cụ
        7 công cụ tạo tên blog tốt nhất giúp bạn tìm ý tưởng cho tên blog WordPress

        7 công cụ tạo tên blog tốt nhất giúp bạn tìm ý tưởng cho tên blog WordPress

        Hướng dẫn sử dụng FOMO trên trang web WordPress để tăng lượt chuyển đổi

        Hướng dẫn sử dụng FOMO trên trang web WordPress để tăng lượt chuyển đổi

        Thiết lập dịch vụ đặt hàng trực tuyến trong WordPress

        Cách thiết lập dịch vụ đặt hàng trực tuyến cho nhà hàng với WordPress

        Các công cụ cần thiết cho một lớp học trực tuyến WordPress

        Các công cụ cần thiết cho một lớp học trực tuyến WordPress

        7 công cụ kiểm tra Backlink tốt nhất

        7 công cụ kiểm tra Backlink tốt nhất

        Cách tạo bố cục WordPress tùy chỉnh với Elementor

        Cách tạo bố cục WordPress tùy chỉnh với Elementor

        Hướng dẫn tối ưu hóa hình ảnh cho WordPress mà không làm giảm chất lượng ảnh

        Hướng dẫn tối ưu hóa hình ảnh cho WordPress mà không làm giảm chất lượng ảnh

        So sánh 6 phần mềm kế toán tốt nhất cho doanh nghiệp vừa và nhỏ

        So sánh 6 phần mềm kế toán tốt nhất cho doanh nghiệp vừa và nhỏ

        Hướng dẫn chặn thực thi PHP tại một thư mục cụ thể để bảo mật website WordPress

        Hướng dẫn chặn thực thi PHP tại một thư mục cụ thể để bảo mật website WordPress

        • Design
      • Hosting

        FTP là gì? hướng dẫn tạo tài khoản ftp trên hosting

        Pasted 81 1

        WooCommerce Hosting tốt nhất năm 2020 (đánh giá và kiểm tra hiệu suất)

        Hướng dẫn cách cài đặt WordPress lên hosting 2020

        Hướng dẫn cách cài đặt WordPress lên hosting 2020

        Hướng dẫn cách lưu trữ trang web đơn giản cho người mới bắt đầu

        Hướng dẫn cách lưu trữ trang web đơn giản cho người mới bắt đầu

        Huong Dan Tang Maximum Size Khi Upload File Tren Wordpress 49146

        Hướng dẫn tăng kích thước file tối đa khi upload trên WordPress

        Luu Ban Nhap Tu Dong 15826

        Cách cài đặt WordPress trên hệ điều hành Windows bằng WAMP

        Hướng dẫn tải hàng loạt file media WordPress qua FTP

        Hướng dẫn tải hàng loạt file media WordPress qua FTP

        9 plugin tốt nhất giúp bạn di chuyển website WordPress sang host mới (Plugin Migration)

        9 plugin tốt nhất giúp bạn di chuyển website WordPress sang host mới (Plugin Migration)

        Cách khắc phục lỗi  403 Forbidden trong WordPress

        Cách khắc phục lỗi 403 Forbidden trong WordPress

        • Domain Hosting
      • News
        chuyen-doi-so-la-gi

        Chuyển đổi số là gì? Giới thiệu 3 phần mềm chuyển đổi số hiệu quả

        Top 7 chủ đề blog giúp kiếm tiền online hot nhất năm 2020

        Top 7 chủ đề blog giúp kiếm tiền online hot nhất năm 2020

        share-plugin-wordpress-wp-rocket

        [Share Plugin WordPress] WP Rocket bản mới nhất – Cập nhật liên tục

        So sánh 15 nền tảng CMS phổ biến nhất năm 2020

        So sánh 15 nền tảng CMS phổ biến nhất năm 2020

        So sánh 6 phần mềm kế toán tốt nhất cho doanh nghiệp vừa và nhỏ

        So sánh 6 phần mềm kế toán tốt nhất cho doanh nghiệp vừa và nhỏ

        So sánh ưu, nhược điểm giữa Wix và WordPress

        So sánh ưu, nhược điểm giữa Wix và WordPress

        Hướng dẫn xóa bộ nhớ Cache trong website WordPress

        Hướng dẫn xóa bộ nhớ Cache trong website WordPress

      Cùng Học WordPress

      Thêm JavaScripts và Styles trong WordPress như thế nào cho đúng cách?

      jindox37 được đăng bởi jindox37
      11/06/2020
      trong chuyên mục WordPress
      0 0
      0
      Thêm JavaScripts và Styles trong WordPress như thế nào cho đúng cách?
      0
      CHIA SẺ
      82
      LƯỢT XEM
      Share on FacebookShare on Twitter

      Bạn muốn tìm hiểu cách thêm JavaScripts và CSS stylesheet trong WordPress? Nhiều người dùng tự “mày mò” thường phạm sai lầm khi thêm trực tiếp scripts và stylesheets trong plugin và theme. Trong bài viết này, chúng tôi sẽ hướng dẫn bạn làm thế nào để thêm JavaScripts và stylesheet trong WordPress một cách hợp lý.

      Đây sẽ là hướng dẫn đặc biệt hữu ích dành cho những ai vừa mới bắt đầu tìm hiểu về cách phát triển theme và plugin WordPress.

      Properly adding JavaScripts and styles in WordPress

      Sai lầm phổ biến khi thêm Scripts và Stylesheets trong WordPress

      Nhiều nhà phát triển theme và plugin WordPress mới thường gặp lỗi khi thêm trực tiếp scripts hay inline CSS vào plugin và theme của họ. Một số người sử dụng nhầm hàm wp_head để tải (load) các script và stylesheet.

      1
      2
      3
      4
      5
      6
      <?php
      add_action('wp_head', 'wpb_bad_script');
      function wpb_bad_script() {
      echo 'jQuery goes here';
      }
      ?>

      Dù đoạn code trên có vẻ giúp công việc của bạn dễ dàng hơn. Thế nhưng, đây là phương pháp sai lầm để thêm script trong WordPress, và nó gây ra nhiều xáo trộn hơn trong tương lai.

      Một ví dụ như, nếu bạn load jQuery thủ công và một plugin khác load jQuery thông qua một cách thức khác, lúc này jQuery đang được tải tới 2 lần. Nếu tất cả các page đều load như vậy, tốc độ và hiệu năng trang WordPress của bạn sẽ bị ảnh hưởng nặng nề.

      Một khả năng khác có thể xảy ra là bạn sẽ load 2 phiên bản jQuery khác nhau và điều này có thể dẫn tới sự xung đột.

      Bởi vậy, chúng tôi sẽ giúp bạn tìm hiểu về phương pháp đúng để thêm script và stylesheet.

      Vì sao phải thêm Script và Styles trong WordPress?

      WordPress có một cộng đồng mạnh mẽ các nhà phát triển. Hàng ngàn người trên khắp thế giới phát triển theme và plugin cho WordPress.

      Để đảm bảo mọi thứ hoạt động theo đúng cách và không ai bị dẫm chân nhau, WordPress có một hệ thống xếp hàng chờ đợi (enqueuing). Hệ thống này cung cấp một phương pháp lập trình được để tải JavaScripts và CSS stylesheets.

      Bằng cách sử dụng các hàm wp_enqueue_script và wp_enqueue_style, bạn có thể cho WordPress biết khi nào load file, load ở đâu, và các phần phụ thuộc (dependencies) của nó là gì.

      Hệ thống này cũng cho phép các nhà phát triển sử dụng thư viện JavaScript tích hợp đi kèm với WordPress, thay vì load cùng JavaScript đó nhưng của bên thứ ba, gây ra sự trùng lặp. Điều này sẽ làm giảm thời gian load trang và tránh các sự xung đột với các theme và plugin khác.

      Hướng dẫn thêm Scripts trong WordPress 

      Thêm script theo cách thích hợp vào WordPress là công việc khá đơn giản. Bên dưới là một đoạn code mẫu mà bạn có thể lấy rồi dán vào file plugin hoặc file functions.php của theme để load script trong WordPress.

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      ?php
      function wpb_adding_scripts() {
      wp_register_script('my_amazing_script', plugins_url('amazing_script.js', __FILE__), array('jquery'),'1.1', true);
      wp_enqueue_script('my_amazing_script');
      }
       
      add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' ); 
      ?>

      Giải thích:

      Chúng tôi bắt đầu bằng việc đăng ký script qua hàm wp_register_script() . Hàm này chấp nhận 5 tham số (parameter):

      • $handle – Handle là tên độc nhất của script. Chúng tôi gọi nó là “my_amazing_script”
      • $src – src là vị trí của script. Chúng tôi dùng hàm plugins_url để lấy URL thích hợp của thư mục plugin. Khi tìm thấy thư mục, WordPress sẽ tìm tới tên file amazing_script.js trong thư mục đó.
      • $deps – là viết tắt của dependency (phần phụ thuộc). Do script của chúng tôi sử dụng jQuery, chúng tôi thêm jQuery vào phần dependency. WordPress sẽ tự động load jQuery nếu như nó chưa được load trên trang.
      • $ver – Đây là số phiên bản của script. Đây là tham số không bắt buộc phải có.
      • $in_footer – Vì muốn load script ở footer, chúng tôi thiết lập giá trị này là true. Nếu muốn load script ở header, bạn phải thiết lập nó sang false.

      Sau khi cung cấp toàn bộ tham số trong wp_register_script, chúng ta có thể thêm script trong hàm wp_enqueue_script().

      Bước cuối cùng là sử dụng action hook wp_enqueue_scripts để thực sự load script.

      Nếu bạn đang muốn thêm script vào theme hay plugin của mình, bạn có thể đặt action hook này nơi mà bạn cần cript ở đó. Điều này giúp bạn giảm thiểu mức chiếm dụng bộ nhớ của plugin.

      Một số bạn có thể sẽ thắc mắc vì sao chúng tôi lại đăng ký script trước rồi đưa nó vào danh sách chờ (enqueuing). Lý do là bởi, điều này cho phép các chủ site khác xóa đăng ký (deregister) script của bạn mà không chỉnh sửa code lõi (core code) của plugin.

      Cách Enqueue các Style trong WordPress

      Tương tự script, bạn có thể đưa stylesheet của mình vào danh sách chờ. Hãy nhìn vào ví dụ bên dưới:

      1
      2
      3
      4
      5
      6
      7
      <?php
      function wpb_adding_styles() {
      wp_register_style('my_stylesheet', plugins_url('my-stylesheet.css', __FILE__));
      wp_enqueue_style('my_stylesheet');
      }
      add_action( 'wp_enqueue_scripts', 'wpb_adding_styles' ); 
      ?>

      Thay vì dùng hàm wp_enqueue_script, chúng tôi sử dụng hàm wp_enqueue_style  để thêm stylesheet.

      Hãy lưu ý rằng, chúng tôi dùng action hook wp_enqueue_scripts cho cả stylesheet và scripts.

      Ở vị dụ bên, chúng tôi đã sử dụng hàm plugins_url để trỏ tới vị trí của script hay style mà chúng tôi muốn đưa vào danh sách chờ.

      Tuy nhiên, nếu bạn dùng hàm enqueue scripts trong theme của mình, hãy sử dụng get_template_directory_uri() . Nếu bạn đang làm việc với theme con, hãy dùng hàm get_stylesheet_directory_uri().

      Dưới đây là một đoạn code ví dụ:

      1
      2
      3
      4
      5
      6
      7
      8
      9
      <?php
       
      function wpb_adding_scripts() {
      wp_register_script('my_amazing_script', get_template_directory_uri() . '/js/amazing_script.js', array('jquery'),'1.1', true);
      wp_enqueue_script('my_amazing_script');
      }
       
      add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' ); 
      ?>

      Chúng tôi hy vọng rằng, bài viết trên sẽ giúp bạn biết cách thêm jacvascript và style trong WordPress. Có thể bạn cũng sẽ muốn tìm hiểu về mã nguồn của các plugin WordPress hàng đầu để tìm hiểu thêm việc sử dụng trong thực tế.

      Nếu thích bài viết, vui lòng theo dõi kênh YouTube của chúng tôi để tìm hiểu thêm các video khác về WordPress. Bạn cũng có thể theo dõi chúng tôi trên Twitter và Facebook.

      Like this:

      Like Đang tải...
      • Xu Hướng
      • Bình luận
      • Mới nhất
      Hướng dẫn cho phép đăng ký tài khoản trên WordPress

      Hướng dẫn cho phép đăng ký tài khoản trên WordPress

      21/05/2020
      Hướng dẫn sử dụng trình chỉnh sửa Block Editor mới trên WordPress (Gutenberg)

      Hướng dẫn sử dụng trình chỉnh sửa Block Editor mới trên WordPress (Gutenberg)

      09/07/2020
      PDF

      Cách upload file PDF lên trang web WordPress

      11/06/2020

      EXAMPLEARTICLE

      0
      Hướng dẫn cài đặt WordPress trên Amazon Web Services

      Hướng dẫn cài đặt WordPress trên Amazon Web Services

      0
      Hướng dẫn cách hạn chế không cho phép điền form đối với người dùng không đăng nhập

      Hướng dẫn cách hạn chế không cho phép điền form đối với người dùng không đăng nhập

      0
      Cách tạo giỏ hàng cho người dùng trên WordPress bằng cách dùng BigCommerce

      Cách tạo giỏ hàng cho người dùng trên WordPress bằng cách dùng BigCommerce

      0

      EXAMPLEARTICLE

      06/02/2025

      EXAMPLEARTICLE

      16/01/2025

      EXAMPLEARTICLE

      16/01/2025

      Exploring Dating Trends and Platforms

      19/09/2024
      QUẢNG CÁO

      Bài viết mới nhất

      EXAMPLEARTICLE

      06/02/2025

      EXAMPLEARTICLE

      16/01/2025

      EXAMPLEARTICLE

      16/01/2025

      Exploring Dating Trends and Platforms

      19/09/2024

      Exploring Dating Trends and Platforms

      29/08/2024


      Cùng Học WP blog chia sẻ kiến thức học tập về WordPress, Hosting, Marketing, SEO, MMO miễn phí. Phương châm của cunghocwp.com là cho đi giá trị.

      Liên Hệ Cùng Học WP

      Mọi thông tin liên hệ về Cùng Học WP mời các bạn liên hệ trực tiếp chúng tôi theo các thông tin sau:

          • Hotline: 0973.666.777
          • Email: lienhe@cunghocwp.com
          • Địa chỉ: 387 Nguyễn Đình Chiểu, Phường 5, Quận 3, Hồ Chí Minh

      © 2020 – Cùng Học WordPress. All Right Reserved.

      Về chúng tôi  /  Liên hệ  /  Chính sách bảo mật  /  Quy định sử dụng

      • WordPress
        • WordPress PLUGINS
        • WordPress SEO
        • WordPress THEMES
      • Công cụ
        • Design
      • Hosting
        • Domain Hosting
      • News

      © 2025 JNews - Premium WordPress news & magazine theme by Jegtheme.

      Xin Chào !

      Đăng nhập vào tài khoản của bạn bên dưới

      Đã quên mật khẩu?

      Tạo tài khoản mới!

      Điền vào các mẫu dưới đây để đăng ký

      Tất cả các trường đều được yêu cầu. Đăng nhập

      Truy xuất mật khẩu của bạn

      Vui lòng nhập tên người dùng hoặc địa chỉ email của bạn để đặt lại mật khẩu của bạn.

      Đăng nhập
      %d bloggers like this: