Πώς να προσαρμόσετε τον ιστότοπό σας στο WordPress με CSS: 3 εύκολες μέθοδοι

Το WordPress έχει εξελιχθεί με τα χρόνια και σήμερα είναι μια αρκετά ευέλικτη και εύκολη στην προσαρμογή πλατφόρμα μέσω του προγράμματος επεξεργασίας μπλοκ, Gutenberg. Ωστόσο, θα υπάρξουν στιγμές που χρειάζεστε λίγο περισσότερη προσέγγιση απ' ό, τι παρέχει ο επεξεργαστής Gutenberg.

Εδώ είναι χρήσιμο το προσαρμοσμένο CSS. Το στυλ CSS σάς επιτρέπει να επεξεργάζεστε τα χρώματα, τα κενά, τις γραμματοσειρές, τις διατάξεις και βασικά κάθε άλλο οπτικό στοιχείο του ιστότοπού σας WordPress, επιτρέποντάς σας να τον κάνετε να φαίνεται ακριβώς όπως θέλετε.

Σε αυτό το άρθρο, θα σας καθοδηγήσουμε στα βασικά στοιχεία της προσαρμογής του ιστότοπού σας WordPress με CSS.

Γιατί να προσαρμόσετε τον ιστότοπό σας με CSS;

Η προσθήκη προσαρμοσμένου CSS είναι μόνο μία από τις μεθόδους που μπορείτε να χρησιμοποιήσετε για να βελτιώσετε την εμφάνιση του ιστότοπού σας. Άλλες μέθοδοι περιλαμβάνουν τη χρήση α καλά εξοπλισμένο premium θέμα WordPress, ή εγκατάσταση ενός προγράμματος δημιουργίας σελίδων.

Ενώ αυτές οι δύο μέθοδοι είναι λίγο πιο εύκολες στη χρήση για αρχάριους και δεν απαιτούν γνώσεις κωδικοποίησης, η χρήση προσαρμοσμένου CSS είναι πιο συμφέρουσα με δύο βασικούς τρόπους:

Μηδενικό Κόστος

Τα premium θέματα και τα προγράμματα δημιουργίας σελίδων WordPress μπορεί να είναι χρήσιμα, αλλά έχουν κόστος—σε δολάρια και σεντ. Οπλισμένοι με τη γνώση του πώς να γράφετε προσαρμοσμένο CSS, από την άλλη πλευρά, μπορείτε να επιτύχετε τα ίδια αποτελέσματα χωρίς να επιβαρυνθείτε με επιπλέον έξοδα.

Minimal Bloat

Τα προγράμματα δημιουργίας σελίδων και τα θέματα με καλά χαρακτηριστικά έχουν σχεδιαστεί για να παρέχουν στους χρήστες μεγαλύτερη ευελιξία και ένα ευρύ φάσμα επιλογών για την προσαρμογή των ιστοτόπων τους. Εξαιτίας αυτού, τείνουν να προσθέτουν φούσκωμα στους ιστότοπους, ενδεχομένως επιβραδύνοντάς τους.

Όταν γράφετε προσαρμοσμένο CSS, από την άλλη πλευρά, θα προσθέτετε μόνο τις απαραίτητες δυνατότητες, με αποτέλεσμα γενικά να έχετε ελαφρύτερους ιστότοπους και μεγαλύτερες ταχύτητες φόρτωσης.

3 εύκολες μέθοδοι για να προσαρμόσετε τον ιστότοπο WordPress σας με CSS

Ας ελπίσουμε ότι γνωρίζετε ήδη πώς να γράψετε CSS. Αφού εξοικειωθείτε με τα βασικά, μπορείτε να χρησιμοποιήσετε οποιαδήποτε από τις ακόλουθες μεθόδους για να προσθέσετε προσαρμοσμένο CSS στον ιστότοπό σας στο WordPress:

Μέθοδος 1: Χρησιμοποιήστε το WordPress Customizer

