Cerca

Specifiche pagine WordPress con relativo Header (immagine) variabile

Indice Articolo

Ultimi articoli pubblicati

Volevo affrontare questo hack per WordPress, dopo aver letto alcuni post riguardanti il semplice riconoscimento di una determinata pagina creata tramite WordPress con il conseguente cambio dell’immagine dell’header.

Specifiche pagine WordPress con relativo Header (immagine) variabile

In poche parole e per esempio: mettiamo che alla pagina Chi Siamo si voglia far corrispondere un header con l’immagine di una foto di gruppo dello staff, mentre alla pagina Contatti, deve essere presente un header con un’immagine che richiami, mentre alla pagina Dove siamo, deve corrispondere un ulteriore e differente header con un’immagine della mappa stradale… come rendere possibile tutto ciò?

La cosa è abbastanza semplice e andiamo a vedere nello specifico cosa c’è da fare: prima di tutto è necessario conoscere come il nostro blog WordPress ha assegnato gli ID alle pagine a cui vogliamo sostituire un header diverso.

Dalla vostra Dashboard quindi, andate su Manage e poi su Pages, a questo punto avrete la lista delle pagine del vostro blog, se vi posizionate con il mouse sopra il titolo della vostra pagina, in basso sulla barra di stato del vostro browser leggerete qualcosa di simile:

http://www.vostroblog.est/wp-admin/page.php?action=edit&post=2

La parte che ci interessa è esattamente quella in grassetto, e che alla fine ci mostra il numero ID assegnato alla pagina; nel mio caso ad esempio, la pagina Chi Sono ha ID 2 come si vede dalla screen più in basso:

Specifiche pagine WordPress con relativo Header (immagine) variabile

Una volta quindi che avete recuperato e segnato tutti gli ID delle pagine che vorrete, si potrà procedere a strutturare il codice che controlla in quale pagina ci troviamo e di conseguenza se applicare o meno il differente header, e più precisamente, ipotizziamo di voler modificare l’immagine header delle pagine con ID 2, 3 e 5 inserendo le immagini: img2.jpg, img3.jpg e img5.jpg con larghezza fissa di 920 pixel; andremo a scrivere il seguente codice:

<?php if (is_page(‘2’)) { ?>
<img src=”<?php bloginfo(‘template_url’); ?>/headers/img2.jpg” width=”920″ alt=”<?php bloginfo(‘name’); ?> header image” />
<?php } elseif (is_page(‘3’)) { ?>
<img src=”<?php bloginfo(‘template_url’); ?>/headers/imag3.jpg” width=”920″ alt=”<?php bloginfo(‘name’); ?> header image” />
<?php } elseif (is_page(‘5’)) { ?>
<img src=”<?php bloginfo(‘template_url’); ?>/headers/img5.jpg” width=”920″ alt=”<?php bloginfo(‘name’); ?> header image” />
<?php } else { ?><?php get_header(); ?><?php } ?>

Con questo codice infatti controlleremo in quale pagina ci troviamo, e se risulteranno quelle con ID 2,3 o 5 verranno caricati gli header con le relative immagini img2.jpg, img3.jpg e img5.jpg.

Il resto è davvero semplice, basta copiare il codice di cui sopra, andare dalla Dashboard su Design, Theme Editor e successivamente modificare Page Template (page.php), cancellando all’inizio <?php get_header(); ?>, ed incollare il nuovo codice.

Successivamente dovrete anche caricare via FTP, sul vostro hosting, le immagini che vorrete abbinare alle varie pagine, creando una nuova cartella sotto wp-contents/theme/headers.

Vi assicuro che è più difficile a dirsi che a farsi, per cui rimboccatevi le maniche e datevi da fare con le prove, per adattare le immagini sul vostro tema… sono qui che vi aspetto in caso di difficoltà!

via | PrimePress

