web-dev-qa-db-ja.com

ワードプレスにjquery-ui効果を正しく含める方法

私は私のワードプレスのテーマにjqueryのUI効果（より具体的にはシェイク効果）を含めることを試みてきました。これまでのところ、私はjQueryスクリプトを含めることしかできませんでしたが、私は本当にuiスクリプトをどこに置くべきか、そしてそれらをどのようにエンキューするべきかについての手がかりがありません。

これは私が持っているコードです。明らかにうまくいきません。

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

ご協力いただきありがとうございます！

jquerywp-enqueue-script
24
dabito

WordPressにはjQuery UIライブラリが含まれていますが、UI/Effectsライブラリは含まれていません。そのライブラリは独立していてスタンドアロンです。 effects.core.jsファイルのコピーを含めて、それを個別にエンキューする必要があります。

命名の一貫性を保つために、キューに入れるときはjquery-effects-coreと名付ける必要があります。

このように含めることができます。

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

編集 ：この答えはWordPress 3.3以前に書かれたもので、今ではコアの一部としてさまざまなエフェクトライブラリが含まれています。現在使用する必要があるエフェクトライブラリの一部を単純にエンキューできます。

これらのファイルのスラッグリストはwp-includes/script-loader.phpにありますが、コアのスラッグはjquery-effects-coreです。

wp_enqueue_script("jquery-effects-core");
35
Otto

@dabito、

あなたのスクリプトを正しくロードしていません...あなたのテーマテンプレートファイルの中でwp_enqueue_script()を呼ばないでください（これはheader.phpのようです）。この関数は別のフックから呼び出す必要があります。

テーマのfunctions.phpファイルに、次のコードを配置します。

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

両方のスクリプトが正しく登録されていれば、（ヘッダーに適切な<script />タグを追加することによって）それらを正常にロードするはずです。そうすれば、他のJavaScriptコードも機能するはずです。

スクリプトの admin 側にスクリプトを追加したい場合は、代わりにadmin_enqueue_scriptsにアクションを追加してください。

8
EAMann

Googleから直接jQuery UI全体をエンキューすることもできます。これが私のやり方です。

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

JQueryはjQuery UIの依存関係として記載されているので、手動でエンキューする必要はありません。 WordPressが自動的にそれを行います。

7
Rodrigo Sieiro

このjQueryライブラリにはデフォルトのロードがないようです（全リスト ここ ）。そのため、スクリプトをキューに入れる前に 登録 /する必要があります。

3
editor

ちょっとしたコツ。スクリプトをエンキューすると、管理パネルを含むサイト全体がエンキューされます。スクリプトを管理パネルに表示したくない場合は、フロントエンドのサイトにのみ含めることができます。

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

add_action( 'wp_enqueue_scripts', 'my_add_frontend_scripts');
3
Tareq

ここでのすべての答えは、それらが機能している間、技術的に間違っています。

Jquery-uiや他のライブラリを含める正しい方法はそれらをあなた自身のスクリプトの dependencies として含めることです。

パフォーマンスツールがこれらの依存関係をチェックして、スクリプトの読み込み順序を変更してサイトを最適化することがあるため、これは重要です。

そのため、jqueryとjquery-uiを使用する場合は、独自の.jsスクリプトファイルを作成し、依存関係をリストにしてこのようにエンキューします。使用しているライブラリごとに別々のエンキューコマンドは不要です。

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

依存関係として追加するために利用可能なすべてのスクリプトのリストをここで見つけることができます： https://developer.wordpress.org/reference/functions/wp_enqueue_script/

0
Dave Hilditch