В этой статье будет описана процедура добавления индикатора выполнения в WordPress, используя следующую схему:
- Что такое индикатор выполнения в WP?
- Как добавить индикаторы выполнения на сайты WordPress с помощью кода?
- Как добавить индикаторы выполнения на сайты WordPress с помощью плагинов?
Что такое индикатор выполнения в WordPress?
Индикатор выполнения показывает прогресс выполнения чего-либо в процентах с помощью горизонтальной полосы. Это графическое представление некоторых данных, которое может предоставить пользователю информацию одним взглядом. Использование индикаторов выполнения в ваших сообщениях WordPress для представления данных или статистики может помочь повысить привлекательность веб-сайта и вовлеченность пользователей.
Как добавить индикаторы выполнения на сайты WordPress с помощью кода?
Чтобы добавить индикатор выполнения в WordPress без плагина, пользователю придется использовать в сообщении собственный HTML и CSS. Для этого выполните следующие действия:
Шаг 1. Войдите в личный кабинет.
Откройте браузер и перейдите в раздел « http://localhost/<Website-Name>/wp-login.php ' связь. Введите учетные данные администратора и нажмите « Авторизоваться ' кнопка:
Шаг 2. Создайте новую публикацию
Идти к ' Сообщения > Добавить новые » из бокового меню панели администратора:
Шаг 3. Добавьте собственный HTML-код
В публикации укажите заголовок и дополнительный контент. Затем нажмите на кнопку « + значок » и найдите значок « Пользовательский HTML ' блокировать:
В добавленный блок HTML вставьте приведенный ниже код. Изменить ' ширина ' внутри ' <диапазон> » теги для желаемого процента индикатора выполнения. Аналогичным образом измените « текст прогрессии ' соответственно:
< делитель сорт '=' 'пользовательский индикатор выполнения' >< охватывать стиль '=' 'ширина: 80%' >< / охватывать >
< делитель сорт '=' 'текст прогрессии' > 80% < / делитель >
< / делитель >
После этого нажмите « Публиковать Кнопка для загрузки публикации на сайт:
Шаг 4. Добавьте собственный CSS
Как только сообщение будет опубликовано, нажмите на кнопку « Посмотреть сообщение ' кнопка:
В предварительном просмотре нажмите « Настроить », чтобы добавить стиль индикатора выполнения:
В левой части экрана появится меню редактора. Здесь прокрутите вниз и нажмите « Дополнительный CSS ' раздел:
Вставьте следующий код CSS в поле, чтобы стилизовать индикатор выполнения:
.custom-прогресс-бар {фон- цвет : #1a1a1a;
высота : 30 пикселей;
отступ: 5 пикселей;
ширина : 500 пикселей;
поле: 5 пикселей 0 ;
радиус границы: 5 пикселей;
коробка-тень: 0 1px 5px #000 вставка, 0 1 пиксель 0 # 444 ;
}
.custom-прогресс-бар охватывать {
фон- цвет : #0000ФФ;
отображение: встроенный блок;
плыть налево;
высота : 100 %;
радиус границы: 3 пикселя;
коробка-тень: 0 1 пиксель 0 РГБА ( 255 , 255 , 255 , .5 ) вставка;
переход: ширина .4s легкость входа и выхода;
}
.прогрессия- текст {
текст- выровнять : верно;
цвет : белый;
поле: 0 пикселей;
}
Шаг 5. Опубликуйте публикацию
Наконец, нажмите « Публиковать », чтобы сохранить эти изменения:
После перезагрузки страницы пользователь увидит, что в сообщении можно увидеть индикатор выполнения:
Как добавить индикаторы выполнения на сайты WordPress с помощью плагинов?
В этой демонстрации будет использоваться плагин Ultimate Blocks для добавления индикатора выполнения на веб-сайт WordPress. Чтобы сделать то же самое, выполните следующие действия.
Шаг 1. Добавьте новый плагин
Как только пользователь войдет в панель управления, перейдите в раздел « Плагины > Добавить новый » в строке бокового меню:
Шаг 2. Установите плагин Ultimate Blocks
Найдите Ultimate Blocks и нажмите « Входить ' ключ. Затем нажмите на указанную ниже кнопку « Установите сейчас ' кнопка:
Шаг 3: Активируйте Ultimate Blocks
После установки плагина нажмите « Активировать Кнопка » для использования индикатора выполнения в WordPress:
Шаг 4. Создайте новую публикацию
Чтобы добавить индикатор выполнения в запись WordPress, перейдите в раздел « Сообщения > Добавить новые опция из бокового меню:
Шаг 5. Добавьте блок индикатора выполнения
Укажите заголовок и содержание публикации. Далее нажмите кнопку « + », чтобы добавить новый блок. В меню найдите « Индикатор » и выберите блок:
Шаг 6: Установите процент для панели
Чтобы установить процент для индикатора выполнения, используйте синий ползунок или введите процент в поле ниже:
Шаг 7. Опубликуйте публикацию
После того, как сообщение будет готово, нажмите на кнопку « Публиковать Кнопка для загрузки публикации на сайт:
Шаг 8. Просмотрите публикацию
После публикации публикации нажмите кнопку «Просмотреть публикацию», чтобы увидеть предварительный просмотр публикации на сайте:
В выводе ниже видно, что к сообщению добавлен индикатор выполнения:
Это все, что касается добавления индикатора выполнения в WordPress.
Заключение
Чтобы добавить индикатор выполнения на веб-сайт WordPress, перейдите в раздел « Плагины > Добавить новый » в боковом меню. Найдите и установите « Окончательные блоки » плагин. После установки активируйте его. Затем перейдите к « Сообщения > Добавить новые » и укажите название и содержание публикации. Далее нажмите на кнопку « + значок » и найдите значок « Индикатор ' блокировать. Установите процент прогресса с помощью ползунка или введя число. В этой статье была продемонстрирована процедура добавления индикатора выполнения в WordPress с плагином и без него.