Làm cách nào để thêm một tập lệnh jQuery đơn giản vào WordPress?

Tôi đã đọc Codex và một vài bài đăng trên blog về việc sử dụng jQuery trong WordPress, và nó rất khó chịu. Tôi đã hiểu về việc tải jQuery trong functions.phptệp, nhưng tất cả các hướng dẫn ngoài kia đều không ổn vì họ cho rằng bạn đã có rất nhiều kinh nghiệm về WordPress. Ví dụ, họ nói rằng bây giờ tôi đang tải jQuery thông qua functions.phptệp, bây giờ tất cả những gì tôi phải làm là tải jQuery của mình.

Chính xác thì tôi làm như thế nào? Cụ thể, tôi thêm mã vào những tệp nào? Làm cách nào để thêm chính xác nó vào một trang WordPress?

Tôi biết ý của bạn về các hướng dẫn. Đây là cách tôi làm điều đó:

Trước tiên, bạn cần viết kịch bản của mình. Trong thư mục chủ đề của bạn, hãy tạo một thư mục có tên giống như 'js'. Tạo một tệp trong thư mục đó cho javascript của bạn. Ví dụ: your-script.js. Thêm tập lệnh jQuery của bạn vào tệp đó (bạn không cần <script>thẻ trong tệp .js).

Dưới đây là một ví dụ về cách tập lệnh jQuery của bạn (trong wp-content / themes / your-theme / js / your-scrript.js) có thể trông như thế nào:

jQuery(document).ready(function($) {
  $('#nav a').last().addClass('last');
})

Lưu ý rằng tôi sử dụng jQuery chứ không phải $ ở đầu hàm.

Ok, bây giờ hãy mở tệp functions.php của chủ đề của bạn. Bạn sẽ muốn sử dụng wp_enqueue_script()chức năng để có thể thêm tập lệnh của mình trong khi cũng nói với WordPress rằng nó dựa trên jQuery. Đây là cách để làm điều đó:

add_action( 'wp_enqueue_scripts', 'add_my_script' );
function add_my_script() {
    wp_enqueue_script(
        'your-script', // name your script so that you can attach other scripts and de-register, etc.
        get_template_directory_uri() . '/js/your-script.js', // this is the location of your script file
        array('jquery') // this array lists the scripts upon which your script depends
    );
}

Giả sử rằng chủ đề của bạn có wp_head và wp_footer ở đúng vị trí, điều này sẽ hoạt động. Hãy cho tôi biết nếu bạn cần thêm sự giúp đỡ.

Các câu hỏi về WordPress có thể được hỏi tại Câu trả lời WordPress .

Sau nhiều tìm kiếm, cuối cùng tôi đã tìm thấy thứ gì đó hoạt động với WordPress mới nhất. Dưới đây là các bước để làm theo:

1. Tìm thư mục chủ đề của bạn, tạo một thư mục trong thư mục cho js tùy chỉnh của bạn ( custom_js trong ví dụ này ).
2. Đặt jQuery tùy chỉnh của bạn trong tệp .js trong thư mục này ( jquery_test.js trong ví dụ này ).

3. Đảm bảo jQuery .js tùy chỉnh của bạn trông giống như sau:

   (function($) {
   $(document).ready(function() {
   $('.your-class').addClass('do-my-bidding');
   })
   })(jQuery);

4. Đi tới thư mục của chủ đề, mở functions.php

5. Thêm một số mã gần đầu giống như sau:

   //this goes in functions.php near the top
   function my_scripts_method() {
   // register your script location, dependencies and version
      wp_register_script('custom_script',
      get_template_directory_uri() . '/custom_js/jquery_test.js',
      array('jquery'),
      '1.0' );
    // enqueue the script
     wp_enqueue_script('custom_script');
     }
   add_action('wp_enqueue_scripts', 'my_scripts_method');

6. Kiểm tra trang web của bạn để đảm bảo rằng nó hoạt động!

Nếu bạn sử dụng chủ đề con của wordpress để thêm tập lệnh vào chủ đề của mình, bạn nên thay đổi hàm get_template_directory_uri thành get_stylesheet_directory_uri, ví dụ:

Chủ đề chính:

add_action( 'wp_enqueue_scripts', 'add_my_script' );
function add_my_script() {
    wp_register_script(
        'parent-theme-script', 
        get_template_directory_uri() . '/js/your-script.js', 
        array('jquery') 
    );

    wp_enqueue_script('parent-theme-script');
}

Chủ đề trẻ em:

add_action( 'wp_enqueue_scripts', 'add_my_script' );
function add_my_script() {
    wp_register_script(
       'child-theme-script', 
       get_stylesheet_directory_uri() . '/js/your-script.js', 
       array('jquery') 
    );

    wp_enqueue_script('child-theme-script');
}

