Wollten Sie schon immer einen Fortschrittsbalken zu Ihrer WordPress-Site hinzufügen? Sie können es verwenden, um den Fortschritt einer Spendenkampagne, Meilensteine für bestimmte Projekte, an denen Sie arbeiten, usw. anzuzeigen. Vor kurzem hat einer unserer Leser gefragt, wie er einen Fortschrittsbalken in einen WordPress-Beitrag einfügen kann. In diesem Artikel zeigen wir Ihnen, wie Sie Ihren WordPress-Beiträgen, -Seiten und -Widgets einen Fortschrittsbalken hinzufügen.
Videoanleitung
Wenn Ihnen das Video nicht gefällt oder Sie weitere Anweisungen benötigen, lesen Sie weiter.
Als erstes müssen Sie die installieren und aktivieren Fortschrittsanzeige Plugin. 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 Shortcode in diesem Format hinzu:
[wppb progress=50]
Dies zeigt einen animierten Fortschrittsbalken an, der 50% des Fortschritts in der standardmäßigen blauen Farbe anzeigt.
Ziemlich einfach oder?
Sie können den Shortcode auch anpassen, um Farben zu ändern, Text zur Fortschrittsleiste hinzuzufügen, Währung anstelle von Prozent anzuzeigen und vieles mehr. Werfen wir einen Blick auf einige dieser Anpassungsoptionen.
Hinzufügen von Text zum Fortschrittsbalken
Im obigen Beispiel können Sie sehen, dass unser Fortschrittsbalken nicht wirklich erwähnt, worum es geht. Sie können dies ändern, indem Sie mithilfe des Textattributs im Shortcode hilfreichen Text innerhalb der Fortschrittsleiste hinzufügen.
[wppb progress=75 text="Progress so far"]
Dadurch wird Ihr Text oben auf der Fortschrittsleiste angezeigt und sieht so aus:
Anzeige der Währung anstelle des prozentualen Fortschrittsbalkens
Standardmäßig zeigt der Fortschrittsbalken den Abschlussprozentsatz an, aber Sie können ihn in eine Währung ändern, wenn Sie ihn für eine Spendenkampagne verwenden.
So würden Sie den Shortcode verwenden, um die Währung anzuzeigen und sowohl den Zielbetrag als auch den bisher gesammelten Betrag anzugeben.
[wppb progress="$250/1000" text="$250/$1000 Raised"]
Auf Ihrer Website sieht es so aus:
Wenn Sie den Text außerhalb des Fortschrittsbalkens anzeigen möchten, können Sie den Shortcode wie folgt ändern:
[wppb progress="$250/1000" text="$250/$1000 Raised" location="after"]
Ändern der Farben und des Erscheinungsbilds der Fortschrittsleiste
Das Progress Bar-Plugin enthält einige Farben und Darstellungsoptionen, die Sie verwenden können. Die integrierten Farboptionen sind Blau, Rot, Gelb, Orange und Grün. Sie können jedoch jede beliebige Farbe verwenden. Sie können einen flachen oder animierten Fortschrittsbalken hinzufügen.
So verwenden Sie den Shortcode, um jede Option zu verwenden:
Oranger Fortschrittsbalken
[wppb progress=50 option=orange]
Animierter Bonbonstreifen-Fortschrittsbalken in Rot
[wppb progress=50 option="animated-candystripe red"]
Candy Stripe Fortschrittsbalken in grüner Farbe
[wppb progress=50 option="candystripe green"]
Ein standardmäßiger blauer Fortschrittsbalken mit Bonbonstreifen
[wppb progress=50 option=candystripe]
Ein flacher Fortschrittsbalken in lila Farbe
[wppb progress=50 option=flat color=purple]
Ein flacher Bonbonstreifen-Fortschrittsbalken in Braun
[wppb progress=50 option="flat candystripe" color=brown]
So sehen diese Fortschrittsbalken auf Ihrer Website aus:
Fortschrittsbalken in WordPress-Seitenleisten-Widgets hinzufügen
Zuerst müssen Sie Shortcodes für Text-Widgets in WordPress aktivieren. Sie können dies tun, indem Sie die folgende Codezeile in die Datei functions.php Ihres Themes oder in ein Site-spezifisches Plugin einfügen.
add_filter('widget_text','do_shortcode');
Sie können jetzt besuchen Aussehen » Widgets Seite und fügen Sie Ihrer Seitenleiste ein Text-Widget hinzu. Verwenden Sie den Shortcode für den Fortschrittsbalken im Text-Widget genauso, wie Sie ihn in einem Beitrag oder einer Seite verwenden würden. Hier ist ein Code, den wir auf unserer Demo-Site verwendet haben:
[wppb progress="$2500/$4500" option="animated-candystripe red" fullwidth=true] Raised: $2500 Goal: $4500 <a href="example.com">Donate here</a>
So sah es auf unserer Testseite aus:
Wir hoffen, dieser Artikel hat Ihnen geholfen, schöne Fortschrittsbalken in Ihre WordPress-Beiträge oder -Seiten einzufügen. Vielleicht möchten Sie auch unsere Anleitung zum Hinzufügen eines PayPal-Spenden-Buttons in WordPress lesen.