Cum să adăugați o bară de progres de lectură în postările WordPress (3 moduri ușoare)

Cunoașteți sentimentul acela când citiți un articol lung online și nu aveți idee cât mai este de parcurs? Aceasta este problema pe care barele de progres o rezolvă pentru vizitatorii dvs. WordPress.

Acești indicatori vizuali simpli arată cititorilor exact cât dintr-un articol au parcurs, ceea ce îi poate încuraja să continue să citească și să rămână pe pagina dvs. Se bazează pe aceeași satisfacție pe care o obțineți din finalizarea oricărui lucru cu un punct final clar.

Acum, noi nu folosim de fapt bare de progres aici la WPBeginner, deoarece tutorialele noastre sunt concepute pentru a fi scanabile. Majoritatea oamenilor sar direct la secțiunea de care au nevoie, mai degrabă decât să citească de la început până la sfârșit.

Dar dacă publicați articole de blog mai lungi, ghiduri aprofundate sau articole detaliate, o bară de progres de lectură poate ajuta cu adevărat la menținerea angajamentului oamenilor.

În acest ghid, vă vom arăta trei moduri diferite de a adăuga unul pe site-ul dvs. WordPress, fie că doriți o soluție simplă de plugin, fie ceva mai personalizat.

Când să adăugați o bară de progres de lectură la postările de pe blogul dvs. WordPress

Pentru articole de blog mai lungi, adăugarea unei bare de progres de lectură poate fi un instrument valoros pentru a menține oamenii pe site-ul dvs. WordPress. Aceasta poate informa cititorii cât au citit și cât mai au de citit.

Cititorii sunt mai predispuși să continue să deruleze dacă văd că se apropie de sfârșitul articolului. O bară de progres îi poate motiva să termine de citit.

În plus, având un indicator de citire adaugă o notă de interactivitate conținutului dvs.. Poate face ca citirea să se simtă mai mult ca o călătorie cu o destinație clară.

Cu toate acestea, este important să luați în considerare conținutul dvs. Prin testele noastre, am constatat că barele de progres de lectură funcționează cel mai bine atunci când conținutul dvs. trebuie consumat liniar. Acestea fiind spuse, s-ar putea să nu fie necesare pentru site-uri web precum al nostru, care se concentrează pe materiale de referință rapide, scanabile.

Având în vedere acest lucru, să vedem cum să adăugăm cu ușurință o bară de progres de lectură la postările dvs. WordPress. Puteți utiliza linkurile rapide de mai jos pentru a sări la metoda preferată:

• Metoda 1: Proiectează o temă personalizată cu indicatori de progres de lectură
• Metoda 2: Adăugați o bară de progres de lectură cu un plugin gratuit
• Metoda 3: Adăugați o bară de progres de lectură cu cod
• Sfaturi bonus pentru a menține cititorii blogului dvs. WordPress implicați

Metoda 1: Proiectează o temă personalizată cu indicatori de progres de lectură

O modalitate de a adăuga o bară de progres de lectură în postările WordPress este să folosești un constructor de teme cu o funcție de bară de progres. În acest fel, designul barei de progres se va integra perfect cu restul temei tale, făcându-l mai plăcut ochiului.

Rețineți că această metodă va implica schimbarea temei dvs., așa că nu o recomandăm dacă sunteți deja mulțumit de tema dvs. și nu căutați să o schimbați prea curând. Dacă acesta este cazul, atunci ar trebui să mergeți la metoda 2 (plugin) sau metoda 3 (cod) în schimb.

Pentru această metodă, vom folosi Thrive Theme Builder. Pe lângă faptul că are o bară de progres de lectură, Thrive Theme Builder are zeci de șabloane de teme pentru diverse scopuri, de la bloguri la site-uri web corporative.

Cel mai bun lucru este că builderul drag-and-drop este ușor de utilizat, făcându-l excelent pentru începătorii complet.

Puteți afla mai multe despre platformă în recenzia noastră Thrive Themes.

Un dezavantaj al Thrive Themes este că nu există o versiune gratuită. Acestea fiind spuse, puteți utiliza codul nostru de cupon Thrive Themes Thrive Themes pentru a obține până la 50% reducere la prima achiziție.

Pasul 1: Instalați Thrive Theme Builder

Primul pas este să configurați Thrive Theme Builder. Puteți accesa acest plugin conectându-vă la contul dvs. pe site-ul Thrive Themes.

Apoi, descărcați și instalați pluginul Thrive Product Manager. Pentru mai multe informații, consultați ghidul nostru pentru începători despre cum să instalați un plugin WordPress.

