jQuery in Wordpress

kaiser

Hello Leute,

ich probier gerade alles für mein (Online-)Portfolio vorzubereiten und hab mir einmal eine saubere header.php und eine index.php gebastelt.

Nachdem ich gerne ein jQuery-Carousel einbinden würde und von Javascript absolut keine Ahnung habe, hätte ich ein paar Fragen. Mir fehlt nämlich ein wenig die Grunderklärung, wie ich die Dinge a d richtigen Stelle einbinde:

[COLOR=Blue]1a) Ist die Einbindung so richtig? [/COLOR]
[COLOR=Blue]1b) gehört der Code unterhalb der Aufrufe in die functions.php?
1c) Wie/Wo könnte ich mit <?php wp_enqueue_script[/COLOR][COLOR=Blue]([/COLOR][COLOR=Blue]'jquery'[/COLOR][COLOR=Blue])[/COLOR][COLOR=Blue]; ?> das Script aus dem Wp-Core aufrufen um Ladezeiten zu sparen?[/COLOR]

Ich hab in meiner header.php folgende Aufrufe & Code drinnen:

PHP

[COLOR=DimGray]/* JAVASCRIPT */[/COLOR]
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/[COLOR=DeepSkyBlue]jquery.js[/COLOR]"></script>
[COLOR=DimGray]<!-- jQuery PlugIns -->[/COLOR]
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/[COLOR=DeepSkyBlue]jcarousellite.js[/COLOR]"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/[COLOR=DeepSkyBlue]easing.js[/COLOR]"></script>


<script type="text/javascript">
[COLOR=DimGray]<!-- jQuery: jCarousel Lite -->[/COLOR]
$(function() {
    $(".[COLOR=Lime]anyClass[/COLOR]").jCarouselLite({
        btnNext: ".[COLOR=Red]next[/COLOR]",
        btnPrev: ".[COLOR=Red]prev[/COLOR]"
    });
});
</script>

Alles anzeigen

Dankeschön!

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

Alphawolf

Das

PHP

<?php wp_enqueue_script('jquery'); ?>

fügst du irgendwo VOR dem wp_head() ein, dann kannst du dein Aufruf

HTML

<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery.js"></script>

löschen. Die jQuery-Plugin-Dateien lädst du irgendwo NACH dem wp_head().

Und generell würde ich statt

Code

[COLOR="Blue"]$[/COLOR](".anyClass")

lieber

Code

[COLOR="Blue"]jQuery[/COLOR](".anyClass")

verwenden. So gehst du möglichen Problemen mit anderen Frameworks wie mootools oder PrototypeJS aus dem Weg...

kaiser

Hey Alphawolf,

Danke für den Tip mit $ vs. jQuery. Funktioniert auch bestens, nur mit dem hook hab ich meine Probleme:

PHP

[COLOR=DimGray]<!-- JAVASCRIPT AUS DEM WP-CORE -->[/COLOR]
[COLOR=Red]<?php wp_enqueue_script('jquery'); ?>[/COLOR]
[COLOR=DimGray]<!-- jQuery PlugIns -->[/COLOR]
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jcarousellite.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/easing.js"></script>


<script type="text/javascript">
[COLOR=DimGray]<!-- jQuery: jCarousel Lite -->[/COLOR]
$(function() {
    jQuery(".anyClass").jCarouselLite({
        btnNext: ".next",
        btnPrev: ".prev",
        visible: 1,
        easing: "bounceout",
        speed: 1000
    });
});
</script>
[COLOR=Red]<?php wp_head(); ?>[/COLOR]
</head>

Alles anzeigen

funktioniert irgendwie nicht, weil er mir dann die css-classes bei meiner <ul> verwirft... Die Reihenfolge sollte ja eigentlich stimmen, oder?

Alphawolf

Das wp_head() kommt in deinem Fall direkt nach <?php wp_enqueue_script('jquery'); ?>

kaiser

Funktioniert. Sehr fein. Dankeschön!

header.php:

PHP

[COLOR=DimGray]<!-- JAVASCRIPT -->[/COLOR]
<?php
    wp_enqueue_script('jquery');
    wp_head();
