首页 文章

Wordpress和jQuery仍然没有运气

提问于
浏览
0

在阅读了所有关于使用jQuery和Wordpress的正确方法之后:http://scribu.net/wordpress/optimal-script-loading.html http://www.ericmmartin.com/5-tips-for-using-jquery-with-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();
});

我头疼,背痛,无论什么,疼痛,花费数小时和数小时来解决这个问题,但是,它仍然不起作用 . 请帮我 . 我尝试了不同教程等的所有内容,但没有 .

P.S . :我添加了设置活动状态的功能

  • (菜单)的元素,但它还没有工作 .

-----------------------------------------更新-------- -----------------------

好的,所以经过12个小时左右的时间在Google上搜索并调试代码后,我终于发现了问题 . 它与font-face有关,如下所述: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();}}});});

这是错误:未捕获的TypeError:无法读取null的属性“left”

它引用了这些陈述:

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;

2 回答

  • 0

    即使你说你想使用正确的方法来使用jQuery,你 functions.php 中需要're not doing it properly at all. What you' ll需要:

    wp_register_script('jquery');
    

    除此之外,你只需要记住WordPress中的jQuery处于noConflict模式 . 因此,始终使用 jQuery 而不是 $ 启动脚本 .

  • 0

    您不需要那么多功能和实现来完成这项工作 . 试试这个:http://gomakethings.com/jquery-wordpress/

相关问题