Тази статия ще предостави процедурата за добавяне на лента за напредък в 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-progress-bar {заден план- цвят : #1a1a1a;
височина : 30px;
подложка: 5px;
ширина : 500px;
поле: 5px 0 ;
радиус на границата: 5px;
кутия-сянка: 0 1px 5px #000 вмъкване, 0 1px 0 # 444 ;
}
.custom-progress-bar педя {
заден план- цвят : #0000FF;
дисплей: inline-block;
поплавък: наляво;
височина : 100 %;
радиус на границата: 3px;
кутия-сянка: 0 1px 0 rgba ( 255 , 255 , 255 , .5 ) вмъкване;
преход: ширина .4s леко влизане и излизане;
}
.прогресия- текст {
текст- подравнете : дясно;
цвят : бяло;
поле: 0px;
}
Стъпка 5: Публикувайте публикацията
Накрая щракнете върху „ Публикувайте ”, публикувайте, за да запазите тези промени:
При презареждане на страницата потребителят може да види, че лентата за напредъка може да се види в публикацията:
Как да добавите ленти за напредък към уебсайтове на WordPress с помощта на добавки?
Тази демонстрация ще използва плъгина „Ultimate Blocks“, за да добави лента за напредък към уебсайт на WordPress. За да направите същото, следвайте стъпките по-долу.
Стъпка 1: Добавете нов плъгин
След като потребителят влезе в таблото за управление, отидете на „ Приставки > Добавяне на нов ” от страничната лента с менюта:
Стъпка 2: Инсталирайте приставката Ultimate Blocks
Потърсете Ultimate Blocks и натиснете „ Въведете ” ключ. След това щракнете върху посоченото по-долу „ Инсталирай сега ” бутон:
Стъпка 3: Активирайте Ultimate Blocks
След като приставката е инсталирана, щракнете върху „ Активирате ”, за да използвате лентата за напредък в WordPress:
Стъпка 4: Създайте нова публикация
За да добавите лента за напредък към публикация в WordPress, отидете на „ Публикации > Добавяне на нов ” от страничното меню:
Стъпка 5: Добавете блока на лентата за напредък
Въведете заглавие и съдържание на публикацията. След това натиснете „ + ”, за да добавите нов блок. В менюто потърсете „ Лента за напредъка ” и изберете блока:
Стъпка 6: Задайте процента за лентата
За да зададете процент за лентата за напредък, използвайте синия плъзгач или въведете процента в полето за открояване по-долу:
Стъпка 7: Публикувайте публикацията
След като публикацията приключи, щракнете върху „ Публикувайте ”, за да качите публикацията на уебсайта:
Стъпка 8: Вижте публикацията
След като публикувате публикацията, щракнете върху бутона „Преглед на публикацията“, за да видите визуализацията на публикацията на уебсайта:
Може да се види в резултата по-долу, че лентата за напредъка е добавена към публикацията:
Това е всичко за добавяне на лента за напредък в WordPress.
Заключение
За да добавите лента за напредък към уебсайт на WordPress, отидете на „ Приставки > Добавяне на нов ” от страничното меню. Търсете и инсталирайте „ Крайни блокове ” плъгин. След инсталацията го активирайте. След това отидете на „ Публикации > Добавяне на нов ” и посочете заглавието и съдържанието на публикацията. След това щракнете върху „ + “ и потърсете „ Лента за напредъка ” блок. Задайте процента на напредъка, като използвате плъзгача или като въведете числото. Тази статия илюстрира процедурата за добавяне на лента за напредък в WordPress със и без плъгина.