Banner in header
10 Febbraio 2019 in Videotutorial, Wordpress
Vediamo come inserire un logo/banner sulla destra dell’header customizzabile.
Ricreiamo una situazione analoga a quella esistente del tema pasw2015 di Marco Milesi con personalizzazione del customizer e l’aggiunta di una nuova sezione con i vari settaggi.
Andremo a modificare i file caricati nel tema-child e precisamente
- nel header.php esattamente inseriremo nel <div id=”header-interno”> una nuova classe che chiameremo, per differenziarla dal logo del sito, <div id=”headerbanner”>
- modifica del file function.php con registrazione della funzione e i vari settaggi
- inserimento della proprietà CSS in “CSS aggiuntivo” di WordPress
Vediamo nel dettaglio
Per prima cosa scarichiamo in locale il file header.php e inseriamo lo snippet necessario per richiamare l’immagine (in questo caso il logo-repubblica) e il template tag per i percorsi
Trascrivo di seguito lo snippet aggiunto, troverete comunque a fondo articolo il link per il download dei file modificati
<div id=”header-interno”>
<a href=”<?php bloginfo(‘url’); ?>”><img style=”max-height:160px;” src=”<?php echo get_option(‘pasw_logo’); ?>” alt=”” class=”logo”/></a>
/*(da qui il codice aggiunto, ho trascritto il div già esistente per individuare con più esattezza dove inserire la modifica)*/
<div id=”headerbanner”>
<?php if(get_theme_mod(‘pasw2015_banner_image’, ”)!= ”){?>
<a href=”<?php bloginfo(‘url’); ?>”><img style=”max-height:100px;” src=”<?php echo get_theme_mod(‘pasw2015_banner_image’, ”); ?>” alt=”<?php echo get_theme_mod(‘pasw2015_banner_alt_text’, ”); ?>”>
<?php } else {?>
<a href=”<?php bloginfo(‘url’); ?>”><img style=”max-height:110px;” src=”<?php echo get_template_directory_uri(); ?>/images/repubblica-italiana.png” alt=”banner sito”>
<?php } ?>
</a>
</div>
*****************************************************************
Ho impostato come altezza massima (max-height) dell’img 110px (lo screenshot riporta 100px sono prove testate su header di diverse dimensioni)
Andiamo ad uploadare il nostro file modificato nel tema-child (per chi non avesse un child può sovrascrivere i file del tema, ma avendo cura di fare un backup preventivo e tenendo presente che le modifiche andranno perse con un eventuale aggiornamento)
A questo punto avremo una situazione più o meno così, il logo-repubblica al centro e titolo del sito che sfasa
Andiamo a sistemare il css:
bacheca>aspetto>personalizza>css aggiuntivo
avendo creato una nuova classe la regola sarà:
#headerbanner{
float: right;
margin-left: 5px;
}
se volessimo aumentare o centrare verticalmente possiamo aggiungere un margin-top (dipende anche dal height dell’header):
#headerbanner{
float: right;
margin-left: 5px;
margin-top: 6px;
}
Procediamo a customizzare
Per avere una panoramica su tutte le funzionalità del customizer di WordPress basta accedere a questo link
Vediamo come utilizzarle nel nostro caso
Apriamo in locale il file function.php già presente nel tema child ed inseriamo la registrazione della funzione con all’interno delle graffe tutti settaggi e la legheremo ad una action (da notare che il file function.php del tuo child si presenta solo con la funzione che indica a WordPress quale stili caricare del tema genitore)
/* Add customizer settings
——————————————————– */
function pasw2015_customize_register($wp_customize){
$wp_customize->add_section(‘pasw2015_banner’, array(
‘title’ => __(‘Banner’, ‘pasw2015’),
‘description’ => __(‘All the info about the banner’, ‘pasw2015’),
‘priority’ => 20
)
);
/* Banner Image */
$wp_customize ->add_setting(‘pasw2015_banner_image’, array( ‘default’ => ”));
$wp_customize ->add_control( new WP_Customize_Image_Control( $wp_customize, ‘pasw2015_banner_image’, array(
‘section’ => ‘pasw2015_banner’,
‘label’ => __(‘Banner Image’, ‘pasw2015’),
‘settings’ => ‘pasw2015_banner_image’
)));
/* Banner alt text */
$wp_customize ->add_setting(‘pasw2015_banner_alt_text’, array( ‘default’ => ‘Banner right’));
$wp_customize ->add_control(‘pasw2015_banner_alt_text’, array(
‘section’ => ‘pasw2015_banner’,
‘label’ => __(‘Banner alt text’, ‘pasw2015’),
‘type’ => ‘text’
));
}
add_action(‘customize_register’, ‘pasw2015_customize_register’);
Salviamo il file e trasferiamolo via ftp nel tema-child.
Ecco che nel customizer avrai il nuovo modulo con possibilità di cambiare immagine secondo le tue esigenze.
La funzione ‘if’, inserita nel file header.php, indica a WordPress che se (if) il campo è diverso da vuoto “vai a mostrare l’immagine customizzata, altrimenti (else) vai a visualizzare l’immagine impostata” (nel nostro caso logo-repubblica)
Il campo “alt text” permette di settare l’attributo alt:
da “ispeziona ” (browser Google Chrome) o da “analizza elemento” (browser Firefox) notiamo il settaggio corretto
Questa la demo , da questa pagina è possibile scaricare una cartella zippata con gli snippet già “confezionati” per essere inseriti nei file.php e la propietà css per essere aggiunta al foglio di style.
Raccomandazioni
- inserire le modifiche possibilmente nel child
- testate prima in locale oppure su un sito di prova;
- gli snippet condivisi sono stati salvati in .php e .css apriteli con un buon editor di testo (NotePad++)
Per qualsiasi chiarimento contattami senza problemi!
Indicazioni, suggerimenti, tutorial per la realizzazioni di codici sono a cura di
MARCHETTI DESIGN-Andrea Marchetti
Lascia una risposta
Devi essere loggato per inviare un commento.