Odată ce pluginul este activ, faceți clic pe Product Manager în zona de administrare WordPress.

Apoi, faceți clic pe butonul ‘Autentificare în contul meu’ pentru a conecta site-ul dumneavoastră WordPress cu contul Thrive Themes.

După aceea, ar trebui să vedeți acum o listă cu toate produsele Thrive Themes disponibile în contul dumneavoastră.

Aici, selectați „Thrive Architect” și bifați caseta „Instalați produsul”.

Acest plugin constructor de pagini funcționează împreună cu constructorul de teme, așa că de aceea trebuie să îl activăm.

Apoi, derulați în jos la secțiunea „Thrive Theme Builder” și bifați caseta „Instalare temă”.

Acum, pur și simplu faceți clic pe „Instalați produsele selectate”.

Pe pagina următoare, veți vedea că Thrive Product Manager instalează și activează Thrive Theme Builder.

Odată ce procesul este finalizat, faceți clic pe „Mergi la tabloul de bord al Theme Builder”.

Acum, continuați și alegeți o temă WordPress.

Dacă nu sunteți sigur ce să alegeți, pur și simplu faceți clic pe butonul „Previzualizare” pentru a vedea cum arată tema. Apoi, faceți clic pe „Alege” odată ce ați luat decizia.

Ar trebui să ajungeți acum la vrăjitorul Theme Builder.

Acest expert de configurare vă va ghida prin încărcarea propriului logo, alegerea culorilor de marcă pentru a le adăuga la tema ta și configurarea diferitelor structuri și șabloane ale temei tale.

Continuați și finalizați vrăjitorul de configurare înainte de a trece la pasul următor.

Pasul 2: Adăugați o bară de progres de lectură la șablonul postării unice

Cu tema configurată, să adăugăm acum o bară de progres de lectură la șablonul temei dvs. Deoarece dorim doar să afișăm bara de progres în postările WordPress, atunci va trebui doar să edităm șablonul postării unice.

Pentru a face acest lucru, comutați la fila „Șabloane” din Thrive Theme Builder. Apoi, găsiți șablonul „Postare implicită” și faceți clic pe „Editare”.

Ar trebui să vă aflați acum în constructorul de teme. Ar trebui să existe o bară laterală stângă pentru editarea șablonului, o previzualizare a șablonului în sine și o mică bară de instrumente în partea dreaptă pentru adăugarea mai multor blocuri sau modificarea stilului șablonului.

Pentru a adăuga indicatorul de citire, derulați în jos bara laterală stângă și găsiți setarea „Indicator de progres de citire”. Pur și simplu faceți clic pe comutator pentru a-l activa.

După adăugarea barei de progres, ar trebui să existe acum mai multe setări pe care să le editați.

Mai întâi, puteți alege să adăugați bara de progres sub antet sau în partea de sus a viewport-ului (chiar deasupra antetului). Dacă alegeți prima opțiune, atunci va trebui să vă asigurați că antetul este setat ca fiind fix, ceea ce vă vom arăta cum să faceți mai târziu.

În continuare, puteți schimba culoarea barei de progres. Pur și simplu faceți clic pe selectorul de culori pentru a face acest lucru.

Acum, puteți fie să alegeți una dintre culorile temei, care este schema de culori predefinită a temei dvs. Sau, puteți face clic pe „Dezlegare de culoarea temei” pentru a alege o culoare complet diferită care nu face parte din tema dvs.

Dacă alegi opțiunea „Dezlegare de culoarea temei”, atunci poți ajusta și opacitatea culorii.

Astfel, puteți ajusta cât de opac arată bara de progres pe fundalul său. Acestea fiind spuse, este mai bine să nu faceți culoarea barei de progres atât de vibrantă încât să distragă utilizatorii de la citire.

Odată ce ești mulțumit de culoare, pur și simplu apasă pe „Aplică”.

În cele din urmă, puteți ajusta înălțimea barei de progres.

theme builder-ul vă permite să redimensionați bara la maximum 10 pixeli. Acest lucru asigură că bara de progres nu arată prea mare. Având în vedere acest lucru, recomandăm o dimensiune între 5 și 10, astfel încât bara de progres să fie clar vizibilă.

Când sunteți mulțumit de cum arată bara, faceți clic pe „Salvează lucrul” pentru a păstra modificările.

Pasul 3: Faceți antetul lipicios (Opțional)

Dacă alegi să afișezi bara de progres de lectură sub antet, atunci va trebui să urmezi acest pas. Altfel, îl poți sări.

Mai întâi, derulați în sus bara laterală stângă și faceți clic pe „Antet”.

