Creazione di un'intestazione reattiva in WordPress 3.4

Tra tutte le nuove funzionalità e miglioramenti introdotte dalla recente versione di WordPress 3.4, c'è una gemma nascosta. La funzione Custom Header Image è stata supportata da WordPress per qualche tempo, tuttavia in precedenza le sue dimensioni fisse lo rendevano troppo immobile per essere di grande utilità nell'era del design reattivo.

La nuova versione lo rende flessibile e introduce un codice più semplice e più pulito per questa popolare opzione. Come sviluppatori di temi possiamo ora andare oltre, prendendo in considerazione la necessità di ottimizzare per i visitatori mobili.

In precedenza, le dimensioni di un'immagine di intestazione erano predefinite e gestite con HEADER_IMAGE_HEIGHT e HEADER_IMAGE_WIDTH le costanti e il file caricato sono stati ritagliati per soddisfare questi vincoli. Ma dalla versione 3.4 l'immagine dell'intestazione personalizzata supporta larghezze e altezze flessibili e ci libera da queste brutte costanti. Sembra intrigante, vero? Vediamo come può essere fatto.

Cosa stiamo per raggiungere

Prima di tutto dovremmo decidere quale delle tecniche di immagini reattive disponibili (e ampiamente discusse) ci si adatti. Possiamo permetterci qualsiasi markup personalizzato per questa immagine, tenendo in considerazione la sua importanza per il marchio del sito e allo stesso tempo la sua indipendenza dalla struttura o dal markup di un post. Da questo punto di vista, la tecnica "noscript" sembra davvero promettente. Per riassumere la tecnica, funziona come segue:

Specifichiamo riferimenti di immagine alternativi per punti di interruzione scelti come attributi di dati di a

Dovrebbe essere accompagnato da uno stile CSS appropriato e uno script che permetta a jQuery Picture di funzionare. A parte questo vorremmo avere una serie di immagini di intestazione predefinite da scegliere (allo stesso modo che abbiamo nel tema Twenty Eleven). Inoltre, vorremmo dare all'utente la possibilità di caricare la propria immagine nel pannello di amministrazione. Supponendo che venga caricata una versione completa dell'immagine, creeremo le dimensioni intermedie necessarie con il supporto integrato per le miniature di WordPress combinato con le dimensioni flessibili dell'intestazione. Il nostro intestazione personalizzata dovrebbe alla fine assomigliare a questo:

Basta parlare, tuffiamoci nel codice.

Passaggio 1: registra l'intestazione personalizzata con il tema

$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);

Questo è un nuovo codice di registrazione introdotto in WordPress 3.4. Puoi vedere l'intero set di parametri per esso in Codice , ma per il nostro compito i seguenti sono i più importanti:

• default-image - url alla dimensione totale dell'immagine di default nella cartella del tema
• width , height - valori massimi supportati dal nostro tema
• flex-height , flex-width - impostato come "vero", questo parametro consente all'immagine di avere dimensioni flessibili
• header-text - Non mostreremo il testo sopra l'immagine nel nostro tema
• uploads - abilita i caricamenti in admin
• wp-head-callback - funzione da chiamare nella sezione testa del tema
• admin-head-callback - funzione da chiamare nella sezione di testa della pagina di anteprima
• admin-preview-callback - funzione per produrre il markup di anteprima nella schermata di amministrazione

Se hai già utilizzato un'immagine di intestazione personalizzata nel tuo tema e ti stai chiedendo come confrontare le tecniche, ecco un elenco di equivalenti tra vecchie costanti e nuovi parametri (le chiavi dell'array):

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

Passaggio 2: registra le immagini predefinite tra cui scegliere

Nel nostro esempio forniremo due immagini predefinite come opzioni per l'intestazione e ognuna di esse dovrebbe avere tre varianti: -large.jpg , -medium.jpg e -thumb.jpg per il corrispondente intervallo di larghezze della finestra. Anche le dimensioni più piccole verranno utilizzate come anteprima nell'interfaccia di amministrazione.

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')));

Il codice è abbastanza auto-esplicativo, l'unico dettaglio che richiede attenzione è un url corretto per le immagini: -large.jpg per full size e -thumb.jpg per la miniatura ( %s - è un segnaposto per la cartella del tema attivo che verrà automaticamente sostituita da WordPress).

Passaggio 3: registra dimensioni di immagine aggiuntive

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

