Πέμπτη, 25 Απριλίου, 2024

Πως να αλλάξεις την γραμματοσειρά μέσα στο Gutenberg

Share

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

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

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

Διάβασε επίσης: Δωρεάν γραμματοσειρές από ιστοσελίδες με απεριόριστα fonts

Συχνές Ερωτήσεις για την γραμματοσειρά του Gutenberg

Ποια είναι η προεπιλεγμένη γραμματοσειρά του Gutenberg;

Από το WordPress 5.7, η προεπιλεγμένη γραμματοσειρά άλλαξε από Noto Serif και Times New Roman (ως fallback font) και πλέον χρησιμοποιείται η γραμματοσειρά του συστήματος μας. Αυτό σημαίνει πως θα βλέπεις διαφορετική γραμματοσειρά στα Windows, στο Linux και στο macOS.

Ποια ήταν η γραμματοσειρά που έχει προηγουμένως;

Πριν την τελευταία έκδοση, ο Gutenberg κειμενογράφος χρησιμοποιούσε τη Noto Serif γραμματοσειρά και την Times New Roman ως fallback γραμματοσειρά.

Η γραμματοσειρά δεν άλλαξε στο WordPress μου

Ενώ το WordPress έχει επιλέξει να χρησιμοποιεί την προεπιλεγμένη γραμματοσειρά του συστήματος μέσα στον Gutenberg κειμενογράφο, οι theme developers έχουν την δυνατότητα να αλλάξουν την γραμματοσειρά ώστε να είναι ίδια με αυτή που έχει και το theme.

Είναι εύκολο να αλλάξω την γραμματοσειρά στο Gutenberg;

Η διαδικασία απαιτεί να αποκτήσεις πρόσβαση στο block-editor.php αρχείο που βρίσκεται στον φάκελο “wp-includes” και να προσθέσεις ένα μικρό κομμάτι CSS κώδικα. Η διαδικασία περιγράφεται αναλυτικά παρακάτω.

Πρόσθεσα τον κώδικα αλλά η γραμματοσειρά δεν άλλαξε

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

Πως να αλλάξεις την γραμματοσειρά στο Gutenberg και να αυξήσεις το ύψος μεταξύ των παραγράφων

Απέκτησε πρόσβαση στους φακέλους εγκατάστασης του WordPress

Μπορείς να το κάνεις με ένα δωρεάν πρόγραμμα όπως το FileΖilla, ή μέσα από το διαχειριστικό περιβάλλον που σου παρέχει η hosting εταιρεία σου (όπως το Plesk ή το cPanel). Τα στοιχεία σύνδεσης τα έλαβες σε ένα από τα πρώτα emails που έλαβες όταν αγόρασες το hosting πακέτο.

Βρες το block-editor.php αρχείο στον wp-includes φάκελο

Μόλις συνδεθείς και αποκτήσεις πρόσβαση στα αρχεία της WordPress εγκατάστασης, το αρχείο θα το βρεις στους root φακέλους, πιθανότατα στην τοποθεσία public_home -> wp-includes -> block-editor.php.

Πρόσθεσε τον CSS κώδικα στο block-editor.php αρχείο

Κάνε κλικ για να ανοίξεις και να επεξεργαστείς το block-editor.php αρχείο και καθώς βρίσκεσαι μέσα πάτα Ctrl + F στο πληκτρολόγιο και αναζήτησε τον παρακάτω κώδικα μέσα από το μικρό πλαίσιο αναζήτησης που θα εμφανιστεί:

'body { font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif }',

Και αντικατέστησε τον με τον παρακάτω:

'body { font-family: Open Sans; line-height: 30px; }',

Μπορείς να αντικαταστήσεις το Open Sans με όποιο font επιθυμείς, καθώς επίσης και να αυξήσεις ή να μειώσεις το ύψος μεταξύ παραγράφων αλλάζοντας το 30px. Τα έβαλα σε bold (έντονα) γράμματα.

Αν θέλεις να κρατήσεις τα fonts του συστήματος αλλά να αυξήσεις το ύψος μεταξύ των παραγράφων, τότε αντικατέστησε τον κώδικα με τον παρακάτω:

'body { font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif; line-height: 30px; }',

Ο κώδικας θα πρέπει να είναι όπως και στην παρακάτω φωτογραφία:

Πως να αλλάξεις την γραμματοσειρά στο Gutenberg

Αποθήκευσε τις αλλαγές

Αποθήκευσε τις αλλαγές και έλεγξε αν η γραμματοσειρά έχει αλλάξει στον κειμενογράφο.


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

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

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

Featured Image Credits: Fikret tozak στο Unsplash.

Παναγιώτης Σακαλάκης
Παναγιώτης Σακαλάκηςhttps://inkstory.gr
Ο Παναγιώτης Σακαλάκης, με βάση το Κιλκίς, είναι Web Designer & Blogger, ιδρυτής της Inkstory Ο.Ε., του TechGuides και του TechWise Insider, καθώς επίσης & Host στα «The Blogging Dispatch» & «TechGuides» Podcasts. Όποτε δεν γράφει, βρίσκεται σε κάποιο βουνό με το Hard-Trail ποδήλατο του.
0 0 ψήφοι
Article Rating
Εγγραφή
Ειδοποίηση για
guest
0 Comments
Ενσωματωμένα σχόλια
Δείτε όλα τα σχόλια

Διαβάστε Επίσης

Αναζητάς περισσότερα;