Με το WordPress 4.7 ή οποιαδήποτε έκδοση μετά από αυτό, μπορείτε να προσθέσετε προσαρμοσμένο CSS απευθείας από την περιοχή διαχειριστή. Αυτή είναι η πιο απλή μέθοδος, και επειδή υπάρχει διαθέσιμη ζωντανή προεπισκόπηση, μπορείτε να δείτε τυχόν αλλαγές που κάνετε σε πραγματικό χρόνο.

Είναι επίσης το πιο συνιστώμενο, καθώς όλες οι αλλαγές που θα κάνετε αποθηκεύονται στο ίδιο το WordPress. Αυτό σημαίνει ότι ακόμα κι αν αλλάξετε ή ενημερώσετε το θέμα σας, δεν θα χάσετε το προσαρμοσμένο CSS.

Εδώ είναι τα βήματα που πρέπει να ακολουθήσετε:

Βήμα 1: Πλοηγηθείτε στο Εμφάνιση > Προσαρμογή.

Αυτό θα ανοίξει το πρόγραμμα προσαρμογής θεμάτων WordPress, το οποίο σας δείχνει μια ζωντανή προεπισκόπηση του ιστότοπού σας στα δεξιά, μαζί με ορισμένες επιλογές προσαρμογής στα αριστερά. Κάντε κύλιση προς τα κάτω στο κάτω μέρος του αριστερού πίνακα και θα βρείτε ένα Πρόσθετο CSS αυτί.

Βήμα 2: Κάνε κλικ στο Πρόσθετο CSS Αυτί.

Αυτό θα ανοίξει ένα μικρό πλαίσιο στο αριστερό παράθυρο όπου μπορείτε να προσθέσετε το προσαρμοσμένο CSS σας. Μπορείτε να πληκτρολογήσετε όσες γραμμές κώδικα CSS θέλετε. Το υπέροχο με αυτό το πρόγραμμα επεξεργασίας είναι ότι επικυρώνει τον κώδικά σας, ειδοποιώντας σας εάν υπάρχουν σφάλματα.

Βήμα 3: Δημοσιεύστε τις αλλαγές σας.

Κάθε έγκυρος κανόνας CSS που προσθέτετε θα εμφανίζεται στην περιοχή ζωντανής προεπισκόπησης στα δεξιά. Για να εφαρμόσετε τις αλλαγές στον ιστότοπό σας, κάντε κλικ στο Δημοσιεύω κουμπί στο επάνω μέρος του αριστερού παραθύρου μόλις είστε ικανοποιημένοι. Εάν δεν θέλετε οι αλλαγές να τεθούν σε ισχύ αμέσως, μπορείτε επίσης να προγραμματίσετε τη δημοσίευση αργότερα ή να αποθηκεύσετε την εργασία σας ως πρόχειρο.

Είναι σημαντικό να σημειωθεί ότι τυχόν αλλαγές που κάνετε χρησιμοποιώντας το πρόγραμμα προσαρμογής συνδέονται με το τρέχον θέμα σας. Αν ποτέ μεταβείτε σε άλλο θέμα, οι αλλαγές θα χαθούν εκτός και αν αντιγράψετε το προσαρμοσμένο CSS και το προσθέσετε στο νέο θέμα. Είναι καλή πρακτική να αποθηκεύετε όλο το προσαρμοσμένο CSS που προσθέτετε σε ένα θέμα σε ένα σημειωματάριο. Με αυτόν τον τρόπο, μπορείτε απλά να αντιγράψετε τον κώδικα και να τον επικολλήσετε στην ενότητα "Πρόσθετο CSS" για ένα διαφορετικό θέμα.

Αν αυτό ακούγεται σαν υπερβολική δουλειά και προτιμάτε μια λύση που σας επιτρέπει να εφαρμόσετε το προσαρμοσμένο CSS σας σε οποιοδήποτε θέμα WordPress χρησιμοποιείτε, η επόμενη μέθοδος είναι για εσάς.