Registrando queste dimensioni aggiuntive con il nostro tema istruirai WordPress a creare una variante per ognuna di esse durante il caricamento di un'immagine per l'intestazione personalizzata. La variante appropriata può essere ottenuta in seguito utilizzando il nome. Il trucco è di specificare un valore di altezza piuttosto elevato, in questo modo costringe l'immagine a essere ridimensionata in base alla larghezza e lascia che la sua altezza sia ricavata dalle proporzioni.

Step 4: markup per il 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;?>

Di nuovo, tutto è semplice. Con il frl_header_image_markup funzione creiamo il markup necessario affinché la nostra tecnica reattiva funzioni. La parte più interessante qui è ottenere URL di immagini per stati grandi, medi e piccoli. La funzione WordPress 3.4 get_custom_header restituisce un oggetto di intestazione personalizzato che contiene tutti i dati necessari. Se $custom_header ha impostato correttamente attachment_id proprietà, abbiamo a che fare con un'immagine caricata e dovremmo ottenere dimensioni intermedie usando wp_get_attachment_image_src . Se non esiste tale proprietà, abbiamo a che fare con una delle nostre immagini predefinite in modo da ottenere dimensioni intermedie basate sulla nostra convenzione di denominazione.

Con frl_header_image_style iniettiamo CSS e JavaScript che rendono la nostra immagine reattiva. Questa funzione verrà chiamata automaticamente perché è stata specificata come parametro di registrazione dell'intestazione personalizzata. Ma il _markup la funzione dovrebbe essere chiamata direttamente nel tema, ovviamente da qualche parte all'interno del header.php

Dopo questo passaggio abbiamo già visto la nostra prima immagine di intestazione predefinita visualizzata in modo reattivo.

Passaggio 5: markup per l'anteprima dell'amministratore

In Aspetto -> Menu intestazione ora abbiamo uno schermo, che ci consente di cambiare l'immagine dell'intestazione personalizzata scegliendo una tra le opzioni predefinite o caricando una nuova immagine. Avremo l'intestazione come semplice.

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; }

In admin usiamo solo una dimensione dell'immagine (piena) nel nostro markup e otteniamo il suo URL con il get_header_image funzione ( frl_admin_header_image_markup è responsabile per questo). Ma dovremmo fornire uno stile appropriato per l'anteprima in modo che rappresenti il ​​comportamento reattivo ( frl_admin_header_image_style è responsabile per questo). Entrambe le funzioni verranno chiamate automaticamente perché le abbiamo specificate come parametri di registrazione delle intestazioni personalizzate. Ora possiamo goderci la libertà assoluta, impostando un'immagine di intestazione personalizzata.

Una parola di cautela

Con la libertà arriva la responsabilità. Garantendo a un utente la flessibilità di caricare immagini personalizzate, non abbiamo alcun controllo sulle dimensioni e le proporzioni dell'immagine. Se un'immagine caricata supera i limiti di larghezza e altezza che abbiamo fornito, dovrebbe essere ritagliata. Ma se tutto ciò accade nel nuovo Custom Theme Customizer al posto della schermata Aspetto -> Intestazione , l'immagine dell'intestazione non verrà ritagliata (almeno per ora). Il Live Theme Customizer è una funzionalità abbastanza nuova, quindi i miglioramenti futuri sembrano verosimili, ma per il momento dovremmo stare attenti.

Un altro problema potrebbe sorgere se un'immagine caricata ha una larghezza inferiore a quella prevista dal nostro tema design. Il nostro codice lo allungherà per riempire l'intera larghezza del contenitore in modo che la qualità dell'immagine possa risentirne. La verità è che qualsiasi cosa personalizzabile può, per sua natura, essere infranta. Fornire solide linee guida per i tuoi utenti ti aiuterà, ma in una certa misura, devi lasciarli fare come faranno.

Conclusione

Per riassumere: abbiamo ora implementato nuove funzioni introdotte nel nuovo WordPress 3.4 per supportare un'immagine di intestazione personalizzata. L'abbiamo reso reattivo utilizzando la tecnica "noscript" che ci consente non solo di adattare le dimensioni di un'immagine in base alla larghezza del browser, ma anche di offrire immagini di dimensioni diverse per varie larghezze. Forniamo il nostro tema con due varianti predefinite, ma qualsiasi immagine può essere caricata tramite un'interfaccia di amministrazione e la nostra intestazione sarà ancora reattiva.

Puoi scaricare il codice e le immagini di esempio utilizzate in questo articolo da qui .


Hai lavorato con intestazioni personalizzate in WordPress? Quali perfezionamenti nella versione 3.4 hanno un impatto su come lavori con WordPress? Unisciti alla conversazione qui sotto.