Manuelle Installation von Nivoslider auf WordPress funktioniert nicht

Question 1

Ich versuche, Nivoslider manuell in einem WordPress-Design zu installieren, damit ich Nivoslider als Option zum Design-Optionsfeld hinzufügen kann. Anfangs brauche ich es nur, um mit hartcodierten Bildern zu arbeiten, aber ich erhalte immer wieder diesen js-Fehler $ (“#slider”). nivoSlider ist keine Funktion.

Der Nivo-Schieberegler ist enthalten und der Pfad zur Datei funktioniert wie bei jquery Version 1.7.1. Beide Dateipfade funktionieren, sodass alle erforderlichen js enthalten sind. Ich füge den gesamten Header unten nach dem Rendern im Browser ein. Die Dateipfade sind lokal und daher nicht von außen zugänglich

<?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="https://stackoverflow.com/questions/10518228/<?php%20bloginfo("charset' ); ?>" />
<title><?php wp_title( '&nbsp;', true, 'right' ); ?></title>


<!-- For iPhone 4 -->
<link rel="apple-touch-icon-precomposed"  href="https://stackoverflow.com/questions/10518228/<?php%20bloginfo("template_url"); ?>/images/apple-touch-icon-114.png">
<!-- For iPad 1-->
<link rel="apple-touch-icon-precomposed"  href="https://stackoverflow.com/questions/10518228/<?php%20bloginfo("template_url"); ?>/images/apple-touch-icon-72.png">
<!-- For iPhone 3G, iPod Touch and Android -->
<link rel="apple-touch-icon-precomposed" href="https://stackoverflow.com/questions/10518228/<?php%20bloginfo("template_url"); ?>/images/apple-touch-icon-64.png">
<!-- For Nokia -->
<link rel="shortcut icon" href="https://stackoverflow.com/questions/10518228/<?php%20bloginfo("template_url"); ?>/images/apple-touch-icon-64.png">
<!-- For everything else -->
<link rel="shortcut icon" href="https://stackoverflow.com/questions/10518228/<?php%20bloginfo("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="https://stackoverflow.com/questions/10518228/<?php%20bloginfo("stylesheet_url' ); ?>" />
<link type="text/css" rel="stylesheet" media="print" href="<?php%20print%20get_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%20print%20get_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="https://stackoverflow.com/questions/10518228/<?php%20bloginfo("stylesheet_url' ); ?>">
<link rel="stylesheet" media="print" href="https://stackoverflow.com/questions/10518228/<?php%20bloginfo("template_url"); ?>/css/print.css">

<!-- For progressively larger displays -->

<link rel="stylesheet" href="https://stackoverflow.com/questions/10518228/<?php%20bloginfo("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="https://stackoverflow.com/questions/10518228/<?php%20bloginfo("template_url"); ?>/css/480.css">
<link rel="stylesheet" media="only screen and (min-width: 600px)" href="https://stackoverflow.com/questions/10518228/<?php%20bloginfo("template_url"); ?>/css/600.css">
<link rel="stylesheet" media="only screen and (min-width: 768px)" href="https://stackoverflow.com/questions/10518228/<?php%20bloginfo("template_url"); ?>/css/768.css">
<link rel="stylesheet" media="only screen and (min-width: 992px)" href="https://stackoverflow.com/questions/10518228/<?php%20bloginfo("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="https://stackoverflow.com/questions/10518228/<?php%20bloginfo("pingback_url' ); ?>" />
<script type="text/javascript" src="https://stackoverflow.com/questions/10518228/<?php%20bloginfo("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>

Auf der Seite waren 2 Versionen von jquery installiert, die miteinander in Konflikt standen. Das erste, was dies aufgriff, war Nivo Slider. Ein alter Entwickler hat in der Fußzeile eine Legacy-Version hinterlassen, was bedeutet, dass jquery von $ und jQuery ausgeführt wurde, was Nivoslider anscheinend wirklich nicht mag.

Völlig dumm, ich kann die Fragen nicht einfach selbst beantworten. Am Ende bleiben nur noch mehr Fragen zu meinem Konto unbeantwortet. Sortiere es aus

Question 2

Auf der Seite waren 2 Versionen von jquery installiert, die miteinander in Konflikt standen. Das erste, was dies aufgriff, war Nivo Slider. Ein alter Entwickler hat in der Fußzeile eine Legacy-Version hinterlassen, was bedeutet, dass jquery von $ und jQuery ausgeführt wurde, was Nivoslider anscheinend wirklich hasst

Question 3

$("#slider").nivoSlider is not a function

ist ein typischer jQuery-Fehler, der mit einer falschen Skript-Ladereihenfolge oder einem fehlenden Skript zu tun hat.

Der von Ihnen gepostete Header-Code ist für uns größtenteils irrelevant. Verwenden Feuerwanze Verwenden Sie mit Firefox oder in Chrome oder Safari oder IE8 die Entwicklertools, um zu sehen, was auf Ihrer Website geladen wird, und die JS-Fehler.

Stellen Sie sicher, dass Sie jQuery und andere Skripte in der functions.php korrekt einreihen und verwenden wp_head in header.php. Sehen http://codex.wordpress.org/Function_Reference/wp_enqueue_script

Question 4

Die im Skript angegebenen Links sind meiner Meinung nach falsch. Außerdem haben Sie den Link zum Nivoslider-Stil nicht angegeben. Fügen Sie den folgenden Code anstelle der hinzugefügten Zeile in Ihre Kopfzeile ein.

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

Stellen Sie sicher, dass die Pfade korrekt sind. Hoffe, das wird funktionieren.

BEARBEITEN:
Verweisen Sie auf diesen Link für Einrichten des jQuery Nivo Slider

Manuelle Installation von Nivoslider auf WordPress funktioniert nicht

Menu

Verwandte Inhalte

Weitere interessante Artikel