web-dev-qa-db-ja.com

ワードプレステマへのjQueryプラグインのインストール（信じられないほど）

さて、ここで問題となっている プラグインです 私は自分の wordpressテーマのホームページに統合しようとしています（ themeforestから購入した素晴らしい））

Wordpressのエンキュースクリプトを読み終えたら、最初から正しいやり方でやりたいと思います。

functions.phpスニペット：ここに2行追加しました。1行は私のスクリプト "contenthover"を登録するためのもの、もう1行はエンキューするためのものです。また、私はそれがjqueryに依存していることを確認するためにarray('jquery'));を追加しようとしましたが、それは解析/構文phpエラーを生成しました

if (!function_exists('pp_scripts')) {
    function pp_scripts() {

        wp_register_script('flexslider', get_template_directory_uri() . '/js/flexslider.js');
        wp_register_script('isotope', get_template_directory_uri() . '/js/jquery.isotope.min.js');
        wp_register_script('ender', get_template_directory_uri() . '/js/ender.min.js');
        wp_register_script('carousel', get_template_directory_uri() . '/js/carousel.js');
        wp_register_script('tooltip', get_template_directory_uri() . '/js/tooltip.js');
        wp_register_script('popover', get_template_directory_uri() . '/js/popover.js');
        wp_register_script('effects', get_template_directory_uri() . '/js/effects.js');
        wp_register_script('Twitter', get_template_directory_uri() . '/js/Twitter.js');
        wp_register_script('imagebox', get_template_directory_uri() . '/js/imagebox.min.js');
        wp_register_script('contenthover', get_template_directory_uri() . '/js/jquery.contenthover.js');
        wp_register_script('custom', get_template_directory_uri() . '/js/custom.js');

        wp_enqueue_script('flexslider');
        wp_enqueue_script('custom');
        wp_enqueue_script('isotope');
        wp_enqueue_script('ender');
        wp_enqueue_script('imagebox');
        wp_enqueue_script('carousel');
        wp_enqueue_script('Twitter');
        wp_enqueue_script('tooltip');
        wp_enqueue_script('popover');
        wp_enqueue_script('effects');
        wp_enqueue_script('contenthover');

    }
    add_action('wp_enqueue_scripts', 'pp_scripts');
}

次に、初期化コードを試してみましたが、header.phpまたはfooter.phpに挿入してもうまくいきませんでした。 template-homepage-xxx.php。

私の知る限りでは、それがそれらのファイルのどれかに含まれていればうまくいくはずですが、物事をきれいに保つために物事を行うための「ベストプラクティス」の方法ではありません。テーマにはすでにcustom.jsファイルがロードされているので、そこから初期化するのが最善の方法だと思いました。

だからここにcustom.jsのスニペットがあります：それはすでにカルーセル/ effects..etc.etcのためのコードの多くの小さいスニペットを含んでいます。私はjQuery（）と同様に標準の$（）を使ってみました

var $j = jQuery.noConflict();
$j(document).ready(function () {
$j('.d1').contenthover({
    effect:'slide',
    slide_speed:300,
    overlay_background:'#000',
    overlay_opacity:0.8
});
});

エラーと出力：

  1. $（）を使うとfirebugコンソールで未定義のエラーになります。
  2. JQuery（）と$ j（）で私はエラーになります：Firebugコンソールのプロパティ 'toString'へのアクセスが許可されていません。それが関係しているかどうかわからない。
  3. Iveは、間違った順序でロードされるスクリプトに関連する問題である可能性があることを期待して、一連のスクリプトを試しましたが、うまくいきません。
  4. 最後に検討しなければならないのは、ワードプレスで競合が発生する可能性があるかどうかを確認するには、jquery.contenthover.jsファイルを自分で調べる必要がありますか。それは努力して取り組むのが賢いことだろうか？
  5. 私はこの効果がバニラと多分いくつかの巧妙なCSS3でできることを確信しています、しかし、私はwordpressが初めてだと私は後でカスタムスクリプトをインストールすることができるように内外を把握したいです。

不明な点や見たいスクリプトがある場合は、よろしくお願いします。あるいは実際の例で、教えてください。正しい方向へのプッシュだけで何でも大歓迎です。お時間をいただきありがとうございます。

jquerycompatibility
2
TheSabz

次のようなスクリプトをロードできます。

function wpa_90150_scripts() {
    wp_enqueue_script(
        'contenthover', 
        get_template_directory_uri() . '/js/jquery.contenthover.js', 
        array('jquery'), 
        '', 
        true 
    );
    wp_enqueue_script(
        'custom', 
        get_template_directory_uri() . '/js/custom.js', 
        array('jquery','contenthover'), 
        '', 
        true 
    );
}
add_action('wp_enqueue_scripts', 'wpa_90150_scripts');

特にあなたのサイトにロードされている場合、あなたはほとんど正しくやっていると思います。

そして、次のようにjQueryスクリプトを初期化します。

jQuery(document).ready(function($) {
    $('.d1').contenthover({
        effect:'slide',
        slide_speed:300,
        overlay_background:'#000',
        overlay_opacity:0.8
    });
});

私の最初のjQueryスクリプトをWordPressに統合するのにどれだけ苦労したかわかりません！すべてを壊したかった。 jQueryプラグインのドキュメントの多くは、上記で投稿したWordPress方法まで機能しません... jQueryで開き、$変数を関数に渡す。基本的に、WPのjQueryはすでに noConflict mode に設定されているため、正しいラッパーを使用する必要があります。

3
helgatheviking

次の形式で追加してみてください。リクエストを削減するために、すべてのJavaScriptを1つのプラグインファイルに追加することもできます。

add_action( 'wp_enqueue_scripts', 'load_my_files' );

// Register some javascript files. 

function load_my_files() {


  wp_register_script( 'plugins', get_stylesheet_directory_uri() . '/js/plugins.js',array('jquery'),false,true );
  wp_register_script( 'scripts', get_stylesheet_directory_uri() . '/js/script.js',array('plugins'),false,true );


wp_enqueue_script('jquery');
wp_enqueue_script( 'plugins');
wp_enqueue_script('scripts');


}
0
Tom