Scacco matto ai temi wordpress in 1456 mosse, istruzioni per l’uso

web developer umbria

Alla fine del post https://umbriawayinfo.wordpress.com/2019/04/14/dare-scacco-matto-ai-temi-wordpress-in-425-mosse-istruzioni-per-luso/ ci eravamo lasciati con la mossa numero quindici, qui riprendiamo la stessa mossa per analizzare il loop, ciclo while che è tutta l’essenza di WP grazie alla sua capacità di far ciclare i dati:

/*

“>

Articolo creato da |

<?php endif; ?>

<p><?php the_excerpt(); ?></p>

<a class=”btn” href=”<?php the_permalink(); ?>”>Leggi tutto…</a>

</article>

<?php endwhile; ?>

<?php else : ?>

<?php echo wpautop(‘ops…non ho trovato articoli!’); ?>

<?php endif; ?>
*/

li abbiamo i post? Usiamo questa funzione: have_posts();
se li abbiamo visualizzami gli articoli uno per uno con la funzione the_post();
se non abbiamo post avvisami che c’è qualcosa di stonato con la funzione wpautop(); Un post ha tutta una serie di informazioni a corredo: chi è l’autore? Quando è stato creato? Di che titolo stiamo parlando? Che icona abbiamo usato per mostrare l’anteprima? Che cosa tagghiamo per i filtraggi sulla ricerca? Quale è il contenuto di un post? Il meccanismo che dobbiamo creare è quello di una pagina che mostra tutte le news dove ciascuna news ha un tiolo cliccabile che riporta sulla singola pagina. Da notare che l’uso di funzioni come the_title() o the_author() sono molto intuitive sull’ uso che se ne fanno, come per esempio la funzione che mostra i contenuti molto intuitiva: the_content() che amdremo a sostituire nella nella versione definitiva con la funzione the_excerpt() che estrapola solo un estratto e non tutto l’articolo che ha una lunghezza variabile. La funzione the_permalink() serve a creare il link. La funzione the_time(‘d F Y’); serve per settare la data di creazione dell’ articolo.

A questo punto siamo pronti per la mossa numero sedici, si includono delle parti nella index in modo da semplificare la gestione. Si dice SPLITTARE!

Quindi la mossa numero sedici sta nel creare il file header.php dove scriverò la parte rispettiva che taglierò dalla index:

/*

<!DOCTYPE html>

<html>

<head>

<meta charset=”<?php bloginfo(‘charset’); ?>”>

<title>
<?php bloginfo(‘name’); ?></title>

<?php wp_head(); ?>

</head>

<body>

<header>

</header>

<nav class=”menu”>

‘primary’
);
?>

</nav>

*/

ovviamente nella index.php in corrispondenza del codice tagliato sopra finito nell’ header dovrò fare una inclusione di pagina con

/*
<?php get_header(); ?>
*/

come prima riga del codice

Mossa numero 17, fare lo stesso processo con il file footer.php da creare tagliando la parte corrispondente dalla index:

/*

<footer>

© –

</footer>

<?php wp_footer(); ?>

*/

web developer UmbriaCi state prendendo gusto con gli smembramenti eh?! Ma la risposta alla domanda mossa numero 18 che è come includo lo stile, quale é? Parliamo dello style.css che va collegato, allora non ci resta che creare il nostro file function, dove andremo ad aggiungere il css dove diventa molto importante l’istruzione add_action:

 

/*
function smart_files(){

wp_enqueue_style(‘google_font’ , ‘//fonts.googleapis.co/css?family=Montserrat:400,700’);

wp_enqueue_style(‘smart_style’ , get_stylesheet_uri(), NULL , microtime());

}

add_action(‘wp_enqueue_scripts’ , ‘smart_files’);

*/

ovviamente il foglio stile dovrà contenere qualcosa al suo interno:

/*
body{

background-color: #ddd;

font-family: Montserrat, sans-serif;

}

h3{
color: #3f51b5;
}

.img-post img{

width: 100%;
height: auto;

}

.menu{

background-color: #203563;

color: #fff;
padding: 5px;

}

.menu li{

list-style: none;

float: left;

padding-right: 20px;

}

.menu a{

color: #fff;

text-decoration: none;

}

.container{

width: 85%;

margin: 0 auto;

overflow: auto;

}

.content{

float: left;

width: 60%;

}

.widget{

float: right;

width: 40%;

}

.clear{

clear: both;

}

.main-sidebar{

border: 1px #203563 solid;

padding: 10px;

margin: 15px 0;

}

.main-sidebar li{

list-style: none;

line-height: 30px;

}

.main-sidebar a{

text-decoration: none;

}

footer{

background-color: #203563;

text-align: center;

color: #fff;

margin-top: 20px;

}
*/

 

Annunci