Bootstrap

Vũ Thành Lâm

Content - Code - SEO - MMO
17/10/1979
Tây Mỗ - Nam Từ Liêm - Hà Nội
thanhlam19792003

Lamvt – Vũ Thành Lâm – bắt đầu Code 2005 Freelancer từ 2006 với hàng ngàn dự án lớn nhỏ cho nước ngoài và hàng trăm dự án web cho Việt Nam.

SEO thành công rất nhiều dự án lớn, độ khó cao.
MOD (Moderator) và Admin (Administraror) của nhiều diễn đàn về SEO và CODE web MMO tại Việt Nam
Dạy Lập trình Thiết kế Web và SEO Miễn phí 15++ Năm (Từ 2006 đến Nay)

Cách thêm JavaScripts và CSS Styles trong WordPress Theme

5/5 - (3 bình chọn)

Bạn muốn tìm hiểu làm thế nào để thêm JavaScriptCSS stylesheets đúng cách trong WordPress chứ? Nhiều người dùng DIY thường mắc lỗi khi gọi trực tiếp các tập lệnh (Scripts) và Stylesheets trong plugin và theme. Trong bài này, chúng tôi sẽ giới thiệu cho các bạn cách làm thế nào để thêm JavaScript và stylesheet chính xác trong WordPress. Điều này sẽ đặc biệt hữu ích cho những người mới bắt đầu học về lĩnh vực phát triển theme và plugin WordPress.

Cách thêm JavaScripts và CSS Styles trong WordPress Theme Them-JavaScripts-va-Styles-dung-cach-trong-WordPress

Sai lầm thường gặp khi thêm các Scripts và Stylesheets trong WordPress

Nhiều plugin WordPress mới và nhiều nhà phát triển theme đã mắc lỗi khi thêm trực tiếp Scripts hoặc CSS nội tuyến vào các plugin và theme của họ.

Một số nhầm lẫn thường xảy ra trong việc sử dụng wp_head function để tải scripts và stylesheets:

<?php
add_action('wp_head', 'wpb_bad_script');
function wpb_bad_script() {
echo 'jQuery goes here';
}
?>

 

Mặc dù đoạn code trên trông có vẻ đơn giản, nhưng đó là cách thêm Scripts sai trong WordPress, và nó sẽ dẫn đến nhiều xung đột trong tương lai.

Ví dụ: nếu bạn tải jQuery theo cách thủ công và plugin khác nạp jQuery thông qua phương pháp thích hợp, vậy là jQuery đang được nạp hai lần. Nếu nó được tải trên tất cả các trang thì điều này sẽ ảnh hưởng không tốt đến tốc độ và hiệu suất WordPress.

Cũng có thể là hai phiên bản khác nhau gây ra xung đột.

Như chúng tôi đề cập ở trên, bài viết này chúng ta sẽ tìm hiểu về cách thêm Scripts và Stylesheets đúng cách.

Xem thêm: 

Cách vô hiệu hóa Scripts và Styles của plugin trong WordPress

55+ Mẹo và thủ thuật cực hay trong WordPress

Tại sao Enqueue Scripts và Styles trong WordPress?

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

Để đảm bảo rằng mọi thứ hoạt động bình thường và không ai bước nhầm vào lối đi của người khác, WordPress có một hệ thống enqueue. Hệ thống này cung cấp cách lập trình để tải các trang JavaScript và CSS stylesheet.

Bằng cách sử dụng wp_enqueue_script và wp_enqueue_style function, bạn cho WordPress biết khi nào tải tệp tin, nơi để tải và tệp tin phụ thuộc vào những thứ nào khác.

Hệ thống này cũng cho phép các nhà phát triển tận dụng các thư viện JavaScript tích hợp đi kèm với WordPress hơn là tải nhiều lần cùng một script của bên thứ ba. Điều này làm giảm thời gian tải trang và tránh xung đột với các theme và plugin khác.

Làm thế nào để Enqueue Scripts đúng trong WordPress?

Tải các script đúng cách trong WordPress rất dễ dàng. Dưới đây là một mã code ví dụ mà bạn có thể dán vào tệp plugin hoặc trong tệp tin functions.php của theme để tải các script đúng trong WordPress.

<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' );&nbsp; 
?>

 

Giải thích:

Chúng tôi bắt đầu bằng cách đăng ký script của chúng tôi thông qua các wp_register_script () function. Function này chấp nhận 5 tham số:

  • $ handle – Handle là tên duy nhất của script. Giả sử chúng ta gọi là “my_amazing_script”
  • $ src – src là vị trí của script của bạn. Chúng tôi đang sử dụng plugins_url function để nhận URL chuẩn xác của thư mục plugin của chúng tôi. Một khi WordPress tìm thấy, nó sẽ tìm kiếm tên tệp tin của chúng tôi là amazing_script.js trong thư mục đó.
  • $ deps – deps là yếu tố phụ thuộc. Vì script của chúng tôi sử dụng jQuery, chúng tôi đã thêm jQuery trong khu vực phụ thuộc. WordPress sẽ tự động tải jQuery nếu nó không được tải trên trang web.
  • $ ver – Đây là phiên bản số của script của chúng tôi. Tham số này là không bắt buộc.
  • $ in_footer – Chúng tôi muốn tải script của chúng tôi vào footer, vì vậy chúng tôi đã đặt giá trị là true. Nếu bạn muốn tải script trong header thì bạn sửa thành false.

