Cách thêm đoạn mã javascript vào chân trang yêu cầu jQuery


27

Tôi biết tôi có thể thêm tệp tập lệnh vào chân trang của wordpress yêu cầu jquery sử dụng mã này:

<?php
function my_scripts_method() {
   // register your script location, dependencies and version
   wp_register_script('custom_script',
       get_template_directory_uri() . '/js/custom_script.js',
       array('jquery'),
       '1.0',
       true);
   // enqueue the script
   wp_enqueue_script('custom_script');
}
add_action('wp_enqueue_scripts', 'my_scripts_method');
?>

Nhưng nếu tôi muốn thêm chỉ là một đoạn bình thường của jquery inline, không phải là một tập tin. Điều này có thể giải quyết như thế nào.

Chỉnh sửa

Tôi biết tôi có thể sử dụng tập lệnh này để thêm một cái gì đó vào chân trang:

<?php
function myscript() {
?>
<script type="text/javascript">
 // This depends on jquery
</script>
<?php
}
add_action('wp_footer', 'myscript');

Nhưng làm thế nào để tôi xác định tập lệnh được sử dụng yêu cầu jquery để chạy.


Không có chức năng tích hợp để làm điều này mà tôi biết, đó là lý do wp_register_scriptwp_enqueue_scripttồn tại, nhưng bạn có thể kiểm tra bằng chính jquery.
Wyck

2
Xin lỗi vì downvote, nhưng tôi không nghĩ bạn hiểu câu hỏi của tôi. Tôi đã đọc codex, và biết về tùy chọn này. Nhưng tôi không muốn wp_enqueue_scripttập tin script vào phần chân trang, tôi muốn thêm một đoạn mã vào phần chân trang yêu cầu jquery. Tôi đã đánh giá thấp câu trả lời được lấy trực tiếp từ codex. Tôi đọc codex và không tìm thấy câu trả lời, đó là lý do tại sao tôi hỏi một câu hỏi. Nếu bạn chuyển hướng tôi đến codex một lần nữa, tôi downvote.
Saif Bechan

Cảm ơn wyck, tôi nghĩ đây là trường hợp, cảm ơn bạn đã hiểu chính xác câu hỏi. Tôi nghĩ rằng tôi sẽ chỉ sử dụng một tập lệnh JS bên ngoài thay vì để chắc chắn tập lệnh có thể chạy được.
Saif Bechan

Câu trả lời:


30

Cách dễ nhất để làm điều này thực sự là sự kết hợp giữa wp_enqueue_scriptvà các hành động chân trang mà Saif và v0idless đã tham chiếu. Tôi thường xuyên sử dụng jQuery trong các chủ đề và plugin của mình, nhưng tôi cũng đặt tất cả các tập lệnh khác trong phần chân trang.

Cách tốt nhất để thực sự xếp hàng mọi thứ sẽ là:

function myscript() {
?>
<script type="text/javascript">
  if ( undefined !== window.jQuery ) {
    // script dependent on jQuery
  }
</script>
<?php
}
add_action( 'wp_footer', 'myscript' );

function myscript_jquery() {
    wp_enqueue_script( 'jquery' );
}
add_action( 'wp_head' , 'myscript_jquery' );

Nhưng đoạn mã này đã giả định rằng bạn là người xếp hàng tập lệnh, tức là bạn đang thực hiện điều này trong plugin hoặc chủ đề của riêng bạn.

Hiện tại, không có cách nào để thêm một tập lệnh nội tuyến vào chân trang WordPress và cũng tải nó với các phụ thuộc. Nhưng có một sự thay thế, nếu bạn sẵn sàng.

Thay thế

Khi WordPress hoạt động với các tập lệnh, nó sẽ tải chúng vào bên trong một đối tượng để theo dõi chúng. Về cơ bản có 3 danh sách bên trong đối tượng:

  • đã đăng ký
  • xếp hàng
  • làm xong
  • làm

Khi bạn lần đầu tiên đăng ký một tập lệnh với wp_register_scripts()nó được đặt trong danh sách đã đăng ký. Khi bạn wp_enqueue_script()tập lệnh, nó được sao chép vào danh sách hàng đợi. Sau khi được in ra trang, nó được thêm vào danh sách đã hoàn thành.

Vì vậy, thay vì xếp hàng tập lệnh chân trang của bạn để yêu cầu jQuery, bạn có thể ghi lại rằng nó cần sử dụng jQuery và chỉ cần kiểm tra theo chương trình để đảm bảo jQuery được tải.

