web-dev-qa-db-ja.com

フッターにJSを追加する方法

その直前にfooter.phpにコードを追加しましたが、コードは実行されません。 functions.phpを使った方がいいと思いますが、しばらくの間このようにテストしたいのですが。ありがとう

<script type="text/javascript">
   window.onload = function () {  
        jQuery(document).ready(function(){ console.log('insider');
            var alphabeticallyOrderedDivs = $('.team-member').sort(function(a, b) {     
                return  String.prototype.localeCompare.call($(a).data('lastname').toLowerCase(), 
                $(b).data('lastname').toLowerCase()); 
    });
    var container = $('.ulcontainer');
    container.detach().empty().append(alphabeticallyOrderedDivs);
    $('body').append(container);})
   }(jQuery);

</script>
javascriptfooter
2
Pipoo

Wp_enqueue_script（）を使用して

スクリプトをJSファイルに追加してから、それを正しくエンキューすることができます。あなたが自分のスクリプトをfile.jsに追加したと思います。フッターにエンキューする方法は次のとおりです。

add_action('wp_enqueue_scripts','my_script_callback');
function my_script_callback(){
    wp_enqueue_script(
        'my-script',
        get_template_directory_uri().'/folder/file.js',
        array(jquery),
        null,
        true
    );
}

wp_enqueue_script() の最後の引数は、スクリプトをフッターに入れるかどうかを決定します。

4番目の引数はオプションであり、依存関係の配列です。

wp_footer()を使って

自分のスクリプトをフッターに直接印刷することもできますが、これは常に最善の方法とは限りません。しかし、これはあなたがそれを行う方法です：

function my_script() { ?>
    <script type="text/javascript">
        // Your code here
    </script><?php
}
add_action( 'wp_footer', 'my_script' );

JQueryがそのようなメソッドで準備されるのを待つ必要があるというわけではありません。これを使用して、まだエンキューされていない場合は、jQueryをエンキューできます。

add_action( 'wp_head' , 'enqueue_jquery' )
function enqueue_jquery() {
    wp_enqueue_script( 'jquery' );
}
3
Jack Johansson