Creare il tuo primo Tema WordPress Responsive

By Andrea Marchetti - 9 Mar , 2013

Creare il tuo primo Tema WordPress Responsive
Tema Wordpress Responsive

Dopo aver visto come costruire un sito responsive, andiamo a vedere come trasfomare il codice Html “Statico” in un Tema WordPress “Dinamico”.

Che differenza c’è tra un sito dinamico e uno statico?

I siti dinamici sono ormai lo standard nel web odierno, sono siti che cambiano il loro aspetto e contenuti in maniera dinamica. Questo Blog è un sito dinamico perchè io accedo con una user e password ad un pannello di controllo e pubblico dei contenuti.
Un sito statico è invece un sito che una volta caricato on-line non cambia mai a meno che il web master non faccia delle modifiche “a mano” e ricarichi il codice on-line.

WordPress

WordPress è una piattaforma per pubblicare contenuti on-line, quindi è una piattaforma per realizzare siti dinamici. Negli anni si è evoluta molto e oggi consente di realizzare una vasta tipologia di siti dal Blog al Portale perfino all’Ecommerce.

WordPress è il motore del nostro sito. Noi costruiremo il telaio, le ruote, gli interni e il design della carrozzeria in base alle esigenze del nostro cliente.

Come si sviluppa per WordPress

Per provare a costruire un sito WordPress dobbiamo avere un ambiente di sviluppo consono. Bisogna installare in locale un server virtuale che simuli un server vero sul quale poi “girerà” la piattaforma. Io utilizzo Xampp. Ecco una guida su come installare WordPress in locale con Xampp:

http://www.robertoiacono.it/come-installare-wordpress-in-locale-sul-proprio-computer/

Fatto questo abbiamo la nostra installazione di WordPress in locale. Ora possiamo partire con la realizzazione del nostro tema responsive.

Struttura del nostro tema WordPress

Per realizzare un tema è importante capire come funziona il “motore” di WordPress. L’approccio è il seguente: si divide la pagina in blocchi di codice (Header, index, sidebar, footer, page, single, search). Questi blocchi vengono poi inclusi nelle pagine a seconda di quale stiamo visualizzando. Questa tecnica crea una struttura “Modulare”.

Se siamo nella home, WordPress includerà (Header, index, sidebar e footer), se siamo nella pagina del articolo singolo includerà (Header, single, sidebar e footer). In questo modo usando le inclusioni se si deve modificare un pezzo di codice nell’header la modifica non deve essere ripetuta su tutte le pagine. Basta modificare il file header una volta e questa modifica verrà applicata in tutte le pagine del sito.

Una volta capito questo partiamo con il tema vero e proprio. Tenendo come riferimento l’html dell’articolo come costruire un sito responsive, “monteremo” il codice su WordPress passando da utilizzare solo codice html a utilizzare anche php e nello specifico i Template_Tags di WordPress.

I Template_Tags servono a visualizzare informazioni in maniera dinamica. Per esempio il Template_Tags <?php wp_title(); ?> mostra il titolo della pagina.

Tutti i file del tema vanno inseriti in una cartella che nel nostro caso chiameremo “my-first-theme-responsive” e posizionati nella cartella wp-content/themes, presente nella nostra installazione in locale di WordPress.

Analizziamo i file che compongono il tema

style.css
E’il file nel quale inseriremo lo stile del nostro tema. Prima di qualsiasi regola css, ci deve essere la dicitura che indica a WordPress il nome del tema e tutte le info. Senza questo il tema non viene riconosciuto dal sistema.