Điều này sử dụng wp_script_is()để kiểm tra nơi tập lệnh được liệt kê.

function myscript() {
    if( wp_script_is( 'jquery', 'done' ) ) {
    ?>
    <script type="text/javascript">
      // script dependent on jQuery
    </script>
    <?php
    }
}
add_action( 'wp_footer', 'myscript' );

Bạn thể có thể sử dụng cùng mã này để buộc jQuery cũng tải vào phần chân trang, nhưng tôi đã không kiểm tra rằng ... vì vậy số dặm của bạn thay đổi.


đoạn mã được cung cấp của bạn có được chấp nhận bởi các tiêu chuẩn phát triển plugin WordPress không? Nếu có, thì tôi sẽ sử dụng nó trong plugin của mình ... vui lòng trả lời cho tôi về điều này ...
laraib

Đoạn cuối? Các plugin WordPress phải luôn luôn đáp ứng các yêu cầu về kịch bản. Buộc jQuery tải bên ngoài hệ thống xếp hàng theo cách này chỉ là điều bạn nên làm trên trang web của riêng mình nơi bạn kiểm soát 100% môi trường. Nó không bao giờ thích hợp cho một plugin để làm điều đó.
EAMann

sau đó bạn có thể cho tôi một vài ví dụ làm việc cho điều đó không ... ????
laraib

Bởi vì tôi đang phát triển plugin WordPress đầu tiên của mình và tôi rất muốn được nhóm WordPress chấp nhận ... chờ đợi bất kỳ phản hồi nào của bạn .... hãy nói về điều này để tôi có thể tạo và chấp nhận plugin của mình ...
laraib

12

Kể từ wordpress 4.5, bạn có thể thêm tập lệnh nội tuyến bằng cách wp_add_inline_script(). Để thêm đoạn mã javascript vào chân trang yêu cầu jQuery, mã này giúp bạn

function enqueue_jquery_in_footer( &$scripts ) {

    if ( ! is_admin() )
        $scripts->add_data( 'jquery', 'group', 1 );
}
add_action( 'wp_default_scripts', 'enqueue_jquery_in_footer' );

function theme_prefix_enqueue_script() {
   if(!wp_script_is('jquery', 'done')) {
     wp_enqueue_script('jquery');
   }
   wp_add_inline_script( 'jquery-migrate', 'jQuery(document).ready(function(){});' );
}
add_action( 'wp_enqueue_scripts', 'theme_prefix_enqueue_script' );

wp_add_inline_script với jquery wordpress


1

Sử dụng wp_footerhành động như thế này:

add_action( 'wp_footer', 'wpse33008');
function wpse33008() {
?>
<script type="text/javascript">
    /** INSERT SCRIPT HERE **/
</script>
<?php
}

1
Đây không phải là một câu trả lời tốt. Tôi hỏi làm thế nào tôi có thể chỉ định tập lệnh yêu cầu jQuery. Nếu người dùng không có jquery chạy thì triển khai của bạn sẽ không chạy.
Saif Bechan

0

Tôi biết OP muốn chỉ định một yêu cầu trên jQuery và các tác giả của WordPress nên cho phép các đoạn mã được đặt cạnh các tệp tập lệnh, nhưng họ đã không làm vậy, vì vậy tôi khuyên bạn không nên cố gắng ép buộc. Nếu bạn không muốn gây rối với hàng đợi hoặc thứ tự của nó, như tôi (vì tôi đang sử dụng các plugin khác kết hợp và tối ưu hóa tập lệnh), thì câu trả lời thực sự là sử dụng wp_footerhành động như vậy:

<?php

add_action(
    'wp_footer'
    , function() {
        ?>
        <script>
            if (window.jQuery) {
                // your snippet
            }
        </script>
        <?php
    }
    , 21 # after enqueued footer scripts
);

-2

Bạn có thể sử dụng wp_footerhành động để làm điều này. Kiểm tra codex cho wp_footer .


Tôi biết, nhưng làm thế nào bạn có thể chỉ định rằng tập lệnh bạn thêm vào chân trang phụ thuộc vào jquery. Kiểm tra chỉnh sửa của tôi để được đặc biệt hơn.
Saif Bechan

Bạn thậm chí có bận tâm để đọc xung quanh codex trước khi bỏ phiếu trả lời của mọi người? Bạn đã bao giờ đọc về các in_footerđối số để wp_enqueue_script? Đọc này: codex.wordpress.org/Function_Reference/wp_enqueue_script . Nó cho bạn biết làm thế nào để sử dụng nó với wp_footerhành động.
Rutwick Gangurde
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.