Un alt set de setări pentru a personaliza antetul ar trebui să apară acum în bara laterală.

Continuați și derulați în jos la Secțiunea Antet și faceți clic pe „Editare”.

Acum, deschide fila Comportament de derulare.

Apoi, trebuie să selectați „Fixă”. În funcție de tema dvs., este posibil să fie necesar să schimbați distanța de la partea de sus a ecranului la 1 px, astfel încât bara de progres să apară.

Puteți lăsa restul setărilor așa cum sunt și faceți clic pe „Terminare” în partea de jos.

Pasul 4: Adăugați un indicator de timp de lectură (opțional)

Un alt lucru pe care îl puteți face cu Thrive Theme Builder este să afișați timpul estimat de citire pentru a parcurge o postare de la început până la sfârșit. Acest lucru îi ajută pe utilizatori să vadă cât timp va dura citirea unui articol, permițându-le să aleagă conținutul care se potrivește timpului lor disponibil.

Mai întâi, faceți clic pe blocul responsabil pentru afișarea datelor meta ale postării.

Aceasta este partea șablonului postării dvs. unice care afișează informații precum autorul postării de pe blog, categoriile, etichetele și așa mai departe.

Apoi, faceți clic pe pictograma ‘Text dinamic‘ din bara de instrumente.

Aici, trebuie să selectați „Content” în primul meniu derulant și „Reading time remaining (in minutes)” în al doilea.

După aceea, faceți clic pe „Inserare”.

Ar trebui să vedeți acum un text nou care spune „0 minute rămase” în meta postării. Puteți ajusta acest text după cum doriți.

În cazul nostru, am decis să eliminăm cuvântul „rămase”.

Când ați terminat, nu uitați să faceți clic pe „Salvați lucrul”.

Pasul 5: Previzualizați indicatorii de progres al citirii

Acum că ați configurat setările barei de progres, puteți vizita postarea dvs. de pe blog pentru a vedea bara în acțiune.

Dacă doriți să faceți o previzualizare în loc să vedeți bara live pe site-ul dvs., atunci puteți pur și simplu să faceți clic pe butonul „Previzualizare” din partea de jos. Thrive Theme Builder vă permite să previzualizați site-ul dvs. pe desktop, tabletă și mobil.

Simțiți-vă liber să faceți oricâte modificări sunt necesare.

Iată cum arată bara noastră de progres de lectură:

Metoda 2: Adăugați o bară de progres de lectură cu un plugin gratuit

Dacă doriți doar să adăugați o bară simplă de progres de lectură la postările dvs. WordPress gratuit, atunci puteți folosi pluginul Catch Scroll Progress Bar.

Acest plugin pentru bara de progres de lectură va afișa automat un indicator de lectură pe paginile și postările dvs. și îl puteți personaliza cu ușurință în funcție de preferințele dvs.

Mai întâi, instalați pluginul în zona dvs. de administrare WordPress. Pentru mai multe informații, citiți ghidul nostru pentru începători despre cum să instalezi un plugin WordPress.

Odată ce acest lucru este făcut, accesați Catch Scroll Progress Bar în tabloul de bord WordPress. Veți vedea acum câteva setări pentru bara de progres pe care să le configurați.

Cu acest plugin, puteți schimba poziția barei de progres de sus în jos. Acestea fiind spuse, puteți lăsa pur și simplu așa cum este, dacă preferați poziția normală de sus.

Un alt lucru pe care îl puteți personaliza este culoarea de fundal și culoarea de prim-plan.

Culoarea de fundal se referă la culoarea implicită a barei de progres atunci când cititorul nu a derulat pagina. Între timp, culoarea de prim-plan este culoarea care va apărea pe măsură ce cititorul derulează în jos pe pagină.

Următoarea este opacitatea, care controlează transparența culorilor de fundal și de prim-plan. Intervalul este între 0 și 1, 1 fiind opac și 0 fiind transparent sau invizibil.

Nu ezitați să vă jucați cu numerele până când găsiți nivelul de opacitate care vă place.

Apoi, puteți ajusta înălțimea barei de progres și raza colțurilor.

Pentru înălțime, am constatat că cel mai bun număr este între 1 și 8, dar nu mai mult. Altfel, bara de progres poate părea prea mare.

Raza de colț controlează cât de rotunjite arată colțurile barei de progres. Dacă nu vă place cum arată, atunci puteți introduce pur și simplu „0”.

Acum, acest plugin vă permite, de asemenea, să decideți în ce șabloane să afișați bara de progres: pe pagina de pornire, pagina de blog, arhive și categorii și/sau postări sau pagini individuale.

