Πώς να αλλάξετε γραμματοσειρές στο WordPress και να βελτιώσετε τη σχεδίαση του ιστότοπού σας

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

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

Σημασία της τυπογραφίας και της προσαρμογής γραμματοσειρών στο WordPress

• Διαφοροποίηση και μοναδικότητα: Έχετε δει ποτέ έναν ιστότοπο και να πείτε στον εαυτό σας: “Αυτό φαίνεται γνωστό”; Παρόλο που οι περισσότεροι ιστότοποι χρησιμοποιούν θέματα από τον κατάλογο του WordPress, μπορείτε να κάνετε τον ιστότοπό σας μοναδικό αλλάζοντας το μέγεθος γραμματοσειράς και τα χρώματα.
• Ιεραρχία και έμφαση: Μπορείτε να καθορίσετε τι προηγείται του άλλου μέσω της διαφοροποίησης των γραμματοσειρών. Για παράδειγμα, μπορείτε να έχετε μεγαλύτερες γραμματοσειρές στα H1 και μικρότερες σε H2.
• Συνέπεια και επαγγελματισμός: Μπορείτε να δώσετε στον ιστότοπό σας WordPress μια γυαλιστερή εμφάνιση όταν χρησιμοποιείτε μια σταθερή γραμματοσειρά παντού. Μπορείτε επίσης να αλλάξετε το χρώμα της γραμματοσειράς για να συνδυάζεται με τα χρώματα της επωνυμίας σας.
• Προσβασιμότητα: Η αλλαγή της γραμματοσειράς του ιστότοπού σας ή των σελίδων σας μπορεί να διευκολύνει τους χρήστες με προβλήματα όρασης ή άλλες αναπηρίες να διαβάσουν περιεχόμενο στον ιστότοπό σας.

Ο ρόλος του CSS στην προσαρμογή γραμματοσειράς

Το WordPress δημιουργείται χρησιμοποιώντας PHP, MySQL, HTML, CSS και JavaScript. Κάθε θέμα WordPress έχει ένα style.css που ελέγχει την οπτική διάταξη και τη σχεδίαση των ιστότοπων. Μπορείτε έτσι να εφαρμόσετε τις αλλαγές γραμματοσειράς που θέλετε στον ιστότοπό σας στο WordPress χρησιμοποιώντας αυτό το αρχείο.

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

Τώρα, διερευνούμε ορισμένες προσεγγίσεις για την αλλαγή γραμματοσειρών στο WordPress.

WordPress Customizer

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

Ορισμένα θέματα θα σας επιτρέψουν να χρησιμοποιήσετε την επιλογή προσαρμογής του WordPress. Από την άλλη πλευρά, ορισμένοι έχουν περιορισμένες επιλογές, αναγκάζοντάς σας να εξερευνήσετε τις άλλες επιλογές που θα εξερευνήσουμε στις άλλες προσεγγίσεις.

Βεβαιωθείτε ότι είστε συνδεδεμένοι στο WordPress σας και, στη συνέχεια, ακολουθήστε αυτά τα βήματα.

• Στην αριστερή πλευρά του πίνακα ελέγχου, κάντε κλικ στο αναπτυσσόμενο μενού και επιλέξτε “Εμφάνιση”.

• Κάντε κλικ στο «Προσαρμογή».

Σημείωση: Η εμφάνιση του ιστότοπού σας στο WordPress μπορεί να διαφέρει ανάλογα με το θέμα που χρησιμοποιείτε. Για την περίπτωσή μου, χρησιμοποιώ το ‘GeneratePress Child Developer Theme’.

• Όταν κάνω κλικ στο “Προσαρμογή”, θα εμφανιστεί ένα αναπτυσσόμενο μενού όπου θα επιλέξω “Τυπογραφία”

• Τώρα μπορείτε να προσαρμόσετε τον ιστότοπό σας στις ανάγκες σας.

Για παράδειγμα, μπορώ να επιλέξω το «Σώμα» που αλλάζει τις «Γραμματοσειρές συστήματος». Η προεπιλογή είναι “System Stack” και μπορώ να επιλέξω αυτό που ταιριάζει στις ανάγκες μου από το αναπτυσσόμενο μενού.

Επεξεργαστής θεμάτων

Η δυνατότητα επεξεργασίας θεμάτων σάς επιτρέπει να επεξεργαστείτε τα διαφορετικά αρχεία σε ένα θέμα WordPress. Η εστίασή μας θα είναι στο αρχείο style.css καθώς σας επιτρέπει να προσαρμόσετε τις γραμματοσειρές.

