Το WordPress διευκολύνει τη δημοσίευση ψηφιακού περιεχομένου. Ωστόσο, για να κάνετε το κείμενό σας να μοιάζει με παραδοσιακή εκτύπωση, χρειάζεται λίγη τεχνογνωσία κωδικοποίησης.
Συγκεκριμένα, πώς να κάνετε εσοχή στην πρώτη γραμμή μιας ανάρτησης WP, αντί μιας ολόκληρης παραγράφου.
Από προεπιλογή, όταν χρησιμοποιείτε τα κουμπιά εσοχή και εσοχή στη γραμμή εργαλείων του WordPress είτε του Κλασικού Επεξεργαστή είτε του μπλοκ Κλασικής παραγράφου στο Gutenberg, η εσοχή εφαρμόζεται σε ολόκληρη την παράγραφο.
Για να δημιουργήσετε εσοχές μόνο στην πρώτη γραμμή μιας νέας παραγράφου, πρέπει να προστεθεί κώδικας CSS στο Cascading Style Sheet (stylesheet.css).
Πώς να κάνετε εσοχή στην πρώτη γραμμή μιας ανάρτησης WordPress
Χρησιμοποιήστε το CSS για να δημιουργήσετε μια κλάση 'προσαρμοσμένη εσοχή' και, στη συνέχεια, καλέστε την με HTML προσθέτοντας . Η εσοχή δημιουργείται μόνο όταν το HTML προστίθεται στην αρχή μιας νέας παραγράφου. Η στόχευση της ετικέτας 'article' στο CSS δημιουργεί εσοχές στην πρώτη γραμμή κάθε νέας παραγράφου.
Γιατί τα κουμπιά εσοχής WP δεν λειτουργούν για εσοχές μίας γραμμής
Η χρήση των κουμπιών εσοχής και εξόδου στο πρόγραμμα επεξεργασίας της σελίδας WP εφαρμόζει την εσοχή σε ολόκληρη την παράγραφο.
Κοιτάξτε στο πρόγραμμα επεξεργασίας κειμένου σας και θα δείτε το στυλ padding-αριστερό που εφαρμόζεται στον κώδικα HTML.
Από προεπιλογή, η εναλλαγή εσοχής προσθέτει 40 εικονοστοιχεία μιας εσοχής.
<p style="padding-left: 40px;">
Αυτός ο αριθμός (40 εικονοστοιχεία) μπορεί να αυξηθεί ή να μειωθεί.
Εάν μετακινήσετε τον κωδικό λήξης (
), χωρίζει την παράγραφο. Δεν εφαρμόζει την περίπτωση μόνο στην πρώτη γραμμή της παραγράφου.Το ίδιο συμβαίνει εάν χρησιμοποιείτε οποιοδήποτε
σε HTML για να τροποποιήσετε την εσοχή, όπως π.χ
<p style="margin-left:10%">
ή παρόμοιο.
Η προεπιλογή για την ετικέτα
σε HTML είναι η εφαρμογή του στοιχείου στυλ σε ολόκληρη την παράγραφο.
Για να εφαρμόσετε μια εσοχή στην πρώτη γραμμή μιας παραγράφου, πρέπει να προσθέσετε μια κλάση εσοχής στο προσαρμοσμένο CSS σας.
Μπορείτε είτε να το προσθέσετε στο αρχείο stylesheet.css ή η πολύ πιο απλή διαδρομή είναι να χρησιμοποιήσετε το πρόσθετο CSS στον πίνακα διαχείρισης του WP.
Προσθήκη προσαρμοσμένης εσοχής στο CSS (ο εύκολος τρόπος)
Μεταβείτε στο μενού Εμφάνιση στην αριστερή πλαϊνή γραμμή, επιλέξτε Προσαρμογή και μετά επιλέξτε Πρόσθετο CSS.
Εισαγάγετε τον ακόλουθο κωδικό:
p.custom-indent {
text-indent:40px;
} 
Στη συνέχεια, πατήστε Δημοσίευση.
Μέχρι να δημοσιευτούν οι αλλαγές, δεν θα εφαρμοστούν. Μόλις εφαρμοστεί, εφαρμόζεται σε ολόκληρο τον ιστότοπο όπου χρησιμοποιείται το HTML.
Με τις αλλαγές που προστέθηκαν, αντί να προσθέσετε το στοιχείο
στην HTML, θα εισάγατε το στοιχείο
.
<p class=”custom-indent”>
Εφαρμογή εσοχής στην πρώτη γραμμή κάθε νέας παραγράφου
Για να εφαρμόσετε την προσαρμοσμένη εσοχή σε όλες τις παραγράφους, θα ήταν κουραστικό να εισαγάγετε το στοιχείο
στην αρχή κάθε παραγράφου.
Μπορείτε να κάνετε κάθε νέα παράγραφο να έχει ίσο διάστημα εσοχών που εφαρμόζεται μόνο στην πρώτη γραμμή κάθε παραγράφου χωρίς να δημιουργηθεί εσοχή ολόκληρης της παραγράφου.
Ο κώδικας CSS που χρησιμοποιείται για αυτό είναι παρόμοιος με…
article p {
text-indent:40px;
}Ο λόγος που αναφέρεται ότι οι κωδικοί είναι παρόμοιοι με τους παραπάνω είναι ότι κάθε θέμα έχει διαφορετικά ονόματα για τον εντοπισμό διαφόρων στοιχείων στο φύλλο στυλ.
Σε αυτόν τον ιστότοπο, το στοιχείο 'σώμα' των αναρτήσεων ιστολογίου επισημαίνεται με το 'entry-content mvt-content'.
Στον ιστότοπο δοκιμής μας, ονομάζεται 'blog-post-single-content'.
Το στοιχείο εξαρτάται από το πρότυπο θέματός σας. Χρησιμοποιήστε τον επιθεωρητή του προγράμματος περιήγησής σας για να προσδιορίσετε την τάξη.
Χρησιμοποιώντας το Chrome, κάντε δεξί κλικ και, στη συνέχεια, επιλέξτε την επιλογή 'inspect'.
Όπως και με την προσαρμοσμένη εσοχή, ο αριθμός των pixel που εισάγετε το κείμενο από το αριστερό περιθώριο μπορεί να αυξηθεί ή να μειωθεί.
