jQuery hilft Ihnen beim Erstellen attraktiver, interaktiver und benutzerfreundlicher Websites. Für diejenigen, die wenig CSS- und HTML-Kenntnisse haben, klingt jQuery kompliziert, aber mit leicht verständlichen Tutorials kann jeder seiner Website ausgefeilte Effekte hinzufügen. In diesem Artikel listen wir einige der besten jQuery-Tutorials für WordPress-Anfänger auf.
Mit diesen Tutorials lernen Sie nicht nur, wie Sie diese raffinierten jQuery-Skripte zu Ihrer WordPress-Site hinzufügen, sondern Sie haben auch die Möglichkeit, etwas über jQuery und seine Verwendung in WordPress zu lernen. Absoluten Anfängern empfehlen wir zunächst einen Blick in unsere Anleitung zum Hinzufügen von Codeschnipseln in WordPress und zum richtigen Hinzufügen von JavaScript und Stilen in WordPress.
1. So fügen Sie das jQuery-Tabber-Widget in WordPress hinzu
Mit dem Tabber-Widget können Sie Platz in Ihrer Seitenleiste sparen, indem Sie mehrere Widgets in einem einzigen Widget mit Registerkarten kombinieren. In diesem jQuery-Tutorial erfahren Sie, wie Sie ein jQuery-Tabber-Widget als Plug-in erstellen, das einfach zu ändern ist, und Sie können es anpassen, um beliebige Inhalte auf den Registerkarten hinzuzufügen.
2. So fügen Sie ein jQuery-FAQ-Akkordeon in WordPress hinzu
FAQ-Seiten können länger und schwerer zu lesen sein. In diesem jQuery-Tutorial zeigen wir Ihnen, wie Sie mithilfe des jQuery-Akkordeons einen FAQ-Bereich auf Ihrer Website erstellen. Dies schafft eine viel bessere Benutzererfahrung, da die Benutzer die Fragen schnell sehen können, ohne zu viel scrollen zu müssen.
3. So fügen Sie mit jQuery einen glatten Hover-Effekt oben in WordPress hinzu
Für Websites, die Langformartikel veröffentlichen, bei denen ein Benutzer viel scrollen muss, um den vollständigen Inhalt anzuzeigen, bietet eine Schaltfläche oder ein Link, mit dem Benutzer zum Anfang der Seite weitergeleitet werden, eine bessere Benutzererfahrung. In diesem Tutorial zeigen wir Ihnen, wie Sie mit jQuery eine Zurück-nach-oben-Schaltfläche mit einem reibungslosen Scroll-Effekt hinzufügen.
4. So fügen Sie einen jQuery-Tooltip im WordPress-Kommentarformular hinzu
QuickInfos können verwendet werden, um Benutzern hilfreiche Anweisungen oder Informationen bereitzustellen, wenn sie mit der Maus über ein Element fahren. In diesem jQuery-Tutorial zeigen wir Ihnen, wie Sie Ihrem WordPress-Kommentarformular einen Tooltip hinzufügen. Es sieht nicht nur hübsch aus, sondern ermutigt Ihre Benutzer auch, an Diskussionen auf Ihrer Website teilzunehmen.
5. So machen Sie Ihre Videos in WordPress mit FitVids reaktionsschnell
Wenn du YouTube-Videos zu deiner WordPress-Seite hinzufügst, reagieren sie standardmäßig nicht. Selbst wenn Ihr WordPress-Theme responsive ist, wird der Video-Container unverhältnismäßig verzerrt sein, 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 das Fitvids jQuery-Plugin verwenden, um Ihre Videos in WordPress responsive zu machen.
6. So fügen Sie rotierende Testimonials in WordPress hinzu
Wie der Titel schon sagt, zeigen wir Ihnen in diesem Tutorial, wie Sie rotierende Testimonials zu Ihrer WordPress-Site hinzufügen. Sehr nützlich, wenn Sie einen Testimonials-Bereich auf Ihrer Website haben und Testimonials mit einem ordentlichen jQuery-Effekt anzeigen möchten.
7. So fügen Sie ein Slide Panel-Menü in WordPress-Designs hinzu
Ein Schiebereglermenü wird angezeigt, wenn ein Benutzer auf die Menüschaltfläche auf Ihrer Website klickt. In diesem Lernprogramm erfahren Sie, wie Sie mit jQuery mobilfreundliche Schiebereglermenüs erstellen.
8. So fügen Sie Tooltip-Testimonials in WordPress-Designs hinzu
In diesem Tutorial zeigen wir Ihnen, wie Sie Benutzerberichte in jQuery Tooltip anzeigen können. Es basiert auf dem Code, den wir auf der WPBeginner-Videoseite verwendet haben. Anstatt Zeugnisse in Blockzitaten anzuzeigen, zeigt es den Text des Zeugnisses an, wenn ein Benutzer mit der Maus über das Foto des Benutzers fährt.
Wir hoffen, dass Sie einige dieser jQuery-Tutorials auf Ihrer WordPress-Site ausprobieren. Hoffentlich hilft Ihnen dies beim Einstieg in jQuery- und WordPress-Designs. Bitte lassen Sie uns wissen, ob es bestimmte jQuery-Tipps gibt, die Sie in WordPress implementiert sehen möchten. Für Kommentare und Fragen hinterlassen Sie bitte einen Kommentar.
