Questo articolo fornirà la procedura per aggiungere una barra di avanzamento in WordPress utilizzando il seguente schema:
- Cos'è una barra di avanzamento in WP?
- Come aggiungere barre di avanzamento ai siti Web WordPress utilizzando il codice?
- Come aggiungere barre di avanzamento ai siti Web WordPress utilizzando i plugin?
Cos'è una barra di avanzamento in WordPress?
Una barra di avanzamento mostra l'avanzamento di qualcosa in percentuale utilizzando una barra orizzontale. È una rappresentazione grafica di alcuni dati che può fornire informazioni all'utente con un solo sguardo. L'utilizzo delle barre di avanzamento nei tuoi post WordPress per rappresentare dati o statistiche può aiutare a migliorare l'attrattiva del sito Web e il coinvolgimento degli utenti.
Come aggiungere barre di avanzamento ai siti Web WordPress utilizzando il codice?
Per aggiungere una barra di avanzamento a WordPress senza plug-in, l'utente dovrà utilizzare HTML e CSS personalizzati in un post. Per fare ciò, seguire i passaggi indicati di seguito:
Passaggio 1: accedi alla dashboard
Apri il browser e vai su “ http://localhost/<Website-Name>/wp-login.php ' collegamento. Fornisci le credenziali di amministratore e premi il pulsante ' Login pulsante ':
Passaggio 2: crea un nuovo post
Vai a ' Messaggi > Aggiungi nuovo 'dal menu laterale della dashboard di amministrazione:
Passaggio 3: aggiungi il codice HTML personalizzato
Nel post, fornisci il titolo e i contenuti aggiuntivi. Quindi, fare clic su ' + ' e cerca l'icona ' HTML personalizzato 'blocco:
Nel blocco HTML aggiunto, incolla il codice fornito di seguito. Cambiare il ' larghezza ' dentro il ' ' tag per la percentuale desiderata della barra di avanzamento. Allo stesso modo, cambia il ' testo-progressione ' di conseguenza:
< div classe = 'barra di avanzamento personalizzata' >< arco stile = 'larghezza: 80%' >< / arco >
< div classe = 'testo-progressione' > 80% < / div >
< / div >
Successivamente, premi il pulsante ' Pubblicare ' per caricare il post sul sito web:
Passaggio 4: aggiungi CSS personalizzato
Una volta pubblicato il post, clicca sul pulsante “ Visualizza messaggio pulsante ':
Nell'anteprima, fare clic su ' personalizzare ' per aggiungere lo stile alla barra di avanzamento:
Verrà visualizzato un menu di editor sul lato sinistro dello schermo. Qui, scorri verso il basso e fai clic su ' CSS aggiuntivi ' sezione:
Incolla il seguente codice CSS nella casella per definire lo stile della barra di avanzamento:
.barra di avanzamento personalizzata {sfondo- colore : #1a1a1a;
altezza : 30px;
imbottitura: 5px;
larghezza : 500px;
margine: 5px 0 ;
raggio del bordo: 5px;
scatola-ombra: 0 1px 5px #000 riquadro, 0 1px 0 # 444 ;
}
.barra di avanzamento personalizzata arco {
sfondo- colore : #0000FF;
visualizzazione: blocco in linea;
galleggiante: sinistra;
altezza : 100 %;
raggio del bordo: 3px;
scatola-ombra: 0 1px 0 RGBA ( 255 , 255 , 255 , .5 ) inserto;
transizione: larghezza .4s facilità di entrata e uscita;
}
.progressione- testo {
testo- allineare : Giusto;
colore : bianco;
margine: 0px;
}
Passaggio 5: pubblica il post
Infine, clicca su “ Pubblicare ' post per salvare queste modifiche:
Dopo aver ricaricato la pagina, l'utente può vedere che la barra di avanzamento può essere vista nel post:
Come aggiungere barre di avanzamento ai siti Web WordPress utilizzando i plugin?
Questa dimostrazione utilizzerà il plug-in 'Ultimate Blocks' per aggiungere una barra di avanzamento a un sito Web WordPress. Per fare lo stesso, seguire i passaggi indicati di seguito.
Passaggio 1: aggiungi un nuovo plugin
Una volta che l'utente ha effettuato l'accesso alla dashboard, vai alla sezione ' Plugin > Aggiungi nuovo 'opzione dalla barra dei menu laterale:
Passaggio 2: installa il plugin Ultimate Blocks
Cerca gli Ultimate Blocks e premi il pulsante ' accedere ' chiave. Quindi, fare clic sul punto indicato di seguito ' Installa ora pulsante ':
Passaggio 3: attiva Ultimate Blocks
Una volta installato il plug-in, fare clic su ' Attivare ' per utilizzare la barra di avanzamento in WordPress:
Passaggio 4: crea un nuovo post
Per aggiungere una barra di avanzamento a un post WordPress, vai alla sezione ' Messaggi > Aggiungi nuovo 'opzione dal menu laterale:
Passaggio 5: aggiungi il blocco della barra di avanzamento
Fornisci un titolo e un contenuto al post. Successivamente, premi il pulsante “ + 'icona per aggiungere un nuovo blocco. Nel menu, cerca ' Barra di avanzamento ' e seleziona il blocco:
Passaggio 6: imposta la percentuale per la barra
Per impostare una percentuale per la barra di avanzamento, utilizza il cursore blu o inserisci la percentuale nella casella evidenziata qui sotto:
Passaggio 7: pubblica il post
Una volta completato il post, fai clic su ' Pubblicare ' per caricare il post sul sito web:
Passaggio 8: Visualizza il post
Dopo aver pubblicato il post, clicca sul pulsante “Visualizza post” per vedere l'anteprima del post sul sito:
Nell'output seguente si può vedere che la barra di avanzamento è stata aggiunta al post:
Si tratta solo di aggiungere una barra di avanzamento in WordPress.
Conclusione
Per aggiungere una barra di avanzamento a un sito Web WordPress, vai alla sezione ' Plugin > Aggiungi nuovo 'opzione dal menu laterale. Cerca e installa il ' Blocchi definitivi ' collegare. Dopo l'installazione, attivalo. Quindi, vai a “ Messaggi > Aggiungi nuovo ' e fornisci il titolo e il contenuto del post. Successivamente, fai clic su ' + ' e cerca l'icona ' Barra di avanzamento 'blocco. Imposta la percentuale di avanzamento utilizzando il dispositivo di scorrimento o inserendo il numero. In questo articolo è stata illustrata la procedura per aggiungere una barra di avanzamento in WordPress con e senza plugin.