0

我正在尝试将 nivoslider 手动安装到 wordpress 主题,以便我可以将 nivoslider 作为选项添加到主题选项面板。最初我只需要它来处理硬编码的图像,但我不断收到这个 js 错误 $("#slider").nivoSlider is not a function。

包括 Nivo 滑块,并且该文件的路径与 jquery 版本 1.7.1 一样。文件的两个路径都可以正常工作,因此包含了所有必要的 js。在浏览器中渲染后,我将在下面粘贴整个标题。文件路径是本地的,因此无法从外部访问

<?php
/**
 * The Header for our theme.
 *
 * Displays all of the <head> section and everything up till <div id="main">
 *
 * @package WordPress
 * @subpackage GPSite
 * @since Starkers 3.0
 */
global $theme_shortname;
global $mm;
$mm = get_option($theme_shortname."_maintenance_mode");

// If maintenance mode is on and we're not on the homepage, then redirect to the homepage
if($mm && !is_front_page() && !current_user_can('level_10')) {
  //wp_redirect( get_bloginfo("url") );
}
?>
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<title><?php wp_title( '&nbsp;', true, 'right' ); ?></title>


<!-- For iPhone 4 -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="<?php bloginfo("template_url"); ?>/images/apple-touch-icon-114.png">
<!-- For iPad 1-->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="<?php bloginfo("template_url"); ?>/images/apple-touch-icon-72.png">
<!-- For iPhone 3G, iPod Touch and Android -->
<link rel="apple-touch-icon-precomposed" href="<?php bloginfo("template_url"); ?>/images/apple-touch-icon-64.png">
<!-- For Nokia -->
<link rel="shortcut icon" href="<?php bloginfo("template_url"); ?>/images/apple-touch-icon-64.png">
<!-- For everything else -->
<link rel="shortcut icon" href="<?php bloginfo("template_url"); ?>/images/favicon.ico">

<?php
if(class_exists("MultiPostThumbnails") && (is_single() || is_page()))
{
    if(MultiPostThumbnails::has_post_thumbnail($post->post_type, 'secondary-image'))
    {
        $thumbnail = wp_get_attachment_image_src ( MultiPostThumbnails::get_post_thumbnail_id ($post->post_type, "secondary-image", $post->ID ),array(1024,9999));
        ?>
<style type="text/css">
#top
{
    background-image: url("<?php print $thumbnail[0];?>") !important;
    background-position: 50% 0;
    background-repeat: no-repeat;
}
</style>
        <?php

    }
}


?>

<?php
/*
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
<link type="text/css" rel="stylesheet" media="print" href="<?php print get_bloginfo("template_url")."/css/print.css"; ?>" />
 * */

if($_COOKIE['high_contrast'])
{
    ?>
    <link id="high-contrast-stylesheet" type="text/css" title="high-contrast" rel="stylesheet" href="<?php print get_bloginfo("template_url")."/css/high-contrast.css"; ?>" >
    <?php
}
?>

<!-- http://t.co/dKP3o1e -->
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, target-densitydpi=160dpi, initial-scale=1.0">

<!-- For all browsers -->
<link rel="stylesheet" href="<?php bloginfo( 'stylesheet_url' ); ?>">
<link rel="stylesheet" media="print" href="<?php bloginfo("template_url"); ?>/css/print.css">

<!-- For progressively larger displays -->

<link rel="stylesheet" href="<?php bloginfo("template_url"); ?>/css/992.css">
<?php
/* WHEN RESPOND IS WORKING USE THIS
<!-- For progressively larger displays -->
<link rel="stylesheet" media="only screen and (min-width: 480px)" href="<?php bloginfo("template_url"); ?>/css/480.css">
<link rel="stylesheet" media="only screen and (min-width: 600px)" href="<?php bloginfo("template_url"); ?>/css/600.css">
<link rel="stylesheet" media="only screen and (min-width: 768px)" href="<?php bloginfo("template_url"); ?>/css/768.css">
<link rel="stylesheet" media="only screen and (min-width: 992px)" href="<?php bloginfo("template_url"); ?>/css/992.css">
*/
?>
<?php
/*
 * <!-- For Retina displays -->
<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (min-device-pixel-ratio: 1.5)" href="css/2x.css">
*/
?>
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<script type="text/javascript" src="<?php bloginfo("template_url"); ?>/js/modernizr-1.5.min.js"></script>
<?php wp_enqueue_script("jquery"); ?>
<?php
    /* We add some JavaScript to pages with the comment form
     * to support sites with threaded comments (when in use).
     */
    if ( is_singular() && get_option( 'thread_comments' ) )
        wp_enqueue_script( 'comment-reply' );

    /* Always have wp_head() just before the closing </head>
     * tag of your theme, or you will break many plugins, which
     * generally use this hook to add elements to <head> such
     * as styles, scripts, and meta tags.
     */
    wp_head();
