Как добавить полосу прогресса в свои записи WordPress

У вас когда-нибудь появлялась необходимость добавить полосу прогресса на свой WordPress сайт? Ее можно использовать для того, чтобы отобразить прогресс кампании по сбору средств, этапы работы над проектом и т.п. В сегодняшней статье мы покажем вам как добавить полосу прогресса в свои записи, виджеты и на страницы WordPress.

Первым делом вам необходимо установить и активировать плагин Progress Bar. Он работает «из коробки» и нет никаких опций для настройки.

Просто редактируем запись или страницу, где вы хотите вывести полосу прогресса (progress bar) и добавляем шорткод в таком формате:

[wppb progress=50]

Выведется анимированная полоса прогресса, отображающая 50% выполнения, дефолтного синего цвета.

Просто, правда?

Вы можете настраивать шорткод, изменяя цвета, добавлять текст в полосу, указывать валюту вместо процентов и многое другое. Давайте посмотрим на некоторые из этих опций.

Добавляем текст в полосу прогресса

В примере выше вы могли увидеть, что наша полоса прогресса не указывает на то, что она вообще отображает. Это можно изменить путем добавление полезного текста в полосу, используя текстовый атрибут в шорткоде.

[wppb progress=75 text="Progress so far"]

Теперь полоса отобразит ваш текст внутри себя, и будет выглядеть примерно так:

Выводим валюту вместо процентов в полосе прогресса

По-умолчанию, полоса прогресса отображает процент выполнения, но вы можете изменить его на валюту, если вы используете полосу для кампании сбора средств.

Вот так вы можете использовать шорткод для отображения валюты и индикации как нужной суммы, так и уже собранной на данный момент.

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

Вот так это будет выглядеть на вашем сайте:

Если вы хотите отобразить текст вне полосы, то необходимо изменить шорткод следующим образом:

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

Изменяем цвета и внешний вид полосы прогресса

В плагине Progress Bar есть несколько цветов и опций для настройки внешнего вида. Встроенные цвета: синий, красный, желтый, оранжевый и зеленый. Однако, вы можете использовать любой цвет по своему желанию. Также вы можете добавить плоскую или анимированную полосу прокрутки.

Вот так вы можете использовать шорткоды для использования каждой из опций:

Orange progress bar

[wppb progress=50 option=orange]

Animated candy stripe progress bar in red

[wppb progress=50 option="animated-candystripe red"]

Candy stripe progress bar in green color

[wppb progress=50 option="candystripe green"]

A default blue progress bar with candy stripe

[wppb progress=50 option=candystripe]

A flat progress bar in purple color

[wppb progress=50 option=flat color=purple]

A flat candy stripe progress bar in brown

[wppb progress=50 option="flat candystripe" color=brown]

А вот так это всё будет выглядеть на вашем сайте:

Добавление полосы прогресса в виджеты сайдбара WordPress

Прежде всего вам нужно активировать шорткоды для текстовых виджетов в WordPress. Это можно сделать, добавив следующую строку кода в файл functions.php вашей темы или в плагин для сайта WordPress:

add_filter('widget_text','do_shortcode');

Теперь переходим на страницу Внешний вид » Виджеты и добавляем текстовый виджет в свой сайдбар. Используем шорткоды полосы прогресса в текстовый виджет ровно так же, как в запись или на страницу. Вот код, который мы использовали на своем демо сайте:

[wppb progress="$2500/$4500" option="animated-candystripe red" fullwidth=true]

Raised: $2500
Goal: $4500

<a href="example.com">Donate here</a>

Вот так он будет выглядеть в итоге:

Мы надеемся, что эта статья помогла вам добавить красивую полосу прогресса в свои записи и на страницы WordPress.

По всем вопросам и отзывам просьба писать в комментарии ниже.

Не забывайте, по возможности, оценивать понравившиеся записи количеством звездочек на ваше усмотрение.