Как добавить javascript на сайт wordpress

Недавно я нашел следующий javascript из другого потока на этом форуме;

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

(Я бы связался с OP, но, к сожалению, потерял страницу).

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

Код делает именно то, что я хочу сделать – теоретически, теперь я совершенно совершенно не знаком с js, так что это очень сложная область для меня – пожалуйста, возьми меня на это.

Когда я отправляю код в functions.php, он заставляет весь мой сайт перестать работать, я предполагаю, потому что он не может его прочитать или есть конфликт?

Итак, моя первая мысль, глядя на jsfiddle, была версия js и что она указана как не обернутая. Если я меняю любой из них, код не работает .. ..so 1. Я делаю ошибку newb, пытаясь включить несовместимые js в мои функции.php (возможно, да?) И 2. есть ли явное изменение, которое я могу сделать чтобы это работало в моих functions.php?

Я искал это часами и уверен, что смогу заставить это работать с некоторыми настройками?

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. ie jquery ); }); ?> 

В wordpress вы в ject свои файлы javascript в свою тему, используя wordpress api / hooks. метод, который вы хотите, это wp_enqueue_script . Вот документы

Он используется следующим образом:

 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. ie jquery ); } 

В зависимости от версии php у вас есть встроенная функция:

 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. ie jquery ); }); 

Из сценария, предоставленного @atmd, работал следующий код.

 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. ie jquery ); }); 

Необходимым условием было то, что скрипт находился в папке / functions / темы используемой темы. Исходный код, размещенный на сайте, отлично работает.