Τα ακριβή βήματα που πρέπει να ακολουθήσετε μπορεί να διαφέρουν ανάλογα με το θέμα που χρησιμοποιείτε. Εξακολουθώ να χρησιμοποιώ το “GP Developer Child Theme” για σκοπούς επίδειξης.

Μπορείτε να ακολουθήσετε αυτά τα βήματα.

• Στο “Μενού”, κάντε κλικ στο “Εμφάνιση” και μετά στο “Επεξεργαστής αρχείου θέματος”

• Το παραπάνω βήμα θα ανοίξει το αρχείο style.css όπου μπορείτε να προσθέσετε τα στυλ που προτιμάτε.

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

/* Change Font to Italics */

body {

  font-style: italic;

}

Μπορείτε επίσης να επιλέξετε τον ενσωματωμένο επεξεργαστή CSS για την πραγματοποίηση των αλλαγών σας. Κάντε κλικ στην καρτέλα «Πρόσθετο CSS» και γράψτε τον κωδικό σας CSS.

Για παράδειγμα, μπορείτε να έχετε κάτι σαν αυτό.

Κάντε κλικ στο κουμπί «Δημοσίευση» για να αποθηκεύσετε τις αλλαγές σας.

Προσαρμογή γραμματοσειράς για μεμονωμένες σελίδες

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

Μπορείτε να χρησιμοποιήσετε αυτήν την προσέγγιση για σελίδες όπως η “Πολιτική Απορρήτου”. Για παράδειγμα, μπορώ να αλλάξω ένα συγκεκριμένο H1 στη σελίδα “Πολιτική Απορρήτου” ώστε να είναι πράσινο και πλάγιο. Για να το πετύχω αυτό, θα ακολουθήσω αυτά τα βήματα.

• Μεταβείτε στον Πίνακα ελέγχου μου και κάντε κλικ στο “Όλες οι σελίδες”.
• Θα επιλέξω τη σελίδα-στόχο μου “Πολιτική απορρήτου” και θα κάνω κλικ στην “επεξεργασία”
• Κάντε κλικ στην καρτέλα “Κείμενο” αντί για την καρτέλα “Οπτικά”, όπως φαίνεται σε αυτό το στιγμιότυπο οθόνης

Αυτός είναι ο κωδικός που έχω προσθέσει.

<h1 style="font-style: italic; color: green;">Heading For Demonstration Purposes</h1>

Όταν η σελίδα αποδοθεί, θα εμφανιστεί ως εξής.

Χρησιμοποιήστε πρόσθετα

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

Για να ξεκινήσετε να χρησιμοποιείτε πρόσθετα γραμματοσειρών, μεταβείτε στον πίνακα ελέγχου του WordPress και επιλέξτε «Προσθήκες» και μετά «Προσθήκη νέου».

Τώρα μπορείτε να χρησιμοποιήσετε τη δυνατότητα «προσθήκη αναζήτησης» για να επιλέξετε την προσθήκη-στόχο σας.

Αυτά είναι μερικά από τα καλύτερα που μπορείτε να χρησιμοποιήσετε.

#1. Γραμματοσειρές Seed

Γραμματοσειρές Seed είναι μια προσθήκη γραμματοσειρών που σας επιτρέπει να χρησιμοποιείτε γραμματοσειρές ιστού. Η πλατφόρμα διαθέτει πέντε έτοιμες ταϊλανδέζικες-αγγλικές γραμματοσειρές Ιστού που μπορείτε να χρησιμοποιήσετε. Μπορείτε επίσης να χρησιμοποιήσετε γραμματοσειρές Google ή να ανεβάσετε προσαρμοσμένες. Γραμματοσειρές Seed είναι ένα πρόσθετο ανοιχτού κώδικα και είναι δωρεάν στη χρήση.

#2. Χρησιμοποιήστε οποιαδήποτε γραμματοσειρά

Χρησιμοποιήστε οποιαδήποτε γραμματοσειρά σας επιτρέπει να ανεβάσετε τυχόν προσαρμοσμένες γραμματοσειρές στον ιστότοπό σας στο WordPress, ακόμη και χωρίς γνώση CSS. Έχετε επίσης την επιλογή να επιλέξετε από την 23.871+ προκαθορισμένη συλλογή γραμματοσειρών. Η μόνη απαίτηση είναι οι γραμματοσειρές σας να είναι σε μορφές ttf, otf ή woff.

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

#3. Πρόσθετο γραμματοσειρών

