Δημιουργώντας μια υπεύθυνη επικεφαλίδα στο WordPress 3.4

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

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

Προηγουμένως οι διαστάσεις μιας εικόνας κεφαλίδας ήταν προκαθορισμένες και διαχειριζόταν με το HEADER_IMAGE_HEIGHT και HEADER_IMAGE_WIDTH οι σταθερές και το μεταφορτωμένο αρχείο κόπηκαν για να προσαρμοστούν σε αυτούς τους περιορισμούς. Αλλά από την έκδοση 3.4, η προσαρμοσμένη εικόνα κεφαλίδας υποστηρίζει εύκαμπτα πλάτη και ύψη και μας ελευθερώνει από αυτές τις άσχημες σταθερές. Ακούγεται ενδιαφέρουσα, έτσι δεν είναι; Ας δούμε πώς μπορεί να γίνει.

Τι θα επιτύχουμε

Πρώτα απ 'όλα θα πρέπει να αποφασίσουμε ποια από τις διαθέσιμες (και ευρέως συζητημένες) τεχνικές απόκρισης εικόνας θα μας ταιριάξουν. Μπορούμε να διαθέσουμε οποιαδήποτε προσαρμοσμένη σήμανση για αυτήν την εικόνα, λαμβάνοντας υπόψη τη σημασία της για την επωνυμία του ιστοτόπου και ταυτόχρονα την ανεξαρτησία του από τη δομή ή τη σήμανση μιας θέσης. Από αυτή την άποψη, η τεχνική "noscript" φαίνεται πολύ ελπιδοφόρα. Για να συνοψίσουμε την τεχνική, λειτουργεί ως εξής:

Καθορίζουμε εναλλακτικές αναφορές εικόνας για επιλεγμένα σημεία διακοπής ως χαρακτηριστικά δεδομένων ενός a

Θα πρέπει να συνοδεύεται από το κατάλληλο στυλ CSS και ένα σενάριο που θέτει το jQuery Picture να λειτουργεί. Εκτός από αυτό, θα θέλαμε να έχουμε ένα σύνολο προκαθορισμένων εικόνων κεφαλίδας που θα επιλέγονται από (όπως τον έχουμε στο θέμα Twenty Eleven). Επιπλέον, θα θέλαμε να δώσουμε στον χρήστη τη δυνατότητα να ανεβάσει τη δική του εικόνα στον πίνακα διαχείρισης. Υποθέτοντας ότι φορτώνεται μια έκδοση πλήρους μεγέθους της εικόνας, θα δημιουργήσουμε τα απαραίτητα ενδιάμεσα μεγέθη με την ενσωματωμένη υποστήριξη μικρογραφιών WordPress σε συνδυασμό με ευέλικτα μεγέθη κεφαλίδας. Η προσαρμοσμένη κεφαλίδα θα πρέπει τελικά να φαίνεται ως εξής:

Αρκετά μιλάμε, ας πηδήξουμε στον κώδικα.

Βήμα 1: Εγγραφή προσαρμοσμένης κεφαλίδας με το θέμα σας

$default_url = get_template_directory_uri().'/_inc/img/city-large.jpg';$args = array('default-image'          => $default_url,'random-default'         => false,'width'                  => 1000,'height'                 => 300,'flex-height'            => true,'flex-width'             => true,'header-text'            => false,'default-text-color'     => '','uploads'                => true,'wp-head-callback'       => 'frl_header_image_style','admin-head-callback'    => 'frl_admin_header_image_style','admin-preview-callback' => 'frl_admin_header_image_markup',);add_theme_support('custom-header', $args);

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

