Wordpress thêm tập lệnh vào cơ thể

JavaScript là ngôn ngữ lập trình có thể thêm các tính năng tương tác vào trang web của bạn. Học cách sử dụng nó trên trang web WordPress của bạn, bao gồm các phần cụ thể, có thể giúp bạn tận dụng mã hiệu quả hơn.  

Có nhiều cách để thêm JavaScript vào các trang và bài đăng WordPress của bạn. Cho dù bạn sử dụng plugin, sử dụng chức năng và hook hay chỉnh sửa tệp của chủ đề, bạn đều có thể nhận được tùy chỉnh mình muốn

Trong bài đăng này, chúng tôi sẽ xem xét JavaScript là gì và cách bạn có thể thêm mã tùy chỉnh vào WordPress. Chúng tôi sẽ hướng dẫn bạn quy trình của từng phương pháp và trả lời một số câu hỏi thường gặp.  

Bạn có thể sử dụng JavaScript trong WordPress không?

JavaScript là ngôn ngữ lập trình mà bạn có thể sử dụng để cải thiện trải nghiệm người dùng (UX) của trang web bằng cách làm cho trang web tương tác và phản hồi nhanh hơn.  

Ví dụ: bạn có thể sử dụng JavaScript để tạo cửa sổ bật lên khi khách truy cập nhấp vào nút. Bạn cũng có thể hiển thị thông báo khi ai đó di chuột qua một phần tử trên trang của bạn

JavaScript có thể thêm máy tính, trình phát video và các công cụ khác vào các trang và bài đăng của WordPress. Mặc dù bạn sẽ cần một số kiến ​​thức cơ bản về HTML và CSS để thêm JavaScript vào WordPress, nhưng đây là một quy trình khá đơn giản

Phải làm gì trước khi thêm mã JavaScript vào WordPress

Khi thêm mã JavaScript vào trang web WordPress của bạn, điều quan trọng cần nhớ là các lỗi trong mã có thể phá vỡ toàn bộ trang web của bạn. Nếu bạn không thoải mái khi làm việc với mã, bạn có thể muốn thuê một nhà phát triển để giúp bạn

Nếu không, hãy đảm bảo bạn có bản sao lưu trang web trước khi thực hiện bất kỳ thay đổi nào. Bằng cách đó, nếu xảy ra sự cố, bạn luôn có thể hoàn nguyên về phiên bản hoạt động của trang web của mình

Có hai phần của trang web WordPress của bạn, bạn cần sao lưu trước khi thêm bất kỳ tùy chỉnh nào

1. cơ sở dữ liệu. Nơi lưu trữ tất cả các bài đăng, trang, cài đặt và cấu hình của bạn
2. Các tập tin. Hình ảnh, video, chủ đề và plugin của bạn

Bạn có thể sử dụng một plugin như Jetpack để sao lưu trang web WordPress của mình một cách nhanh chóng và dễ dàng. Một tùy chọn khác là sao lưu các tệp của bạn theo cách thủ công. Bạn cũng nên xem xét việc tạo một chủ đề con để thêm mã tùy chỉnh

Chủ đề con là bản sao của chủ đề hiện tại mà bạn có thể tùy chỉnh mà không ảnh hưởng đến mã gốc. Bạn có thể chỉ cần kích hoạt chủ đề ban đầu để hoàn nguyên mọi thay đổi nếu bạn mắc lỗi. Điều này cũng cho phép bạn cập nhật chủ đề gốc mà không làm mất các thay đổi mã bạn đã thực hiện

Ngoài ra, bạn có thể xem xét thử nghiệm JavaScript tùy chỉnh của mình trên trang web dàn dựng trước khi thêm nó vào trang web trực tiếp của mình. Trang web dàn dựng là bản sao của trang web trực tiếp mà bạn có thể sử dụng cho mục đích thử nghiệm. Bạn nên thiết lập một tài khoản phòng trường hợp có sự cố xảy ra với các thay đổi JavaScript của bạn

Cách thêm JavaScript vào toàn bộ trang web WordPress của bạn

Nếu bạn muốn thêm JavaScript vào toàn bộ trang web WordPress của mình, có một vài cách tiếp cận khác nhau. Một phương pháp là thêm tệp HTML tùy chỉnh vào chủ đề của bạn rồi chèn mã JavaScript vào tệp đó

Một cách khác là tạo một plugin WordPress chứa mã JavaScript của bạn. Bạn cũng có thể chỉ cần chỉnh sửa các chức năng của mình. php và chèn mã vào đó

Ngoài ra, để thực hiện các thay đổi trên toàn bộ trang web WordPress của bạn, bạn có thể thêm JavaScript vào đầu trang hoặc chân trang. Cách đơn giản nhất là cài đặt và kích hoạt plugin Insert Headers and Footers. Hãy khám phá sâu cả bốn phương pháp.  

