Hướng dẫn how do i add a script to my wordpress footer? - làm cách nào để thêm tập lệnh vào footer wordpress của tôi?

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 thực hiện. Thông thường tài liệu mà bạn được cung cấp với các mã này & nbsp; được viết như thể trang web của bạn chỉ là một loạt 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 sâu 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 javascript bạn cần thêm vào trang web của bạn.

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ả họ sẽ làm việc, nhưng một số tốt hơn những ngườ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 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 tiêu đề hoặc chân trang
• Sửa đổi chủ đề của bạn để bao gồm tập lệnh (ý tưởng xấu)
• Sử dụng trình chỉnh sửa bài viết WordPress (ý tưởng thực sự tồi tệ không đáng để thảo luận)

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

Rõ ràng 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 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à đi từ đó.

Thêm các tập lệnh tiêu đề và chân trang với một plugin

Đây là những hoạt động cắt và 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à bảo bạn dán nó vào tiêu đề hoặc chân trang của trang web của bạn. Đối với một trang web HTML tĩnh truyền thống, bạn thực sự sẽ dán mã đó vào tiêu đề hoặc chân trang HTML trên mỗi trang. Với WordPress, bạn cần phải có mã đó & NBSP; được tiêm vào mỗi tiêu đề và chân trang của trang.

Có rất nhiều plugin ngoài kia cho các tập lệnh tiêu đề và chân trang. Tôi đề xuất các tiêu đề chèn và plugin chân trang. Nó rất đơn giản, dễ sử dụng và làm việc.

Don Tiết chỉnh sửa chủ đề của bạn về các tệp hoặc chân trang

Mỗi chủ đề WordPress có một tệp mẫu tiêu đề.php và footer.php. Những tập tin đó sẽ tạo ra tiêu đề và chân trang của 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 ở đó. Điều đó sẽ hoạt động, nhưng xin vui lòng don.

Một sửa đổi cho một tập tin 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 từng 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 xấu. Tách mọi thứ & nbsp; mà không phải là & nbsp; phải làm với cách trang web của bạn nhìn từ chủ đề có nghĩa là khi bạn thay đổi cách chủ đề của bạn, chỉ có 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 móc WordPress

Đây là tương đương với việc sửa đổi tiêu đề.php hoặc footer.php không có nhược điểm nào tôi đã thảo luận trong phần cuối. Các hành động của WordPress là loại móc 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 Header.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 bắn ra, chúng ta có thể móc vào nó và nói với WordPress để thực thi một số mã. Ví dụ: để in một số JavaScript nội tuyến. Dưới đâ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:

Tất cả những gì làm là mở một cảnh báo nói rằng Hi Hi Roy, nhưng bạn có thể đặt kịch bản 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?

Một plugin script chân trang sẽ gần như giống hệt nhau, ngoại trừ bạn sẽ sử dụng hành động của WP WP_FOOTER.

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

Cách bao gồm một tệp JavaScript theo cách đúng cách

WordPress có & nbsp; một hệ thống để tải các tệp JavaScript và CSS. Đối với các tệp JavaScript, bạn có thể sử dụng chức năng 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 một tệp. Đối với một lượng lớn JavaScript, đây là một ý tưởng tốt.

Bạn chỉ có thể viết một tập lệnh HTML bình thường bao gồm TAG vào Header.php hoặc Footer.php nhưng đây là thực tế xấu. Hệ thống wp_enqueue_script quản lý các tập lệnh thứ tự được tải, các tập lệnh mà chúng phụ thuộc và tạo độ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 Custom-scripts.js có trong chủ đề con của bạn Thư mục chính bằng WP_ENQUEUE_SCRIPTS:

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

Trước khi chấp nhận các tác phẩm của ngay bây giờ, hãy xem xét những cơn đau đầu mà bạn đã mời mình sau này bằng cách bỏ qua các thực tiễn tốt nhất.

Nói về điều đó, hãy chú ý đối số thứ ba là một mảng có một giá trị jquery. Điều này nói với WordPress rằng trước khi tập lệnh này được tải, để 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 động thái rủi ro và phải được thực hiện đúng. 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 được tải JavaScript tùy chỉnh, nó sẽ rất giống nhau, nhưng bạn cần sử dụng plugin_dir_url () & nbsp; để tạo URL. Dưới đây là một ví dụ trong đó tệp JavaScript nằm trong cùng thư mục với plugin:

Hình ảnh chó và mèo là từ wikicommons. Cc) được cấp phép và siêu đáng yêu.