Μέθοδος 2. Χρησιμοποιήστε ένα πρόσθετο

Οι προσαρμοσμένες προσθήκες CSS αποθηκεύουν το προσαρμοσμένο CSS σας ξεχωριστά από το θέμα σας, επιτρέποντας την εφαρμογή των αλλαγών σας ανεξάρτητα από το θέμα που χρησιμοποιείτε. Αυτά τα πρόσθετα συνοδεύονται επίσης με επιπλέον δυνατότητες, όπως η αυτόματη συμπλήρωση, που μπορούν να κάνουν την προσθήκη CSS ευκολότερη.

Το μόνο μειονέκτημα είναι ότι είναι λογισμικό τρίτου κατασκευαστή, πράγμα που σημαίνει ότι μπορεί ενδεχομένως να επιβραδύνει τον ιστότοπό σας. Ωστόσο, οι περισσότερες από αυτές τις προσθήκες είναι ελαφριές, επομένως γενικά έχουν μικρό αντίκτυπο στην απόδοση του ιστότοπού σας. Ακολουθούν μερικές από τις καλύτερες προσαρμοσμένες προσθήκες CSS που μπορείτε να χρησιμοποιήσετε:

• Απλό προσαρμοσμένο CSS

Απλό προσαρμοσμένο CSS είναι ένα από τα πιο δημοφιλή προσαρμοσμένα πρόσθετα CSS. Είναι ελαφρύ, εύκολο στη χρήση και προσφέρει εξαιρετικές δυνατότητες. Η ρύθμιση του είναι εύκολη. Το μόνο που χρειάζεται να κάνετε είναι να εγκαταστήσετε και να ενεργοποιήσετε το πρόσθετο. Στη συνέχεια, μεταβείτε στο Εμφάνιση ενότητα στο αριστερό παράθυρο του πίνακα ελέγχου σας.

Θα δείτε μια νέα επιλογή που ονομάζεται Προσαρμοσμένο CSS. Κάνοντας κλικ σε αυτό θα ανοίξει ένα πρόγραμμα επεξεργασίας όπου μπορείτε να προσθέσετε το προσαρμοσμένο CSS σας. Κάντε κλικ στο Ενημέρωση προσαρμοσμένου CSS κουμπί για να αποθηκεύσετε τις αλλαγές σας. Για να δείτε τις αλλαγές, απλώς ανανεώστε τον ιστότοπό σας.

• Απλή προσαρμοσμένη CSS και JS

Εάν θέλετε ακόμη περισσότερες δυνατότητες, το Απλή προσαρμοσμένη προσθήκη CSS και JS είναι μια εξαιρετική επιλογή. Εκτός από την προσθήκη CSS, σας επιτρέπει να προσθέσετε εγγραφές JavaScript.

• Ήρωας CSS

Εάν δεν θέλετε να γράψετε ούτε μία γραμμή κώδικα, το Πρόσθετο CSS Hero είναι τέλειο για εσάς. Αυτή η προσθήκη προσφέρει ένα οπτικό πρόγραμμα επεξεργασίας CSS με αναπτυσσόμενα μενού και πεδία εισαγωγής που σας επιτρέπουν να επεξεργάζεστε σχεδόν οποιοδήποτε στυλ CSS στον ιστότοπό σας χωρίς να χρειάζεται να γράψετε κώδικα.

Μέθοδος 3. Επεξεργαστείτε τον ακατέργαστο κώδικα

Οι δύο μέθοδοι που περιγράψαμε παραπάνω σάς επιτρέπουν να προσθέσετε προσαρμοσμένο CSS στον ιστότοπό σας χωρίς να χρειάζεται να αγγίξετε κάποιο από τα αρχεία θέματός σας. Ωστόσο, σε ορισμένες περιπτώσεις, μπορεί να θέλετε να επεξεργαστείτε το CSS του θέματός σας ή να προσθέσετε απευθείας προσαρμοσμένο CSS στον κώδικα του θέματός σας.

