How to add javascript to a wordpress site

Recently I found the following javascript from another thread on this forum;

var $content=$('div.leg_ol');
var $links=$('.leg_test').hover(function(){
var index= $links.index(this);
$content.stop(true,true).hide().eq(index).fadeIn();
},function(){
$content.stop(true,true).hide().eq(index);
});

(I would link to the OP, but unfortunately have lost the page).

JSFIDDLE: https://jsfiddle.net/mfyctwvs/1/

The code does exactly what I want to do - in theory, now I am pretty much completely new to js, so this is a very tricky area for me - please bear with me on this.

When I post the code in functions.php it causes my whole site to stop working, I assume because it cannot read it or there is some conflict?

So my first thought, looking at jsfiddle was the js version and that it is specified as no wrap in . If I change either of these the code does not work.. ..so 1. Am I making a newb mistake trying to include incompatible js in my functions.php (probably yes?) & 2. is there a straightforward change I can make to get this working in my functions.php?

I have been searching on this for hours & am sure that I could get this working with some adjustments?

FYI; Functions.php

  <?php// Set path to WooFramework and theme specific functions 
$functions_path = get_template_directory() . '/functions/';
$includes_path = get_template_directory() . '/includes/';

// Don't load alt stylesheet from WooFramework
if ( ! function_exists( 'woo_output_alt_stylesheet' ) ) {
function woo_output_alt_stylesheet () {}
}

// WooFramework
require_once ( $functions_path . 'admin-init.php' );    // Framework Init

if ( get_option( 'woo_woo_tumblog_switch' ) == 'true' ) {
//Enable Tumblog Functionality and theme is upgraded
update_option( 'woo_needs_tumblog_upgrade', 'false' );
update_option( 'tumblog_woo_tumblog_upgraded', 'true' );
update_option( 'tumblog_woo_tumblog_upgraded_posts_done', 'true' );
require_once ( $functions_path . 'admin-tumblog-quickpress.php' );  //   Tumblog Dashboard Functionality
}

/*-----------------------------------------------------------------------------------*/


$includes = array(
            'includes/theme-options.php',               // Options panel settings and custom settings
            'includes/theme-functions.php',             // Custom theme functions
            'includes/theme-actions.php',               // Theme actions & user defined hooks
            'includes/theme-comments.php',              // Custom comments/pingback loop
            'includes/theme-js.php',                    // Load JavaScript via wp_enqueue_script
            'includes/theme-plugin-integrations.php',   // Plugin integrations
            'includes/sidebar-init.php',                // Initialize widgetized areas
            'includes/theme-widgets.php',               // Theme widgets
            'includes/theme-advanced.php',              // Advanced Theme Functions
            'includes/theme-shortcodes.php',            // Custom theme shortcodes
            'includes/woo-layout/woo-layout.php',       // Layout Manager
            'includes/woo-meta/woo-meta.php',           // Meta Manager
            'includes/woo-hooks/woo-hooks.php'          // Hook Manager
            );

// Allow child themes/plugins to add widgets to be loaded.
$includes = apply_filters( 'woo_includes', $includes );

foreach ( $includes as $i ) {
locate_template( $i, true );
}

// Load WooCommerce functions, if applicable.
if ( is_woocommerce_activated() ) {
locate_template( 'includes/theme-woocommerce.php', true );
}

    /*-----------------------------------------------------------------------------------*/
/* You can add custom functions below */
/*-----------------------------------------------------------------------------------*/


 add_action( 'init', 'woo_custom_move_navigation', 10 );

function woo_custom_move_navigation () {
// Remove main nav from the woo_header_after hook
remove_action( 'woo_header_after','woo_nav', 10 );
// Add main nav to the woo_header_inside hook
add_action( 'woo_header_inside','woo_nav', 10 );
} // End woo_custom_move_navigation()

/* Testing stuff for mobile */
function woo_load_responsive_meta_tags () {
    $html = '';

    $html .= "\n" . '<!-- Always force latest IE rendering engine (even      in intranet) & Chrome Frame -->' . "\n";
    $html .= '<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />' . "\n";

    echo $html;
} // End woo_load_responsive_meta_tags()


add_action('wp_enqueue_scripts', function () {
wp_enqueue_script(
   'user-scripts', 
   get_template_directory_uri() . '/functions/user-scripts.js', 
   array('jquery') // any script dependancies. i.e. jquery
);
});
?>

回答1:

In wordpress you in ject your javascript files into your theme using the wordpress api/hooks. the method you want is wp_enqueue_script. Here are the docs

It's used like this:

add_action('wp_enqueue_scripts', 'addScript');

function addScript() {
    wp_enqueue_script(
       'script-name', 
       get_template_directory_uri() . '/path-to-your-script.js', 
       array('jquery') // any script dependancies. i.e. jquery
    );
}

Depending on the version of php you have, you can inline the function:

add_action('wp_enqueue_scripts', function () {
    wp_enqueue_script(
       'script-name', 
       get_template_directory_uri() . '/path-to-your-script.js', 
       array('jquery') // any script dependancies. i.e. jquery
    );
});

回答2:

From the script provided by @atmd the following code worked.

add_action('wp_enqueue_scripts', function () {
wp_enqueue_script(
   'script-name', 
   get_template_directory_uri() . '/path-to-your-script.js', 
   array('jquery') // any script dependancies. i.e. jquery
);
});

A precondition required was that the script was located in the /functions/ folder of the theme used. The original code posted works perfectly on the site.