Jc-Wp-Project

Mein WordPress Plugin Jc-Wp Project stellt simpel die Möglichkeit zur Verfügung, einen animierten Ladebalken als Projektstatus visuell in Artikeln / Seiten darzustellen. Ein Sidebar-Widget rundet die ganze Sache ab. Im Folgenden wird hier das Plugin beschrieben. Den Download des Plugins findest Du im WordPress Plugin-Repositary.

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.

  1. Version 1.0
    • Initiale Final Version des Plugins mit Shortcodes und Widget
    • Projekt im Artikel mittels Shortcode darstellen
    • Status aller Projekte in einem Artikel / auf einer Seite als Liste darstellen
    • Sidebar Widget, in dem x Anzahl oder alle Projekte mittels kleiner Progressbar und mit Artikel verlinktem Titel aufgelistet in der Sidebar darstellt.

6 Kommentare

  1. Hallo,

    erstmal vielen Dank für dieses tolle Plugin.
    Leider ist mir beim Einbau in eine Testseite aufgefallen, das die Statusbar, nicht unbedingt den Wert wiedergibt, den ich im Benutzerdefinierten Feld angegeben habe.

    Ich habe meinen Test auf 50% bezogen.
    Mal bleibt der Balken aber bei 32% und mal bei 48% stehen ( laut Firebug ), das variiert bei fast jeder Aktualisierung.

    Kann dieses Phänomen mit meinem *yootheme* zusammenhängen ?

    Würde mich über Info freuen :)

    LG aus Dresden … Benjamin Sonnenschein

    • Hi Benjamin,

      durchaus, da hier die jQuery-UI benutzt wird und ich die jQuery-Funktion die den Slider passend der Angaben zwar mit eigenen Prefix versehen habe, aber nicht in einen eigenen Prototyp versetzt habe, dass dadurch das mit Theme-JS-Funktionen durcheinander kommt.

      Leider habe ich derzeit absolut keine freie Ressourcen um das mal zu aktualisieren. Geplant sind aber noch einige andere Anpassungen und Erweiterungen.

  2. Hikami

    Hi,
    also ich wollte mal sagen, dass ich versucht habe, das ganze auf Egnlisch zu verstehen, denn die Projektstatusanzeige ist genau das, was ich brauche, aber ich versteh es nicht. Dann denke ich: JA! Es ist ein Deutscher! Es gibt eine deutsche Anleitung! Jetzt bin ich hier… und da oben wird kein Text angezeigt… :( Liegt das an meinem PC, oder an der Seite?

    • Vielen Dank für den Hinweis! Ich hätte das sicherlich nie bemerkt. Das lag an einem Javascript-Fehler des Themes. Ist repariert und nun solltest den Text auch lesen können.

  3. Hallo Stefan,

    ich nutze auch dein Plugin zum Projektstatus. Soetwas hatte ich lange gesucht und es passt prima in meine Seite.
    Doch auch leider habe ich das gleiche Problem mit dem Statusbalken, der nicht immer den richtigen Prozentwert wiedergibt. Er variiert ständig und leider passt es meist nie.

    Wirst du das Problem noch beheben?

    Beste Grüße,
    Christian

Kommentar verfassen