Làm thế nào để bao gồm chính xác các hiệu ứng jquery-ui trên wordpress

Tôi đã cố gắng đưa các hiệu ứng ui jquery (cụ thể hơn là hiệu ứng lắc) vào chủ đề wordpress của tôi. Cho đến nay, tôi chỉ có thể bao gồm tập lệnh jQuery, nhưng tôi thực sự không biết nơi đặt các tập lệnh ui và làm thế nào để thu hút chúng.

Đây là mã tôi có. Nó rõ ràng không hoạt động:

    <?php wp_enqueue_script("jquery"); ?>
<?php wp_enqueue_script("jquery-ui-core"); ?>
<?php wp_head(); ?>
<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url'); ?>" />
<script type="text/javascript">
    var $j = jQuery.noConflict();
    $j(document).ready(function() {
        $j("#manita-imagen").mouseover(function(){
            //$j(this).animate({ opacity: "hide" })
            // alert('asd');
            $j(this).effect("shake", { times:3 }, 300);
        });
    });

 </script>

Cảm ơn bạn đã giúp đỡ!

Mặc dù WordPress bao gồm các thư viện UI của jQuery, nhưng nó không bao gồm thư viện UI / Effects. Thư viện đó là riêng biệt và độc lập. Bạn sẽ cần bao gồm một bản sao của tệp Effects.core.js và ghi lại nó một cách riêng biệt.

Lưu ý rằng bạn nên đặt tên cho nó là jquery-Effects-core khi en-queueing nó, để đặt tên nhất quán.

Bạn có thể bao gồm nó như thế này:

wp_enqueue_script("jquery-effects-core",'http://example.com/whatever/effects.core.js', array('jquery'), '1.8.8');

Chỉnh sửa : Câu trả lời này được viết trước WordPress 3.3, hiện bao gồm các thư viện hiệu ứng khác nhau như một phần cốt lõi. Bạn có thể chỉ cần liệt kê các phần của thư viện hiệu ứng mà bạn cần sử dụng ngay bây giờ.

Danh sách các con sên cho các tệp này có thể được tìm thấy trong wp-gồm / script-loader.php, nhưng sên của lõi là jquery-effect-core.

wp_enqueue_script("jquery-effects-core");

@dabito,

Bạn đang không tải tập lệnh của mình ngay ... Đừng gọi wp_enqueue_script()bên trong tệp mẫu chủ đề của bạn (điều này trông giống như vậy header.php). Bạn cần gọi hàm này từ một hook riêng.

Trong functions.phptệp chủ đề của bạn , đặt mã sau đây:

function my_add_frontend_scripts() {
        wp_enqueue_script('jquery');
        wp_enqueue_script('jquery-ui-core');
}
add_action('wp_enqueue_scripts', 'my_add_frontend_scripts');

Nếu cả hai tập lệnh được đăng ký đúng cách, điều này sẽ tải chúng tốt (bằng cách thêm các <script />thẻ thích hợp vào tiêu đề. Sau đó, mã JavaScript khác của bạn sẽ hoạt động.

Nếu bạn muốn thêm tập lệnh vào phía quản trị viên , hãy thêm hành động của bạn vào admin_enqueue_scriptsthay thế.

Bạn cũng có thể liệt kê toàn bộ UI jQuery trực tiếp từ Google. Đây là cách tôi làm điều đó:

wp_enqueue_script('jquery-ui', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js', array('jquery'), '1.8.6');

Và vì jQuery được liệt kê như một phần phụ thuộc cho Giao diện người dùng jQuery, nên bạn không cần phải thủ công nó. WordPress sẽ làm điều đó tự động cho bạn.

Dường như không có tải mặc định cho thư viện jQuery này (danh sách đầy đủ ở đây ) vì vậy bạn có thể sẽ phải đăng ký tập lệnh trước khi bạn xử lý nó.

Chỉ là một mẹo nhỏ. Khi bạn enqueue script của bạn, nó enqueue cho toàn bộ trang web bao gồm cả bảng quản trị. Nếu bạn không muốn tập lệnh trong bảng quản trị, bạn chỉ có thể đưa chúng vào trang web ở lối vào.

function my_add_frontend_scripts() {
    wp_enqueue_script('jquery');
    wp_enqueue_script('jquery-ui-core');
}

add_action( 'wp_enqueue_scripts', 'my_add_frontend_scripts');

Tất cả các câu trả lời ở đây, trong khi chúng hoạt động, đều sai về mặt kỹ thuật.

Cách chính xác để bao gồm jquery-ui và các thư viện khác là đưa chúng vào như phần phụ thuộc của tập lệnh của riêng bạn.

Điều này rất quan trọng, bởi vì các công cụ hiệu suất có thể kiểm tra các phụ thuộc này để thay đổi thứ tự tải tập lệnh của bạn để tối ưu hóa trang web.

Vì vậy, nếu bạn muốn sử dụng jquery và jquery-ui, hãy tạo tệp tập lệnh .js của riêng bạn và liệt kê nó như thế này, với các phụ thuộc được liệt kê - không cần một lệnh enqueue riêng cho mỗi thư viện bạn đang sử dụng:

wp_enqueue_script('your-script-handle', 
 plugins_url('your-script-file.js', __FILE__), 
 array('jquery', 'jquery-effects-core', 'jquery-ui-core')
);

Bạn có thể tìm thấy danh sách tất cả các tập lệnh có sẵn để thêm dưới dạng phụ thuộc tại đây: https://developer.wordpress.org/reference/fifts/wp_enqueue_script/