Bốn cách để thêm JavaScript tùy chỉnh vào WordPress

Có nhiều cách khác nhau để bạn có thể thêm WordPress JavaScript tùy chỉnh vào trang web của mình. Dưới đây là hướng dẫn từng bước cho từng

Phương pháp 1. Sử dụng một plugin

Cách dễ nhất để thêm JavaScript vào WordPress là sử dụng plugin. Phương pháp này linh hoạt và dễ quản lý hơn so với việc thêm mã trực tiếp vào chủ đề của bạn.  

Nếu bạn không thoải mái với mã hóa hoặc muốn một giải pháp thân thiện với người dùng hơn, chúng tôi khuyên bạn nên sử dụng một trong nhiều plugin có sẵn để thêm JavaScript vào WordPress.  

Đối với hướng dẫn này, chúng tôi sẽ sử dụng Chèn đầu trang và chân trang

Khi plugin được kích hoạt, hãy điều hướng đến Cài đặt → Chèn Đầu trang và Chân trang vào bảng điều khiển WordPress của bạn

Bạn sẽ thấy hai hộp có nhãn Scripts in Header và Scripts in Footer. Bất kỳ mã nào bạn thêm vào các hộp này sẽ được chèn vào đầu trang hoặc chân trang của trang web của bạn. Đây là nơi bạn sẽ thêm JavaScript của mình

Giả sử bạn muốn thêm hộp xác nhận JavaScript. Trong hộp Scripts in Header, chèn đoạn mã sau

JavaScript Confirm Box
Try it

Mã này sẽ hiển thị nút Dùng thử trong tiêu đề. Khi bạn chọn nút, nó sẽ xác nhận rằng bạn đã nhấn nó

Bạn có thể kiểm tra tính năng này bằng cách truy cập trang web của mình và nhấp vào nút Dùng thử

Phương pháp 2. Thêm JavaScript vào chủ đề của bạn

Thêm JavaScript trực tiếp vào chủ đề của bạn là một trong những phương pháp đơn giản nhất. Bạn sẽ cần tạo một tệp mới trong thư mục chủ đề của mình và đặt tên cho nó là “tùy chỉnh. js. ”

Sau đó, bạn có thể thêm mã JavaScript của mình vào tệp đó và lưu nó. Cuối cùng, chỉnh sửa tiêu đề của bạn. php và thêm một dòng mã để tải tệp JavaScript mới

?php%20bloginfo('template_directory');%20?/custom.js

Hãy nhớ thay thế tùy chỉnh. js” bằng tên tệp của bạn. Khi bạn đã thêm dòng mã đó, hãy lưu tiêu đề của bạn. php và tải nó lên máy chủ của bạn. Mã JavaScript của bạn bây giờ sẽ chạy trên toàn bộ trang web WordPress của bạn

Phương pháp 3. Sử dụng các chức năng và hook của WordPress

Bạn cũng có thể thêm mã tùy chỉnh với các chức năng và hook của WordPress. Hàm là một đoạn mã thực hiện một hành động cụ thể. Chẳng hạn, hàm wp_enqueue_script() được sử dụng để tải tệp JavaScript

Móc là một tính năng của WordPress có thể thêm mã mà không cần chỉnh sửa bất kỳ tệp cốt lõi nào. Có hai loại móc. hành động và bộ lọc

Một hành động là một chức năng PHP được kích hoạt tại các điểm cụ thể trong quá trình tải trang. Ví dụ: móc hành động wp_head được kích hoạt trước thẻ trong tiêu đề chủ đề của bạn. tập tin php. Bạn có thể sử dụng hook này để thêm mã hoặc tập lệnh tùy chỉnh vào tiêu đề của mình

Bộ lọc sửa đổi mã hoặc dữ liệu hiện có. Ví dụ: bộ lọc the_content có thể thay đổi nội dung của bài đăng trước khi nó được hiển thị

Để thêm JavaScript tùy chỉnh vào trang web WordPress của bạn bằng các hàm và hook, bạn sẽ cần chèn mã của mình vào các hàm của chủ đề con của bạn. tập tin php

Thêm một thư mục mới trong thư mục WordPress của bạn để tạo một chủ đề con. Sau đó tạo kiểu. tệp css sẽ chứa các kiểu của chủ đề con bạn. Tiếp theo, bạn sẽ cần thêm đoạn mã sau vào kiểu của mình. tập tin css

/*
Theme Name: Twenty Twenty-Two Child
Template: twentytwentytwo
*/

Bây giờ bạn đã tạo chủ đề con của mình, bạn có thể kích hoạt nó bằng cách đi tới Giao diện → Trình chỉnh sửa tệp chủ đề từ bảng điều khiển WordPress của bạn. Điều hướng đến các chức năng. php, sau đó thêm đoạn mã sau

