使用Zurb Foundation与wordpress不会发生冲突

Question

I am currently developing a custom theme using foundation and _s I had a few questions.I have followed this tutorial Here enqued all my script etc and now its working.

My only concern is the jquery, on some forums is says that i have to deregister the jquery and then register another one etc. On some forums its says that i have to use a non conflict mode while others tell me just to enque it and thats it. what is proper practice in this case? I am not looking for a temporary solution I would like this theme to update without issue or breaking in the future.

In the case of using the non conflict method. I have created a file named foundation.js and have enqued it in the functions.php file with this code:

jQuery.noConflict();
jQuery(document).ready(function($) {
    $(document).foundation();
});

Is this the right method?

Answer 1

The jQuery library included with WordPress is set to the noConflict() mode. In noConflict() mode, the global $ shortcut for jQuery is not available. So in foundation.js you can just use:

jQuery(document).ready(function ($) {
    jQuery(document).foundation();
});

check this link from the Codex

Answer 2

The documentation is sketchy, but this should be the correct way, at least it works for me:

In functions.php:

function my_enqueue_foundation() {
    wp_register_script('foundation', get_template_directory_uri() . '/js/foundation.min.js','','1.1', true);
    wp_enqueue_script('foundation');
}
add_action( 'wp_enqueue_scripts', 'my_enqueue_foundation' );

Then initialize foundation in footer.php

<?php wp_footer(); ?>


<script> jQuery(document).foundation(); </script>

Answer 3

If you followed the tutorial you linked to ( github ) you're all set. In the theme's functions.php file foundation JS and an init script are enqueued:

function awesome_theme_scripts(){
    // scripts here ...
    wp_enqueue_script( 'foundation-js', get_template_directory_uri() . '/foundation/js/foundation.min.js', array( 'jquery' ), '1', true );
    wp_enqueue_script( 'foundation-init-js', get_template_directory_uri() . '/foundation.js', array( 'jquery' ), '1', true );
    // more scripts...
}

The latter contains the noConflict code and initializes Foundation:

jQuery(document).ready(function($) {
    $(document).foundation();
});