So fügen Sie einer WordPress-Site Javascript hinzu

Kürzlich habe ich das folgende Javascript aus einem anderen Thread in diesem Forum gefunden;

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);
});

(Ich würde auf das OP verlinken, habe aber leider die Seite verloren).

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

Der Code tut genau das, was ich tun möchte – theoretisch bin ich jetzt ziemlich neu in js, daher ist dies ein sehr kniffliger Bereich für mich – bitte haben Sie etwas Geduld.

Wenn ich den Code in functions.php poste, führt dies dazu, dass meine gesamte Website nicht mehr funktioniert, nehme ich an, weil sie ihn nicht lesen kann oder es einen Konflikt gibt?

Mein erster Gedanke, als ich mir jsfiddle ansah, war die js-Version und dass sie als no wrap in angegeben ist. Wenn ich eines von beiden ändere, funktioniert der Code nicht.. ..also 1. mache ich einen Anfängerfehler, wenn ich versuche, inkompatible js in meine functions.php aufzunehmen (wahrscheinlich ja?) & 2. gibt es eine einfache Änderung, die ich vornehmen kann um dies in meiner functions.php zum Laufen zu bringen?

Ich habe stundenlang danach gesucht und bin mir sicher, dass ich das mit einigen Anpassungen zum Laufen bringen könnte?

Zu Ihrer Information; Funktionen.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
);
});
?>

In WordPress fügen Sie Ihre Javascript-Dateien mithilfe der WordPress-API/Hooks in Ihr Design ein. die Methode, die Sie wollen, ist wp_enqueue_script. Hier sind die Dokumente

Es wird so verwendet:

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
    );
}

Abhängig von Ihrer PHP-Version können Sie die Funktion einbetten:

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
    );
});

Aus dem von @atmd bereitgestellten Skript hat der folgende Code funktioniert.

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
);
});

Voraussetzung war, dass sich das Skript im Ordner /functions/ des verwendeten Themes befand. Der gepostete Originalcode funktioniert perfekt auf der Seite.