Adventskalender Tag 23: Tag-Cloud auf mobilen Geräten in Dropdown umwandeln

Bei einem Projekt gab es den Wunsch, einen Teil der Navigation und eine Linkliste jeweils auf mobilen Endgeräten in ein Dropdown umzuwandeln. Dieses sollte aber kein echtes SELECT sein, da die Styles auf das Layout farblich angepasst werden sollten. Die Verwendung eines SELECT hat zusätzliche den Nachteil, dass die Inhalte doppelt in die Seite eingefügt werden müssen oder recht komplexe JavaScript Funktionen notwendig ist. Ich habe mir also eine recht elegante Variante überlegt, die ich euch kurz vorstellen möchte.

Die Schlagwörter-Wolke auf mobilen Geräten

Ich möchte für diesen Beitrag das Schlagwörter-Wolke-Widget als Beispiel nehmen, denn auch dieses ist auf mobilen Geräten nicht wirklich optimal. Erst vor ein paar Tagen hatte mich ein Kollege gefragt, wer denn die Tag-Cloud auf mobilen Geräten überhaupt verwendet bzw. verwenden kann, da die Links sehr klein sind und sehr nahe beieinanderliegen. Meine Tag-Cloud sieht z.B. wie folgt aus:

Weiterlesen →

Adventskalender Tag 22: Beiträge aus einem anderen Blog per oEmbed einbinden

Mit der neuen WordPress Version 4.4 wurde eine Funktion eingeführt, die ich mir bisher noch nicht angesehen habe. Der Adventskalender ist ein guter Grund und auch gleich ein sehr guter Anwendungsfall dafür. Denn bisher habe ich noch keine Übersichtsseite mit allen Beiträgen. Wieso also nicht mal das Feature ansehen und gleich hierfür einsetzen.

Was ist dieses oEmbed eigentlich

Ein kleiner Exkurs für die Anfänger unter meinen Lesern. Wer von euch schon einmal ein Video von YouTube oder anderen Plattformen einbinden wollte, der Stand bestimmt schon häufiger vor der Frage, wie dies am besten funktioniert. Auch in den letzten Tagen kam diese Frage mal wieder in einer Facebook-Gruppe auf. Der einfachste Weg ist die Verwendung der „Embeds“, die WordPress hierfür anbietet. Hierzu gehören auch die sogenannten oEmbed, bei denen man einfach nur die URL einzubindenden URL in den Editor einfügt.

Weiterlesen →

Adventskalender Tag 21: Bilder beim Upload automatisch verschlagworten

Im Beitrag von gestern haben wir ja gesehen, wie wir einem Bild Schlagwörter hinzufügen können. Die beiden beschriebenen Wege sind allerdings schon recht aufwändig, wenn man viele Bilder verschlagworten möchte. Wäre es nicht schön, wenn das einfacher, im besten Fall sogar automatisch funktioniert? Genau das habe ich in etwa 4-5h ausgetüftelt und möchte euch das Ergebnis gerne präsentieren.

Bilder verschlagworten

Die Idee dahinter ist, dass man die Bilder schon vor dem Upload zu WordPress verschlagwortet. Wer beispielsweise Adobe Bridge oder ähnliche Programme zur Verwaltung seiner Bilder einsetzt, der verwendet eventuell schon hierbei Schlagwörter, um die Bilder zu gruppieren. Auch Windows bietet eine recht einfache Methode an, um Schlagwörter zu vergeben. Entweder über „Rechtsklick -> Eigenschaften -> Details“ oder über den Detailbereich im Explorer (hier an Beispiel von Windows 10):

Weiterlesen →

Adventskalender Tag 20: Eine Taxonomie-Galerie erstellen

Vor einiger Zeit hatte jemand in einer Anfrage in einer Gruppe folgendes Problem beschrieben: Es sollte möglich sein, Bilder mit einer Kategorie oder einem Schlagwort versehen zu können und dieses dann zu verwenden, um eine automatische Galerie zu füllen. Wenn man die normale Funktion zum Erstellen einer Galerie verwendet, dann ist diese statisch. Kommt ein neues Bild hinzu, muss man die Galerie manuell um die ID des neuen Bildes erweitern oder aber die Galerie löschen und neu einfügen. Genau das war aber recht umständlich. Ein neues Bild sollte erscheinen, sobald es mit der entsprechenden Taxonomie (Kategorie oder Schlagwort) markiert wurde.

Die Verschlagwortung von Bildern ermöglichen

Zuerst einmal war es notwendig, eine Möglichkeit zu schaffen, einem Bild eine Kategorie oder ein Schlagwort zuzuordnen. Da es sich bei jedem Bild um einen Post-Type „attachment“ handelt, ist das im Grunde auch recht einfach. Nur ist diese Möglichkeit standardmäßig nicht vorgesehen. Es ist aber nur ein Funktionsaufruf notwendig, um es doch zu ermöglichen:

Weiterlesen →

Adventskalender Tag 19: Selbst gehostete Web Fonts einbinden

Auf meinen Aufruf zum Vorschlag von Themen für die letzten Tage vor Weihnachten bekam ich die Bitte, doch mal auf die Einbindung von Web Fonts einzugehen, die nicht bei Google Fonts gehostet sind und die auch nicht über eine URL von einem anderen CDN eingebunden werden können. Das möchte ich in diesem Artikel gerne tun und auch zeigen, was man hierbei nicht tun sollte.

Eine Web Font selbst hosten

Ein weiterer beliebter Anbieter von kostenfreien Fonts ist Font Squirrel. Hier kann man Schriften herunterladen um sie dann selbst einzubinden. Sehen wir uns also mal am Beispiel der Schrift Aleo an, wie das genau funktioniert.

