Manuelle Installation von Nivoslider auf WordPress funktioniert nicht

Lesezeit: 8 Minuten

Manuelle Installation von Nivoslider auf WordPress funktioniert nicht
Steve Smith

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

  • Sie mussten wahrscheinlich nicht Ihren gesamten Header-HTML posten … akzeptieren Sie auch einen Teil Ihrer Antwort

    – Ben Everard

    9. Mai 2012 um 14:40 Uhr

  • Es gibt eine Menge darin, die Konflikte verursachen kann, und es ist besser, als wenn Leute mich bitten, mehr Zeug hinzuzufügen. Ich akzeptiere Antworten, die mein Problem sortieren. Ich habe ein paar offene Fragen auf meinem Konto, die no1 lösen konnte. Ich habe es geschafft, ein paar selbst zu reparieren, aber anscheinend ist meine Punktzahl nicht hoch genug, um sie selbst zu beantworten

    – Steve Smith

    9. Mai 2012 um 14:46 Uhr


  • Können Sie Ihren header.php-Code ohne Rendern im Browser angeben?

    – Lib

    9. Mai 2012 um 15:12 Uhr

  • den Header für die gerade header.php-Datei bis zum erforderlichen Punkt ausgetauscht.

    – Steve Smith

    9. Mai 2012 um 15:15 Uhr

  • Ich habe den Link im jQuery- und Nivoslider-Stil in Ihrem Code nicht gesehen. Es fehlt! Überprüfen Sie Ihren Code, Alter.

    – Lib

    9. Mai 2012 um 15:24 Uhr

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

$("#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

  • jquery funktioniert bereits für andere Plugins. Ich füge die Dateien wie in diesem Artikel erklärt in die Warteschlange ein return-true.com/2010/09/… Wenn ich über die vom Browser gerenderten Pfade auf die Dateien zugreife, greifen sie einwandfrei zu und der einzige Fehler, den ich erhalte, ist der oben gepostete, der normalerweise ein Fehler ist, der mit dem Fehler beim Laden eines relevanten Skripts zusammenhängt, aber sie werden alle ohne Fehler geladen

    – Steve Smith

    9. Mai 2012 um 15:06 Uhr

Manuelle Installation von Nivoslider auf WordPress funktioniert nicht
Libin

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

  • – Lib

    9. Mai 2012 um 14:54 Uhr

  • Nö, bekomme nur einen jQuery is not defined Fehler sowie den anderen jetzt

    – Steve Smith

    9. Mai 2012 um 15:02 Uhr

  • Anstatt jquery.nivo.slider.js versuchen Sie es mit jquery.nivo.slider.pack.js auf dem Drehbuch. Stellen Sie sicher, dass sich die Datei auch in Ihrem Ordner befindet.

    – Lib

    9. Mai 2012 um 15:05 Uhr


994000cookie-checkManuelle Installation von Nivoslider auf WordPress funktioniert nicht

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy