Come inserire un logo nell'header?

Question

Come inserire un logo nell'header?

26 giu 2013, 18:03:04

Visualizzazioni: 114K

Voti: 10

Sono abbastanza nuovo nel mondo WordPress (provengo da Joomla)

Sto riscontrando alcune difficoltà nell'inserire un logo in questo sito di test WordPress: http://onofri.org/example/

Voglio inserire il mio logo nell'header del sito web, al posto del testo "EXAMPLE".

Guardando nel pannello di configurazione di WordPress non riesco a trovare dove posso caricare il logo e metterlo automaticamente al posto del testo "EXAMPLE" nell'header (non so se questa sia una funzione standard di WordPress come in Joomla o se è una caratteristica che può essere resa disponibile da alcuni temi specifici o se devo inserirlo direttamente nel codice)

Tuttavia non lo trovo nemmeno nelle impostazioni del mio tema.

Cosa devo fare per inserire il mio logo? Devo inserirlo direttamente nel mio codice HTML?

AndreaNobili

878

sviluppo temi temi template logo

Tutte le risposte alla domanda

Se è presente una funzionalità per il "logo", farà parte del tema. Potrebbe essere un'opzione del tema o parte del sistema di personalizzazione del tema.

Di solito utilizzo un'Intestazione Personalizzata per gestire questo aspetto nei siti commerciali, anche se un'intestazione personalizzata non è specificamente pensata per un logo. Si tratta di una generica funzione per l'"immagine dell'intestazione".

In breve, dipende dal tema. Se si tratta di un tema che stai creando, puoi modificare il tema per aggiungerlo. Consulta gli articoli del Codex già menzionati.

s_ha_dum

65.5K

26 giu 2013 18:11:53

Per cambiare l'immagine dell'intestazione, vai al pannello di amministrazione del tuo WordPress.

Nel menu Aspetto clicca su Intestazione e lì troverai l'opzione per caricare la tua immagine di intestazione e il testo da visualizzare nell'intestazione.

Se non viene visualizzata, devi modificare il file dell'intestazione e inserire il seguente codice se non è già presente.

   <?php 
    $header_image = get_header_image();
    if (!empty($header_image)): ?>
        <a href="<?php echo esc_url(home_url('/')); ?>">
            <img src="<?php echo esc_url($header_image); ?>" class="header-image" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="Immagine di intestazione del sito" title="Immagine di intestazione" />
        </a>
    <?php endif; ?>

Yamu

309

27 giu 2013 08:24:50

Mayeenul Islam 12.9K · Accepted Answer · 2013-06-27T08:11:24Z

Prova a modificare un po' la sezione dell'header per conformarti agli standard. Ecco il tuo codice attuale:

<div id="header-image">
   <img width="1102" height="350" alt="" class="header-image" src="http://onofri.org/example/wp-content/uploads/2013/06/header1.jpg">
</div>

Ecco come puoi modificare il tutto:

<div id="header-image">
    <a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
       <img src="<?php echo get_template_directory_uri(); ?>/images/logo.png" alt="Logo" width="QUI" height="QUI" />
    </a>
</div>

Ora ci sono solo 3 passaggi:

Invece di utilizzare le impostazioni predefinite dell'immagine dell'header del tema, puoi modificare il tuo file header.php con il codice fornito sopra.
Invece di inserire l'immagine tramite Aggiungi nuovo media, puoi caricare l'immagine tramite cPanel (il Pannello di controllo del tuo web host) nella sottocartella 'images' della cartella del tema.
E invece di creare un'immagine enorme con sfondo per il tuo logo, prova a creare un logo semplice senza sfondo in Photoshop (o qualsiasi altro software grafico) - nel caso di Photoshop, procedi così: dopo aver posizionato l'immagine del logo in un livello, elimina il livello di sfondo e poi salva l'immagine per il web (File > Salva per il web... [Ctrl + Alt + Shift + S]) e scegli il formato PNG-24 per un buon risultato. Poi salvalo come logo.png e posizionalo nella cartella '/wp-content/themes/simplemarket/images/'.

Spero che il resto sia chiaro. Se hai domande, sentiti libero di commentare qui sotto.