Как добавить индикатор выполнения в WordPress

Kak Dobavit Indikator Vypolnenia V Wordpress



WordPress — популярная система управления контентом для создания веб-сайтов. Это упрощает весь процесс благодаря встроенным темам и плагинам. Это избавляет пользователей от необходимости кодировать веб-сайт вручную. Плагин — это небольшое программное приложение, предоставляющее определенные функции. Например, использование индикаторов выполнения для графического отображения данных на веб-сайте WP можно выполнить как с помощью плагина, так и вручную с помощью специального кода.

В этой статье будет описана процедура добавления индикатора выполнения в 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 с плагином и без него.