Làm cách nào để thêm tệp js vào wordpress?

Thông thường, việc thêm JavaScript tùy chỉnh để theo dõi phân tích là loại mã tùy chỉnh đầu tiên mà người dùng WordPress phải triển khai. Thông thường, tài liệu mà bạn được cung cấp cùng với các mã này được viết như thể trang web của bạn chỉ là một tập hợp các tệp HTML. Nhưng đó không phải là cách WordPress hoạt động. HTML của trang web của bạn được tạo động

Trong hai bài đăng gần đây trên trang web này, tôi đã thảo luận về JavaScript và các ngôn ngữ khác được sử dụng trong WordPress và cách triển khai mã tùy chỉnh trên trang web WordPress của bạn. Trong bài đăng này, tôi sẽ đi vào chi tiết hơn về những cách tốt nhất để làm việc với các đoạn mã JavaScript mà bạn cần thêm vào trang web của mình

Các cách để thêm JavaScript tùy chỉnh vào trang web của bạn

Dưới đây là danh sách nhanh các tùy chọn để thêm JavaScript vào trang web WordPress của bạn. Tất cả chúng sẽ hoạt động, nhưng một số tốt hơn những cái khác. Tôi sẽ đi qua từng chi tiết trong bài viết này

• Tải một tệp JavaScript riêng bằng trình tải tập lệnh của WordPress
• Sử dụng móc wp_footer hoặc wp_head để thêm tập lệnh nội tuyến
• Sử dụng plugin để thêm tập lệnh đầu trang hoặc chân trang
• Sửa đổi chủ đề của bạn để bao gồm tập lệnh (ý tưởng tồi)
• Sử dụng trình chỉnh sửa bài đăng của WordPress (ý tưởng thực sự tồi tệ không đáng để thảo luận)

Hai tùy chọn đầu tiên liên quan đến việc sử dụng móc nối WordPress. Tôi đã viết phần giới thiệu cơ bản về các hook WordPress trước đây cho blog của chúng tôi. Tôi cũng đã trình bày cách sử dụng các móc nối WordPress trong bài nói chuyện WordCamp Tampa của mình, đây là các trang trình bày về các hành động và bộ lọc

Giới thiệu về phát triển plugin từ Caldera Labs

Rõ ràng là các tùy chọn này liên quan đến một chút mã hóa tùy chỉnh. Tùy thuộc vào những gì bạn cần mà có thể có giá trị nó. Tôi sẽ bắt đầu với các giải pháp không có mã và bắt đầu từ đó

Thêm tập lệnh đầu trang và chân trang bằng plugin

Hầu hết khi bạn cần thêm JavaScript tùy chỉnh, đó là vì bạn cần thêm thứ gì đó như mã theo dõi Google Analytics vào trang web WordPress của mình. Hoặc bạn có thể cần mã theo dõi pixel của Facebook hoặc Twitter

Đây là những thao tác cắt, dán rất đơn giản. Đối với một cái gì đó đơn giản như thế này, một plugin là một lựa chọn tốt

Facebook, Google, Twitter hoặc bất kỳ ai cung cấp cho bạn mã và yêu cầu bạn dán mã đó vào đầu trang hoặc chân trang của trang web của bạn. Đối với trang web HTML tĩnh truyền thống, bạn thực sự sẽ dán mã đó vào đầu trang hoặc chân trang HTML trên mỗi trang. Với WordPress, bạn cần đưa mã đó vào đầu trang và chân trang của mỗi trang theo chương trình

Có rất nhiều plugin cho các tập lệnh đầu trang và chân trang. Tôi khuyên dùng plugin Chèn tiêu đề và chân trang. Nó đơn giản, dễ sử dụng và hoạt động

Không chỉnh sửa tập tin đầu trang hoặc chân trang của chủ đề của bạn

Mỗi chủ đề WordPress có một tiêu đề. php và chân trang. tập tin mẫu php. Những tệp đó sẽ tạo đầu trang và chân trang cho chủ đề của bạn. Về mặt kỹ thuật, bạn chỉ có thể dán mã theo dõi hoặc JavaScript khác vào đó. Điều đó sẽ hiệu quả, nhưng xin đừng

Sửa đổi đối với tệp chủ đề sẽ bị mất khi bạn cập nhật chủ đề của mình. Điều đó thật xấu. Ngoài ra, nếu bạn thay đổi chủ đề của mình, bạn sẽ mất tập lệnh theo dõi đó, điều này cũng tệ. Tách biệt mọi thứ không liên quan đến giao diện trang web của bạn khỏi chủ đề có nghĩa là khi bạn thay đổi giao diện của chủ đề, chỉ hình ảnh thay đổi và bạn không mất chức năng quan trọng

Thêm JavaScript nội tuyến với WordPress Hooks

