Jc-Wp-Project

Es gibt zahlreiche WordPress Plugins, mit denen man ein Projektstatus visuell darstellen kann, keines aber bietet es als Rund-Um-Paket mittels eines animierten Ladebalkens in einem beschreibenden Artikel, einer Projekt-Übersicht und als Sidebar-Widget den Projektstatus anzuzeigen. Diese Lücke schließt nun das WordPress Plugin Jc-Wp Project. Das Plugin macht es sehr einfach mittels Shortcodes und Benutzerdefinierter Felder den Projektstatus eines Projektes visuell als Ladebalken darzustellen. Dabei wird es auf das wesentliche begrenzt und stellt wirklich nur den animierten Ladebalken an bzw. in der Projektliste / Sidebar-Widget den verlinkten Artikel des Projekts mit Erstellungsdatum des Artikels. Das Projekt wird quasi als Artikel / Seite angelegt, in dem ganz normal dort das Projekt beschrieben werden kann und mittels dem Shortcode [jcWpProjectStatus] der Ladebalken angezeigt werden kann. Den Status des Projektes legt man zuvor innerhalb der Artikel-Bearbeitung in den Benutzerdefinierten Feldern mit dem Namen “jcProjectStatus” und einem prozentualem Wert zwischen 1 und 100 an. Dabei wird für alle Elemente des Plugins das Artikeldatum als “Projektdatum” verwendet. Für eine Übersicht aller Projekte legt man einen neuen Artikel / eine neue Seite an und schreibt an der Stelle wo die Liste mit den Ladebalken und verlinkten Artikeln den Shortcode [jcWpProjects] hin. Dieser Shortcode wird durch alle aktiven Projekte (Artikel/Seiten die Publik (also Publiziert) sind) als li-Liste mit Artikeldatum, verlinkten Titel und den jeweiligen animierten Ladebalken ersetzt. Aktueller Projektstatus: [jcWpProjectStatus]

Nachdem man das Plugin in das Plugin-Verzeichnis kopiert und aktiviert hat, ist Jc-Wp-Project bereits aktiv. Wer nun einen neuen Artikel / eine neue Seite für ein Projekt anlegt (und z. B. im Editor das Projekt beschreibt), kann mittels “Benutzerdefinierter Felder” den animierten Ladebalken passend mit prozentualer Anzeige des Statuses angeben.

Projektstatus

Den Projektstatus gibt man in “Benutzerdefinierte Felder” mit dem Name “jcProjectStatus” und einem prozentualem Wert zwischen 1 und 100 an. Dieser Wert entspricht den prozentuale Fortschritt des Projektes. Die visuelle Progressbar stellt man in einem Artikel / auf einer Seite mittels dem Shortcode [jcWpProjectStatus] an der Stelle dar, wo dieser Shortcode im Editor platziert wird.

Status aller laufender Projekte anzeigen

Möchte man beispielsweise in einer Seite den aktuellen Status aller Projekte aufgelistet anzeigen, kann man dies auf einer Seite / einem Artikel ebenfalls mittels dem Shortcode [jcWpProjects] an der Stelle als <ul> – <li> – Liste anzeigen, wo man den Shortcode platziert. Dazu werden alle Artikel / Seiten (in WordPress sind alles sog. “posts”) nach dem Meta-Key “jcProjectStatus” gesucht und der enthaltene Wert (eine Ganzzahl zwischen 1 und 100) als prozentualer Wert genutzt. Ist der Artikel nicht publiziert, wird dieser Artikel mit diesem Projekt hier ignoriert.

Wie kann ich den Projektstatus in einem Artikel / einer Seite anzeigen?

Lege in den Benutzerdefinierten Feldern ein neues Feld mit Namen “jcProjectStatus” (ohne Gänsefüsschen) und dem prozentualem Wert des Projektes zwischen 1 und 100 an. Zusätzlich kannst Du ein weiteres Feld namens “jcProjectExcerpt” anlegen, in dem Du für die Projekt-Liste eine Kurzbeschreibung als Wert angeben kannst (wird lediglich in der Projektliste verwendet!). In dem Editor schreibst Du an der Stelle, wo Du den animierten Ladebalken anzeigen lassen möchtest, folgenden Shortcode: [jcWpProjectStatus]

Wie kann ich eine Projektliste aller aktiven Projekte darstellen?

Erstelle beispielweise eine Seite mit Titel “Aktuelle Projekte” und innerhalb des Editors platzierst Du dort, wo die Projektliste mit dem animierten Ladebalken, Projektdatum (Artikel-Datum) sowie verlinkten Projekttitel (Artikel-Titel) anzeigen lassen möchtest, den Shortcode [jcWpProjects] An dieser Stelle wird dann eine <ul> – <li> Liste mit all den aktiven Projekten angezeigt.

Wie benutze ich das Sidebar-Widget?

Nachdem Du das Widget in deiner Sidebar gezogen und einen Titel eingetragen hast, kannst Du auswählen ob Du alle aktiven Projekte (Standard) oder eine gewisse Anzahl an aktuellen Projekten absteigend nach Projektdatum sortiert in der Sidebar anzeigen lassen möchtest.

Wie kann ich die Farbe des Ladebalkens ändern?

Der Ladebalken wird mit jQuery-UI erzeugt, weshalb ein Auschnitt der CSS von jQuery-UI im Plugin – Verzeichnis im Ordner css abgelegt ist. Die benutzten Grafiken der jQuery-UI liegen im Verzeichnis images. Dort tausche die Grafik ui-bg_gloss-wave_55_5c9ccc_500x100.png in der Größe 500 Pixel Breite und 100 Pixel Höhe mit einer passenden Grafik deiner Wunschfarbe aus. Du kannst z.B. über den Themeroller von jQuery-UI (unter Gallery schauen) eine andere Farbauswahl auswählen und downloaden und lediglich die entsprechende Grafik austauschen. Beachte dabei, dass die Grafik den gleichen Namen enthält oder wechsle den Grafik-Namen in der CSS-Datei css/jc-jquery-ui.css Zeile 51 aus.