• default-image - url στο πλήρες μέγεθος της προεπιλεγμένης εικόνας στο φάκελο του θέματος
• width , height - μέγιστες τιμές που υποστηρίζονται από το θέμα μας
• flex-height , flex-width - ορίστε ως "αληθινό" αυτές οι παράμετροι επιτρέπουν στην εικόνα να έχει ευέλικτα μεγέθη
• header-text - Δεν πρόκειται να δείξουμε κείμενο πάνω στην εικόνα στο θέμα μας
• uploads - να ενεργοποιήσετε τις μεταφορτώσεις στο admin
• wp-head-callback - λειτουργία που πρέπει να καλείται στο κεφάλαιο θέμα θέμα
• admin-head-callback - λειτουργία που πρέπει να καλείται στην ενότητα κεφάλαιο προεπισκόπησης της σελίδας
• admin-preview-callback - λειτουργία για την παραγωγή σήμανσης προεπισκόπησης στην οθόνη διαχειριστή

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

HEADER_IMAGE        -> 'default-image'HEADER_IMAGE_WIDTH  -> 'width'HEADER_IMAGE_HEIGHT -> 'height'NO_HEADER_TEXT      -> 'header-text'HEADER_TEXTCOLOR    -> 'default-text-color'

Βήμα 2: καταχωρήστε τις προεπιλεγμένες εικόνες για να διαλέξετε

Στο παράδειγμα μας θα δώσουμε δύο προκαθορισμένες εικόνες ως επιλογές για την κεφαλίδα και κάθε μία από αυτές θα πρέπει να έχει τρεις παραλλαγές: -large.jpg , -medium.jpg και -thumb.jpg για το αντίστοιχο εύρος παραθύρων. Το μικρότερο μέγεθος θα χρησιμοποιηθεί επίσης ως μικρογραφία στη διεπαφή διαχείρισης.

register_default_headers(array('city' => array('url' => '%s/_inc/img/city-large.jpg','thumbnail_url' => '%s/_inc/img/city-thumb.jpg','description' => 'City'),'forest' => array('url' => '%s/_inc/img/forest-large.jpg','thumbnail_url' => '%s/_inc/img/forest-thumb.jpg','description' => 'Forest')));

Ο κώδικας είναι αρκετά αυτονόητος, η μόνη λεπτομέρεια που απαιτεί προσοχή είναι μια σωστή διεύθυνση URL για τις εικόνες: -large.jpg για το πλήρες μέγεθος και -thumb.jpg για μικρογραφία ( %s - είναι ένα σύμβολο κράτησης θέσης για τον ενεργό φάκελο που θα αντικατασταθεί αυτόματα από το WordPress).

Βήμα 3: εγγραφή πρόσθετων μεγεθών εικόνας

add_image_size('header_medium', 600, 900, false);add_image_size('header_minimal', 430, 900, false);

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

Βήμα 4: σήμανση για το front-end

