WP 004 – Personalizzazione header e footer

Appunti relativi alla mia prima installazione di WordPress. Le seguenti indicazioni sono visualizzabili su questo sito per esclusivo uso personale. Il sottoscritto non si ritiene responsabile di problemi derivanti dall'utilizzo di tali indicazioni. P.S. - Alcuni contenuti potrebbero risultare obsoleti.

Torna all’elenco WordPress

Header

Per la gestione personalizzata dell’header bisogna creare il file header.php da inserire nella cartella del tema. L’header è stato modificato in modo da contenere anche una barra per il menu. Di seguito la modifica al contenuto del file header.php e la porzione di codice relativo alle istruzioni CSS da inserire nel file style.css

<header role="banner">
     <div class="my_header"> 	
           <p style="text-align:center; border:1px solid black"><img src="http://vitocafazzo.it/site_Wp/wp-content/uploads/2020/10/logo.png"></p>
     </div>
     <div class="my_menuBar"> 
        <form id="searchform" method="get" action="<?php echo esc_url( home_url( '/' ) ); ?>">
            &nbsp|&nbsp
            <a href="http://vitocafazzo.it/site_Wp/appunti/" style="color:#FF6600;"> Appunti </a>
            &nbsp|&nbsp
            <a href="http://vitocafazzo.it/site_Wp/personali" style="color:#FF6600;"> Personali </a>
            &nbsp|&nbsp 
            <input style="background-color: #21384D; color:white" type="text" class="search-field" name="s" placeholder="Ricerca per...." value="<?php echo get_search_query(); ?>">
            <input style="background-color: #21384D; color:#FF6600" type="submit" value="Cerca">
            &nbsp|&nbsp 
        </form>
     </div>
</header>

</div>

&nbsp|&nbsp

<a href="http://vitocafazzo.it/site_Wp/appunti/" style="color:#FF6600;"> Appunti </a>

&nbsp|&nbsp

<a href="http://vitocafazzo.it/site_Wp/personali" style="color:#FF6600;"> Personali </a>

&nbsp|&nbsp

&nbsp|&nbsp

</form>

</div>

</header>

.my_header {
	background:#000000 url(http://vitocafazzo.it/site_Wp/wp-content/uploads/2020/10/sfondoJoy.jpg) repeat-x bottom center;
	width: 100%;
	height: auto;
	z-index: 999999;
}

.my_menuBar { 
    width: 100%;
    margin-top:-16px;
    padding-top: 5px;
    padding-bottom: 5px;
	font-family: Arial, Helvetica, sans-serif;
	background: #162635;
	color: White;
	text-align:center;
	font-size:14px;
	border:0 solid #000; 
	z-index: 999999;
}

.my_header {

background:#000000 url(http://vitocafazzo.it/site_Wp/wp-content/uploads/2020/10/sfondoJoy.jpg) repeat-x bottom center;

width: 100%;

height: auto;

z-index: 999999;

}

.my_menuBar {

width: 100%;

margin-top:-16px;

padding-top: 5px;

padding-bottom: 5px;

font-family: Arial, Helvetica, sans-serif;

background: #162635;

color: White;

text-align:center;

font-size:14px;

border:0 solid #000;

z-index: 999999;

}

Footer

Per la gestione personalizzata del footer bisogna creare il file footer.php da inserire nella cartella del tema. Ho pensato ad un footer semplice contenente i link all’ Informativa estesa sull’uso dei cookie e alle Note legali, ancorato in fondo alla pagina. Di seguito il contenuto del file footer.php e la porzione di codice relativo alle istruzioni CSS da inserire nel file style.css

<?php
/**
 * The template for displaying the footer.
 *
 * Contains the closing of the #content div and all content after
 *
 * @package Digital Agency Lite
 */
?>

    	<div class="my_footer">
    		<a   href="../informativa.html" target="_blank" style="color:#FF6600;">Informativa estesa sull'uso dei cookie</a>
    			-
    		<a   href="../notelegali.html" target="_blank" style="color:#FF6600;">Note legali</a>
    	</div>
	
  
        <?php wp_footer(); ?>

    </body>
</html>

<?php

/**

* The template for displaying the footer.

* Contains the closing of the #content div and all content after

* @package Digital Agency Lite

<a href="../informativa.html" target="_blank" style="color:#FF6600;">Informativa estesa sull'uso dei cookie</a>

<a href="../notelegali.html" target="_blank" style="color:#FF6600;">Note legali</a>

</div>

<?php wp_footer(); ?>

</body>

</html>

.my_footer {
    clear: both;
    height: 30px;
    width: 100%;
    padding-top: 5px;
    position: fixed;
    text-align:center;
    background: #162635;
    font-size:14px;
    bottom: 0;
    left: 0;
    z-index: 999999;
}

.my_footer {

clear: both;

height: 30px;

width: 100%;

padding-top: 5px;

position: fixed;

text-align:center;

background: #162635;

font-size:14px;

bottom: 0;

left: 0;

z-index: 999999;

}