function ti_custom_javascript() {
    ?>
        
    

Khi bạn hoàn tất, hãy lưu các thay đổi của bạn.  

Phương pháp 4. Tạo một plugin

Nếu bạn muốn tách mã JavaScript khỏi chủ đề của mình, bạn có thể tạo một plugin WordPress để chứa nó. Tạo một plugin liên quan nhiều hơn là thêm mã trực tiếp vào chủ đề của bạn. Tuy nhiên, cách tiếp cận này có thể linh hoạt hơn và dễ quản lý hơn

Để tạo một plugin, trước tiên bạn cần tạo một thư mục mới trong thư mục wp-content/plugins của bản cài đặt WordPress của bạn. Đặt tên cho thư mục giống như “my-javascript-plugin. ”

Sau đó, tạo một tệp mới trong thư mục đó và đặt tên là “my-javascript-plugin. php. ” Nội dung của tập tin đó sẽ trông như thế này

Thay thế các trường Tên plugin, URI plugin, Mô tả, Tác giả và URI tác giả bằng các giá trị của bạn. Đây chỉ là những trường thông tin chung mô tả plugin của bạn

Tiếp theo, bạn cần thêm mã JavaScript của mình vào tệp. Mã phải nằm bên dưới thông tin plugin ban đầu nhưng trước thẻ đóng PHP (?>). Khi bạn đã thêm mã của mình, hãy lưu tệp và tải nó lên máy chủ của bạn

Plugin của bạn bây giờ sẽ được cài đặt và kích hoạt. Bạn có thể xác minh nó đang hoạt động bằng cách truy cập trang Plugin trong bảng quản trị WordPress của bạn. Bạn sẽ thấy plugin của mình được liệt kê ở đó

Cách thêm JavaScript vào một trang hoặc bài đăng WordPress cụ thể

Nếu bạn muốn thêm JavaScript vào một trang hoặc bài đăng WordPress cụ thể, bạn có thể chèn mã trực tiếp vào trình chỉnh sửa chủ đề. Điều hướng đến các chức năng. php, sau đó thêm đoạn mã sau

function ti_custom_javascript() {
  if (is_single ('1')) { 
    ?>
        
    

Bạn sẽ cần thay đổi “1” trong đoạn mã trên thành ID bài đăng hoặc trang. Bạn có thể tìm thấy số này bằng cách mở bài đăng từ bảng điều khiển của mình, sau đó tìm URL trong thanh trình duyệt. Số ID sẽ ở bên cạnh “post=”

Khi bạn thay thế số đó và thêm JavaScript tùy chỉnh của mình, hãy nhớ lưu tệp của bạn.  

Cách thêm JavaScript vào menu WordPress của bạn

Để thêm JavaScript vào menu WordPress của bạn, bạn sẽ cần tạo một mục menu tùy chỉnh. Đầu tiên, xác định số ID mục menu bằng Công cụ dành cho nhà phát triển, sau đó sử dụng jQuery để nhắm mục tiêu ID đó. Điều này sẽ kích hoạt tập lệnh bất cứ khi nào khách truy cập nhấp vào mục menu.  

Cách thêm JavaScript vào chân trang WordPress của bạn

Cách dễ nhất để thêm JavaScript vào chân trang WordPress của bạn là sử dụng một plugin như Chèn đầu trang và chân trang. Công cụ này có thể chèn mã vào đầu trang và chân trang của trang web WordPress của bạn mà không cần chỉnh sửa bất kỳ tệp chủ đề nào

Để sử dụng Insert Headers and Footers, bạn chỉ cần cài đặt và kích hoạt plugin. Sau đó, đi tới Cài đặt → Chèn Đầu trang và Chân trang.  

Trên trang cài đặt, bạn sẽ thấy ba hộp để thêm mã vào đầu trang, nội dung và chân trang của trang web của bạn. Chỉ cần dán mã JavaScript của bạn vào hộp Tập lệnh trong Chân trang thích hợp và nhấp vào nút Lưu

Một phương pháp khác là chỉnh sửa các chức năng của bạn. tập tin php. Bạn có thể chèn đoạn mã sau để chạy JavaScript ở cuối trang web của mình

function wpb_hook_javascript_footer() {
    ?>
        
    

Mã này sẽ móc vào wp_footer. Nhớ lưu file để cập nhật thay đổi khi làm xong

Cách thêm JavaScript vào tiện ích WordPress

Để thêm JavaScript vào tiện ích WordPress, bạn sẽ cần chỉnh sửa mã của tiện ích. Để làm điều đó, hãy nhấp vào menu của tiện ích và chọn Chỉnh sửa dưới dạng HTML

In the code editor of the block, add your