Πώς να προσθέσετε προσαρμοσμένα στυλ στο WordPress Visual Editor

Πώς να προσθέσετε προσαρμοσμένα στυλ στο WordPress Visual Editor

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


Πρόγραμμα επεξεργασίας WordPress

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

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

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

Προσθέστε προσαρμοσμένα στυλ στο Visual Visual Editor προσθέτοντας κώδικα

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

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

λειτουργία myprefix_mce_buttons_1 (κουμπιά $) {
array_unshift (κουμπιά $, 'styleselect');
επιστρέψτε τα κουμπιά $;
}

add_filter ('mce_buttons_1', 'myprefix_mce_buttons_1');

Επιστρέψτε στον επεξεργαστή σε μία από τις αναρτήσεις σας στο WordPress και τώρα θα πρέπει να δείτε ένα νέο κουμπί “Μορφές” στην επάνω σειρά του προγράμματος επεξεργασίας. Παρατηρήστε πώς συνδεθήκαμε στα “mce_buttons_1; Αυτό τοποθετεί το κουμπί μενού μορφών στην πρώτη σειρά του επεξεργαστή mce. Θα μπορούσατε επίσης να χρησιμοποιήσετε το φίλτρο “mce_buttons_2” για να το τοποθετήσετε στη δεύτερη σειρά ή “mce_buttons_3” για να το τοποθετήσετε στην 3η σειρά.

Έτσι, τώρα που έχετε ενεργοποιήσει το στοιχείο μενού, ήρθε η ώρα να προσθέσετε τα προσαρμοσμένα στυλ σας για χρήση στις αναρτήσεις σας. Πάρτε τον κωδικό που αναφέρεται παρακάτω και επικολλήστε τον στο δικό σας functions.php αρχείο που θα προσθέσει 2 νέα στυλ στο αναπτυσσόμενο μενού Μορφές – “Button Theme” και “Highlight”.

/ **
* Προσθέστε προσαρμοσμένα στυλ στο αναπτυσσόμενο μενού μορφών mce
*
* @url https://codex.wordpress.org/TinyMCE_Custom_Styles
*
* /
λειτουργία myprefix_add_format_styles ($ init_array) {
$ style_formats = πίνακας (
// Κάθε θυγατρικό πίνακα είναι μια μορφή με τις δικές του ρυθμίσεις - προσθέστε όσα θέλετε
πίνακας(
'title' => __ ('Theme Button', 'text-domain'), // Τίτλος για το αναπτυσσόμενο μενού
'selector' => 'a', // Στοιχείο για στόχευση στο πρόγραμμα επεξεργασίας
'class' => 'theme-button' // Όνομα κλάσης που χρησιμοποιείται για CSS
),
πίνακας(
'title' => __ ('Highlight', 'text-domain'), // Τίτλος για το αναπτυσσόμενο μενού
'inline' => 'span', // Τυλίξτε ένα διάστημα γύρω από το επιλεγμένο περιεχόμενο
'class' => 'text-highlight' // Όνομα κλάσης που χρησιμοποιείται για CSS
),
)
$ init_array ['style_formats'] = json_encode ($ style_formats);
επιστροφή $ init_array;
}
add_filter ('tiny_mce_before_init', 'myprefix_add_format_styles');

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

Τώρα που έχετε νέα στυλ, μπορείτε να επισημάνετε περιεχόμενο στο πρόγραμμα επεξεργασίας σας και να εφαρμόσετε τα στυλ. Παρατηρήστε, πώς η μορφή “Button Theme” έχει μια παράμετρο επιλογής; Αυτό σημαίνει ότι το στυλ μπορεί να εφαρμοστεί μόνο σε αυτόν τον συγκεκριμένο επιλογέα (στην περίπτωση αυτή η ετικέτα “a” ή “link”). Η δεύτερη μορφή που προσθέσαμε το “Highlight” δεν έχει παράμετρο επιλογής, αλλά παράμετρο “inline” που του λέει να εφαρμόζει το στυλ σε οποιοδήποτε κείμενο έχετε επισημάνει στον επεξεργαστή σας και να το τυλίξετε σε ένα διάστημα με το μοναδικό όνομα της κατηγορίας σας. Μπορείτε να δείτε ένα παράδειγμα από το θέμα Συνολικό WordPress σχετικά με τον τρόπο με τον οποίο χρησιμοποιήσαμε μορφές, ώστε οι χρήστες να μπορούν να εφαρμόζουν εύκολα μια λίστα ελέγχου σε τυχόν κουκκίδες στο πρόγραμμα επεξεργασίας.

