Fortschrittsanzeige mit Prozent aus purem CSS

Fortschrittsanzeige mit Prozent aus purem CSS

Bei einem Kundenprojekt brauchte ich sie, die berühmten Fortschrittsanzeigen. Glücklicherweise mussten sie nicht automatisch sein, aber trotzdem, hübsch als Kreis mit einer Prozentanzeige sollten sie schon sein. Das ganze sollte sich auch noch in WordPress integrieren und für den Kunden selbst einfach einsetzbar sein. Daher brauchen wir dazu ein wenig CSS aber auch PHP um für WordPress einen Shortcode zu erstellen. Es ist eben immer so: Je einfacher für den Anwender, desto mehr Aufwand ist es für den Programmierer.

Beispiel einer Fortschrittsanzeige mit Prozent

Beispiel einer Fortschrittsanzeige mit Prozent

Ein Layout für die Fortschrittsanzeige aus CSS

Da wir das Rad nicht jedes Mal neu erfinden müssen, können wir nach kurzer Internetrecherche aus einigen fertigen Lösungen wählen. Ich kenne kein Plugin für WordPress (bei vielen wäre es eh das 73. für eine einfache Lösung), müssen wir kurz und knackig selbst was programmieren.

Ich habe mich einmal für eine einfache CSS-Lösung “Pure CSS Circular Percentage Bar” von CSS-Script entschieden. Also gleich mal die zip-Datei von der Webseite runterladen und entpacken. Eigentlich brauchen wir nur die circle.css für unser Projekt. Doch mit der index.html kannst du dir schon mal ein paar Beispiele anschauen.

Die CSS-Datei für die Fortschrittsanzeige in das WordPress-Theme einbauen

Wenn du in deinem Theme noch keine Datei mit dem Namen circle.css hast kannst du sie einfach in das Verzeichnis /wp-content/themes/themename/ kopieren. Ich benenne diese Dateien gerne um, damit ich sehe, dass sie nicht zum WordPress-Theme selbst gehören und verwende immer mein Kürzel davor, also guru20-circle.css.

Eine kleine Warnung noch: Arbeite niemals mit dem Haupttheme, sondern lege immer ein Child-Theme an. Denn nur so bleibst du “Update sicher”. Also alle deine Änderungen bleiben im Child-Theme erhalten, sobald du das Haupttheme mit einem Update versorgst. Wie du so ein berüchtigtes Kind anlegst, habe ich in einem extra Post Schritt für Schritt erklärt.

So nun müssen wir das CSS auch noch aktivieren, also im head-Element unserer Webseite mit dem link-Element aufrufen. Dazu gibt es drei Lösungen, die ich dir hier anbiete, aber nicht alle sind gleich geeignet und auch nicht gleich elegant.

Das neue CSS in einer bestehenden CSS-Datei importieren

Das ist vielleicht die leichteste Methode, aber auch jene die am leichtesten vergessen wird und zusätzlich durch übersehene und vielfache Verschachtelung (importieren im Import) zu einem Performancekiller werden kann.

Hast du ein Child-Theme (es gilt aber auch beim Haupttheme), dann findest du eine Datei mit dem Namen style.css. Dies ist die Datei mit allen vorhanden CSS-Definitionen deines Themes. Beim Haupttheme ist sie voll mit Infos und bei einem Child-Theme werden nur ein paar zusätzliche Definitionen vorhanden sein. Aber bei beiden musst du als absolut 1. Zeile – noch vor allen anderen, auch vor Bemerkungen – die folgende Zeile einfügen.

Als link-Element in der header.php einbinden

Diese Variante funktioniert auch ganz gut. Denn die header.php erstellt eben das head-Element für dein Theme und meistens auch noch das Menü und ein paar Informationen welche auf jeder Seite deines Blogs vorkommen. Wenn du in deinem Child-Theme noch keine passende Datei hast, dann kopiere dir die entsprechende Datei aus dem Haupttheme in dein Child-Theme und mache sie dann in einem passenden Editor auf. Du wirst dann so etwas ähnliches wie den folgenden Code finden.

