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

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

Υπάρχουν μερικοί τρόποι με τους οποίους μπορείτε να προσθέσετε προσαρμοσμένες επιλογές στυλ στο WordPress Post Editor. Το πρώτο είναι να χρησιμοποιήσετε ένα δωρεάν πρόσθετο και το δεύτερο να προσθέσετε ένα απόσπασμα κώδικα. Και οι δύο μέθοδοι λειτουργούν πολύ παρόμοια, γι 'αυτό ακολουθήστε εκείνη με την οποία είστε άνετοι.

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

1. Χρησιμοποιώντας μια προσθήκη

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

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

1. Για να ξεκινήσετε, κατεβάστε, εγκαταστήστε και ενεργοποιήστε TinyMCE Custom Styles όπως οποιοδήποτε άλλο WordPress plugin. Αφού ενεργοποιήσετε, μεταβείτε στη σελίδα ρυθμίσεων του plugin, μεταβαίνοντας σε "Ρυθμίσεις -> Προσαρμοσμένα στυλ TinyMCE".

2. Δεξιά από το ρόπαλο, το πρόσθετο θα εμφανίσει ένα μήνυμα σφάλματος ζητώντας να επιλέξετε πού θα θέλατε να τοποθετήσετε το αρχείο φύλλου στυλ editor. Ανάλογα με το θέμα σας, μπορείτε να επιλέξετε ανάμεσα σε τρεις επιλογές. Διαβάστε αυτές τις επιλογές προσεκτικά και επιλέξτε αυτό που είναι κατάλληλο για εσάς. Στην περίπτωσή μου, επέλεξα τη δεύτερη επιλογή επειδή χρησιμοποιώ ένα έθιμο παιδικό θέμα Genesis. Κάντε κλικ στο κουμπί "Αποθήκευση όλων των ρυθμίσεων" για να αποθηκεύσετε τις αλλαγές.

3. Κάντε κύλιση προς τα κάτω και κάντε κλικ στο κουμπί "Προσθήκη νέου στυλ". Τώρα, πληκτρολογήστε το όνομα του στυλ, επιλέξτε έναν τύπο (π.χ., inline, μπλοκ ή επιλογέα), πληκτρολογήστε την τιμή τύπου και στη συνέχεια την κλάση CSS.

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

5. Εάν θέλετε να μπορείτε ακόμη και να προσθέσετε απευθείας προσαρμοσμένα στυλ CSS κάνοντας κλικ στο "Προσθήκη νέου στυλ" που εμφανίζεται στην κατηγορία "Στυλ CSS". Ωστόσο, συνιστούμε να προσθέσετε αυτά τα στυλ στο αρχείο "editor-style.css" που βρίσκεται στον κατάλογο θεμάτων (αν έχετε επιλέξει τη δεύτερη επιλογή όπως εγώ στο δεύτερο βήμα). Το καθιστά εύκολο στη διαχείριση.

6. Μόλις τελειώσετε, κάντε κλικ στο κουμπί "Αποθήκευση όλων των ρυθμίσεων" που εμφανίζεται στο τέλος της σελίδας.

7. Αυτό είναι. Από εδώ και πέρα ​​θα δείτε ένα νέο αναπτυσσόμενο μενού που ονομάζεται "Μορφές" στον επεξεργαστή αναρτήσεων. Σε αυτό το αναπτυσσόμενο μενού μπορείτε να βρείτε τη νέα προστιθέμενη προσαρμοσμένη επιλογή στυλ μαζί με άλλες προρυθμισμένες επιλογές. Για να χρησιμοποιήσετε το στυλ, απλά κάντε κλικ σε αυτό και ο απαραίτητος κωδικός CSS θα προστεθεί αυτόματα στον επεξεργαστή αναρτήσεων. Βλέπετε αυτόν τον κώδικα στη λειτουργία κειμένου.

8. Αν έχετε προσθέσει τα απαιτούμενα στυλ στο αρχείο editor-style.css, αυτά τα στυλ θα αντικατοπτρίζονται στο πρόγραμμα επεξεργασίας αναρτήσεων όταν χρησιμοποιείτε την επιλογή στυλ από το αναπτυσσόμενο μενού.

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