Sau khi cung cấp tất cả các thông số trong wp_register_script, chúng ta chỉ có thể gọi script trong wp_enqueue_script ().

Bước cuối cùng là sử dụng action hook wp_enqueue_scripts để thực sự tải script (Action Hook là một điểm neo để chúng ta thực hiện một hành động gì đó tại một chu kỳ nhất định). Vì đây là một mã code ví dụ nên chúng tôi đã thêm action vào dưới.

Nếu bạn muốn thêm code này vào theme hoặc plugin của mình thì bạn hãy thay đổi action hook- nơi script thật sự được yêu cầu. Điều này cho phép bạn giảm footprint bộ nhớ của plugin.

Bây giờ một số bạn có thể thắc mắc là tại sao chúng ta lại bổ sung nhiều bước để đăng ký script đầu tiên và sau enqueue nó? Vâng, điều này cho phép chủ sở hữu trang web khác hủy đăng ký script của bạn mà không sửa đổi mã cốt quan trọng trong plugin của bạn.

Xem thêm: 

32 thủ thuật hữu ích cho tập tin functions trong chủ đề WordPress (phần 1)

File xmlrpc.php là gì? Làm sao để Tắt XMLRPC.php trong WordPress

Enqueue Styles đúng trong WordPress

Cũng giống như các script, bạn cũng có thể enqueue stylesheet mình. Xem ví dụ dưới đây:

<?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' );
?>

Thayvì sử dụng wp_enqueue_script, chúng tôi sử dụng wp_enqueue_style để thêm stylesheet.

Lưu ý rằng chúng tôi đã sử dụng hook action wp_enqueue_scripts cho cả styles và scripts. Mặc dù tên, function này hoạt động cho cả hai.

Trong các ví dụ trên, chúng tôi đã sử dụng plugins_url function để chỉ đến vị trí của script hoặc style mà chúng tôi muốn enqueue.

Tuy nhiên, nếu bạn đang sử dụng các enqueue scripts function trong theme thì chỉ cần sử dụng get_template_directory_uri () thay thế. Nếu bạn đang làm việc với theme con thì sử dụng get_stylesheet_directory_uri ().

Dưới đây là một mẫu code ví dụ.

<?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 bài viết này đã giúp bạn tìm hiểu cách thêm jacvascript và style đúng cách trong WordPress.

Tin mới nhất

VR PLUS (https://vrplus.vn/ ) Là một trong những dự án do Lamvt thực hiện trong thời gian gần đây. Như...

Trong một năm qua, chúng tôi đã xuất bản khoảng 79 bài viết SEO trên blog Ahrefs. Các bài viết...

Khám phá kĩ thuật viết nội dung SEO Nếu không có SEO, nội dung của bạn có thể bị chìm...

Các website về lĩnh vực làm đẹp cần phải có một thiết kế (design) hấp dẫn và bắt mắt. Điều...

Core Web Vitals được đo lường như thế nào? Làm thế nào để bạn biết các bản sửa lỗi đã...

Tin được yêu thích

Như đã nói, phần mềm chỉnh sửa video đang ngày càng chứng tỏ được tầm quan trọng của mình, nhất...

Nhiều bạn thắc mắc là sau khi cài đặt Plugin cho Google AMP thì làm thế nào để kiểm tra,...

Các trang web giáo dục và các trang web của chính phủ có một lợi thế hơn trong bảng xếp...

Nội dung là một trong 3 tiêu chí quan trọng để google đánh giá thứ hạng tìm kiếm cho website...

Thẻ <span> </span> Thẻ <span> là thẻ khá đặc biệt trong HTML, theo mặc định thì thẻ <span> được thêm...

Khách đang xem

  1. Bạn có phải là chủ doanh nghiệp, nhà tiếp thị trực tuyến hoặc người sáng tạo nội dung không? Nếu...
    18 giây trước
  2. Search Engine Marketing hoặc SEM là một trong những cách hiệu quả nhất để phát triển doanh nghiệp của bạn...
    24 giây trước
  3. Cách check unique Content đóng vai trò vô cùng quan trọng, nhất là đối với dân content SEO. Bởi trong quá...
    5 giây trước
  4. >> Tìm hiểu cách tối ưu hóa chiến thuật tiếp thị công cụ tìm kiếm SEO và PPC để nâng...
    16 giây trước
  5. Yoast SEO là một plugin không thể thiếu trong một website WordPress. Thế nhưng, với những người mới viết bài...
    14 giây trước
  6. Header web hay còn gọi là tiêu đề website, đầu trang web là một trong những thành phần căn bản...
    12 giây trước
  7. Google đã công bố dự án AMP- Accelerated Mobile Pages đây có vẻ như động thái đáp trả 2 đối...
    26 giây trước
  8. Đối với hoạt động quảng bá cho sản phẩm / thương hiệu của các công ty, doanh nghiệp thì việc...
    7 giây trước
  9. Ajax rất hữu ích và thú vị. Hầu hết mọi người thích ajax bởi vì nó tải một phần của...
    19 giây trước
  10. Khi viết blog việc mắc phải những sai lầm là điều không thể tránh. Ai cũng có thể mắc những...
    21 giây trước