get_template_directory_uri: / your-site / wp-content / themes / parent-theme

get_stylesheet_directory_uri: / your-site / wp-content / themes / child-theme

Bạn có thể thêm jQuery hoặc javascript trong tệp function.php của theme. Mã như dưới đây:

add_action( 'wp_enqueue_scripts', 'add_my_script' );

function add_my_script() {
wp_enqueue_script(
    'your_script_name', // your script unique name 
    get_template_directory_uri().'/js/your-script.js', //script file location
    array('jquery') //lists the scripts upon which your script depends
);
}

Để biết thêm chi tiết, hãy truy cập hướng dẫn này: http://www.codecanal.com/add-simple-jquery-script-wordpress/

Bên cạnh việc đưa tập lệnh vào thông qua các hàm, bạn có thể "chỉ" bao gồm một liên kết (thẻ rel liên kết) trong đầu trang, chân trang, trong bất kỳ mẫu nào, ở bất kỳ đâu. Bạn chỉ cần đảm bảo rằng đường dẫn là chính xác. Tôi đề nghị sử dụng một cái gì đó như thế này (giả sử bạn đang ở trong thư mục chủ đề của mình).

<script type="javascript" href="<?php echo get_template_directory_uri();?>/your-file.js"></script>

Một thực tiễn tốt là bao gồm điều này ngay trước thẻ đóng nội dung hoặc ít nhất là ngay trước footer của bạn. Bạn cũng có thể sử dụng bao gồm php hoặc một số phương pháp khác để kéo tệp này vào.

<script type="javascript"><?php include('your-file.js');?></script>

** # Phương pháp 1: ** Cố gắng đặt mã jquery của bạn trong một tệp js riêng biệt.

Bây giờ đăng ký tập lệnh đó trong tệp functions.php.

function add_my_script() {
    wp_enqueue_script(
      'custom-script', get_template_directory_uri() . '/js/your-script-name.js', 
        array('jquery') 
    );
}
add_action( 'wp_enqueue_scripts', 'add_my_script' );

Bây giờ bạn đã hoàn thành.

Đăng ký script trong các hàm có lợi vì nó có trong <head>phần khi tải trang, do đó nó luôn là một phần của header.php. Vì vậy, bạn không phải lặp lại mã của mình mỗi khi viết nội dung html mới.

#Method 2: đặt mã tập lệnh bên trong nội dung trang dưới <script>thẻ. Sau đó, bạn không cần phải đăng ký nó trong các chức năng.

Bạn có thể thêm javascript hoặc jquery tùy chỉnh bằng cách sử dụng plugin này.
https://wordpress.org/plugins/custom-javascript-editor/

Khi bạn sử dụng jQuery, đừng quên sử dụng chế độ không liên kết jquery

Có rất nhiều hướng dẫn và câu trả lời ở đây về cách thêm tập lệnh của bạn để được đưa vào trang. Nhưng những gì tôi không thể tìm thấy là cách cấu trúc mã đó để nó hoạt động bình thường. Điều này là do $ không được sử dụng trong dạng JQuery này.

Đây là mã của tôi và bạn có thể sử dụng mã đó làm mẫu.

jQuery(document).ready(function( $ ){
  $("#btnCalculate").click(function () {
        var val1 = $(".visits").val();
        var val2 = $(".collection").val();
        var val3 = $(".percent").val();
        var val4 = $(".expired").val();
        var val5 = $(".payer").val();
        var val6 = $(".deductible").val(); 
        var result = val1 * (val3 / 100) * 10 * 0.25;
        var result2 = val1 * val2 * (val4 / 100) * 0.2;
        var result3 = val1 * val2 * (val5 / 100) * 0.2;
        var result4 = val1 * val2 * (val6 / 100) * 0.1;
        var val7 = $(".pverify").val();
        var result5 = result + result2 + result3 + result4 - val7;
        var result6 = result5 * 12;
        $("#result").val("$" + result);
        $("#result2").val("$" + result2);
        $("#result3").val("$" + result3);
        $("#result4").val("$" + result4);
        $("#result5").val("$" + result5);
        $("#result6").val("$" + result6);
  });
});

Câu trả lời từ đây: https://premium.wpmudev.org/blog/adding-jquery-scripts-wordpress/

Mặc dù thực tế là WordPress đã xuất hiện được một thời gian và phương pháp thêm tập lệnh vào các chủ đề và plugin đã giống nhau trong nhiều năm, nhưng vẫn có một số nhầm lẫn về cách chính xác bạn nên thêm tập lệnh. Vì vậy, chúng ta hãy làm rõ nó.

Vì jQuery vẫn là khung công tác Javascript được sử dụng phổ biến nhất, chúng ta hãy xem cách bạn có thể thêm một tập lệnh đơn giản vào chủ đề hoặc plugin của mình.