Nếu bạn đồng ý với việc viết một chút mã tùy chỉnh, tôi khuyên bạn nên tạo một plugin WordPress để tải các đoạn mã nhỏ vào đầu trang hoặc chân trang của trang web của bạn thông qua một hành động. Đối với các đoạn mã nhỏ, sẽ không hợp lý khi sử dụng một tệp JavaScript riêng biệt, điều đó sẽ yêu cầu và do đó yêu cầu HTTP bổ sung khi tải trang

Điều này tương đương với việc sửa đổi tiêu đề. php hoặc chân trang. php không có nhược điểm nào mà tôi đã thảo luận trong phần trước. Hành động WordPress là loại hook cho phép bạn làm điều gì đó khi hành động đó gặp phải bởi WordPress. Khi chủ đề của bạn chạy tiêu đề. php, nó sẽ khiến hành động wp_head chạy — có thể thông qua hàm wp_head()

Khi chức năng wp_head được “kích hoạt”, chúng ta có thể “kết nối vào nó” và yêu cầu WordPress thực thi một số mã. Ví dụ để in một số JavaScript nội tuyến. Đây là một plugin WordPress hoàn chỉnh mà bạn có thể tải lên thư mục plugin của mình và sử dụng

Xem mã trên Gist

 

Tất cả những gì cần làm là mở một cảnh báo có nội dung “Xin chào Roy”, nhưng bạn có thể đặt tập lệnh của riêng mình ở đó để làm bất cứ điều gì bạn muốn

Điều đó không khó phải không?

Plugin tập lệnh chân trang sẽ gần như giống hệt nhau, ngoại trừ bạn sẽ sử dụng hành động “wp_footer”

Xem mã trên Gist

Về cơ bản, đây là điều mà bất kỳ plugin thêm tập lệnh đầu trang và chân trang nào làm, chỉ hiệu quả hơn. Các plugin đó phải có giao diện người dùng, truy vấn cơ sở dữ liệu, v.v. Một plugin tùy chỉnh cho các tập lệnh đầu trang và chân trang sẽ mất thêm vài phút, nhưng nó sẽ tiết kiệm thời gian tải và ít rắc rối hơn theo thời gian

Cách đưa tệp JavaScript vào WordPress đúng cách

WordPress có một hệ thống để tải các tệp JavaScript và CSS. Đối với tệp JavaScript, bạn có thể sử dụng hàm wp_enqueue_scripts, bên trong hàm gọi lại được nối với hành động wp_enqueue_script để tải tệp. Đối với số lượng lớn JavaScript, đây là một ý tưởng hay

Bạn chỉ có thể viết một tập lệnh HTML bình thường bao gồm thẻ vào tiêu đề. php hoặc chân trang. php nhưng đây là cách làm không tốt. Hệ thống wp_enqueue_script quản lý thứ tự các tập lệnh được tải, các tập lệnh phụ thuộc vào chúng và tự động tạo URL

Dưới đây là một ví dụ về việc tải một tập lệnh có tên là “custom-scripts. js” nằm trong thư mục chính của chủ đề con bạn bằng cách sử dụng wp_enqueue_scripts

Xem mã trên Gist

Đoạn mã này sẽ đi vào các chức năng của chủ đề con. php vì tệp JavaScript nằm trong chủ đề con. Tôi sẽ hiển thị một ví dụ khác cho một plugin tùy chỉnh trong giây lát

Xin lưu ý rằng tôi đã sử dụng get_stylesheet_directory_uri() để tự động tạo URL cho chủ đề con của mình thay vì giả định đường dẫn URL. Đây là một thực hành tốt nhất quan trọng. Nếu trang web của bạn thay đổi URL, bạn muốn JavaScript tùy chỉnh của mình tiếp tục tải. Nếu bạn chuyển từ HTTP không an toàn sang HTTPS, điều mà bạn nên làm, thì bạn sẽ cần tải tập lệnh của mình qua HTTPS, nếu không bạn sẽ nhận được cảnh báo nội dung hỗn hợp có khả năng làm hỏng chức năng chính

Trước khi chấp nhận “hoạt động ngay bây giờ”, hãy xem xét những vấn đề đau đầu mà bạn đang tự chuốc lấy sau này bằng cách bỏ qua các phương pháp hay nhất

Nói về điều này, hãy lưu ý rằng đối số thứ ba là một mảng có một giá trị “jquery. ” Điều này cho WordPress biết rằng trước khi tập lệnh này được tải, hãy tải jQuery. WordPress bao gồm một bản sao của jQuery. Tải phiên bản jQuery của riêng bạn có thể là một bước đi mạo hiểm và phải được thực hiện đúng cách. Tải một bản sao bổ sung của jQuery là một ý tưởng tồi

Nếu bạn muốn tạo một plugin tải JavaScript tùy chỉnh, plugin này sẽ rất giống nhưng bạn cần sử dụng hàm plugin_dir_url() để tạo URL. Đây là một ví dụ trong đó tệp JavaScript nằm trong cùng thư mục với plugin

Tôi có thể thêm JS vào WordPress không?

Cách dễ nhất để thêm JavaScript vào trang WordPress là gì?