Σχετικά : Πώς να διαγράψετε τους αχρησιμοποίητους πίνακες βάσεων δεδομένων στο WordPress

2. Μη αυτόματη μέθοδος

Αν δεν θέλετε να χρησιμοποιήσετε ένα plugin, τότε μπορείτε να επιτύχετε το ίδιο πράγμα προσθέτοντας ένα απλό απόσπασμα κώδικα στο αρχείο "functions.php". Υπάρχουν δύο μέρη για αυτό: το ένα είναι για την προσθήκη του κουμπιού στη γραμμή εργαλείων για να εισαγάγετε τον κώδικα CSS και το δεύτερο είναι να κάνετε το στυλ CSS ζωντανό στον επεξεργαστή αναρτήσεων.

Προσθέστε προσαρμοσμένα κουμπιά στυλ CSS στη γραμμή εργαλείων

Προσθέστε τα παρακάτω στο τέλος του αρχείου "functions.php". Αυτός ο κώδικας παρέχεται στην πραγματικότητα από το ίδιο το WordPress.

 // Λειτουργία επανάκλησης για να εισάγετε 'styleselect' στη λειτουργία $ array my_mce_buttons_2 ($ κουμπιά) {array_unshift ($ κουμπιά, 'styleselect'); επιστροφή κουμπιών $. } // Καταγράψτε την επανάκλησή μας στο κατάλληλο φίλτρο add_filter ('mce_buttons_2', 'my_mce_buttons_2'); // // // // Ορισμός του style_formats array $ style_formats = array (// Κάθε παιδί του πίνακα είναι μια μορφή με τον δικό του πίνακα ρυθμίσεων ('title' => '.' Μετάφραση ', 'block' = 'blockquote', 'classes' => 'translation', 'wrapper' => true, ) array ('title' => '⇠.rtl', 'block' => 'class' => 'rtl', 'wrapper' => true, ) array ('title' => '.ltr⇢', 'block' περιτύλιγμα '=> true, ), ); // Εισάγετε τον πίνακα, JSON ENCODED, σε 'style_formats' $ init_array ['style_formats'] = json_encode ($ style_formats); επιστροφή $ init_array; } // Επισύναψη κλήσης στο 'tiny_mce_before_init' add_filter ('tiny_mce_before_init', 'my_mce_before_init_insert_formats').

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

Οποτεδήποτε θέλετε να προσθέσετε μια νέα επιλογή στυλ, απλά αντιγράψτε τον πίνακα και τροποποιήστε τα πεδία. Στην περίπτωσή μου συμπλήρωσα την πρώτη σειρά για να απεικονίσει την επιλογή "Μπλε κουμπί".

Αφού τελειώσετε με την προσαρμογή, αποθηκεύστε και μεταφορτώστε το τροποποιημένο αρχείο "functions.php" στο διακομιστή σας.

Δημιουργία φύλλου στυλ επεξεργασίας

Δημιουργήστε ένα αρχείο με το όνομα "editor-style.css". Τώρα, προσθέστε σχετικά CSS στυλ που θέλετε να δείτε στον επεξεργαστή αναρτήσεων. Μην ξεχνάτε ότι οι κλάσεις CSS που δημιουργείτε στο αρχείο "editor-style.css" πρέπει να ταιριάζουν με τις κλάσεις CSS στον παραπάνω κώδικα επιλογών στυλ.

Τώρα, ανοίξτε το αρχείο "functions.php" του κειμένου και προσθέστε τον ακόλουθο κώδικα.

 // Προσθήκη προσαρμοσμένης λειτουργίας φύλλου στυλ editor mte_add_editor_styles () {add_editor_style ('editor-style.css'); } add_action ('init', 'mte_add_editor_styles').

Μεταφορτώστε το αρχείο "editor-style.css" και "functions.php" στο διακομιστή σας. Αυτό είναι μόνο που πρέπει να κάνετε. Από εδώ και πέρα ​​μπορείτε να χρησιμοποιήσετε τις επιλογές προσαρμοσμένου στυλ από το πρόγραμμα επεξεργασίας μηνυμάτων WordPress.

Μπορείτε να δείτε τα στυλ που εφαρμόζονται σε πραγματικό χρόνο.

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