Wichtig ist für dich, dass du das Element head und danach das title-Element entdeckst. Besser wäre noch link-element zu finden, welches auf ein Stylesheet verweist. Genauso wie du es im obigen Beispiel in Zeile 23 siehst. Dann brauchst du diese Zeile nur kopieren und gleich danach einfügen und den Dateinamen anpassen. Dadurch kann hier in diesem Beispiel in Zeile 24 folgendes einfügen, damit die neue CSS-Datei auch aktiv ist.

CSS mit der function.php einbinden

Die eigentlich beste Version ist das Hinzufügen der Datei mit Hilfe der WordPress-Themenfunktionen. Dazu suchst du dir die Datei functions.php im Child-Theme und öffnest sie in einem Editor. Auch hier musst du dir den entsprechenden Code suchen, denn in einem modernem Child-Theme werden die Eltern-Stylesheets genau so eingebaut. Als Beispiel könnte es so aussehen:

Hier funktioniert es auch mit einer Ergänzung vor der schließenden, geschwungenen Klammer wird eine Zeile eingefügt.

Nachdem das Stylesheet in unsere Theme eingebunden ist, können wir uns um den Shortcode kümmern.

Einen Shortcode für die Fortschrittsanzeige erstellen

Klar könntest du bei jedem Beitrag oder jeder Seite die Fortschrittsanzeige mit einer CSS-Klasse und einem div-Element direkt im Editor einbauen. Ich empfinde das aber als mühselig, denn du musst dann immer zwischen visuell und Text umschalten. Daher werden wir uns einen Shortcode programmieren.

Was ist den ein Shortcode in WordPress?

Vielleicht bist du bei deinem Theme schon mal darauf gestoßen? Du kannst Wörter und auch Eigenschaften in eckigen Klammern in deinen Beitrag einfügen und WordPress (besser dein Theme) zaubert etwas daraus. Es kann dann eben wie [amazon asin="1234567890"] aussehen oder auch wie

Dies ist der Inhalt

aussehen. Mit Shortcodes kannst du eben die Funktionen deines Themes in WordPress erweitern und verbessern.
Du kannst dir einen Shortcode als Kurzbefehl vorstellen, welche sogar WordPress selbst schon liefert: caption, gallery oder embed.

Mit der Datei functions.php können wir uns aber selbst einen Kurzbefehl erstellen, um die Fortschrittsanzeige in WordPress auszugeben.

Den Shortcode in die Themefunktionen von WordPress einfügen

Bevor wir Anfangen, müssen wir uns überlegen, was wir erreichen wollen. Eigentlich wollen wir einen Kreis als Fortschrittsanzeige ausgeben. Natürlich soll eine Prozentzahl in der Mitte stehen. Praktisch wäre auch noch wenn wir Farbe und Größe der Fortschrittsanzeige bestimmen können. Und damit wir ein wenig flexibel bleiben, wäre es noch praktisch eine Verlinkung der Fortschrittsanzeige auf eine URL zu haben. Ach ja und weil wir schon so schön dabei sind: Falls wir keine Prozente haben, möchten wir statt dessen einen Text in den Kreis schreiben.

Jetzt sind doch einige Wünsche zusammengekommen, welche wir in einen Shortcode verwandeln sollen: [g20Kreis pzt="36" farbe="gruen" groesse="small" url="/fortschritt"]

Damit sehen wir gleich, dass wir den Namen und bereits die Namen von 4 Eigenschaften definiert haben. Statt pzt können wir auch text verwenden, falls wir einen reinen Text in der Mitte des Kreises schreiben wollen. Am einfachsten ist es, du nimmst den folgenden Quellcode und fügst ihn ganz am Ende der Datei functions.php deines Child-Themes ein.

Das war jetzt doch etwas aufwendiger, aber dafür hast du eine komfortable Lösung für die Fortschrittsanzeige aus purem CSS in deinem WordPress-Theme.

Blogheim.at Logo