Πρόσθετο γραμματοσειρών είναι μια προσθήκη που σας επιτρέπει να χρησιμοποιείτε περισσότερες από 1455 μοναδικές γραμματοσειρές στη βιβλιοθήκη του Google Fonts. Η προσθήκη έχει μια δυνατότητα προεπισκόπησης που σας επιτρέπει να κάνετε προεπισκόπηση του τρόπου εμφάνισης των γραμματοσειρών στον ιστότοπό σας προτού εφαρμόσετε τις αλλαγές.

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

#4. MW Font Changer

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

Είναι ένα εύχρηστο πρόσθετο με 30+ γραμματοσειρές. Για να αλλάξετε τις γραμματοσειρές στο θέμα σας, απλώς εισαγάγετε το αναγνωριστικό και την κατηγορία θέματος. Το MW Font Changer έχει 10.000+ ενεργές εγκαταστάσεις και είναι συμβατό με WordPress 5.0 και νεότερη έκδοση. Αυτό το πρόσθετο είναι λογισμικό ανοιχτού κώδικα.

Πώς να βελτιστοποιήσετε τις γραμματοσειρές στο WordPress

Ένας καλός ιστότοπος πρέπει να φορτώνει γρήγορα. Μπορεί να έχετε το πιο γρήγορο θέμα στον κατάλογο του WordPress. Ωστόσο, η προσθήκη πολλών πολυμέσων και γραμματοσειρών μπορεί να μειώσει την ταχύτητα φόρτωσης. Ο μόνος τρόπος για να αποφύγετε αυτό το περιστατικό είναι να βελτιστοποιήσετε τις γραμματοσειρές σας. Αυτές είναι μερικές από τις καλύτερες προσεγγίσεις.

• Μεταφόρτωση πολλών τύπων αρχείων: Μπορείτε να αποθηκεύσετε τις γραμματοσειρές σας σε διαφορετικές μορφές. Μπορείτε να ανεβάσετε διαφορετικές μορφές και το πρόγραμμα περιήγησης θα επιλέξει την καλύτερη με βάση χαρακτηριστικά όπως το μέγεθος της οθόνης του χρήστη και το λειτουργικό σύστημα.
• Μεταφορτώστε μόνο τους χαρακτήρες που χρειάζεστε: Εάν έχετε γραμματοσειρές που δεν θα χρησιμοποιήσετε εκτενώς στον ιστότοπό σας, μπορείτε να ανεβάσετε μόνο τους χαρακτήρες που χρειάζεστε αντί για ολόκληρη τη βιβλιοθήκη.
• Φιλοξενήστε τις γραμματοσειρές σας σε CDN: Η διαδικασία μεταφόρτωσης προσαρμοσμένων γραμματοσειρών μπορεί να αυξήσει το μέγεθος του ιστότοπού σας στο WordPress. Τα δίκτυα παράδοσης περιεχομένου (CDN) σάς επιτρέπουν να φιλοξενείτε τις γραμματοσειρές σε έναν εξωτερικό διακομιστή και να τις συνδέετε μόνο με τον ιστότοπό σας στο WordPress.
• Χρήση προσωρινής αποθήκευσης WordPress: Η κρυφή μνήμη του WordPress αποθηκεύει δεδομένα που χρησιμοποιούνται συχνά από έναν χρήστη και τα σερβίρει σε έναν χρήστη στο μέλλον όταν επισκέπτεται ξανά τον ιστότοπο. Μια τέτοια προσέγγιση αυξάνει την ταχύτητα φόρτωσης.

Συχνές ερωτήσεις

Πώς μπορώ να επιλέξω τις κατάλληλες γραμματοσειρές για τον ιστότοπό μου στο WordPress;

Υπάρχουν πολλά πράγματα που πρέπει να λάβετε υπόψη. Για παράδειγμα, πρέπει να λάβετε υπόψη την εικόνα της επωνυμίας σας, τη συνολική σχεδίαση και το κοινό-στόχο.

Χρειάζεται να γνωρίζετε κωδικοποίηση για να αλλάξετε γραμματοσειρές στο WordPress;

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

Μπορείτε να αλλάξετε γραμματοσειρές σε συγκεκριμένες περιοχές του ιστότοπού σας στο WordPress;

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

Μπορώ να επιστρέψω στις αρχικές γραμματοσειρές για το θέμα του WordPress;

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

συμπέρασμα

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

Μπορείτε επίσης να εξερευνήσετε πώς η ορατότητα CSS βελτιώνει τον σχεδιασμό ιστού σας με κρυμμένα πετράδια.