Για να το κάνετε αυτό, θα χρειαστεί να αποκτήσετε πρόσβαση στο φύλλο στυλ του ιστότοπού σας. Ένας εύκολος τρόπος πρόσβασης σε αυτό το φύλλο στυλ είναι μέσω του Επεξεργαστής θεμάτων στον πίνακα ελέγχου του WordPress σας.

Ωστόσο, προτού προχωρήσουμε περαιτέρω, υπάρχουν μερικές διασφαλίσεις που πρέπει να λάβετε. Πρώτα, δημιουργήστε αντίγραφα ασφαλείας του ιστότοπού σας. Κατά την επεξεργασία των αρχείων θεμάτων σας, είναι εύκολο να κάνετε λάθη που ενδέχεται να καταστρέψουν τον ιστότοπό σας.

Ένα αντίγραφο ασφαλείας διασφαλίζει ότι έχετε έναν λειτουργικό ιστότοπο στον οποίο μπορείτε να επιστρέψετε. Επόμενο, δημιουργήστε ένα παιδικό θέμα. Εάν κάνετε άμεσες αλλαγές στο γονικό σας θέμα, οι αλλαγές θα χάνονται κάθε φορά που ενημερώνεται το θέμα.

Μόλις τεθούν σε ισχύ αυτές οι διασφαλίσεις, συνδεθείτε στο backend του WordPress. Παω σε Εμφάνιση > Επεξεργαστής θεμάτων. Όταν κάνετε κλικ στην επιλογή επεξεργασίας θέματος, θα δείτε ένα αναδυόμενο πλαίσιο που σας προειδοποιεί να μην κάνετε άμεσες αλλαγές στα αρχεία θέματός σας. Αν ακολουθήσετε τα παραπάνω βήματα, είστε έτοιμοι.

Κάντε κλικ καταλαβαίνω να προχωρήσει.

Αφού κάνετε κλικ, θα πρέπει να δείτε το φύλλο στυλ του ιστότοπού σας από προεπιλογή. Εάν όχι, απλώς κοιτάξτε στο δεξί παράθυρο και κάντε κλικ στο στυλ.css σύμφωνα με το Φύλλο στυλ επιλογή.

Από εδώ, μπορείτε να κάνετε άμεσες αλλαγές στα αρχεία θεμάτων σας. Απλώς μην ξεχάσετε να κάνετε κλικ Αποθήκευση και ενημέρωση μόλις τελειώσεις.

Πάρτε τον έλεγχο της εμφάνισης του ιστότοπού σας με προσαρμοσμένο CSS

Το να μάθετε πώς να γράφετε προσαρμοσμένο CSS στο WordPress μπορεί να χρειαστεί λίγο χρόνο για αρχάριους, αλλά θα σας δώσει πραγματικό έλεγχο στην εμφάνιση του ιστότοπού σας. Και αυτό είναι με μηδενικό κόστος και με ελάχιστη επίδραση στην απόδοση του ιστότοπού σας.

Ωστόσο, εάν προτιμάτε να μην κάνετε χειροκίνητο σχεδιασμό, υπάρχουν άλλοι τρόποι για να ολοκληρώσετε τη δουλειά, όπως χρησιμοποιώντας ένα από τα κορυφαία προγράμματα δημιουργίας σελίδων για το WordPress.

5 προγράμματα δημιουργίας σελίδων WordPress που μπορούν να σας βοηθήσουν να δημιουργήσετε καταπληκτικούς ιστότοπους

Θέλετε να κάνετε τον ιστότοπό σας στο WordPress να φαίνεται εκπληκτικός, αλλά δεν μπορείτε να αντέξετε οικονομικά έναν προγραμματιστή; Δοκιμάστε αυτά τα προγράμματα δημιουργίας σελίδων WordPress.

Διαβάστε Επόμενο

Σχετικά με τον Συγγραφέα