在到处阅读有关使用 jQuery 和 Wordpress 的正确方法之后：http: //scribu.net/wordpress/optimal-script-loading.html http://www.ericmmartin.com/5-tips-for-using-jquery-与-wordpress/
我想出了这段代码：
首先是functions.php
add_action('init', 'deregister_wp_jq');
add_action('init', 'register_my_jquery');
add_action('init', 'enqueue_my_jquery');
add_action('init', 'register_my_scripts');
add_action('wp_footer', 'print_my_scripts');
function deregister_wp_jq () {
wp_deregister_script('jquery');
}
function register_my_jquery ()
{
wp_register_script('my-jquery', "http" . ($_SERVER['SERVER_PORT'] == 443 ? "s" : "") . "://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js", array(), '1.7.2', true);
wp_register_script('my-jquery-ui', "http" . ($_SERVER['SERVER_PORT'] == 443 ? "s" : "") . "://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js", array('my-jquery'), '1.7.2', true);
}
function enqueue_my_jquery () {
wp_enqueue_scripts('my-jquery');
wp_enqueue_scripts('my-jquery-ui');
}
function register_my_scripts() {
wp_register_script('setNavigation', get_template_directory_uri() . '/js/jquery.setNavigation.js', array('my-jquery'), null, true);
wp_register_script('spasticNav', get_template_directory_uri() . '/js/jquery.spasticNav.mod.js', array('my-jquery', 'my-jquery-ui', 'setNavigation'), null, true);
}
function print_my_scripts() {
wp_print_scripts('spasticNav');
wp_print_scripts('setNavigation');
}
这是 spasticNav，我想使用的插件：
// JavaScript Document
(function($) {
$.fn.spasticNav = function(options) {
options = $.extend({
overlap : 20,
speed : 500,
reset : 1500,
color : '#b80606',
easing : 'easeOutExpo'
}, options);
return this.each(function() {
var nav = $(this), currentPageItem = $('#selected', nav), blob, reset;
$('<li id="blob"></li>').css({
width : currentPageItem.outerWidth(),
height : currentPageItem.outerHeight() + options.overlap,
left : currentPageItem.position().left,
top : currentPageItem.position().top - options.overlap / 2,
backgroundColor : options.color
}).appendTo(this);
blob = $('#blob', nav);
$('li:not(#blob)', nav).hover(function() {
// mouse over
clearTimeout(reset);
blob.animate({
left : $(this).position().left,
width : $(this).width()
}, {
duration : options.speed,
easing : options.easing,
queue : false
});
});
});
// end each
};
})(jQuery);
jQuery(function()
{
jQuery("#nav").spasticNav();
});
然后这是 jquery.setNavigation.js
function setNavigation() {
var path = window.location.pathname;
path = path.replace(/\/$/, "");
path = decodeURIComponent(path);
$(".nav a").each(function () {
var href = $(this).attr('href');
if (path.substring(0, href.length) === href) {
$(this).closest('li').addClass('active');
}
});
}
$(function () {
setNavigation();
});
我头疼，背痛，不管怎么疼，花了好几个小时来解决这个问题，但仍然没有用。请帮我。我尝试了不同教程等中的所有内容，但没有。
PS：我添加了设置活动状态的功能
- - - - - - - - - - - - - - - - - - - - - 更新 - - - - ----------------------
好的，所以经过另外 12 个小时左右在 Google 上搜索并调试代码后，我终于找到了问题所在。它与字体有关，如下所述： Lava Lamp navigation jQuery Firefox
这是我现在在functions.php中使用的代码
function my_scripts_method() { // Creates the my_scripts_method function
wp_deregister_script('jquery'); // Deregisters the built-in version of jQuery
wp_register_script('jquery', 'http' . ($_SERVER['SERVER_PORT'] == 443 ? 's' : '') . '://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js', false, null, true); // Registers a CDN hosted version. If browsing on a secure connection, use HTTPS.
wp_enqueue_script('jquery'); // Activates the jQuery script
wp_register_script('jquery-ui', 'http' . ($_SERVER['SERVER_PORT'] == 443 ? 's' : '') . '://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js', false, null, true); // Registers a CDN hosted version. If browsing on a secure connection, use HTTPS.
wp_enqueue_script('jquery-ui'); // Activates the jQuery script
wp_register_script('spasticNav', get_template_directory_uri() . '/js/jquery.spasticNav.mod.js', false, null, true); // Registers your javascript file
wp_enqueue_script('spasticNav'); // Actives your javascript file
}
add_action('wp_enqueue_scripts', 'my_scripts_method'); // Tells WordPress to run the my_scripts_method function
这适用于 jquery.spasticNav.mod.js
// JavaScript Document
(function($) {
jQuery.fn.spasticNav = function(options) {
options = jQuery.extend({
overlap : 20,
speed : 500,
reset : 1500,
color : '#b80606',
easing : 'easeOutExpo'
}, options);
return this.each(function() {
var nav = jQuery(this), currentPageItem = jQuery('#selected', nav), blob, reset;
jQuery('<li id="blob"></li>').css({
width : currentPageItem.outerWidth(),
height : currentPageItem.outerHeight() + options.overlap,
left : currentPageItem.position().left,
top : currentPageItem.position().top - options.overlap / 2,
backgroundColor : options.color
}).appendTo(this);
blob = jQuery('#blob', nav);
jQuery('li:not(#blob)', nav).hover(function() {
// mouse over
clearTimeout(reset);
blob.animate({
left : jQuery(this).position().left,
width : jQuery(this).width()
}, {
duration : options.speed,
easing : options.easing,
queue : false
});
});
});
// end each
};
})(jQuery);
jQuery(function() {
jQuery.noConflict();
jQuery(document).ready(function() {
document.onreadystatechange = function () {
if (document.readyState == "complete") {
jQuery('#nav').spasticNav();}}});});
这是错误：Uncaught TypeError: Cannot read property 'left' of null
它指的是这些陈述：
left : currentPageItem.position().left,
top : currentPageItem.position().top - options.overlap / 2
我希望你能帮助我，因为我已经查明了这个问题。
--------------------------------- 更新 2 - 已修复 ------------- ----------------------
好的，事实证明，在网站的静态版本中，为了将选择的内容提供给 spasticNav，我使用了：
<li> <a href="#acasa" id="selected">Acasa</a> </li>
WP 已经提供了一个自动更改状态的脚本，它通过添加类 .current_page_item 来实现。因此，我相应地修改了这一行：
var nav = jQuery(this), currentPageItem = jQuery('#selected', nav), blob, reset;
var nav = jQuery(this), currentPageItem = jQuery('.current_page_item', nav), blob, reset;