Wie füge ich ein jQuery-FAQ-Akkordeon in WordPress hinzu?

Kürzlich hat uns einer unserer Benutzer gefragt, ob es eine Möglichkeit gibt, ein FAQ-Akkordeon auf seiner WordPress-Site hinzuzufügen. Es gibt viele Plugins, mit denen Sie häufig gestellte Fragen oder FAQs in WordPress hinzufügen können. In diesem Artikel zeigen wir Ihnen, wie Sie ein jQuery-FAQ-Akkordeon in Ihre WordPress-Site einfügen.

Was ist Akkordeon??

Im Webdesign ist Akkordeon ein Begriff, der für ein Benutzeroberflächen-Entwurfsmuster verwendet wird, das Registerkarten oder Inhaltsblöcke enthält, die bei Benutzerinteraktion ein- oder ausgeblendet werden. Unter jeder Registerkarte befindet sich Inhalt, der erweitert wird, wenn der Benutzer auf das Menüelement klickt. In einfachen Worten ist es wie ein Menü, das beim Klicken erweitert wird. Wir haben einen ähnlichen Effekt auf unserer kostenlosen WordPress-Blog-Konfigurationsseite verwendet. Unten sehen Sie einen Screenshot eines Beispielakkordeons.

Videoanleitung

Wenn Ihnen das Video nicht gefällt oder Sie weitere Anweisungen benötigen, lesen Sie weiter.

Hinzufügen eines FAQ-Akkordeons für jQuery

Bevor Sie ein jQuery-FAQ-Akkordeon hinzufügen können, müssen Sie sicherstellen, dass Sie einen FAQ-Abschnitt haben. Beginnen Sie mit dem Hinzufügen eines FAQ-Abschnitts, indem Sie unserem Lernprogramm zum Hinzufügen eines FAQ-Abschnitts in WordPress folgen.

Nun fügen wir das jQuery-FAQ-Akkordeon hinzu. WordPress wird mit der jQuery-Bibliothek geliefert, es gibt jedoch keine Jquery-Designs. Wir werden das von Google CDN laden und diese Skripts in WordPress einreihen. Wir werden auch einen Shortcode erstellen, der unsere häufig gestellten Fragen anzeigt. Am wichtigsten ist, dass wir dies alles tun, indem wir ein WordPress-Plugin erstellen.

Erstellen Sie einen Ordner auf Ihrem Desktop und nennen Sie ihn mein Akkordeon. Öffnen Sie den Editor oder einen anderen Texteditor Ihrer Wahl. Erstellen Sie eine Datei mit dem Namen mein-Akkordeon.php und fügen Sie diesen Code ein:

  10, 'orderby' => 'menu_order', 'order' => 'ASC', 'post_type' => 'question',)); // Ausgabe erzeugen $ faq. = ''; // Öffne den Container foreach ($ posts as $ post) // Erzeuge das Markup für jede Frage $ faq. = Sprintf (('
% 1 $ s
% 2 $ s '), $ post-> post_title, wpautop ($ post-> post_content));  $ faq. = ''; // Schließen Sie den Container return $ faq; // Gib den HTML-Code zurück.  add_shortcode ('faq_accordion', 'accordion_shortcode'); 

Öffnen Sie nach dem Speichern der Änderungen an dieser Datei eine neue leere Datei. Speichern Sie es als Akkordeon.js. Als nächstes fügen Sie diesen Code ein und speichern Sie die Datei:

 jQuery (document) .ready (function () jQuery ("# ​​Akkordeon"). Akkordeon ();) (); 

Nun haben wir unser Plugin zum Hochladen bereit. Öffnen Sie Ihren FTP-Client und laden Sie den Ordner für mein Akkordeon in das Verzeichnis / wp-contnt / plugins / auf Ihrer WordPress-Website hoch. Als Nächstes müssen Sie das Plugin aktivieren, indem Sie im WordPress-Adminbereich zu Ihrem Plugin-Bildschirm wechseln.

Hinzufügen einer FAQ-Seite mit Accordion

Um diese FAQs in einem Akkordeon-Format anzuzeigen, müssen Sie eine neue Seite erstellen. Gehe zu Seiten »Neu hinzufügen. Geben Sie Ihrer Seite einen Titel, z. FAQs und geben Sie diesen Shortcode im Seitenbearbeitungsbereich ein:

[faq_accordion]

Speichern und veröffentlichen Sie Ihre Seite und zeigen Sie sie in der Vorschau an. Ihre FAQs werden in einem schönen Akkordeon-Menü angezeigt.

Ändern des Stils und der Farben Ihres Akkordeons

Für die Farben und das Styling verwendet dieses FAQ Accordion die bei Google gehosteten jQuery-UI-Designs. Es ist im Grunde ein Stylesheet, und wenn Sie möchten, können Sie es herunterladen und auf Ihre eigene Website stellen. Die jQuery-Website enthält einen Abschnitt mit jQuery-Benutzeroberflächen mit ein paar gebrauchsfertigen Themen. Wie Sie sehen, haben wir in unserem Plugin das Humanity-Thema verwendet. Sie können es durch eines der verfügbaren Themen wie Glätte, Cupertino usw. ersetzen. Sie können diese Themen auch in Themeroller erstellen oder ändern.

Wir hoffen, dass dieser Artikel Ihnen geholfen hat, ein jQuery FAQ Accordion auf Ihrer WordPress-Website hinzuzufügen. Für Feedback und Fragen hinterlassen Sie bitte einen Kommentar.