Chế độ tương thích của jQuery

Trước khi bắt đầu đính kèm các tập lệnh vào WordPress, hãy xem chế độ tương thích của jQuery. WordPress được đóng gói sẵn một bản sao của jQuery mà bạn nên sử dụng với mã của mình. Khi jQuery của WordPress được tải, nó sử dụng chế độ tương thích, đây là một cơ chế để tránh xung đột với các thư viện ngôn ngữ khác.

Điều này tóm lại là bạn không thể sử dụng ký hiệu đô la trực tiếp như bạn làm trong các dự án khác. Khi viết jQuery cho WordPress, bạn cần sử dụng jQuery. Hãy xem đoạn mã dưới đây để hiểu ý tôi:

Các giải pháp tôi đã thấy là từ góc độ thêm các tính năng javascript vào một chủ đề. Tuy nhiên, OP hỏi, cụ thể, "Làm thế nào chính xác làm tôi thêm nó cho một đơn trang WordPress?" Điều này có vẻ như đó có thể là cách tôi sử dụng javascript trong blog Wordpress của mình, nơi các bài đăng riêng lẻ có thể có các "widget" hỗ trợ javascript khác nhau. Ví dụ: một bài đăng có thể cho phép người dùng thay đổi các biến (thanh trượt, hộp kiểm, trường nhập văn bản) và vẽ biểu đồ hoặc liệt kê kết quả.

Bắt đầu từ quan điểm JavaScript:

1. Viết các hàm JavaScript của bạn trong một tệp “.js” riêng biệt

Thậm chí đừng nghĩ đến việc đưa JavaScript quan trọng vào html của bài đăng của bạn — tạo một tệp JavaScript hoặc các tệp bằng mã của bạn.

2. Giao diện JavaScript của bạn với html của bài đăng của bạn

Nếu tiện ích con JavaScript của bạn tương tác với các trường và điều khiển html, bạn sẽ cần hiểu cách truy vấn và đặt các phần tử đó từ JavaScript cũng như cách để các phần tử giao diện người dùng gọi các hàm JavaScript của bạn. Dưới đây là một vài ví dụ; đầu tiên, từ JavaScript:

var val = document.getElementById(“AM_Freq_A_3”).value;

Và từ html:

<input type="range" id="AM_Freq_A_3" class="freqSlider" min="0" max="1000" value="0" oninput='sliderChanged_AM_widget(this);'/>

3. Sử dụng jQuery để gọi hàm khởi tạo tiện ích JavaScript của bạn

Thêm cái này vào tệp .js của bạn, sử dụng tên hàm định cấu hình và vẽ tiện ích JavaScript của bạn khi trang sẵn sàng cho nó:

jQuery(document).ready(function( $ ) {
    your_init_function();
});

4. Trong mã html của bài đăng của bạn, hãy tải các tập lệnh cần thiết cho bài đăng của bạn

Trong trình soạn thảo mã Wordpress, tôi thường chỉ định các tập lệnh ở cuối bài đăng. Ví dụ, tôi có một thư mục script trong thư mục chính của mình. Bên trong tôi có một thư mục tiện ích với JavaScript phổ biến mà một số bài đăng của tôi có thể chia sẻ — trong trường hợp này là một số hàm tiện ích toán học của riêng tôi và thư viện vẽ đồ thị flotr2. Tôi thấy thuận tiện hơn khi nhóm JavaScript cụ thể trong một thư mục khác, ví dụ: với các thư mục con dựa trên ngày thay vì sử dụng trình quản lý phương tiện.

<script type="text/javascript" src="/scripts/utils/flotr2.min.js"></script>
<script type="text/javascript" src="/scripts/utils/math.min.js"></script>
<script type="text/javascript" src="/scripts/widgets/20161207/FreqRes.js"></script>

5. Enqueue jQuery

Wordpress đăng ký jQuery, nhưng nó không khả dụng trừ khi bạn nói với Wordpress rằng bạn cần nó, bằng cách xếp nó vào danh sách. Nếu bạn không, lệnh jQuery sẽ không thành công. Nhiều nguồn cho bạn biết cách thêm lệnh này vào functions.php của bạn, nhưng giả sử bạn biết một số chi tiết quan trọng khác.

Đầu tiên, bạn không nên chỉnh sửa chủ đề — mọi bản cập nhật trong tương lai của chủ đề sẽ xóa sạch các thay đổi của bạn. Tạo một chủ đề con. Đây là cách thực hiện:

https://developer.wordpress.org/themes/advanced-topics/child-themes/

Tệp functions.php của đứa trẻ không ghi đè lên tệp cùng tên của chủ đề mẹ, nó sẽ thêm vào đó. Hướng dẫn chủ đề con đề xuất cách xếp hàng đợi tệp style.css cha và con. Chúng ta có thể chỉ cần thêm một dòng khác vào hàm đó để xếp hàng jQuery. Đây là toàn bộ tệp functions.php của tôi cho chủ đề con:

<?php
add_action( 'wp_enqueue_scripts', 'earlevel_scripts_enqueue' );
function earlevel_scripts_enqueue() {
    // styles
    $parent_style = 'parent-style';
    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( $parent_style ),
        wp_get_theme()->get('Version')
    );

    // posts with js widgets need jquery
    wp_enqueue_script('jquery');
}

Bạn có thể sử dụng chức năng được xác định trước của WordPress để thêm tệp script vào plugin WordPress.

wp_enqueue_script( 'script', plugins_url('js/demo_script.js', __FILE__), array('jquery'));

Hãy xem bài đăng giúp bạn hiểu rằng bạn có thể triển khai jQuery và CSS trong plugin WordPress dễ dàng như thế nào.

Bên cạnh việc đưa tập lệnh vào thông qua các hàm, bạn có thể "chỉ" bao gồm một liên kết (thẻ rel liên kết) trong đầu trang, chân trang, trong bất kỳ mẫu nào, ở bất kỳ đâu.

Không. Bạn đừng bao giờ chỉ thêm một liên kết đến một tập lệnh bên ngoài như thế này trong WordPress. Việc sắp xếp chúng thông qua tệp functions.php đảm bảo rằng các tập lệnh được tải theo đúng thứ tự.

Việc không xếp chúng vào hàng đợi có thể dẫn đến việc tập lệnh của bạn không hoạt động, mặc dù nó được viết chính xác.

bạn có thể viết tập lệnh của mình trong một tệp khác và xếp hàng đợi tệp của bạn như thế này, giả sử tên tập lệnh của bạn là image-ticker.js.

wp_enqueue_script( 'image-ticker-1', plugins_url('/js/image-ticker.js', __FILE__), array('jquery', 'image-ticker'), '1.0.0', true ); 

ở vị trí của /js/image-ticker.jsbạn nên đặt đường dẫn tệp js của bạn.

Trong WordPress, cách chính xác để đưa các tập lệnh vào trang web của bạn là sử dụng các chức năng sau.

wp_register_script( $handle, $src )
wp_enqueue_script( $handle, $src )

Các hàm này được gọi là bên trong hook wp_enqueue_script.

Để biết thêm chi tiết và ví dụ, bạn có thể kiểm tra Thêm tệp JS trong Wordpress bằng cách sử dụng wp_register_script & wp_enqueue_script

Thí dụ:

function webolute_theme_scripts() {
    wp_register_script( 'script-name', get_template_directory_uri() . '/js/example.js', array('jquery'), '1.0.0', true );
    wp_enqueue_script( 'script-name' );
}
add_action( 'wp_enqueue_scripts', 'webolute_theme_scripts' );

"Chúng tôi có Google" cit. Để sử dụng đúng script bên trong wordpress, chỉ cần thêm các thư viện được lưu trữ. Giống như Google

Sau khi chọn thư viện mà bạn cần liên kết nó trước tập lệnh tùy chỉnh của bạn: exmpl

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

và sau kịch bản của riêng bạn

<script type="text/javascript">
    $(document).ready(function () {
        $('.text_container').addClass("hidden");
    });
</script>

Bạn chỉ cần tải jquery?

1) Giống như các hướng dẫn khác nói, đăng ký tập lệnh của bạn trong tệp functions.php của bạn như sau:

// register scripts
if (!is_admin()) {
    // here is an example of loading a custom script in a /scripts/ folder in your theme:
    wp_register_script('sandbox.common', get_bloginfo('template_url').'/scripts/common.js', array('jquery'), '1.0', true);
    // enqueue these scripts everywhere
    wp_enqueue_script('jquery');
    wp_enqueue_script('sandbox.common');
}

2) Lưu ý rằng chúng ta không cần đăng ký jQuery vì nó đã có trong lõi. Đảm bảo rằng wp_footer () được gọi trong footer.php của bạn và wp_head () được gọi trong header.php của bạn (đây là nơi nó sẽ xuất thẻ script) và jQuery sẽ tải trên mọi trang. Khi bạn xếp hàng jQuery bằng WordPress, nó sẽ ở chế độ "không xung đột", vì vậy bạn phải sử dụng jQuery thay vì $. Bạn có thể hủy đăng ký jQuery nếu bạn muốn và đăng ký lại của riêng bạn bằng cách thực hiện wp_deregister_script ('jquery').

function xyz_scripts() {
    wp_enqueue_script('jquery');
}
add_action('wp_enqueue_scripts', 'xyz_scripts');