De obicei, trebuie să adăugați o bară de progres de lectură doar pe postările de pe blogul dvs. WordPress. În acest caz, am ales doar „Pagină/postare unică” în setarea „Selectați condiția șablonului pentru bara de progres”.

Am verificat, de asemenea, opțiunea „Postări” din secțiunea „Selectează tipul de postare la care se aplică bara de progres”, deoarece dorim ca bara să apară doar în postările de pe blog.

Acestea fiind spuse, nu ezitați să verificați condițiile care se potrivesc cel mai bine site-ului dvs.

Odată ce sunteți mulțumit de setările barei de progres, continuați și faceți clic pe „Salvare modificări”.

Acum, dacă previzualizați postarea blogului pe mobil sau pe desktop, ar trebui să vedeți o bară de progres.

Metoda 3: Adăugați o bară de progres de lectură cu cod

Puteți folosi, de asemenea, cod personalizat pentru a adăuga o bară de progres de citire pe site-ul dvs. WordPress.

Adesea, tutorialele vă vor cere să adăugați cod direct în fișierul functions.php al temei dumneavoastră. Dar, nu recomandăm acest lucru, deoarece cea mai mică greșeală vă poate defecta site-ul.

În schimb, recomandăm utilizarea pluginului WPCode. Este cea mai ușoară și sigură modalitate de a adăuga cod personalizat în WordPress fără a fi nevoie să editați fișierele de bază ale WordPress.

Am testat temeinic WPCode și l-am considerat o soluție fiabilă și ușor de utilizat pentru începători.

Vine cu o bibliotecă încorporată de fragmente de cod gata făcute pe care le poți adăuga pe site-ul tău în doar câteva clicuri, inclusiv unul pentru o bară de progres de lectură. Poți consulta recenzia noastră completă WPCode pentru a afla mai multe despre caracteristicile sale și de ce îl recomandăm.

Pentru a începe, trebuie să instalați și să activați pluginul gratuit WPCode. Dacă aveți nevoie de ajutor, consultați tutorialul nostru despre cum să instalați un plugin WordPress.

După ce pluginul este activat, accesați Fragmente de cod » Bibliotecă din tabloul de bord WordPress.

De acolo, căutați „Scroll Progress Bar” în bibliotecă, plasați cursorul mouse-ului peste el și faceți clic pe butonul „Use snippet”.

WPCode va adăuga apoi automat codul pentru dvs.

Metoda corectă de inserare va fi, de asemenea, selectată pentru dumneavoastră în fundal.

După aceea, tot ce trebuie să faceți este să comutați comutatorul de la Inactiv la Activ.

Apoi, faceți clic pe butonul „Actualizare”.

Acum, puteți vizualiza o postare de blog pe site-ul dvs. web.

O bară de progres simplă ar trebui să apară acum, astfel:

Sfaturi bonus pentru a menține cititorii blogului dvs. WordPress implicați

Doriți să transformați vizitatorii ocazionali în cititori fideli? Avem soluția pentru dvs.!

Consultați aceste tutoriale WordPress realizate de experți, pline de sfaturi pentru a vă menține audiența captivată:

• Stilizează fiecare postare WordPress diferit pentru a face conținutul tău captivant vizual.
• Creați separatoare de forme personalizate pentru a vă împărți textul și a ghida cititorii prin conținutul dvs.
• Adăugați emoji-uri pentru a vă exprima personalitatea și a adăuga o notă de distracție blogului dumneavoastră.
• Evidențiați postările noi pentru vizitatorii care revin și faceți-i să revină pentru mai mult.
• Evidențiați textul din postările dumneavoastră WordPress și subliniați punctele cheie pentru cititorii dumneavoastră.
• Adăugați note de subsol simple și elegante la postările de pe blog pentru a vă prezenta cercetarea.
• Impresionați-vă vizitatorii afișând testimoniale rotative pe site-ul dvs. WordPress.
• Adăugați un redimensionator de fonturi pe site-ul dvs. WordPress pentru a vă asigura că conținutul dvs. este accesibil tuturor.

Sperăm că acest articol v-a ajutat să adăugați bare de progres de citire în WordPress. De asemenea, ați putea dori să vedeți ghidul nostru complet despre cum să editezi un site WordPress și selecțiile noastre experte de cele mai bune alternative la Canva pentru grafica de design web.

Dacă ți-a plăcut acest articol, te rugăm să te abonezi la canalul nostru de YouTube pentru tutoriale video WordPress. Ne poți găsi, de asemenea, pe Twitter și Facebook.