/*
Theme Name: My First Theme Responsive
Description:  Tema realizzato in Html5.
Version: 1.0
Author: Andrea Marchetti
Site: http://www.marchettidesign.net
*/
/* Reset.css */
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {margin: 0;padding: 0;border: 0;font-size: 100%;vertical-align: baseline;}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {display: block;}
blockquote, q { quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after { content: ""; content: none; }
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }
html {overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
/*** General ***/
body {color: #666;font: 16px/28px;font-family: 'Open Sans', sans-serif;background: #e2e2e0;}
/* Typography */
a 			{color: #000;text-decoration: none;-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;}
a:hover 	{color: #21aabd;}
a:active	{outline: none;}
p, dl, hr, h1, h2, h3,
ol, ul, dd, pre, table, fieldset {margin-bottom: 20px;}
h1, h2, h3, h4, h5, h6 {text-shadow: 0 1px 0 #fff;}
h1 			{font-size: 32px;}
h2 			{font-size: 28px;}
h3 			{font-size: 26px;letter-spacing: -1px;}
h4 			{font-size: 21px;margin-bottom: 15px;}
h5 			{font-size: 18px;}
h6 			{font-weight: normal;font-size: 16px;}
/* Structure */
#wrapper 		{width: 960px;margin: 0 auto;background:#fff;}
#header 		{width: 920px;float:left;padding: 20px 20px 20px 20px; background:#21aabd;}
#mainmenu		{width: 100%;float:left;background: #888}
#main 			{width: 920px;float:left;padding: 20px 20px 20px 20px;}
#content 		{width: 620px;float:left;}
#sidebar 		{width: 270px;float:right;}
#footer			{width: 920px;float:left;padding: 30px 20px 10px 20px;background:#666;}
/*** Header ***/
#site-title a 			{font-family: oswald; font-weight: 400; font-size:30px; text-transform:uppercase;float: left;color:#fff;}
#site-title a:hover 	{background: none;}
/*** Menu ***/
#mainmenu ul 		{margin: 0px 0 0px 0px;float:left;width:100%; list-style: none;}
#mainmenu ul li 	{float: left;margin: 0 0px 0 0;position: relative;}
#mainmenu a 		{color: #fff; display: block;font: 14px;padding: 14px 20px;font-family: oswald; text-transform:uppercase;}
#mainmenu a:hover {background:#666;}
/* Search */
.search{float: right;margin-top:-15px;}
.top-search{width:160px!important;color:#999;float:right;background:#eee;border:none;padding:10px;}
/* Button Responsive Menu*/
.btn-responsive-menu{display: none;float: right;padding:5px;cursor:pointer;margin:  -15px 20px 0 0;color: #ffffff;text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);background:#333;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;}
.icon-bar 			{display: block;width: 18px;height: 2px;margin:5px;background-color: #f5f5f5;-webkit-border-radius: 1px;-moz-border-radius: 1px;border-radius: 1px;-webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);-moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);}
.show{display:block!important}
/*** Post ***/
.post 					{padding: 0px 0 0px 0;}
/* Post title */
.post .entry-title 	{margin-bottom: 20px;}
.post .entry-title a{display: block;font-size: 38px;line-height:40px;font-weight: bold;letter-spacing: -1px;}
.post .entry-content{line-height:25px;}
.index-thumb		{width:100%;height:auto;margin-bottom:10px;}
hr{border-bottom: 1px solid #ccc;border-top:none;border-left:none;border-right:none;margin:25px 0 20px 0;}
/*** Sidebar ***/
#sidebar {}
/* Lists in widgets */
.widget h3			{}
.widget li 			{line-height: 35px;list-style-type:none}
/*** Footer ***/
#footer 				{color: #fff;}
#footer a 				{font: 14px;}
ol.commentlist { list-style:none; margin:0 0 1em; padding:0; text-indent:0; }
ol.commentlist li { }
ol.commentlist li.alt { }
ol.commentlist li.bypostauthor {}
ol.commentlist li.byuser {}
ol.commentlist li.comment-author-admin {}
ol.commentlist li.comment { border-bottom:1px dotted #999; padding:1em; }
ol.commentlist li.comment div.comment-author {}
ol.commentlist li.comment div.vcard { font-size: 16px; }
ol.commentlist li.comment div.vcard cite.fn { font-style:normal; }
ol.commentlist li.comment div.vcard cite.fn a.url {}
ol.commentlist li.comment div.vcard img.avatar { border:5px solid #ccc; float:right; margin:0 0 1em 1em; }
ol.commentlist li.comment div.vcard img.avatar-32 {}
ol.commentlist li.comment div.vcard img.photo {}
ol.commentlist li.comment div.vcard span.says {}
ol.commentlist li.comment div.commentmetadata {}
ol.commentlist li.comment div.comment-meta { font-size:9px; }
ol.commentlist li.comment div.comment-meta a { color:#ccc; }
ol.commentlist li.comment p { font-size:11px; margin:0 0 1em; }
ol.commentlist li.comment ul { font-size:11px; list-style:square; margin:0 0 1em 2em; }
ol.commentlist li.comment div.reply { font-size:11px; }
ol.commentlist li.comment div.reply a { font-weight:bold; }
ol.commentlist li.comment ul.children { list-style:none; margin:1em 0 0; text-indent:0; }
ol.commentlist li.comment ul.children li {}
ol.commentlist li.comment ul.children li.alt {}
ol.commentlist li.comment ul.children li.bypostauthor {}
ol.commentlist li.comment ul.children li.byuser {}
ol.commentlist li.comment ul.children li.comment {}
ol.commentlist li.comment ul.children li.comment-author-admin {}
ol.commentlist li.comment ul.children li.depth-2 { border-left:1px solid #ccc; margin:0 0 .25em .25em; }
ol.commentlist li.comment ul.children li.depth-3 { border-left:1px solid #999; margin:0 0 .25em .25em; }
ol.commentlist li.comment ul.children li.depth-4 { border-left:1px solid #ccc; margin:0 0 .25em .25em; }
ol.commentlist li.comment ul.children li.depth-5 {}
ol.commentlist li.comment ul.children li.odd {}
ol.commentlist li.even { background:#fff; }
ol.commentlist li.odd { background:#f6f6f6; }
ol.commentlist li.parent { border-left:1px solid #ccc; }
ol.commentlist li.thread-alt { }
ol.commentlist li.thread-even {}
ol.commentlist li.thread-odd {}
/*** Misc ***/
.alignleft  	{margin: 0 20px 20px 0;}
.alignright 	{margin: 0 0 20px 20px;}
.clear 		{clear: both;}
.sep 		{padding: 0 5px;}
.hide 		{display: none;}
.alert {
background-color: #fef9c7;
border-color: #fcdd4a;
color: #3b3601;
border-radius: 0 5px 5px 0;
padding: 10px 14px;margin:0;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}

Lo stile include il css della struttura, il codice è scritto in modo da essere modificato facilmente dal css responsive.css (che vedremo dopo).


header.php
In questo file inseriamo il primo blocco di codice. Spezziamo l’html in modo da rendere la struttura modulare.

<!doctype html>
<!--[if lt IE 7]> <html class="no-js ie6" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js ie7" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js ie8" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8" />
<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title><?php bloginfo('name'); ?><?php wp_title(); ?></title>
<!-- Mobile viewport optimized: j.mp/bplateviewport -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- JavaScript -->
<script src="<?php bloginfo('stylesheet_directory'); ?>/js/modernizr-1.7.min.js"></script>
<script src="<?php bloginfo('stylesheet_directory'); ?>/js/jquery-1.7.1.min.js"></script>
<script>
$(document).ready(function(){   
//When btn is clicked
$(".btn-responsive-menu").click(function() {
$("#mainmenu").toggleClass("show");
});
// When resize
$(window).resize(function () {
if ($(window).width() > 767) {
$("#mainmenu").show();
} else {
$("#mainmenu").hide();
}
});
});
</script>
<!-- Style -->
<link href="<?php bloginfo('stylesheet_directory'); ?>/style.css" rel="stylesheet" />
<link href="<?php bloginfo('stylesheet_directory'); ?>/css/responsive.css" rel="stylesheet" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,400italic,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Oswald:400,300' rel='stylesheet' type='text/css'>
<?php wp_head(); ?> 
</head>
<body>
<div id="wrapper">
<header id="header">
<h1 id="site-title"><a href="<?php echo get_option('home'); ?>"><?php bloginfo('name'); ?></a></h1>
<form class="search" method="get" action="">
<input type="text" class="s top-search" value="Cerca..." name="s" onBlur="if (this.value == '') {this.value = 'Cerca...';}" onFocus="if (this.value == 'Cerca...') {this.value = '';}" />
<input type="submit" value="Search" style="visibility:hidden"/>
</form>
<div class="btn-responsive-menu">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</div>
</header> <!-- #header -->
<div id="mainmenu">
<?php wp_nav_menu(); ?>
</div> <!-- #mainmenu -->
<div id="main">
<!-- Prompt IE 6 and 7 users to install Chrome Frame:		chromium.org/developers/how-tos/chrome-frame-getting-started -->
<!--[if lt IE 8]>
<p class="chromeframe alert alert-warning">Your browser is <em>ancient!</em> <a href="http://browsehappy.com/">Upgrade to a different browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to experience this site.</p>
<![endif]-->

bloginfo('name'); wp_title(); – Inserisce il nome del blog e il titolo se siamo nella pagina singola o nella pagina

bloginfo('description'); – Inserisce la descrizione del blog

bloginfo('stylesheet_directory'); – Viene utilizzato nei percorsi per indicare la directory del tema (usa come riferimento il foglio di stile)

wp_nav_menu(); – Viene visualizzato il custom menu che attiveremo nel file functions.php

wp_head(); – Include nel header file funzionali di wordpress


index.php
Qui inseriamo il loop degli articoli: il loop è il cuore di WordPress. Può essere utilizzato per richiamare qualsiasi contenuto. Nel nostro caso richiamiamo tutti gli articoli.

<?php get_header(); ?>
<div id="content">
<?php if (have_posts()) : ?><?php while(have_posts() ) : the_post() ; ?> 
<article class="post">
<h2 class="entry-title"><a title="<?php the_title(); ?>" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<p>
In <?php the_category(','); ?>
il <time datetime="<?php the_time('j M , Y') ?>" pubdate><?php the_time('j M , Y') ?></time>
</p>
<?php if ( has_post_thumbnail() ) { ?>
<a href="<?php the_permalink(); ?>">
<?php the_post_thumbnail('index-thumb', array('class' => 'index-thumb','title' => ''.get_the_title().'')); ?>
<?php } ?> 
<div class="entry-content">
<?php the_content('Leggi...');?>
</div> <!-- .entry-content -->
</article> <!-- .post  -->
<hr /> 
<?php endwhile; ?>
<?php buby_pagination(); ?>
<?php else : ?>
<article class="post">
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
</article> 
<?php endif; ?> 
</div> <!-- #content -->
<aside id="sidebar">
<?php get_sidebar(); ?>
</aside> <!-- #sidebar -->
<?php get_footer(); ?>	

get_header(); – Include il file header.php

if (have_posts()) : while(have_posts()) : the_post(); – Inzio del loop

the_permalink(); – Link all’articolo singolo

the_category(','); – Visualizza le categorie nel quale è pubblicato il post

the_time('j M , Y') – Mostra la data nel formato giorno, mese ,anno

the_post_thumbnail('index-thumb', array('class' => 'index-thumb','title' => ''.get_the_title().'')); – Mostra l’immagine in evidenza aggiungendo la classe “index-thumb” e impostando il title dell’immagine per la Seo

the_content('Leggi...'); – Mostra il contenuto dell’articolo

endwhile; – Finde del while del loop (Fine dell’elenco degli articoli ma non del loop)

buby_pagination(); – Mostra la paginazione numerica definita nel file function.php

else : – Se nel loop non ci sono post esegue il codice successivo

_e('Sorry, no posts matched your criteria.'); – Mostra il messaggio che non ci sono post

endif; – Fine del loop

get_sidebar(); – Include il file sidebar.php

get_footer(); – Include il file footer.php


sidebar.php
Nella sidebar inseriamo il codice per renderla widget ready, cioè personalizzabile dal pannello di controllo di WordPress tramite la sezione Aspetto –> Widget.

<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>
<?php endif; ?>

if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : – Se c’è attiva la sidebar dinamica


footer.php
Inseriamo il codice presente a fine pagina

</div> <!-- #main -->
<footer id="footer">
<p>Copyright &copy; <?php echo date("o");?>  <a href="<?php echo get_option('home'); ?>/"> <?php bloginfo('name'); ?></a></p>
</footer> <!-- #footer -->
<div class="clear"></div>
</div> <!-- #wrapper -->
<?php wp_footer();?>
</body>
</html>

echo date("o"); – Mostra l’anno corrente

wp_footer(); – Include nel footer file funzionali di wordpress


Nei prossimi tre file l’impostazione della pagiana è quella precedente, al posto di index.php cambia la parte del loop.

page.php
Loop della pagina del sito

<?php get_header(); ?>
<div id="content" role="main">
<?php if (have_posts()) :?><?php while(have_posts()) : the_post(); ?> 
<article class="post">
<h2 class="entry-title"><a title="<?php the_title(); ?>" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<?php if ( has_post_thumbnail() ) { ?>
<a href="<?php the_permalink(); ?>">
<?php the_post_thumbnail('index-thumb', array('class' => 'index-thumb')); ?>
</a>
<?php } ?> 
<div class="entry-content">
<?php the_content('Leggi...');?>
</div> <!-- .entry-content -->
</article> <!-- .post  -->
<hr /> 
<?php endwhile; ?>
<?php else : ?>
<article class="post">
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
</article> 
<?php endif; ?> 
</div> <!-- #content -->
<aside id="sidebar" role="complementary">
<?php get_sidebar(); ?>
</aside> <!-- #sidebar -->
<?php get_footer(); ?>

single.php
Loop del post singolo viene aggiunto il template dei commenti

<?php get_header(); ?>
<div id="content" role="main">
<?php if (have_posts()) :?><?php while(have_posts()) : the_post(); ?> 
<article class="post">
<h2 class="entry-title"><a title="<?php the_title(); ?>" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<p>
In <?php the_category(','); ?>
il <time datetime="<?php the_time('j M , Y') ?>" pubdate><?php the_time('j M , Y') ?></time>
</p>
<?php if ( has_post_thumbnail() ) { ?>
<a href="<?php the_permalink(); ?>">
<?php the_post_thumbnail('index-thumb', array('class' => 'index-thumb')); ?>
</a>
<?php } ?> 
<div class="entry-content">
<?php the_content('Leggi...');?>
</div> <!-- .entry-content -->
<?php edit_post_link(__('Edit This')); ?>
</article> <!-- .post  -->
<hr /> 
<div id="comments" class="post">
<?php comments_template(); ?>
</div> 
<?php endwhile; ?>
<?php else : ?>
<article class="post">
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
</article> 
<?php endif; ?> 
</div> <!-- #content -->
<aside id="sidebar" role="complementary">
<?php get_sidebar(); ?>
</aside> <!-- #sidebar -->
<?php get_footer(); ?>

comments_template(); – Inserisce il template dei commenti di default di WordPress


search.php
E’ un loop simile a quello di index.php ma viene mostrato un messaggio con cosa è stato cercato

<?php get_header(); ?>
<div id="content" role="main">
<h2>Risultati per: "<i><?php echo $s; ?> </i>"</h2>
<?php if (have_posts()) :?><?php while(have_posts()) : the_post(); ?> 
<article class="post">
<h2 class="entry-title"><a title="<?php the_title(); ?>" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<p>
In <?php the_category(','); ?>
il <time datetime="<?php the_time('j M , Y') ?>" pubdate><?php the_time('j M , Y') ?></time>
</p>
<?php if ( has_post_thumbnail() ) { ?>
<a href="<?php the_permalink(); ?>">
<?php the_post_thumbnail('index-thumb', array('class' => 'index-thumb')); ?>
</a>
<?php } ?> 
<div class="entry-content">
<?php the_content('Leggi...');?>
</div> <!-- .entry-content -->
</article> <!-- .post  -->
<hr /> 
<?php endwhile; ?>
<?php buby_pagination(); ?>
<?php else : ?>
<article class="post">
<h4>La ricerca per "<i><?php echo $s; ?> </i>" non ha dato nessun risultato.</h4>  
</article> 
<?php endif; ?> 
</div> <!-- #content -->
<aside id="sidebar" role="complementary">
<?php get_sidebar(); ?>
</aside> <!-- #sidebar -->
<?php get_footer(); ?>

echo $s; – Mostra la chiave di ricerca


404.php
File che viene incluso se non viene trovata una pagina

<?php get_header(); ?>
<div id="content" role="main">
<article class="post">
<h2>Pagina non trovata!</h2>  
</article> <!-- .post  -->
<hr /> 
</div> <!-- #content -->
<aside id="sidebar" role="complementary">
<?php get_sidebar(); ?>
</aside> <!-- #sidebar -->
<?php get_footer(); ?>

function.php

E’ un file dove inseriamo blocchi di codice che servono a gestire o cambiare funzioni native di WordPress senza andare a intaccare il codice “core” della piattaforma. Nel nostro caso lo utilizziamo per attivare il custom menu, per formattare i widget della sidebar, per creare una paginazione con numeri e per attivare l’immagine in evidenza.

<?php /*** Funzione Menu Attiva ***/
if (function_exists('add_theme_support')) {
add_theme_support('menus');
}
?>
<?php /*** Formattazione Widget ***/
if ( function_exists('register_sidebar') )
register_sidebar(array(
'before_widget' => '<aside id="%1$s" class="widget %2$s">',
'after_widget' => '</aside>',
'before_title' => '<h3>',
'after_title' => '</h3>',
));
?>
<?php /*** Paginazione con numeri ***/
function buby_pagination($pages = '', $range = 9)
{
$showitems = ($range * 2)+1;  
global $paged;
if(empty($paged)) $paged = 1;
if($pages == '')
{
global $wp_query;
$pages = $wp_query->max_num_pages;
if(!$pages)
{
$pages = 1;
}
}   
if(1 != $pages)
{
echo "<div class='pagination'>";
if($paged > 2 && $paged > $range+1 && $showitems < $pages) echo "<a href='".get_pagenum_link(1)."'>&laquo;</a>";
if($paged > 1 && $showitems < $pages) echo "<a href='".get_pagenum_link($paged - 1)."'>&lsaquo;</a>";
for ($i=1; $i <= $pages; $i++)
{
if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems ))
{
echo ($paged == $i)? "<span class='current'>".$i."</span>":"<a href='".get_pagenum_link($i)."' class='inactive' >".$i."</a>";
}
}
if ($paged < $pages && $showitems < $pages) echo "<a href='".get_pagenum_link($paged + 1)."'>&rsaquo;</a>";
if ($paged < $pages-1 &&  $paged+$range-1 < $pages && $showitems < $pages) echo "<a href='".get_pagenum_link($pages)."'>&raquo;</a>";
echo "</div>\n";
}
}
?>
<?php /*** Funzione Thumbnail Attiva ***/
add_theme_support('post-thumbnails');
if ( function_exists('add_theme_support') ) {
add_theme_support('post-thumbnails');
}
if ( function_exists( 'add_image_size' ) ) {
add_image_size( 'index-thumb', 600, 999 ); 	//(cropped) 
}
?>

Rendiamo il tutto responsive

Ora nella cartella del nostro tema dobbiamo creare la cartella css e inserire al suo interno il file responsive.css

@media (min-width: 1200px) {
/* Structure > 1200px */
#wrapper 		{width: 1170px;margin: 0 auto;}
#header 		{width: 1130px;float:left;padding: 20px 20px 20px 20px;}
#mainmenu		{width: 100%;float:left;}
#main 			{width: 1130px;float:left;padding: 20px 20px 20px 20px;}
#content 		{width: 670px;float:left;}
#sidebar 		{width: 420px;float:right;}
#footer			{width: 1130px;float:left;padding: 30px 20px 10px 20px;}
#mainmenu		{display:block;}
}
@media (min-width: 768px) and (max-width: 980px) {
/* Structure 768 to 1000 */
#wrapper 		{width: 748px;margin: 0 auto;}
#header 		{width: 708px;float:left;padding: 20px 20px 20px 20px;}
#mainmenu		{width: 100%;float:left;}
#main 			{width: 708px;float:left;padding: 20px 20px 20px 20px;}
#content 		{width: 470px;float:left;}
#sidebar 		{width: 210px;float:right;}
#footer			{width: 708px;float:left;padding: 30px 20px 10px 20px;}
#mainmenu		{display:block;}
}
@media (max-width: 767px) {
/* Structure  < 767 */
body{padding:10px;background:#fff;}
#wrapper 		{width:100%;margin: 0 auto;}
#header 		{width:100%;padding: 20px 0 20px 0px;}
#mainmenu		{width:100%;float:left;}
#main 			{width:100%;float:left;padding: 20px 0 0 0;}
#content 		{width:100%;float:left;}
#sidebar 		{width:100%;float:right;padding: 20px 0 0 0px;}
#footer			{width:100%;float:left;padding: 20px 0 0 0px;}
/* Header */
.search{display:none;}
.btn-responsive-menu{display:block;}
#mainmenu			{display:none;}
#mainmenu ul li 	{float: none;}	
/* Sidebar */
.widget{width:48%;float:left;}
.widget:first-child{margin-right:4%;!important}
#site-title a {font-size:25px;margin-left:10px;}
#footer p     {margin-left:10px;}
}
@media (max-width: 480px) {
}

Come ultima cosa ricordiamoci di includere jquery e modernizer posizionadoli nella cartella js appositamente creata all’interno del nostro tema.

Ecco il risulato finale (responsive):

E la pagina singola con i commenti annidati:

Con questo articolo si è voluto analizzare il procedimento di creazione di un tema. Il tema può essere ampliato e modificato facilmente. È una buona base di partenza per i nostri progetti responsive dinamici. I file sono disponibili per il download qui di seguito.

Saty Tuned!

demo

Se ti và ringraziami con un Like a MarchettiDesign.net.

Oppure offrimi un caffè :-)
download

Commenti Facebook

21 Commenti

  1. Lorenzo ha detto:

    Ciao Andrea!

    Tutorial fantastico ti faccio i miei complimenti!
    Ora però ho un problema con questo metodo, (Premetto che non sono un eperto) io con il mio editor (Microsoft Expression Web 4) ho creato il mio sito e precedentemente potevo editarlo in maniera visuale per elaborare i contenuti.
    Ora che devo “spezzettare” la mia pagina web una volta creato i file .php non posso più editarli come facevo prima.
    L’unico modo per mostrarli in azione è scrivere codice “alla ceca” e dopo fare un refresh sulla pagina web con aperto wordpress collegato in XAMPP, ma, così facendo la probabilità di fare errori è molto alta e il lavoro con i css è impossibile.
    Con tutto questo codice mi si fonde il cervello :p

    • Andrea Marchetti ha detto:

      Ciao Lorenzo, grazie!
      Bisogna sporcarsi le mani con il codice 🙂 Ti consiglio di scaricare un editor come Aptana o Notepad++, poi copia e incolla i vari blocchi di codice controllando se tutto funziona.
      Se hai dei bug nel tema, scaricati Firebug e controlla con questo il codice che WordPress renderizza nel Borwser.

    • giorgio ha detto:

      ciao e complimenti ancora per i tuoi tutorial. Io sono alla mia prima esperienza nella realizzazione di un tema wp, e questo include due tipi di pagine. la home page, con sidebar a destra e spazio per i contenuti a sinistra e la pagina per iscriversi dove il forma per l’iscrizione sta in mezzo alla pagina, che quindi non è suddivisa in main e sidebar. come devo fare in questo caso? grazie mille 🙂

  2. Roberto Iacono ha detto:

    Clap Clap Clap!!!

    Complimenti Andrea per il tutorial, fatto davvero molto bene! Merita tantissimo!
    Ti ringrazio per la segnalazione 🙂

    Buon smanettamento a tutti!

  3. Marco ha detto:

    Ciao andrea complimenti per il tutorial! Sto usando questo tema e dopo vari tentativi non riesco a fare un menu a tendina drop down.
    Esiste un modo particolare?? o il tema non lo supporta ?
    Grazie

  4. marco ha detto:

    mi potresti rispondere perfavore che sono bloccato mi servirebbe di sapere come fare su questo tema wordpress un menù drop down a tendina. che normalmente farei dalla gestione menu ma non si può fare.

    grazie ancora marco

    • Andrea Marchetti ha detto:

      Ciao Marco, prova a inserire questo codice nella queries per smarthphone:

      .btn-responsive-menu{display:block;}
      #mainmenu {display: none;}
      #mainmenu ul ul{width:100%;}
      #mainmenu ul li {display: block; width:100%;position: relative;margin:0;}
      #mainmenu ul li a{border:none;}

      Per menu complessi su mobile è meglio utilizzare bootstrap..

  5. giorgio ha detto:

    ciao mi sono successi due problemi. ieri ho aperto il mio sito che avevo quasi completato e in pratica non riconosce più nessuna modifica che ho fatto. Il menu si apre con un bottone sulla destra e non é più dropdown ma una lista di pagine che prende tutta la larghezza. da function.php ho messo 4 sidebar diverse ma non me le riconosce più e riconosce soltanto il form contatti che ho messo come plugin. per ora sto ricominciando rimodificando il tema perché non ho idea di cosa sia il problema… un altra cosa. Come faccio a togliere completamente il wrapper? riesco a mettere header e footer tutta pagina ma il mainmenu mi rimane uguale. mi dice che il tag html é legato a una regola js ma non so come modificarla. ti ringrazio infinitamente

    • giorgio ha detto:

      ho levato il css responsive, penso derivi quindi da quello. Esiste qualche risorsa più approfondita su come mettere mano a un tema responsive. in pratica voglio farlo a tutto schermo.

  6. giuliano ha detto:

    non funziona la thumbnail nella index le misure che hai inserito in function non le tiene 600×900
    quando inserisco una immagine nel post trovo le impostazioni di default

  7. Giuseppe ha detto:

    Ciao, ho seguito la guida per creare un tema che supporti pienamente wordpress, ma ho riscontrato un problema di cui prima non mi ero accorto, come faccio ad evitare che tutti i post vengano visualizzati nella home? Vorrei che in automatico si creassero le pagine, o un pulsante per caricare gli articoli più vecchi..

    • Andrea Marchetti ha detto:

      Ciao Giuseppe,
      ti consiglio di guardarti prima la struttura di un tema wordpress e https://codex.wordpress.org/Template_Hierarchy poi di provare a realizzare un template pagina personalizzato con le tue esigenze..

      • Giuseppe ha detto:

        Grazie, ho visto che il tema qui proposto è già compatibile con la struttura a pagine, basta diminuire il limite di articoli da visualizzare in ogni pagina dalle impostazioni di wordpress (Impostazioni->Lettura) e successivamente, grazie alla funzione “buby_pagination” verranno visualizzate le pagine, ma il risultato era un po’ incompleto, perchè visualizza il numero delle pagine, ma non il pulsante “successivo”, “precedente”, ecc.. Quindi ho preferito utilizzare un’altra funzione, se può interessarti, questo è il codice:

        str_replace( $big, ‘%#%’, esc_url( get_pagenum_link( $big ) ) ),
        ‘format’ => ‘?paged=%#%’,
        ‘current’ => max( 1, get_query_var(‘paged’) ),
        ‘total’ => $wp_query->max_num_pages
        ) );
        }
        endif;
        ?>

        • Giuseppe ha detto:

          /*
          if ( ! function_exists( ‘my_pagination’ ) ) :
          function my_pagination() {
          global $wp_query;

          $big = 999999999; // need an unlikely integer
          print(“”);
          echo paginate_links( array(
          ‘base’ => str_replace( $big, ‘%#%’, esc_url( get_pagenum_link( $big ) ) ),
          ‘format’ => ‘?paged=%#%’,
          ‘current’ => max( 1, get_query_var(‘paged’) ),
          ‘total’ => $wp_query->max_num_pages
          ) );

          print(“”);
          }
          endif;
          */

  8. Luca ha detto:

    Ciao Andrea!
    Grazie e complimenti per il tutorial..

    ti segnalo un piccolo errata corrige. Il file va nominato functionS.php anzichè function.php

  9. Matteo ha detto:

    functions.php, non function.php 😉

  10. Michela ha detto:

    Ciao Andrea, innanzitutto grazie per aver condiviso con noi questo tutorial. Uso da diverso tempo WP ma ora voglio imparare a sporcarmi veramente le mani con la creazione di temi. Mi chiedevo una cosa.. i plugin vengono integrati automaticamente nel mio tema? Avrei la necessità di utilizzare un plugin che automaticamente cambi il background del mio sito.. questo plugin si chiama “Random Background” e nonostante funzioni sugli altri temi default di WP, sul mio sembra non ci sia verso di farlo funzionare! Non capisco se può essere un problema di integrazione del plugin nel mio nuovo tema oppure se sono io che non riesco a rendere il background del mio tema trasparente al fine di poter vedere quello impostato dal plugin..

  11. Remigio ha detto:

    Ciao, inanzitutti grazie per il tutorial chiarissimo e semplicissimo.
    Sto usando gli esempi qui forniti per costruire un mio tema non responsive su WP 4.2.2.
    Riscontro un problema per quanto riguarda il caricamento delle immagini in grid-mode. Suppongo che sia un problema risolvibile da qualche parte in functions.php ma non so minimamente dove mettere mano.

    Il problema si presenta così:
    Una volta caricata un’immagine in “mode=list” riesco a vederle tutte, cancellarle modificarle insomma fin qui tutto ok. Se apro la library in “mode=grid” (unica opzione possibile per includere un’immagine in una pagina) non mi visualizza piu niente come se cercasse di caricare la library all’infinito. Qualche hint da darmi??

  12. Alessio ha detto:

    ciao andrea innanzitutto complimenti per i tuoi tutorial sono fatti benissimo , io ti seguo già da un pò e sto seguendo con piacere i tuoi ultimi video su come creare un tema wordpress da zero in quanto sto cercando di crearne uno per me, aspettando il 5° video stavo provando ad implementare il menu da solo ma sto incontrando difficolta poichè nl menu del pannello di controllo sotto la voce “aspetto” non compare la voce “menu” sono andato a vedere nel codex come fare ma proprio non riesco.Da quanto ho capito bisogna aggiungere del codice al file function.php come questo:

    ma la voce “menu “non compare da cosa puo dipendere?
    grazie per la risposta

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *