如何将javascript添加到wordpress网站
How to add javascript to a wordpress site
最近我从这个论坛上的另一个线程中找到了以下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 几乎是全新的,所以这对我来说是一个非常棘手的领域 - 请耐心等待。
当我在函数中发布代码时.php它会导致我的整个网站停止工作,我认为是因为它无法读取它或存在一些冲突?
所以我的第一个想法,看 jsfiddle 是 js 版本,它被指定为没有包装。如果我更改其中任何一个,代码都不起作用。..所以1.我是否犯了一个新手错误,试图在我的函数中包含不兼容的js.php(可能是的?)和2。我可以进行简单的更改以使它在我的函数中工作.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
);
});
?>
在wordpress中,您可以使用wordpress api/hooks将javascript文件注入到主题中。 您想要的方法是 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. 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
);
});
从 @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/文件夹中。发布的原始代码在网站上完美运行。
相关文章:
- Ajaxify Wordpress网站与社交插件
- 鼠标光标-用于wordpress网站
- 在向下滚动JS/HTML/CSS wordpress网站时替换徽标图像
- Sombody在wordpress网站中注入了一些链接.可能是什么起源?这是怎么发生的
- 在Wordpress网站的图像点击上播放随机声音
- 我想每隔10秒刷新一个wordpress网站
- 如何将javascript添加到wordpress网站
- 如何禁用右键单击WordPress网站
- 使用谷歌分析'Wordpress网站的用户ID功能
- wordpress和packery.js的集成问题,但适用于非wordpress网站
- 如何解决wordpress网站的速度问题
- 用JS更改Wordpress网站上的按钮
- 从Wordpress网站构建Cordova应用程序需要哪些文件
- 使用 HTTP 请求对 WordPress 网站进行更改
- 在WordPress网站上获取推文
- 如何将JS添加到我的WordPress网站
- 我的谷歌地图自定义标记不会显示在我的WordPress网站中
- 我想在我的WordPress网站上使用计数器.js但它显示错误
- 将自定义标记添加到自定义样式的 Google Maps API v3 for Wordpress 网站
- 我的Wordpress网站上的所有jQuery脚本都无法正常工作