2017-08-23 20 views
1

私は、ユーザーが私のWordpressサイトにログインできるようにAnimatedModal JSライブラリを使用しています。私のfunctions.phpjQuery(...)。 Wordpressカスタムテンプレートの機能ではありません

次のように私はキューに入れています:中front.jsで

function smallium__enqueue_scripts() { 
    //lets put in the animated modal 
    wp_enqueue_script('medium-modal', get_template_directory_uri() . '/js/animatedModal.min.js', array('jquery')); 
    wp_enqueue_style('animated-modal', '//cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.min.css'); 
    wp_enqueue_script('medium-js', get_template_directory_uri() . '/js/medium-front.js', array('jquery','medium-modal')); 
} 
add_action('wp_enqueue_scripts', 'smallium__enqueue_scripts'); 

私はanimatedModal()関数を呼び出します。

jQuery(document).ready(function($) { 
    jQuery("#login-anchor").animatedModal(); 
} 

これには、私は、関数呼び出しを行う前に、ライブラリが正しくエンコードされているすべてのページのソースコード内のエラー

Uncaught TypeError: jQuery(...).animatedModal is not a function 

に入手カスタムWordpressのテンプレートを除き、ほとんどのページで正常に動作します私はなぜこれが動作しないカスタムテンプレートでのみわからない。

また、ヘッダーとフッターのみを含む空のテンプレートファイルを作成して、コードがエラーを引き起こす可能性があるかどうかを確認してください。

<?php 
/* Template name: Write */ 
get_header(); ?> 

<?php get_footer(); ?> 
+0

おそらくあなたがページにファイル(プラグインファイル)をロードする前に、「animatedModal」機能を呼び出しています –

+0

準備関数はWPで異なる動作をしますが、最後のフッターで関数を呼び出そうとすると結果が得られます。その後、ウィンドウロードイベントを使うこともできますし、フッタにスクリプトを置くこともできます。 –

+0

コードが実行されたときに '#login-anchor'要素が存在しないことが分かります.HTML要素があることを確認してください。 – JoseAPL

答えて

0

あなたhereを文書としてローカルanimatedModal.min.jsは、</body>前に代わりの<head>にロードする必要があります。

function smallium__enqueue_scripts() { 
    //lets put in the animated modal 
    wp_enqueue_style('animated-modal', '//cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.min.css'); 
    wp_enqueue_script('medium-js', get_template_directory_uri() . '/js/medium-front.js', array('jquery','medium-modal')); 
    wp_enqueue_script('medium-modal', get_template_directory_uri() . '/js/animatedModal.min.js', array('jquery'),false, true); 
} 
add_action('wp_enqueue_scripts', 'smallium__enqueue_scripts'); 
関連する問題