WordPress Creare Un Sito Hot Responsive

Creare il tuo primo Tema WordPress Responsive

By Andrea Marchetti
@marchetti_design

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!

Creare Un Sito, Hot, Responsive

Potrebbero interessarti:

Creare un E-Commerce con WordPress e WooCommerce

FULLBY: Free Responsive Grid WordPress Theme

Creare un Area Riservata con WordPress senza Plug-in

Integrare uno Slider con WordPress