22 risposte

  1. Caro Carlo

    Devo riconoscere che leggendoti trasmetti un senso di tranquillità tale da indurmi a modificare quello strano alfabeto che compare nell’editing. Però non ho ottenuto risultato. Ti posto cosa ho fatto ma ti prego di riporre qualsiasi rasoio hai a portata di mano ho due figli ancora da cresere!
    La prima e la seconda differiscono perchè ho provato vari tentativi…fallendo…al tuo buon cuore!!!!

    /headers/TestaCibo1.jpg”
    width=”920″ alt=”/headers/TestaCibo1.jpg”; ?> header image” />

    <img src=”/headers/TestaFashion1.jpg”
    width=”920″ alt=” header image” />

    1. L’invio del messaggio ha parzialmente cancellato il codice provo a rimettere la prima parte

      /headers/TestaCibo1.jpg”
      width=”920″ alt=”/headers/TestaCibo1.jpg”; ?> header image” />

    2. Ciao jak e grazie dei complimenti… non preoccuparti i tuoi figli sono al sicuro 😉 !

      Allora, in sostanza ho cercato di capire meglio il tuo codice e sostanzialmente da quanto vedo, non sono giusti i percorsi delle immagini, ma credo sia un problema di codice php vietato nel form dei commenti… a parte ciò mi chiedo se non potrebbe esserti fortemente di aiuto questo plugin:

      http://wordpress.org/extend/plugins/dynamic-headers/

      in grado di modificare gli header per ogni pagina, in maniera “dinamica” per ogni pagina o post, oppure in maniera casuale…

      Fammi sapere come è andata… a presto!

  2. ciao, arrivo con 2 anni di ritardo 🙂
    ho provato a seguire le tue istruzioni, per questo blog http://www.chiaraefabio.it
    ma non succede nulla .. riesci a capire dove sbaglio?
    grazie mille!

    qui sotto il codice del template pagine …

    <img src=”/headers/map.jpg” width=”690″ alt=” header image” />

    <img src=”/headers/chiesa.jpg” width=”690″ alt=” header image” />

    <img src=”/headers/lista.jpg” width=”690″ alt=” header image” />

    <div id="post-” >

    <a class="comment-box" href="#comments” title=”Comments on “>

    <a class="comment-box" href="#comments” title=”Comments on “>

    ‘Pages:’, ‘after’ => ” ) ); ?>
    <?php edit_post_link( 'Edit', '’, ” ); ?>

    1. Ciao anna,
      a prima vista mi sembra che manchi la funzione php per la chiamata del percorso delle immagini:

      bloginfo(‘template_url’);

  3. Uhm… ho cancellato soltanto dalla cima del file e l’ho sostituito col codice, incollandolo :/ Non capisco cosa possa essere successo. Grazie comunque, sei stato gentilissimo. Ti farò sapere 🙂

  4. Grazie della celere risposta. Ho piazzato il codice (nel mio caso relativo ad una sola pagina) all’inizio del documento page.php, sostituendo , come da te suggerito. L’immagine adesso la carica, ma tutto il resto è scombinato completamente… Il php non chiama le impostazioni css… il risultato è una pagina web che somiglia ad un documento di Word. Testuale, insomma… Guardando l’output HTML della pagina, si vede che è molto diverso da quello delle altre pagine del blog. Manca un sacco di roba insomma. Non so… come posso rimediare?

    1. Ciao Maria Francesca,
      da quello che mi dici credo che tu abbia cancellato un pò troppe cose, hai copiato ed incollato le righe del codice come mostrato nel post? Non dovresti vedere il blog come se il CSS non venga affatto caricato; la funzione controlla su che pagina sei e mette un header a piacere all’inizio della pagina, se non sei una delle pagine controllate, allora carica normalmente il blog… tutto qui.

      Lascia intatto tutto il resto del codice di page.php apportando le modifiche come è indicato… fammi sapere!

  5. Ciao, ti faccio anch’io innanzitutto i complimenti per il blog.
    Ho bisogno di chiederti un favore. Ho seguito le tue istruzioni del post, tuttavia l’immagine (le cui dimensioni equivalgono a quelle della testata del blog) non appare e la pagina si scombina. Questo è il codice che ho messo in page.php:

    <img src=”/headers/headersezionelegale.png” width=”880″ />

    Puoi aiutarmi? Grazie.

    1. Ciao Maria Francesca,
      grazie per i complimenti! Allora, chiaramente il tuo header è 880px e l’immagine pure giusto?
      Ammettendo che la mia considerazione sia corretta, indicami il punto preciso dove hai inserito il codice per cambiare l’header, e controlla l’output HTML della pagina che ti si scombina, per vedere cosa sta accadendo.

  6. Ciao Andrea,
    potresti postarmi il contenuto della riga incriminata in page.php, sembrerebbe un errore di sintassi…

    1. Ho corretto la sintassi, non mi prendeva correttamente il carattere degli apici. Ora funziona, ma in parte, nel senso che le pagine con la testata personalizzata non prendono correttamente il css e l’impaginazione va a farsi benedire…

      <img src=”/headers/header_cani2.jpg” width=”800″ alt=” header image” />

      <img src=”/headers/header_cani3.jpg” width=”800″ alt=” header image” />

      <img src=”/headers/header_cani4.jpg” width=”800″ alt=” header image” />

      1. Ciao Andrea,
        sono contento che ci siano passi avanti 😉
        Ma le dimensioni dei tuoi header sono compatibili con tutto il tema, oppure sono più grandi e lo “sconfigurano” in maniera irreparabile? Cerca di giocare con le dimensioni dei tuoi jpeg e di impostarli a priori… spero di essermi spiegato…

        1. La mia idea è che non sia un problema di immagini, ma di header.php e file css. In pratica non prende le istruzioni nella pagina header.php per le pagine dove gli dico di usare la nuova immagine. Sarebbe possibile adattare il tuo script per il file css?

          #splash{width:800px;background:url(images/header_cani.jpg) no-repeat;height:200px;margin:0;padding:0;}

          1. mmm… non capisco bene cosa intendi per adattare lo script per il file css?
            nel css, non è possibile inserire istruzioni php

  7. Ho provato ad utilizzare il tuo codice, ma anche a me non funziona. Risulta questo errore: Parse error: syntax error, unexpected ‘)’ in …/wp-content/themes/blue-box-01/page.php on line 1

  8. Innanzitutto grazie per l’attenzione che mi presti, appena metto su il blog, ti linko perchè te lo meriti.. arrivando al dunque: io sto solo facendo degli esperimenti in localhost con l’ottimo easyphp (davvero fighissimo) e quando faccio tutta la procedura mi compare fuori un messaggio di errore (una scritta in cui dice che non trova header.php riga 1 qualcosa del genere).

    L´ultimo post di Marco è il seguente..GRANDI NOVITA’ IN VISTA: CI TRASFERIAMO SU WORDPRESS!

  9. Ciao Marco, figurati nessun disturbo…
    Allora sulla parte “img src=” devi fare riferimento alla posizione del tuo file jpg. Io ho utilizzato nell’esempio una immagine header larga 920pixel, ma il percorso rimane lo stesso perchè ho lasciato la funzione bloginfo(’template_url’); in modo che punti sempre al template attivo… al posto dell’immagine ti mette una crocetta rossa o ricevi proprio un errore?

    Con crocetta rossa intendo Rispondi

  10. Scusa se ti disturbo ancora.. ma su template_url devo lasciarlo cosi oppure devo modificarlo? scusa, ma sono davvero un po rimba..
    Vorrei solo sapere se faccio giusto modificando SOLO il numerino della pagina a cui atttribuire e il percorso delle immagini. Oppure se devo personalizzare altro, perchè continua a non funzionare.. grazie e scusami ancora se ti disturbo..

    L´ultimo post di Marco è il seguente..GRANDI NOVITA’ IN VISTA: CI TRASFERIAMO SU WORDPRESS!

  11. E io quello che hai detto l’ho fatto.. ho messo
    <img src=”/headers/img2.jpg” width=”920″ alt=” header image” />
    al posto di , modificando l’indirizzo delle immagini (o dell’immagine se voglio farlo solo su una pagina e il numerino della relativa pagina.. ma ciò non funziona… 🙁

    L´ultimo post di Marco è il seguente..GRANDI NOVITA’ IN VISTA: CI TRASFERIAMO SU WORDPRESS!

  12. Ciao Marco, grazie dei complimenti intanto!

    Allora, in page.php dovresti copiare prima di le righe di cui sopra e chiaramente modificando i percorsi delle immagini, successivamente dovresti anche cancellare , per il funzionamento corretto…

    Fammi sapere…e a presto!

  13. Ciao, complimenti per il blog, innanzitutto! Vorrei avere maggiori info su questo post.. dove devo inserire il codice da te evidenziato? in page.php da come hai scritto, ma a me non funziona.. devo cambiare qualcosa a ciò che hai scritto oltre ovviamente al percorso delle immagini? grazie per la risposta!!

    L´ultimo post di Marco è il seguente..GRANDI NOVITA’ IN VISTA: CI TRASFERIAMO SU WORDPRESS!

Rispondi