Als kleines Extra zum Wochenanfang haben wir eine beliebte Methode umgesetzt, Inhalte auf Ihrer Webseite auf Knopfdruck ein-/auszublenden.  Alles, was Sie dafür brauchen ist der FTP Zugang zu Ihrer Website, ein Childtheme und ein wenig Javascript/jQuery!

Worum geht es?

Wer hat nicht schon einmal gesehen, wie auf einer Seite beim Klick auf einen Button auf einmal Bereiche sichtbar wurden, die vorher unzugänglich waren? So etwas wird mithilfe von Javascript möglich. Javascript spricht Elemente Ihrer Seite an und ordnet ihnen Funktionen zu, wie zum Beispiel: „Auf Knopfdruck soll dieser Bereich sichtbar werden.“ Natürlich kann man mit Javascript noch viel mehr schaffen, Slider und Lightboxen werden unter anderem mithilfe von Javascript erstellt. Doch für unser Vorhaben reichen wenige Zeilen JavaScript, dann haben wir einen Button erschaffen, der auf Mausklick Inhalte erscheinen und verschwinden lassen kann.

Mit Javascript erstellte Button

Inhalte werden erst beim Klick sichtbar

Alles beginnt mit der Vorbereitung

Wichtig ist, dass der Button im Child-Theme Ihres Aktiven Themes erstellt wird. Wenn Sie neugierig sind, wie man ein Child-Theme anlegt, lesen Sie unseren Beitrag „Wenn WordPress Themes Kinder kriegen“. Wenn Sie dann im Bilde sind, wie man ein Child-Theme erstellt, legen Sie eines für Ihr aktives Theme an und aktivieren es.

Die Themes und Childthemes innerhalb vom FTP

Nun kümmern Sie sich um die Dateien, die in dem Child-Theme vorhanden sein müssen, damit unser Button funktioniert. Für uns sind für einen Button lediglich die functions.php und zwei Javascript-Dateien im js-Ordner von Bedeutung.

Was Sie benötigen

Zunächst müssen Sie die aktuelle jQuery-Datei von jquery.com herunterladen und in Ihren js-Ordner einfügen. Wählen Sie den obersten Link, der Sie zur Zeit dieses Beitrags die jquery-1.11.3.min.js herunterladen lässt.

Hier gibt es die jQuery-Datei

Sobald Sie diese Datei im js-Ordner haben, können Sie mit der custom.js fortfahren. In ihr erstellen Sie den Button und seine Funktion. Öffnen Sie einen Texteditor Ihrer Wahl (beispielsweise Sublime Text 3 oder NotePad++) und erstellen Sie folgenden Code:

Der Code für den Button

Dieser Code befiehlt einem Abschnitt auf Ihrer Seite, den Sie später wählen, dass er nicht sichtbar sein soll. Dieser Befehl wird immer dann umgekehrt, wenn der Button geklickt wird, der zusätzlich in diesem Code erstellt wird. So einfach lässt sich der Inhalt des Codes erklären, auch wenn er umständlicher aussieht.

Wenn Sie den Code nun genau so in ihren Texteditor geschrieben haben, speichern Sie die Datei unter dem Namen custom.js und packen sie zu der jquery-Datei in den js-Ordner. Diese beiden Dateien müssen nun nur noch in der funktions.php des Childthemes eingebunden und aufgerufen werden. Das alles passiert in diesem kleinen Codeabschnitt, den Sie nun in die functions.php einfügen, die Sie entweder schon vorliegen haben, oder wie die custom.js mithilfe des Texteditors erstellen:

Der Code zum Einbinden der Dateien

Dieser Code sucht die jquery und custom.js Dateien und bindet sie ein. Die functions.php muss direkt in Ihrem Childtheme platziert sein, damit alles funktioniert, nicht wie die js-Dateien im js-Ordner.

Was ist noch zu tun?

Alles, was Sie jetzt noch tun müssen ist, den Bereich, den Sie auf einer Seite oder einem Beitrag mit dem Button auftauchen lassen wollen, zu markieren, damit das Javascript auch weiß, was es verstecken und auftauchen lassen soll. Dafür gehen Sie zuerst auf Seite/Beitrag bearbeiten und wechseln in die Textansicht. Wie sie in dem folgenden Bild sehen können, haben wir in unserer Textansicht vier kleine Änderungen vorgenommen:

Die einzigen Änderungen an Seiten/Beiträgen

Damit grenzen Sie den Bereich ein, der verschwinden soll. Alles, was innerhalb der divs „box“ und „inhalt“ steht, verschwindet und ein Button wird stattdessen erscheinen. Und Sie sind nicht auf einen Button reduziert, suchen Sie sich so viele Bereiche aus, wie Sie brauchen.

Fazit

Das war auch schon alles, was Sie tun müssen, nun können Sie verschiedenste Inhalte Ihrer Website durch eigene Button verstecken.

Quelle Bilder: Eigene Screenshots