Erstellen eines Shortcode-Umschalters für die WordPress-FAQ-Seite

Nachdem ich kurz mein erstes Thema auf Themeforest gestartet hatte, das "Elegant WordPress Business Theme", beschloss ich, einige Tutorials und Code zu teilen, wie ich einige der großartigen Funktionen des Themas erstellt habe.

Ich werde Sie nicht durch jeden einzelnen Schritt führen, um jeden Code zu erklären, weil er so einfach zu verstehen ist, sondern Ihnen alles bieten, was Sie zum Ausschneiden / Einfügen der Shortcodes in Ihr eigenes Thema benötigen (noch! Besser!).

Der Umschalt-Funktionscode

Das Erstellen des Toggle-Shortcodes ist sehr einfach. Alles, was wir tun müssen, ist, unserer Datei functions.php eine Shortcode-Funktion hinzuzufügen, die zwei Optionen bietet: Titel und Farbe. Auf diese Weise können Sie beim Hinzufügen des Shortcodes den anklickbaren Titel für den Umschalteffekt und die Farbe auswählen, sodass Sie Ihrem Umschalter verschiedene Farboptionen hinzufügen können, wie Sie unter meinem Demo-Link oben sehen können, wo ich ein Weiß und ein hinzugefügt habe grauer Stil, damit Menschen diesen abwechselnden Farbeffekt erzeugen können.

Kopieren Sie einfach den Shortcode und fügen Sie ihn in Ihre Datei functions.php ein:

// Registriere die Umschalt-Shortcode-Funktion toggle_shortcode ($atts, $content = null) {extract (shortcode_atts (Array ('title' => 'Click To Open', 'color' => ''), $atts)); Rückkehr '
 '. esc_html ($title). '
 '. do_shortcode (wp_kses_post ($content)). '
 '; } add_shortcode ('toggle', 'toggle_shortcode');

Schalten Sie JavaScript, CSS und Bilder um

Unten finden Sie den gesamten Code, den ich zum Erstellen der Schalter in meinem Premium-WordPress-Design verwendet habe, wenn Sie das gleiche Aussehen erzielen möchten.

Javascript

Hier ist das Javascript. Sie können dies in Ihre custom.js-Datei oder in Ihren Theme-Header einfügen.

Wichtig: Stellen Sie sicher, dass Sie die jQuery-Bibliothek bereits einschließen, da sie für den Rest von js benötigt wird :)

jQuery (Funktion ($) {$ (Dokument) .ready (Funktion () {$ (".toggle_container") .hide (); $ (".toggle-Trigger") .click (Funktion () {$ (this) .toggleClass ("active") .next (). slideToggle ("normal"); return false;});});});

CSS

Hier ist das CSS. Fügen Sie es einfach in Ihre style.css-Datei ein

/ * toggle * / .toggle-trigger {margin: 0px! wichtig; Schriftgröße: 18px; Polsterung: 10px; Polsterung links: 30px; Hintergrundfarbe: #F5F5F5; Hintergrundbild: URL-Adresse ('images / shortcodes / toggle-plus.png'); Hintergrundposition: 10px Mitte; Hintergrundwiederholung: keine Wiederholung; } .toggle-trigger a {color: #333; Textdekoration: keine; Bildschirmsperre; } .toggle-Trigger zu: hover {color: #0489B7; Textdekoration: unterstreichen; } .toggle-trigger.active {Hintergrundbild: URL-Adresse ('images / shortcodes / toggle-minus.png')! wichtig; Hintergrundposition: 10px Mitte; Hintergrundwiederholung: keine Wiederholung; } .toggle_container {Überlauf: versteckt; Polsterung: 20px 10px; }}

Bilder

Unten sehen Sie die beiden Bilder des Funktionscodes. Klicken Sie einfach mit der rechten Maustaste und klicken Sie auf "Bild speichern unter", um die Bilder im Bildordner Ihres Themas zu speichern.

Verwenden Sie den Funktionscode

Nachdem Sie den gesamten erforderlichen Code für den Funktionscode hinzugefügt haben, können Sie Ihre Switches einfach wie folgt in Ihre Site einbetten:

Your Toggle Title
Toggle Content

Zu faul? Holen Sie sich das Thema!

Klicken Sie auf das Bild unten, um mein Premium-Thema zu sehen und es zu kaufen. 🙂