?>
<script type="text/javascript">
jQuery(window).load(function() {
    jQuery('#slider').nivoSlider({
        effect:'random', //Specify sets like: 'fold,fade,sliceDown'
        slices:15,
        animSpeed:500, //Slide transition speed
        pauseTime:5000,
        startSlide:0, //Set starting Slide (0 index)
        directionNav:true, //Next & Prev
        directionNavHide:true, //Only show on hover
        controlNav:true, //1,2,3…
        keyboardNav:true, //Use left & right arrows
        pauseOnHover:true, //Stop animation while hovering
        captionOpacity:0.8 //Universal caption opacity
    });
});
</script>
</head>
<!--[if lt IE 7 ]> <body <?php body_class("ltie7"); ?>> <![endif]-->
<!--[if IE 7 ]>    <body <?php body_class("ie7"); ?>> <![endif]-->
<!--[if IE 8 ]>    <body <?php body_class("ie8"); ?>> <![endif]-->
<!--[if IE 9 ]>    <body <?php body_class("ie9"); ?>> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <body <?php body_class(); ?>> <!--<![endif]-->
<!--<div class="push">-->
<div class="wrapper">
    <header id="top">

        <div class="inner">
            <div id="slider" class="nivoSlider">
                <img src="http://192.168.200.74/~wadem/gpsite/slide.png" alt="Slide 1" width="957" height="280" />
                <img src="images/slide2.jpg" alt=""  />
            </div>

页面上安装了 2 个版本的 jquery,相互冲突。拿起这个的第一件事是 nivo 滑块。一位老开发人员留在页脚的旧版本中,这意味着 jquery 是从 $ 和 jQuery 运行的,这显然 nivoslider 真的不喜欢。

完全愚蠢,我不能自己回答问题。Justet 最终在我的帐户上遇到了更多未回答的问题。梳理出来

4

3 回答 3

1

页面上安装了 2 个版本的 jquery,相互冲突。拿起这个的第一件事是 nivo 滑块。一位老开发人员留在页脚的旧版本中,这意味着 jquery 是从 $ 和 jQuery 运行的,这显然 nivoslider 真的很讨厌

于 2012-05-10T07:29:23.687 回答
0

我认为脚本中给出的链接是错误的。你也没有给出 nivoslider 样式链接。将以下代码放在您的标题中,而不是您添加的行中。

<!-- Include the Nivo Slider CSS file -->
<link rel="stylesheet" href="<?php bloginfo("template_url"); ?>/scripts/nivoslider/nivo-slider.css" type="text/css" media="screen" />
<!-- Include the Nivo Slider JS file -->
<script src="<?php bloginfo("template_url"); ?>/js/nivoslider/jquery.nivo.slider.pack.js" type="text/javascript"></script>

确保路径正确。希望这会奏效。

编辑: 请参阅此链接以设置 jQuery Nivo 滑块

于 2012-05-09T14:48:00.390 回答
0
$("#slider").nivoSlider is not a function

是一个典型的 jQuery 错误,与错误的脚本加载顺序或缺少脚本有关。

您发布的标头代码与我们几乎无关。将Firebug与 Firefox 一起使用,或者在 Chrome、Safari 或 IE8 中使用开发人员工具来查看您的网站上加载的内容以及 JS 错误。

确保您在functions.php 中正确地将jQuery 和其他脚本排入队列并wp_head在header.php 中使用。见http://codex.wordpress.org/Function_Reference/wp_enqueue_script

于 2012-05-09T14:50:41.327 回答