ΛΙΣΤΑ ΕΛΕΓΧΟΥ

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

.κουμπί-θέμα {
οθόνη: inline-block;
επένδυση: 10 15 εικονοστοιχεία;
χρώμα: #fff;
φόντο: # 1796c6;
διακόσμηση κειμένου: κανένα;
}
.κουμπί-θέμα: αιωρηθείτε {
διακόσμηση κειμένου: κανένα;
αδιαφάνεια: 0,8;
}
.επισήμανση κειμένου {
φόντο: # FFFF00;
}

Τώρα, αυτό θα προσθέσει στυλ στις νέες μορφές σας για το front-end, ώστε όταν εφαρμοστεί μπορείτε να τα δείτε ζωντανά. Ναι! Αλλά δεν θα ήταν ωραίο να βλέπετε επίσης τα στυλ σας στον πραγματικό επεξεργαστή όταν εφαρμόζονται; Για να το κάνετε αυτό, θα πρέπει να χρησιμοποιήσετε τη συνάρτηση “editor styleheet” στο WordPress. Εάν δημιουργείτε το δικό σας θέμα, τότε θα θελήσετε να δημιουργήσετε ένα νέο αρχείο css στο θέμα σας που ονομάζεται “editor-style.css” (μπορείτε να το ονομάσετε ό, τι θέλετε, απλώς φροντίστε να επεξεργαστείτε το απόσπασμα παρακάτω ανάλογα) με το προσαρμοσμένο CSS προστέθηκε για τις μορφές σας και, στη συνέχεια, προσθέστε τη συνάρτηση παρακάτω για να την φορτώσετε στο backend.

λειτουργία myprefix_theme_add_editor_styles () {
add_editor_style ('editor-style.css');
}
add_action ('init', 'myprefix_theme_add_editor_styles');

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

Προσθέστε προσαρμοσμένα στυλ στο Visual Visual Editor με ένα ωραίο πρόσθετο

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

Πρόσθετο προσαρμοσμένου στυλ TinyMCE

Απλώς αναζητήστε, εγκαταστήστε και ενεργοποιήστε το Πρόσθετο TinyMCE Custom Styles και ενεργοποιήστε το στον ιστότοπό σας στο WordPress.

Ρυθμίσεις προσαρμοσμένου στυλ TinyMCE

Παω σε Ρυθμίσεις> TinyMCE prof.styles στην αριστερή πλευρά του πίνακα ελέγχου του WordPress. Εδώ μπορείτε να τροποποιήσετε τις ρυθμίσεις σας για την προσθήκη.

Ρυθμίσεις προσαρμοσμένου στυλ TinyMCE

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

Προσαρμοσμένα στυλ TinyMCE Προσθήκη νέου

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

Επιλογές προσαρμοσμένου στυλ TinyMCE

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

Μορφή προσαρμοσμένων στυλ TinyMCE

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

Χρησιμοποιείται προσαρμοσμένη μορφή TinyMCE

Κάντε κλικ στην επιλογή Big Blue Button, ή οτιδήποτε δημιουργήσατε, για να το δείτε να αποκαλύπτεται στον επεξεργαστή σας. Για να το χρησιμοποιήσετε απλώς επισημάνετε το κείμενο που θέλετε να μορφοποιήσετε και, στη συνέχεια, κάντε κλικ στην επιλογή σας και voila!

συμπέρασμα

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

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

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map