Weiterlesen →

Adventskalender Tag 18: Eigene CSS-Datei im visuellen Editor verwenden

Das heutige Thema ist wieder eines, was ich mit gemischten Gefühlen schreibe. Ich habe schon sehr häufig folgende Frage gehört: Wie kann ich meine Styles aus dem Frontend im visuellen Editor nutzen? Die Antwort auf diese Frage ist relativ einfach und ich möchte sie hier auch kurz beantworten. Am Ende des Artikels versuche ich aber noch zu erklären, was die Gefahr dabei ist.

Eine eigene CSS-Datei einbinden

Die Lösung für die Frage ist ziemlich einfach. Es gibt genau für diesen Zweck eine Funktion, die die Einbindung einer solchen CSS-Datei ermöglicht. Die Funktion heißt add_editor_style() und wird die folgt eingesetzt:

Weiterlesen →

Adventskalender Tag 17: Einen eigenen Shortcode erstellen am Beispiel eines Countdown

Heute kann es ja eigentlich nur ein Thema geben. Richtig, Star Wars 😉 Da ich heute Nacht in der Mitternachtsvorstellung war und gestern keine Zeit zum Schreiben hatte, kommt der Artikel auch etwas später. Und keine Angst, ich werde hier nichts spoilern 🙂

Ich hatte schon länger vor, einen Artikel zum Thema Shortcodes zu schreiben und was bietet sich da besseres an, als ihn gleich mit Star Wars zu kombinieren 🙂 Nachdem Episode VII heute angelaufen ist, können wir schon mal anfangen, die Tage bis zu Episode VIII zu zählen. Das wollen wir in Form eines Countdown machen, den wir über einen Shortcode einbinden.

Einen einfachen Shortcode definieren

Einen Shortcode über die Shortcode API zu definieren ist im Grunde ganz einfach. Man muss lediglich mit der Funktion add_shortcode() einen Namen für den Shortcode definieren und eine Callback-Funktion hierfür. Ein einfacher Shortcode sieht wie folgt aus:

Weiterlesen →

Adventskalender Tag 16: Google Web Fonts ohne Plugin verwenden

Am Freitag kam auf einem Workshop für WordPress-Neulinge die Frage auf, wie man einfach die Schriftart für einen Bereich der Seite ändern kann. Hierzu gibt es selbstverständlich viele fertige Plugins. Die Teilnehmer hatten zu diesem Zeitpunkt aber noch keine Plugins behandelt, sondern waren gerade dabei, ihr erstes Child-Theme zu schreiben. Ich möchte hier also kurz zeigen, dass es wirklich sehr einfach ist, eine Web Font einzubinden und die Schritte, die am Freitag besprochen wurden, noch einmal wiederholen, damit die Teilnehmer die einzelnen Schritte noch einmal nachvollziehen können. Aber keine Angst, auch für die fortgeschrittenen habe ich im Anschluss noch ein paar Tipps, die ihr vielleicht noch nicht kennt 🙂

1. Child-Theme erstellen

Als erstes wurde ein Child-Theme erstellt. Hierzu benötigt man in einfachsten Fall nur eine style.css Datei mit einem Import-Befehl. Möchten wir z.B. das Theme TwentyFifteen erweitern, legen wir z.B. in einem Unterordner wp-content/theme/adventskalender/ an und darin dann eine Datei style.css mit minimal folgendem Inhalt:

Weiterlesen →

Adventskalender Tag 15: Meta-Boxen schnell und einfach umsetzen

Im WP LETTER von gestern wurde ein Artikel verlinkt, in dem ein sehr einfacher Weg beschrieben wird, um eine Meta-Box zu erstellen. Auch ich habe vor einigen Monaten einen ähnlichen Ansatz umgesetzt, ihn aber bisher noch nicht vorgestellt. Das möchte ich nun an dieser Stelle nachholen und euch zeigen, wie einfach Meta-Boxen sind.

Wiederverwendung von Code

Ein wichtiges Prinzip in der Programmierung ist das DRY-Prinzip (Don’t repeat yourself). Dabei werden Codeteile, die man häufiger verwendet in Funktionen oder Klassen implementiert, um Redundanzen zu vermeiden und die Pflege des Codes zu vereinfachen.

Als ich das erste Mal mit Meta-Boxen zu tun hatte war ich nicht zufrieden damit, dass man viele Funktionen und Überprüfungen ständig dupliziert und für jede Meta-Box neu umsetzen muss. Ich habe daher versucht, diese in einer Basisklasse zu vereinen. Darüber hinaus habe ich zusätzlich ein Interface definiert, um eine falsche Implementierung dieser Klasse zu vermeiden.

Weiterlesen →

Adventskalender Tag 14: Ein einfaches Widget schreiben

Ich habe bei den letzten Projekten sehr häufig für bestimmte Funktionen ein Widget geschrieben. Im heutigen Beitrag möchte ich euch kurz erklären, wie einfach es ist, ein eigenes Widget zu schreiben, welche Funktionen man dafür benötigt und worauf man dabei achten sollte.

Die Basis für jedes Widget

Ein Widget kann entweder in einem Theme oder in einem Plugin implementiert werden. Ich verwende eigentlich fast immer ein Plugin dafür, da ich das Widget dann für ein anderes Projekt wiederverwerten kann. Den CSS-Code für die Ausgabe im Frontend speichere ich hingegen meistens im Theme. Für den Artikel werden wir alles im Plugin speichern.

Ein Widget ist ganz vereinfacht gesagt eine PHP-Klasse, die die Klasse WP_Widget erweitert. Sie implementiert dabei in der Regel folgende vier Funktionen:

Weiterlesen →