Προσαρμοστικό περιεχόμενο με το WordPress

Ο υπεύθυνος σχεδιασμός όχι μόνο προκαλεί τα εργαλεία και τις προσεγγίσεις μας στο σχεδιασμό και την ανάπτυξη του ιστού, αλλά μας αναγκάζει να αναθεωρήσουμε τους τρόπους σχεδιασμού και διαχείρισης περιεχομένου. Οι νέες ροές εργασίας απαιτούν τα σωστά εργαλεία. Με την πρώτη σκέψη, αυτό ανοίγει μια ευκαιρία για εντελώς νέα συστήματα διαχείρισης περιεχομένου (CMS) και πλατφόρμες δημοσίευσης (και πιθανότατα θα δούμε πολλά από αυτά στο εγγύς μέλλον). Αλλά όποιος έχει μεταναστεύσει ποτέ από ένα CMS σε άλλο γνωρίζει πολύ καλά ότι η διαδικασία δεν είναι ανώδυνη. Έτσι, μπορούμε να προσαρμόσουμε ένα γνωστό και δημοφιλές CMS όπως το WordPress για να μας βοηθήσει να δημιουργήσουμε και να διαχειριστούμε το προσαρμοστικό περιεχόμενο;

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

Προσαρμοστικό περιεχόμενο και γιατί το χρειαζόμαστε

Στο πρόσφατο βιβλίο της Στρατηγική περιεχομένου για κινητά , UX και ειδικός στρατηγικής περιεχομένου Karen MacGrane παρέχει μια λεπτομερή και καλά τεκμηριωμένη εξήγηση για το λόγο που χρειαζόμαστε μια νέα προσέγγιση στη διαχείριση περιεχομένου. Πηγαίνουμε πέρα από την οικοδόμηση ανταποκρινόμενων περιοχών - δημιουργούμε περιεχόμενο που μπορεί να δημοσιευθεί σε διαφορετικές πλατφόρμες και να έχει πρόσβαση σε διάφορες συσκευές. Τι θα συμβεί αν αύριο ένα ψυγείο γίνεται το βασικό εργαλείο κάποιου για την κατανάλωση πληροφοριών; Είναι έτοιμος ο ιστοχώρος σας για μια τέτοια περίπτωση χρήσης;

Ο υπεύθυνος σχεδιασμός έχει προκύψει ως επί το πλείστον από την ανάγκη να παρέχεται επαρκής εμπειρία στους χρήστες κινητών επικοινωνιών. Ειλικρινά, όμως, το "κινητό" είναι μόνο ένα μέρος της εικόνας. Εάν σκεφτόμαστε το μέλλον, μπορούμε εύκολα να περιμένουμε άλλες νέες πλατφόρμες και συσκευές στις οποίες θα εμφανιστεί το περιεχόμενό μας: ρολόγια, ψυγεία, γυαλιά ματιών, ρομπότ μιλώντας - οτιδήποτε μπορεί να φανταστεί κανείς. Αυτό σημαίνει ότι πρέπει να δημιουργήσουμε μια έκδοση "μιλώντας ρομπότ" του ιστότοπού μας; Αυτή θα ήταν η τρέλα. Λοιπόν, ποια είναι η λύση; Η λύση είναι το προσαρμοστικό περιεχόμενο - ένα περιεχόμενο που μόλις δημιουργηθεί μπορεί να επαναχρησιμοποιηθεί σε διαφορετικές καταστάσεις και σενάρια. Ακούγεται υπέροχο, έτσι δεν είναι; Πώς θα το επιτύχουμε;

1. Δομημένο περιεχόμενο

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

2. Περιεχόμενο ανεξάρτητο από την παρουσίαση

Πρέπει να κάνουμε το επόμενο βήμα προς τον διαχωρισμό του περιεχομένου από την παρουσίαση. Στην πραγματικότητα, αυτή είναι μια σημαντική αρχή επανασχεδιασμού και ένας ακρογωνιαίος λίθος των προτύπων διαδικτύου. Αλλά πρέπει να προχωρήσουμε περισσότερο και να απελευθερωθούμε από τη νοοτροπία WYSIWYG. "Αυτό που βλέπετε" δεν είναι "αυτό που βλέπουν οι χρήστες σας" πια. Αυτή είναι μια επικίνδυνη ψευδαίσθηση. Δεν πρέπει να σημειώσουμε το κείμενό μας με πλάγιους χαρακτήρες ή να εισαγάγουμε εικόνες ως HTML στο πεδίο "περιεχομένου" μιας σελίδας. Θα πρέπει απλά να συμπεριλάβουμε μια αναφορά σε ένα αντικείμενο περιεχομένου και να αφήσουμε το σχεδιαστικό μας σύστημα να αποφασίσει πώς να παρουσιάσει το αντικείμενο.

3. Μέτα δεδομένα

Όσο περισσότερη εργασία αφαιρούμε από τα εργαλεία προγραμματισμού (τελικά, θέλουμε το περιεχόμενό μας να παρουσιάζεται σε διάφορες πλατφόρμες αυτόματα βάσει προκαθορισμένων σεναρίων, σωστά;), τόσο περισσότερες πληροφορίες πρέπει να παρέχουμε σε αυτά τα συστήματα σχετικά με το περιεχόμενο. Για παράδειγμα, στο παρελθόν μπορούσαμε να γράψουμε σε απλή αγγλική γλώσσα ότι ο συντάκτης ενός κειμένου ήταν ο John Doe και σημείωσε το όνομα του με έντονους χαρακτήρες - τώρα δεν μπορούμε. Χρειαζόμαστε ένα ξεχωριστό πεδίο στο CMS για να εισάγουμε το όνομα και ένα σύνολο κανόνων για το πώς να το παρουσιάσουμε σε διάφορα σενάρια.

4. Επαναχρησιμοποιούμενο περιεχόμενο

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

Μπορούν όλες αυτές οι πτυχές να επιτευχθούν με το WordPress; Η MacGrane κατηγορεί το WordPress και άλλο λογισμικό blogging ότι δεν υποστηρίζει τους εκδότες ως εργαλείο για το προσαρμοστικό περιεχόμενο. Συγκεκριμένα, εξακολουθούμε να διαθέτουμε έναν επεξεργαστή WYSIWYG στο WordPress, με μια ενιαία περιοχή κειμένου για να μπείτε στην "ανάρτηση" μας. Δυστυχώς, αυτή είναι η κατάσταση που αντιμετωπίζει ένας σχεδιαστής χρησιμοποιώντας την απλή έκδοση του WordPress έξω από το κουτί. Ευτυχώς, το WordPress είναι λίγο περισσότερο από το λογισμικό blogging. Έχει εξελιχθεί σε πλατφόρμα ανάπτυξης, ένα πλαίσιο με το οποίο ένας προγραμματιστής μπορεί να προσφέρει στους πελάτες μια πραγματικά σύγχρονη και μελλοντική εμπειρία.

Μετατρέποντας το WordPress σε προσαρμοστική πλατφόρμα δημοσίευσης

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

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

Γιατί είναι αυτό χρήσιμο; Με προσαρμοσμένους τύπους μηνυμάτων, δεν είμαστε πλέον κλειδωμένοι στην έννοια της σελίδας. Μπορούμε να δημιουργήσουμε έναν τύπο θέσης για οποιοδήποτε αντικείμενο που χρειαζόμαστε (όπως ειδήσεις, γεγονότα, συνεργάτες - ό, τι θέλουμε) και μπορούμε να καθορίσουμε τη δομή του αντικειμένου μέσω αυτού του συνόλου μεταδεδομένων. Μπορούμε επίσης να δημιουργήσουμε ένα ξεχωριστό UI για τη διαχείριση των μεταδεδομένων. Όλα αυτά δίνουν στο περιεχόμενό μας περισσότερη δομή. Μόλις το WordPress μας επέτρεπε να δημιουργούμε μεταδεδομένα οποιουδήποτε τύπου, θα μπορούσαμε να το χρησιμοποιήσουμε για την αποθήκευση εναλλακτικών λύσεων για ενσωματωμένα μπλοκ περιεχομένου, όπως τίτλους και περιγραφές. (Για παράδειγμα, θα μπορούσαμε να δούμε plugins SEO που επιτρέπουν έναν μοναδικό τίτλο και περιγραφή για κάθε αντικείμενο περιεχομένου).

