So fügen Sie eine Fortschrittsleiste in Ihren WordPress-Beiträgen hinzu

Wollten Sie schon immer einen Fortschrittsbalken in Ihre WordPress-Site einfügen? Sie können es verwenden, um den Fortschritt einer Fundraising-Kampagne, Meilensteine ​​für ein bestimmtes Projekt, an dem Sie gerade arbeiten, usw. anzuzeigen. Kürzlich fragte einer unserer Leser, wie er eine Fortschrittsleiste in einem WordPress-Beitrag hinzufügen kann. In diesem Artikel zeigen wir Ihnen, wie Sie eine Fortschrittsleiste in Ihren WordPress-Posts, -seiten und-Widgets hinzufügen.

Videoanleitung

Wenn Ihnen das Video nicht gefällt oder Sie weitere Anweisungen benötigen, lesen Sie weiter.

Als erstes müssen Sie das Progress Bar-Plugin installieren und aktivieren. Es funktioniert sofort, und Sie müssen keine Einstellungen konfigurieren.

Bearbeiten Sie einfach einen Beitrag oder eine Seite, auf der Sie den Fortschrittsbalken anzeigen möchten, und fügen Sie den Kurzcode in diesem Format hinzu:

[wppb progress = 50]

Daraufhin wird eine animierte Fortschrittsleiste angezeigt, die den Fortschritt von 50% bei Verwendung der Standardfarbe Blau anzeigt.

Ganz einfach richtig?

Sie können den Shortcode auch anpassen, um die Farbe zu ändern, Text in die Fortschrittsleiste einzufügen, anstelle des Prozentsatzes Währung anzuzeigen und vieles mehr. Sehen wir uns einige dieser Anpassungsoptionen an.

Hinzufügen von Text zur Fortschrittsleiste

Im obigen Beispiel können Sie sehen, dass unsere Fortschrittsleiste nicht wirklich erwähnt, worum es geht. Sie können dies ändern, indem Sie mithilfe des Textattributs im Kurzcode hilfreichen Text in die Fortschrittsleiste einfügen.

[wppb progress = 75 text = "Bisheriger Fortschritt"]

Dadurch wird Ihr Text oben in der Fortschrittsleiste angezeigt, und er sieht folgendermaßen aus:

Anzeige von Währung statt Prozentsatz in Fortschrittsbalken

Standardmäßig zeigt die Fortschrittsleiste den Fertigstellungsgrad an. Sie können diesen Wert jedoch in eine Währung ändern, wenn Sie sie für eine Spendenaktion verwenden.

So verwenden Sie den Shortcode, um die Währung anzuzeigen und sowohl den Zielbetrag als auch den bisher gesammelten Betrag anzugeben.

[wppb progress = "$ 250/1000" text = "$ 250 / $ 1000 erhoben"]

Auf Ihrer Website wird es so aussehen:

Wenn Sie den Text außerhalb der Fortschrittsleiste anzeigen möchten, können Sie den Shortcode wie folgt ändern:

[wppb progress = "$ 250/1000" text = "$ 250 / $ 1000 angehoben" location = "after"]

Ändern der Farben und des Aussehens der Fortschrittsleiste

Das Fortschrittsbalken-Plugin enthält einige Farben und Erscheinungsoptionen, die Sie verwenden können. Die integrierten Farboptionen sind Blau, Rot, Gelb, Orange und Grün. Sie können jedoch jede gewünschte Farbe verwenden. Sie können eine flache oder animierte Fortschrittsleiste hinzufügen.

So verwenden Sie den Shortcode für jede Option:

Orange Fortschrittsbalken
[wppb progress = 50 Option = orange]

Animierte Fortschrittsleiste für Süßigkeitenstreifen in Rot
[wppb progress = 50 option = "animated-candystripe rot"]

Candy Stripe Fortschrittsbalken in grüner Farbe
[wppb progress = 50 Option = "candystripe grün"]

Eine standardmäßige blaue Fortschrittsleiste mit Süßigkeitenstreifen
[wppb progress = 50 option = candystripe]

Ein flacher Fortschrittsbalken in lila Farbe
[wppb progress = 50 Option = flache Farbe = lila]

Eine flache Fortschrittsleiste mit Süßigkeitenstreifen in Braun
[wppb progress = 50 option = "flat candystripe" Farbe = braun]

So sehen diese Fortschrittsbalken auf Ihrer Website aus:

Fortschrittsbalken in WordPress-Sidebar-Widgets hinzufügen

Zuerst müssen Sie Kurzcodes für Text-Widgets in WordPress aktivieren. Sie können dies tun, indem Sie die folgende Codezeile in die Datei functions.php Ihres Themas oder in ein standortspezifisches Plugin einfügen.

 add_filter ('widget_text', 'do_shortcode'); 

Sie können jetzt besuchen Aussehen »Widgets und fügen Sie Ihrer Seitenleiste ein Text-Widget hinzu. Verwenden Sie den Fortschrittsbalken-Kurzcode im Text-Widget wie in einem Beitrag oder auf einer Seite. Hier ist ein Code, den wir auf unserer Demo-Site verwendet haben:

 [wppb progress = "$ 2500 / $ 4500" option = "animated-candystripe red" fullwidth = true] Erhöht: $ 2500 Ziel: $ 4500 Hier spenden 

So sah es auf unserer Testseite aus:

Wir hoffen, dass dieser Artikel Ihnen dabei geholfen hat, Ihren WordPress-Beiträgen oder -Seiten schöne Fortschrittsanzeigen hinzuzufügen. Möglicherweise möchten Sie auch unseren Leitfaden zum Hinzufügen einer PayPal-Spende-Schaltfläche in WordPress anzeigen.

Wenn Ihnen dieser Artikel gefallen hat, abonnieren Sie bitte unsere Video-Tutorials für unseren YouTube-Kanal für WordPress. Sie finden uns auch auf Twitter und Facebook.