?>
[COLOR=DimGray]<!-- jQuery PlugIns -->[/COLOR]
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jcarousellite.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/easing.js"></script>


<script type="text/javascript">
[COLOR=DimGray]<!-- jQuery: jCarousel Lite -->[/COLOR]
jQuery(function() {
    jQuery(".anyClass").jCarouselLite({
        btnNext: ".next",
        btnPrev: ".prev",
        visible: 1,
        easing: "easeinout",
        speed: 800
    });
});


</script>


</head>

Alles anzeigen

index.php:

PHP

<div class="span-24">
        [COLOR=DimGray]<!-- CAROUSEL DIV -->[/COLOR]


    <div class="span-1"><button class="prev">&laquo;</button></div>
    <div class="span-22 anyClass">
        <ul>
            <li><img src="http://example.com/wp-content/uploads/screenshot1.png" style="float: left;" alt="" width="290px" height="auto" ></li>
            <li><img src="http://example.com/wp-content/uploads/screenshot2.png" style="float: left;" alt="" width="290px" height="auto" ></li>
            <li><img src="http://example.com/wp-content/uploads/screenshot3.png" style="float: left;" alt="" width="290px" height="auto" ></li>
            <li><div class="carouselcontent" style="float: left;" width="870px;" height="auto" ><p>hier kommt der content<?php the_content(); ?></p></div></li>
        </ul>
    </div>
    <div class="span-1 last"><button class="next">&raquo;</button></div>


        [COLOR=DimGray]<!-- ENDE CAROUSEL-DIV -->[/COLOR]
    </div>

Alles anzeigen

wusa

jQuery wird nicht ausgeführt

Hallo Zusammen,

ich habe hier auch ein Problem mit jQuery.

Ich habe folgenden Code in der header.php

PHP

...
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />


<?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?> 


<?php wp_enqueue_script('jquery'); ?>


<?php wp_head(); ?>




<script type="text/javascript">
     $(document).ready(function(){        
        $('#faq').find('dd').hide().end().find('dt').click(function() {
            $(this).next().slideToggle();
        });
    });
</script>


</head>
...
<body>

Alles anzeigen

Und dies hier in meiner sidebar.php

Code

...
<dl class="faq">
        <dt>AA</dt>
        <dd>Auto Answer (Modem)</dd>
        <dd>Auto Answer (Modem)</dd>
        <dd>Auto Answer (Modem)</dd>
        <dd>Auto Answer (Modem)</dd>
        <dt>AAE</dt>
        <dd>Allgemeine Anschalte-Erlaubnis</dd>
        <dd>Allgemeine Anschalte-Erlaubnis</dd>
        <dt>AARP</dt>
        <dd>Appletalk Address Resolution Protocol</dd>
        <dd>Appletalk Address Resolution Protocol</dd>
        <dd>Appletalk Address Resolution Protocol</dd>
    </dl>
...

Alles anzeigen

Die Liste wird angezeigt allerdings wird keinerlei JS ausgeführt.

Habt ihr eine Ahnung was ich falsch gemacht habe?

In einer separaten Testseite funzt es ohne Probleme.

gruß|wusa

Alphawolf

Ersetz mal alle $() mit jQuery()-Aufrufe.

Und der Selektor $('#faq') selektiert eine id 'faq', dein dl ist aber mit einer Klasse 'faq' ausgezeichnet. :)

wusa

Okay,
vielen Dank erstmal.

Das mit der id/klasse habe ich schon berichtigt.

Kannst du mir erklären was e smit dem $() / jQuery() auf sich hat?

Das Script funzt noch nicht ganz. Beim Clicken wird mir jetzt nur noch der jeweils erste Listenpunkt angezeigt???

REGA1976

$() ist nur die Abkürzung für jQuery()

Es wird aber Probleme mit anderen Frameworks geben, falls du diese mal einsetzen möchtest oder ein Plugin diese braucht. Daher ist die sichere Variante jQuery().

Willkommen! Melden Sie sich an oder registrieren Sie sich.

jQuery in Wordpress

Jetzt mitmachen!