function frl_header_image_markup(){/* get full-size image */$custom_header = get_custom_header();$large = esc_url($custom_header->url);$mininal = $medium = '';/* get smaller sizes of image */if(isset($custom_header->attachment_id)){ //uploaded image$medium_src = wp_get_attachment_image_src(intval($custom_header->attachment_id), 'header_medium', false);if(isset($medium_src[0]))$medium = esc_url($medium_src[0]);$minimal_src = wp_get_attachment_image_src(intval($custom_header->attachment_id), 'header_minimal', false);if(isset($minimal_src[0]))$mininal = esc_url($minimal_src[0]);}else{ //default image$medium = esc_url(str_replace('-large', '-small', $custom_header->url));$mininal = esc_url(str_replace('-large', '-thumb', $custom_header->url));}/* fallback for some unexpected errors */if(empty($medium))$medium = $large;if(empty($mininal))$mininal = $large;?>

Και πάλι, όλα είναι απλά. Με την frl_header_image_markup λειτουργία δημιουργούμε τη σήμανση που απαιτείται για την δουλειά μας που ανταποκρίνεται στις ανάγκες μας. Το πιο ενδιαφέρον σημείο εδώ είναι η λήψη διευθύνσεων URL εικόνων για μεγάλες, μεσαίες και μικρές πολιτείες. Η λειτουργία WordPress 3.4 get_custom_header επιστρέφει ένα προσαρμοσμένο αντικείμενο κεφαλίδας που περιέχει όλα τα απαραίτητα δεδομένα. Αν $custom_header έχει ρυθμιστεί σωστά attachment_id ιδιοκτησία, έχουμε να κάνουμε με μια μεταφορτωμένη εικόνα και πρέπει να χρησιμοποιήσουμε ενδιάμεσα μεγέθη wp_get_attachment_image_src . Αν δεν υπάρχει τέτοια ιδιοκτησία, έχουμε να κάνουμε με μια από τις προεπιλεγμένες εικόνες μας, ώστε να μπορέσουμε να λάβουμε ενδιάμεσα μεγέθη με βάση τη δική μας ονομασία.

Με frl_header_image_style εισάγουμε το CSS και το JavaScript που κάνουν την εικόνα μας απόκριση. Αυτή η λειτουργία θα κληθεί αυτόματα, επειδή την έχουμε ορίσει ως μια προσαρμοσμένη παράμετρο εγγραφής κεφαλίδας. Αλλά το _markup λειτουργία θα πρέπει να καλείται απευθείας στο θέμα - προφανώς κάπου μέσα στο header.php

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

Βήμα 5: σήμανση για προεπισκόπηση admin

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

function frl_admin_header_image_markup() {$image = get_header_image();?>
#header-image {max-width: 1000px;max-height: 400px; }#header-image img {vertical-align: bottom;width: 100%;height: auto; }

Στο admin χρησιμοποιούμε μόνο ένα μέγεθος εικόνας (πλήρες) στη σήμανσή μας και αποκτά τη διεύθυνση URL του με το get_header_image λειτουργία ( frl_admin_header_image_markup είναι υπεύθυνη γι 'αυτό). Πρέπει όμως να παρέχουμε ένα κατάλληλο στυλ για την προεπισκόπηση έτσι ώστε να αντιπροσωπεύει την απόκριση συμπεριφοράς ( frl_admin_header_image_style είναι υπεύθυνη γι 'αυτό). Και οι δύο λειτουργίες θα καλούνται αυτόματα επειδή τις έχουμε ορίσει ως προσαρμοσμένες παραμέτρους εγγραφής κεφαλίδας. Τώρα μπορούμε να απολαύσουμε απόλυτη ελευθερία, θέτοντας μια προσαρμοσμένη εικόνα κεφαλίδας.

Μια λέξη της προσοχής

Με την ελευθερία έρχεται ευθύνη. Παρέχοντας στον χρήστη την ευελιξία να ανεβάσει προσαρμοσμένες εικόνες, δεν έχουμε κανέναν έλεγχο πάνω στο μέγεθος και τις αναλογίες της εικόνας. Αν μια εικόνα που ανέβηκε υπερβαίνει τα όρια πλάτους και ύψους που έχουμε προβλέψει, θα πρέπει να περικοπεί. Αν όμως όλα αυτά συμβαίνουν στο νέο Live Theme Customizer αντί για την εμφάνιση -> Κεφαλίδα οθόνη, η εικόνα κεφαλίδας δεν θα περικοπεί (τουλάχιστον για τώρα). Το Live Theme Customizer είναι ένα εντελώς νέο χαρακτηριστικό, έτσι ώστε οι μελλοντικές βελτιώσεις να φαίνονται πιθανές, αλλά για το παρόν πρέπει να είμαστε προσεκτικοί.

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

συμπέρασμα

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

Μπορείτε να κάνετε λήψη του κώδικα και των δειγμάτων εικόνων που χρησιμοποιούνται σε αυτό το άρθρο από εδώ .


Έχετε εργαστεί με προσαρμοσμένες κεφαλίδες στο WordPress; Τι βελτιώσεις στην έκδοση 3.4 επηρεάζουν τον τρόπο με τον οποίο εργάζεστε με το WordPress; Συμμετοχή στη συζήτηση παρακάτω.