Αυτό το άρθρο θα παρέχει τη διαδικασία για την προσθήκη μιας γραμμής προόδου στο WordPress χρησιμοποιώντας το ακόλουθο περίγραμμα:
- Τι είναι η γραμμή προόδου στο WP;
- Πώς να προσθέσετε γραμμές προόδου σε ιστότοπους WordPress χρησιμοποιώντας κώδικα;
- Πώς να προσθέσετε γραμμές προόδου σε ιστότοπους WordPress χρησιμοποιώντας πρόσθετα;
Τι είναι η γραμμή προόδου στο WordPress;
Μια γραμμή προόδου δείχνει την πρόοδο κάποιου σε ποσοστό χρησιμοποιώντας μια οριζόντια γραμμή. Είναι μια γραφική αναπαράσταση ορισμένων δεδομένων που μπορούν να παρέχουν πληροφορίες στον χρήστη με μια μόνο ματιά. Η χρήση γραμμών προόδου στις αναρτήσεις σας στο WordPress για την αναπαράσταση δεδομένων ή στατιστικών μπορεί να βοηθήσει στη βελτίωση της ελκυστικότητας του ιστότοπου και της αφοσίωσης των χρηστών.
Πώς να προσθέσετε γραμμές προόδου σε ιστότοπους WordPress χρησιμοποιώντας κώδικα;
Για να προσθέσετε μια γραμμή προόδου στο WordPress χωρίς πρόσθετο, ο χρήστης θα πρέπει να χρησιμοποιήσει το προσαρμοσμένο HTML και CSS σε μια ανάρτηση. Για να το κάνετε αυτό, ακολουθήστε τα παρακάτω βήματα:
Βήμα 1: Συνδεθείτε στον Πίνακα ελέγχου
Ανοίξτε το πρόγραμμα περιήγησης και μεταβείτε στο ' http://localhost/<Website-Name>/wp-login.php ' Σύνδεσμος. Δώστε τα διαπιστευτήρια διαχειριστή και πατήστε ' Σύνδεση Κουμπί ”:
Βήμα 2: Δημιουργήστε μια νέα ανάρτηση
Παω σε ' Αναρτήσεις > Προσθήκη νέου ” από το πλαϊνό μενού του πίνακα ελέγχου διαχειριστή:
Βήμα 3: Προσθέστε προσαρμοσμένο κώδικα HTML
Στην ανάρτηση, δώστε τον τίτλο και το πρόσθετο περιεχόμενο. Στη συνέχεια, κάντε κλικ στο ' + εικονίδιο ' και αναζητήστε το ' Προσαρμοσμένο HTML ' ΟΙΚΟΔΟΜΙΚΟ ΤΕΤΡΑΓΩΝΟ:
Στο μπλοκ HTML που προστέθηκε, επικολλήστε τον παρακάτω κώδικα. Αλλαξε το ' πλάτος ' μεσα στην ' Ετικέτες ” για το επιθυμητό ποσοστό της γραμμής προόδου. Ομοίως, αλλάξτε το ' εξέλιξη-κείμενο ' αναλόγως:
< div τάξη = 'προσαρμοσμένη γραμμή προόδου' >< σπιθαμή στυλ = 'πλάτος: 80%' >< / σπιθαμή >
< div τάξη = 'πρόοδος-κείμενο' > 80% < / div >
< / div >
Μετά από αυτό, πατήστε το ' Δημοσιεύω κουμπί ” για να ανεβάσετε την ανάρτηση στον ιστότοπο:
Βήμα 4: Προσθήκη προσαρμοσμένου CSS
Μόλις δημοσιευτεί η ανάρτηση, κάντε κλικ στο ' Προβολή ανάρτησης Κουμπί ”:
Στην προεπισκόπηση, κάντε κλικ στο ' Προσαρμογή κουμπί ” για να προσθέσετε το στυλ για τη γραμμή προόδου:
Ένα μενού επεξεργασίας θα εμφανιστεί στην αριστερή πλευρά της οθόνης. Εδώ, κάντε κύλιση προς τα κάτω και κάντε κλικ στο ' Πρόσθετο CSS ' Ενότητα:
Επικολλήστε τον ακόλουθο κώδικα CSS στο πλαίσιο για να δημιουργήσετε στυλ στη γραμμή προόδου:
.custom-progress-bar {Ιστορικό- χρώμα : #1a1a1a;
ύψος : 30 px;
padding: 5px;
πλάτος : 500 px;
περιθώριο: 5 px 0 ;
περίγραμμα-ακτίνα: 5px;
κουτί-σκιά: 0 1px 5px #000 ένθετο, 0 1 εικονοστοιχείο 0 # 444 ;
}
.custom-progress-bar σπιθαμή {
Ιστορικό- χρώμα : #0000FF;
οθόνη: inline-block;
float: αριστερά;
ύψος : 100 %;
περίγραμμα-ακτίνα: 3px;
κουτί-σκιά: 0 1 εικονοστοιχείο 0 rgba ( 255 , 255 , 255 , .5 ) ένθεση;
μετάβαση: πλάτος .4s ease-in-out?
}
.προχώρηση- κείμενο {
κείμενο- ευθυγραμμίζω : σωστά;
χρώμα : άσπρο;
περιθώριο: 0px;
}
Βήμα 5: Δημοσίευση της ανάρτησης
Τέλος, κάντε κλικ στο « Δημοσιεύω ” δημοσιεύστε για να αποθηκεύσετε αυτές τις αλλαγές:
Κατά τη φόρτωση εκ νέου της σελίδας, ο χρήστης μπορεί να δει ότι η γραμμή προόδου μπορεί να δει στην ανάρτηση:
Πώς να προσθέσετε γραμμές προόδου σε ιστότοπους WordPress χρησιμοποιώντας πρόσθετα;
Αυτή η επίδειξη θα χρησιμοποιήσει την προσθήκη 'Ultimate Blocks' για να προσθέσει μια γραμμή προόδου σε έναν ιστότοπο WordPress. Για να κάνετε το ίδιο, ακολουθήστε τα παρακάτω βήματα.
Βήμα 1: Προσθέστε ένα νέο πρόσθετο
Μόλις ο χρήστης συνδεθεί στον πίνακα ελέγχου, μεταβείτε στο ' Πρόσθετα > Προσθήκη νέου ” επιλογή από την πλαϊνή γραμμή μενού:
Βήμα 2: Εγκαταστήστε το πρόσθετο Ultimate Blocks
Αναζητήστε τα Ultimate Blocks και πατήστε το ' Εισαγω ' κλειδί. Στη συνέχεια, κάντε κλικ στο παρακάτω σημείο ' Εγκατάσταση τώρα Κουμπί ”:
Βήμα 3: Ενεργοποίηση Ultimate Blocks
Μόλις εγκατασταθεί το πρόσθετο, κάντε κλικ στο ' Δραστηριοποιώ κουμπί ” για να χρησιμοποιήσετε τη γραμμή προόδου στο WordPress:
Βήμα 4: Δημιουργήστε μια νέα ανάρτηση
Για να προσθέσετε μια γραμμή προόδου σε μια ανάρτηση WordPress, μεταβείτε στο ' Αναρτήσεις > Προσθήκη νέου ” επιλογή από το πλαϊνό μενού:
Βήμα 5: Προσθέστε το μπλοκ της γραμμής προόδου
Δώστε τίτλο και περιεχόμενο στην ανάρτηση. Στη συνέχεια, πατήστε το κουμπί ' + ' για να προσθέσετε ένα νέο μπλοκ. Στο μενού, αναζητήστε το ' Μπάρα προόδου ” και επιλέξτε το μπλοκ:
Βήμα 6: Ορίστε το ποσοστό για τη γραμμή
Για να ορίσετε ένα ποσοστό για τη γραμμή προόδου, χρησιμοποιήστε το μπλε ρυθμιστικό ή εισαγάγετε το ποσοστό στο παρακάτω πλαίσιο επισήμανσης:
Βήμα 7: Δημοσίευση της ανάρτησης
Αφού ολοκληρωθεί η ανάρτηση, κάντε κλικ στο ' Δημοσιεύω κουμπί ” για να ανεβάσετε την ανάρτηση στον ιστότοπο:
Βήμα 8: Προβολή της ανάρτησης
Μετά τη δημοσίευση της ανάρτησης, κάντε κλικ στο κουμπί «Προβολή ανάρτησης» για να δείτε την προεπισκόπηση της ανάρτησης στον ιστότοπο:
Μπορεί να φανεί στην παρακάτω έξοδο ότι η γραμμή προόδου προστίθεται στην ανάρτηση:
Αυτό αφορά την προσθήκη μιας γραμμής προόδου στο WordPress.
συμπέρασμα
Για να προσθέσετε μια γραμμή προόδου σε έναν ιστότοπο WordPress, μεταβείτε στο ' Πρόσθετα > Προσθήκη νέου ” επιλογή από το πλαϊνό μενού. Αναζητήστε και εγκαταστήστε το ' Ultimate Blocks ' συνδέω. Μετά την εγκατάσταση, ενεργοποιήστε το. Στη συνέχεια, μεταβείτε στο ' Αναρτήσεις > Προσθήκη νέου ” και δώστε τον τίτλο και το περιεχόμενο της ανάρτησης. Στη συνέχεια, κάντε κλικ στο ' + εικονίδιο ' και αναζητήστε το ' Μπάρα προόδου ' ΟΙΚΟΔΟΜΙΚΟ ΤΕΤΡΑΓΩΝΟ. Ορίστε το ποσοστό προόδου χρησιμοποιώντας το ρυθμιστικό ή εισάγοντας τον αριθμό. Αυτό το άρθρο παρουσιάζει τη διαδικασία για την προσθήκη μιας γραμμής προόδου στο WordPress με και χωρίς την προσθήκη.