如何将 javascript 添加到 wordpress 网站

Question

最近我从这个论坛的另一个帖子中找到了以下 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 版本，它被指定为 no wrap in 。如果我更改其中任何一个，代码都不起作用.. ..so 1. 我是否在尝试在我的 functions.php 中包含不兼容的 js 时犯了一个新错误（可能是的？）& 2. 我可以做一个简单的改变吗让它在我的functions.php中工作？

我已经为此搜索了好几个小时，并且确定我可以通过一些调整来解决这个问题吗？

仅供参考；函数.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
);
});
?>

Answer 1

从@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. i.e. jquery
);
});

前提条件是脚本位于所用主题的 /functions/ 文件夹中。发布的原始代码在网站上完美运行。

Answer 2

在 wordpress 中，您可以使用 wordpress api/hooks 将您的 javascript 文件注入您的主题。你想要的方法是wp_enqueue_script。 Here are the docs

它是这样使用的：

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

根据你的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. i.e. jquery
    );
});