Come attivare il pannello di immagini personalizzate dell'intestazione in WordPress 3.0

Se voi ragazzi non avete avuto la possibilità di provare WordPress 3.0, allora vi state perdendo. Abbiamo creato numerosi post sulle funzionalità di WordPress 3.0 e abbiamo mostrato anche gli screenshot di WordPress 3.0. Uno degli aggiornamenti degni di nota in questa versione è un nuovo tema predefinito chiamato Venti Dieci. Questo tema ha un sacco di fantastiche funzionalità attivate, ma una delle funzionalità che molti utenti vogliono è il pannello delle intestazioni personalizzate. In questo articolo, condivideremo con te come abilitare le intestazioni personalizzate con un pannello di amministrazione di back-end in WordPress 3.0.

Che cosa farà esattamente questa funzione?

Creerà una scheda nel tuo pannello di amministrazione che ti permetterà di cambiare le immagini di intestazione. È possibile registrare immagini predefinite se si è progettisti di temi per offrire agli utenti più opzioni. Consente inoltre agli utenti di caricare immagini personalizzate per l'intestazione. Ultimo ma certamente non meno importante, questa funzione utilizza le miniature dei post su singole pagine di post. Se la miniatura del tuo post è abbastanza grande da contenere le dimensioni dell'intestazione, utilizzerà l'anteprima del post come intestazione anziché come immagine predefinita. Se la miniatura è più grande, verrà ritagliata per te.

Guarda lo Screencast

Come aggiungere questo?

Abbiamo preso il codice direttamente da Twenty Ten functions.php file. È necessario incollare i seguenti codici nel tema functions.php file.

 array ('url' => '% s / images / headers / berries.jpg', 'thumbnail_url' => '% s / images / headers / berries-thumbnail.jpg', 'description' => __ ('Berries' , 'yourtheme')), 'cherryblossom' => array ('url' => '% s / images / headers / cherryblossoms.jpg', 'thumbnail_url' => '% s / images / headers / cherryblossoms-thumbnail.jpg ',' description '=> __ (' Cherry Blossoms ',' yourtheme ')),' concave '=> array (' url '=>'% s / images / headers / concave.jpg ',' thumbnail_url '=> '% s / images / headers / concave-thumbnail.jpg', 'description' => __ ('Concave', 'yourtheme')), 'fern' => array ('url' => '% s / images / headers / fern.jpg ',' thumbnail_url '=>'% s / images / headers / fern-thumbnail.jpg ',' description '=> __ (' Fern ',' yourtheme ')),' forestfloor '=> array ('url' => '% s / images / headers / forestfloor.jpg', 'thumbnail_url' => '% s / images / headers / forestfloor-thumbnail.jpg', 'description' => __ ('Forest Floor' , 'yourtheme')), 'inkwell' => array ('url' => '% s / images / headers / inkwell.jpg', 'thumbnail_url' => '% s / immagini / intestazioni / inkwell-t humbnail.jpg ',' description '=> __ (' Inkwell ',' yourtheme ')),' path '=> array (' url '=>'% s / images / headers / path.jpg ',' thumbnail_url ' => '% s / images / headers / path-thumbnail.jpg', 'description' => __ ('Path', 'yourtheme')), 'sunset' => array ('url' => '% s / images / headers / sunset.jpg ',' thumbnail_url '=>'% s / images / headers / sunset-thumbnail.jpg ',' description '=> __ (' Sunset ',' yourtheme ')))));  finisci se; if (! function_exists ('yourtheme_admin_header_style')): / ** * Stili dell'immagine dell'intestazione visualizzata nel pannello di amministrazione Aspetto> Intestazione. * * Riferito tramite add_custom_image_header () in yourthe_setup (). * * @since 3.0.0 * / function yourtheme_admin_header_style () ?> #headimg height: px; larghezza: px;  #headimg h1, #headimg #desc display: none;   

Questo è jibbrish per me. Spiega per favore

Naturalmente, questo potrebbe sembrare un po 'irritante per alcuni di voi. Questo è principalmente per i designer di temi, ma faremo del nostro meglio per abbatterlo. Prima di iniziare, assicurati di copiare e incollare questo codice nel tuo editor di codice, in modo da poter apportare le modifiche necessarie.

Nota: stiamo usando / images / headers / come directory in cui verranno memorizzate le immagini di intestazione predefinite.

• Si avvia il codice creando una funzione yourtheme_setup ().
• Nella riga 21, definiamo l'immagine di intestazione predefinita. Nota c'è una variabile% s che è fondamentalmente un segnaposto per l'URI della directory dei temi.
• Le linee 25 e 26 sono dove definisci la larghezza e l'altezza dell'immagine. Per impostazione predefinita è impostato su 940 px di larghezza e 198 px di altezza. Puoi cambiarlo modificando queste due linee.
• A partire dalla riga 42, iniziamo a registrare le intestazioni predefinite. Queste sono le immagini che verranno mostrate come opzione per i pulsanti di opzione nel tuo pannello di amministrazione. Se hai bisogno di più opzioni, segui semplicemente il formato utilizzato.
• Nella riga 95, scegliamo lo stile dell'intestazione. Non è necessario modificare queste impostazioni perché alreadyd le ha definite nella riga 25 e 26.

Questo è tutto quello che stai facendo per il file functions.php del tema. Ora vedremo come aggiungere questo al tema.

Codice da aggiungere al tuo tema

Questo codice molto probabilmente andrà nel tema header.php file. Puoi disegnarlo come preferisci.

ID) && (/ * $ src, $ larghezza, $ altezza * / $ immagine = wp_get_attachment_image_src (get_post_thumbnail_id ($ post-> ID), 'post-miniatura')) && $ image [1]> = HEADER_IMAGE_WIDTH): // Abbiamo una nuova immagine di intestazione! echo get_the_post_thumbnail ($ post-> ID, 'post-miniatura'); altro:?>  

Cosa fa questo codice?

• Innanzitutto, controlla se si tratta di un singolo post o di una pagina. Controlla anche se questo post / pagina ha una miniatura e se è abbastanza grande.
• Se la pagina è una singola pagina e ha una miniatura abbastanza grande, visualizza la miniatura del post specifica per quel post.
• Se non è una singola pagina, o la miniatura del post non è abbastanza grande, allora mostrerà l'intestazione predefinita.

Speriamo che questo tutorial sia stato utile. Abbiamo ricevuto alcune e-mail in merito a questo tutorial, quindi abbiamo eliminato il codice dal tema Twenty Ten. Se avete domande, non esitate a chiedere nei commenti.