Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Cup
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

8 beste jQuery-Tutorials für WordPress-Anfänger

jQuery hilft Ihnen, interaktive, benutzerfreundliche und schöne Websites zu erstellen. Für diejenigen mit wenig CSS- und HTML-Kenntnissen klingt jQuery kompliziert, aber mit einfach zu befolgenden Tutorials kann jeder seiner Website ausgefallene Effekte hinzufügen. In diesem Artikel werden wir einige der besten jQuery-Tutorials für WordPress-Anfänger auflisten.

Mit diesen Tutorials lernen Sie nicht nur, wie Sie diese raffinierten jQuery-Skripte zu Ihrer WordPress-Website hinzufügen können, sondern Sie erhalten auch die Möglichkeit, jQuery ein wenig zu lernen und wie man es in WordPress verwendet. Absoluten Anfängern empfehlen wir, zunächst einen Blick in unseren Leitfaden zum Hinzufügen von Code-Snippets in WordPress und zum richtigen Hinzufügen von JavaScript und Styles in WordPress zu werfen.

1. Wie man jQuery Tabber Widget in WordPress hinzufügt

jQuery Tabber Widget in WordPress

Mit dem Tabber-Widget können Sie Platz in der Seitenleiste sparen, indem Sie mehrere Widgets in einem einzigen Widget mit Tabs kombinieren. In diesem jQuery-Tutorial erfahren Sie, wie Sie ein jQuery-Tabber-Widget als Plugin erstellen, das einfach zu ändern ist und das Sie anpassen können, um beliebige Inhalte in Tabs hinzuzufügen.

2. Wie man ein jQuery FAQ-Akkordeon in WordPress einfügt

jQuery FAQ Accordion Menu

Seiten mit häufig gestellten Fragen können länger werden und sind schwer zu lesen. In diesem jQuery-Tutorial zeigen wir Ihnen, wie Sie mit dem jQuery-Akkordeon einen FAQ-Bereich auf Ihrer Website erstellen können. Dies schafft eine viel bessere Benutzererfahrung, da die Benutzer in der Lage sein werden, die Fragen schnell zu sehen, ohne zu viel zu scrollen.

3. Wie man in WordPress mit jQuery einen Smooth Scroll to Top-Effekt hinzufügt

Smooth scroll to top effect with jQuery

Für Websites, die lange Artikel veröffentlichen, bei denen der Benutzer viel scrollen muss, um den gesamten Inhalt zu sehen, bietet eine Schaltfläche oder ein Link, der den Benutzer zurück an den Anfang der Seite schickt, ein besseres Benutzererlebnis. In diesem Tutorial zeigen wir Ihnen, wie Sie mit jQuery eine Schaltfläche „Zurück zum Anfang“ mit sanftem Scroll-Effekt hinzufügen können.

4. Hinzufügen von jQuery-Tooltips im WordPress-Kommentarformular

Adding jQuery Tooltips to WordPress Comment Form

Tooltips können verwendet werden, um Benutzern Anweisungen oder nützliche Informationen zu geben, wenn sie mit der Maus auf ein Element zeigen. In diesem jQuery-Tutorial zeigen wir Ihnen, wie Sie Tooltipps zu Ihrem WordPress-Kommentarformular hinzufügen können. Das sieht nicht nur hübsch aus, sondern ermutigt Ihre Nutzer auch, an Diskussionen auf Ihrer Website teilzunehmen.

5. Wie Sie Ihre Videos in WordPress mit FitVids responsive machen

How to make your videos responsive in WordPress using jQuery Fitvids plugin

Wenn Sie YouTube-Videos zu Ihrer WordPress-Website hinzufügen, sind sie standardmäßig nicht responsiv. Selbst wenn Ihr WordPress-Theme responsive ist, wird der Videocontainer unverhältnismäßig schief dargestellt, was zu einer schlechten Benutzererfahrung für Benutzer auf kleineren Geräten und Bildschirmgrößen führt. In diesem Tutorial zeigen wir Ihnen, wie Sie Fitvids jQuery Plugin verwenden, um Ihre Videos in WordPress responsive zu machen.

6. Wie man rotierende Testimonials in WordPress hinzufügt

Wie der Titel schon sagt, zeigen wir Ihnen in diesem Tutorial, wie Sie rotierende Testimonials zu Ihrer WordPress-Website hinzufügen können. Das ist sehr nützlich, wenn Sie auf Ihrer Website einen Bereich für Zeugnisse haben und diese mit einem hübschen jQuery-Effekt anzeigen möchten.

7. Wie man ein Slide Panel Menü in WordPress Themes hinzufügt

Add a slide panel menu in WordPress using jQuery

Ein Slide-Panel-Menü erscheint, wenn ein Benutzer auf die Menü-Schaltfläche auf Ihrer Website klickt. In diesem Tutorial lernen Sie, wie Sie mit jQuery mobilfreundliche Schiebe-Menüs erstellen.

8. Wie man Tooltip-Testimonials in WordPress-Themes hinzufügt

Testimonials in jQuery Tooltip

In diesem Tutorial zeigen wir Ihnen, wie Sie Benutzer-Testimonials in jQuery Tooltip anzeigen können. Es basiert auf dem Code, den wir auf der WPBeginner Videos Seite verwendet haben. Anstatt Testimonials in Blockquotes anzuzeigen, wird der Text des Testimonials angezeigt, wenn ein Nutzer mit der Maus über das Foto des Nutzers fährt.

Wir hoffen, dass Sie einige dieser jQuery-Tutorials auf Ihrer WordPress-Seite ausprobieren werden. Wir hoffen, dass Sie dadurch den Einstieg in die Arbeit mit jQuery und WordPress-Themen finden. Lassen Sie uns wissen, ob es einen speziellen jQuery-Tipp gibt, den Sie gerne in WordPress implementiert sehen würden? Für Feedback und Fragen hinterlassen Sie bitte einen Kommentar.

Offenlegung: Unsere Inhalte werden von unseren Lesern unterstützt. Das bedeutet, dass wir möglicherweise eine Provision verdienen, wenn Sie auf einige unserer Links klicken. Mehr dazu erfahren Sie unter Wie WPBeginner finanziert wird , warum das wichtig ist und wie Sie uns unterstützen können. Hier finden Sie unseren redaktionellen Prozess .

Das ultimative WordPress Toolkit

Erhalte KOSTENLOSEN Zugang zu unserem Toolkit - eine Sammlung von WordPress-bezogenen Produkten und Ressourcen, die jeder Profi haben sollte!

Reader Interactions

3 KommentareEine Antwort hinterlassen

  1. Syed Balkhi

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. adolf witzeling

    Great way to getting started with jQuery-thanks for sharing.

  3. abhisek

    Thank you for the collection but as you know human wants are unlimited so we want more such nice, useful and easy tutorials :-). Btw if we use jquery in menu (Slide panel menu) will that be visible to search engine crawler’s or esle we have to modify the code a bit?

Eine Antwort hinterlassen

Danke, dass du einen Kommentar hinterlassen möchtest. Bitte beachte, dass alle Kommentare nach unseren kommentarpolitik moderiert werden und deine E-Mail-Adresse NICHT veröffentlicht wird. Bitte verwende KEINE Schlüsselwörter im Namensfeld. Lass uns ein persönliches und sinnvolles Gespräch führen.