Ποια είναι τα όριά της; Το WordPress επικρίνεται πολύ επειδή δεν παρέχει με συνέπεια ένα API για την αποθήκευση μεταδεδομένων. Συγκεκριμένα, μπορούμε να έχουμε μεταδεδομένα για δημοσιεύσεις (και τύπους προσαρμοσμένων αναρτήσεων) και για χρήστες, αλλά όχι για ταξινομίες (α plugin είναι απαραίτητη γι'αυτό). Η δημιουργία ενός προσαρμοσμένου περιβάλλοντος χρήστη στην οθόνη επεξεργασίας για μια ανάρτηση δεν είναι τόσο εύκολη όσο θα μπορούσε να γίνει. Προβλέπονται προκαθορισμένες λειτουργίες και πρότυπα (γι 'αυτό και τα διαφορετικά πρόσθετα το κάνουν διαφορετικά, αφήνοντάς μας με χάος και όχι με σύστημα). Αλλά οι πρόσφατες αλλαγές που συμβάλλουν στην ενοποίηση και βελτιστοποίηση του πίνακα εργαλείων του WordPress μας προσφέρουν ελπίδα.

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

Γιατί είναι αυτό χρήσιμο; Με αυτή τη λειτουργία, μπορούμε να σπάσουμε ένα πεδίο περιεχομένου σε πολλά ανάλογα με τη δομή ενός αντικειμένου. Με αυτόν τον τρόπο, προσθέτουμε ένα δομικό στοιχείο στα αντικείμενα μας. Επίσης, κάθε επεξεργάσιμη περιοχή θα έχει ένα ενοποιημένο και οικείο GUI που θα βοηθήσει τους συντάκτες να εισαγάγουν εύκολα την απαραίτητη σήμανση στα κατάλληλα πεδία, συμπεριλαμβανομένων των shortcodes.

Ποια είναι τα όριά της; Θα πρέπει να αποθηκεύουμε δεδομένα που εισάγονται σε τέτοιες περιοχές πλούσιας επεξεργασίας, όπως τα μεταδεδομένα, και αυτό σημαίνει περισσότερες κλήσεις βάσης δεδομένων κ.λπ. Έτσι, αυτή η προσέγγιση θα απαιτήσει περαιτέρω προσοχή στη βελτιστοποίηση του ιστότοπου, όπως η αποθήκευση στο cache. Δεν υπάρχει ενσωματωμένη συνάρτηση που να αντιπροσωπεύει αυτά τα δεδομένα σε πρότυπα, επομένως θα πρέπει να τα δημιουργήσουμε.

Με αυτήν την προσέγγιση, η γνωστή οθόνη μετά την επεξεργασία θα μεταμορφωθεί εντελώς:

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

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

Απαλλαγείτε από τον οπτικό επεξεργαστή.
Αποφύγετε τη χρήση απλού HTML σε πεδία περιεχομένου όσο το δυνατόν περισσότερο.

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

add_filter('user_can_richedit', '__return_false');

Ο δεύτερος κανόνας είναι πολύ πιο δύσκολος να ακολουθηθεί. Βεβαίως, δεν πρόκειται να κυνηγήσουμε για κάθε ετικέτα HTML στο κείμενό μας - αυτές που αντιπροσωπεύουν πραγματικά σημασιολογικά στοιχεία είναι απολύτως εντάξει. Αλλά όταν αρχίζουμε να εισάγουμε

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

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

Και όμως το WordPress έχει σχεδόν τα πάντα για να κάνει μια κίνηση σε μια προσαρμοστική προσέγγιση είναι δυνατή:

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

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

add_shortcode('frl_image', 'frl_image_screen');function frl_image_screen($atts, $content = ''){extract(shortcode_atts(array('id' => 0, 'link' => 'file', 'size' => 'medium'), $atts ));$out = '';$id = intval($id);if($id == 0)return ''; // no attachment$out = "