Nasıl wordpress üzerinde jquery-ui etkileri doğru şekilde dahil edilir

Wordpress temamda jquery ui efektlerini (daha özel olarak shake efektini) eklemeye çalışıyorum. Şimdiye kadar sadece jQuery komut dosyasını ekleyebildim, ancak kullanıcı arabirimi komut dosyalarını nereye yerleştireceğiniz ve onları nasıl sıkıştıracağınıza dair hiçbir fikrim yok.

Bu benim kodum. Açıkçası çalışmıyor:

    <?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>

Yardımın için teşekkürler!

WordPress, jQuery UI kitaplıklarını içermesine rağmen, UI / Effects kitaplığını içermez. Bu kütüphane ayrı ve bağımsızdır. Effects.core.js dosyasının bir kopyasını eklemeniz ve ayrı bir şekilde sıkıştırmanız gerekir.

Tutarlılığı adlandırmak için, kuyruğa alırken jquery-effects-core olarak adlandırmanız gerektiğini unutmayın.

Bu şekilde ekleyebilirsiniz:

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

Düzenleme : Bu cevap şimdi çekirdeğin bir parçası olarak çeşitli efekt kütüphanelerini içeren WordPress 3.3'ten önce yazılmıştır. Şimdi kullanmanız gereken efekt kütüphanesinin parçalarını basitçe ekleyebilirsiniz.

Bu dosyalar için sümüklü böceklerin listesi wp-include / script-loader.php içinde bulunabilir, ancak çekirdeğin sümüklü böcek jquery-effects-core şeklindedir.

wp_enqueue_script("jquery-effects-core");

, @dabito

Komut dosyalarınızı doğru yüklemiyorsunuz ... wp_enqueue_script()Tema şablonu dosyanızın içinde arama (bu gibi görünüyor header.php). Bu işlevi ayrı bir kancadan çağırmanız gerekir.

Temanızın functions.phpdosyasına aşağıdaki kodu yerleştirin:

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

Her iki komut dosyası da doğru bir şekilde kaydedilmişse, bunlar düzgün bir şekilde yüklenmelidir ( <script />başlığa uygun etiketleri ekleyerek .

Nesnelerin yönetici tarafına komut dosyaları eklemek istiyorsanız, admin_enqueue_scriptsbunun yerine eyleminizi ekleyin .

Ayrıca tüm jQuery UI’yi doğrudan Google’dan da ekleyebilirsiniz. Bu nasıl yaparım:

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

Ve jQuery, jQuery UI için bir bağımlılık olarak listelendiğinden, elle sıkmanız gerekmez. WordPress sizin için otomatik olarak yapacak.

Bu jQuery kütüphanesi için varsayılan bir yükleme görünmüyor ( burada tam liste ), bu yüzden muhtemelen onu kodlamadan önce betiği kaydetmeniz gerekecek .

Sadece küçük bir ipucu. Komut dosyanızı sıkıştığınızda, yönetici paneli de dahil olmak üzere tüm site için geçerlidir. Komut dosyasını yönetici panelinde istemiyorsanız, bunları yalnızca sitenin sonuna ekleyin.

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

add_action( 'wp_enqueue_scripts', 'my_add_frontend_scripts');

Buradaki tüm cevaplar, çalışırken, teknik olarak yanlıştır.

Jquery-ui'yi ve diğer kitaplıkları dahil etmenin doğru yolu, onları kendi komut dosyanızın bağımlılıkları olarak eklemektir .

Bu önemlidir, çünkü performans araçları, sitenizi optimize etmek için komut dosyalarınızın yükleme sırasını değiştirmek için bu bağımlılıkları kontrol edebilir.

Bu nedenle, eğer jquery ve jquery-ui'yi kullanmak istiyorsanız, kendi .js script dosyanızı oluşturun ve bağımlılıkları listelenen şekilde bu şekilde sıkın - kullandığınız her kitaplık için ayrı bir enqueue komutuna gerek yok:

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

Bağımlılıklar olarak eklemek için mevcut tüm komut dosyalarının bir listesini burada bulabilirsiniz: https://developer.wordpress.org/reference/functions/wp_enqueue_script/