1Μαρ

Επεξεργαστής εμπλουτισμένου κειμένου στο WordPress

, 1 Μαρτίου 2012 | WORDPRESS | 0 Σχόλια

Μέσος χρόνος ανάγνωσης άρθρου: 10 λεπτά

Η προσθήκη ενός επεξεργαστή εμπλουτισμένου κειμένου (rich text editor) ήταν πάντα ένα πρόβλημα στο WordPress και χρειαζόταν αρκετή προσπάθεια και επέμβαση στον κώδικα προκειμένου να λειτουργήσει πλήρως. Με την κυκλοφορία, όμως, της έκδοσης 3.3 του WordPress, έγιναν αρκετές βελτιώσεις στον πηγαίο κώδικα και η διαδικασία απλοποιήθηκε σε μεγάλο βαθμό. Πλέον, η προσθήκη ενός ή παραπάνω επεξεργαστών εμπλουτισμένου κειμένου σε κάποια σελίδα του WordPress υλοποιείται με μία μόνο κλήση συνάρτησης:

wp_editor($content, $editor_id, $settings = array());

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

  • wpautop: ενεργοποίηση διαμόρφωσης κειμένου από το WordPress
  • media_buttons: κουμπιά προσθήκης εικόνων
  • textarea_name: το όνομα του στοιχείου <textarea> που δημιουργείται και περνάει σαν όρισμα στις POST μεταβλητές της φόρμας
  • textarea_rows: το πλήθος γραμμών του στοιχείου <textarea>
  • tabindex: η τιμή tabindex μέσα στη φόρμα
  • editor_css: επιπλέον μοροφοποίηση CSS
  • editor_class: επιπλέον κλάσεις CSS
  • tinymce: ρυθμίσεις παραμετροποίησης του επεξεργαστή TinyMCE
  • quicktags: ρυθμίσεις παραμετροποίησης των Quicktags

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

array(
        'wpautop' => true,
        'media_buttons' => true,
        'textarea_name' => $editor_id,
        'textarea_rows' => get_option('default_post_edit_rows', 10),
        'tabindex' => '',
        'editor_css' => '',
        'editor_class' => '',
	'tinymce' => true,
	'quicktags' => true
);

Έτσι, για να δημιουργήσουμε έναν απλό επεξεργαστή εμπλουτισμένου κείμενο, απλά εισάγουμε την παρακάτω γραμμή κώδικα σε κάποια σελίδα του WordPress

wp_editor("Παράδειγμα κειμένου", "customeditor");

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

Επεξεργαστής κειμένου με τις εξ'ορισμού ρυθμίσεις

Για περισσότερη παραμετροποίηση, μπορούμε να θέσουμε τιμές στις ρυθμίσεις του τρίτου ορίσματος της συνάρτησης

$custom_settings = array(
	'wpautop' => false,
	'media_buttons' => false,
	'tinymce' => array(
		'theme_advanced_buttons1' => 'bold,italic,underline'
	),
	'quicktags' => array(
		'buttons' => 'link'
	)
);
wp_editor("Παράδειγμα κειμένου", "customeditor", $custom_settings);

λαμβάνοντας σαν αποτέλεσμα έναν οπτικό (visual) επεξεργαστή με τρία κουμπιά (bold, italic, underline)

Οπτικός επεξεργαστής με ορισμένες από τον χρήστη ρυθμίσεις

και έναν HTML επεξεργαστή με ένα κουμπί για δημιουργία συνδέσμου

HTML επεξεργαστής με ορισμένες από τον χρήστη ρυθμίσεις

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

wp_editor("Παράδειγμα κειμένου στον πρώτο επεξεργαστή", "customeditor01");
wp_editor("Παράδειγμα κειμένου στον δεύτερο επεξεργαστή", "customeditor02");

Περισσότερες πληροφορίες μπορούν να βρεθούν στη σελίδα επεξήγησης της συνάρτησης wp_editor στο codex του WordPress.

ΧΡΗΣΙΜΗ ΠΛΗΡΟΦΟΡΙΑ: Το άρθρο Επεξεργαστής εμπλουτισμένου κειμένου στο WordPress γράφτηκε από το WebDesignBlog. Η ομάδα μας σας υπενθυμίζει πως αν θέλετε να ενημερώνεστε για τα νέα του διαδικτύου και για επιλεγμένα άρθρα μας, μπορείτε να γραφτείτε εύκολα στο Newsletter μας ή στο RSS Feed μας.

Ο Κωνσταντίνος Κουράτορας είναι web developer με έδρα την Κρήτη, φανατικός υποστηρικτής του WordPress, χρήστης Linux και ερασιτέχνης φωτογράφος. Μπορείτε να επικοινωνήσετε μαζί του μέσω της προσωπικής του ιστοσελίδας ή να τον ακολουθήσετε twitter.

Σχολιάστε

Back to top

Recent comments

  • Πολυ καλο αθρο πραγματικα!

    Η σωστή αρχιτεκτονική ενός website και τα οφέλη της
  • Πολύ χρήσιμη η λίστα με τα online tools. Ο επιτυχημένος σχεδιασμός μιας ιστοσελίδας βοηθά σε δύο κατευθύνσεις. Η πρώτη είναι ότι βελτιώνει την εμπειρία του επισκέπτη της ιστοσελίδας με συνέπεια ο τελευταίος να βλέπει περισσότερες σελίδες και να μένει περισσότερο χρόνο σε αυτή. Η δεύτερη είναι ότι επειδή ακριβώς βελτιώνονται τα στατιστικά στοιχεία της ιστοσελίδας, όπως το bounce rate, ο μέσος χρόνος παραμονής στην ιστοσελίδα και ο αριθμός των σελίδων ανά επίσκεψη, βελτιώνεται και η κατάταξη της ιστοσελίδας στα οργανικά αποτελέσματα της Google.

    10+1 Χρήσιμα website και on line tools

Latest From Twitter