da

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

  1. nel header.php  esattamente inseriremo nel <div id=”header-interno”> una nuova classe che chiameremo, per differenziarla dal logo del sito, <div id=”headerbanner”>
  2. modifica del file function.php con registrazione della funzione e i vari settaggi
  3. 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
header-senza-css

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

img-css-aggiuntivo

questo il risultato
header-banner-ok

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

img-function

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.

banner-customize
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)

cambia-img

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

alt-text

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
Logo-NXMARCHETTI DESIGN-Andrea Marchetti

Lascia una risposta

Devi essere loggato per inviare un commento.

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.

Vai alla barra degli strumenti