Oggi vi presento Arras, un bel tema wordpress completamente gratuito ma dall’aspetto altamente professionale. Vediamo subito come si presenta alla vista del visitatore con questa bella anteprima.

FUNZIONALITA’ PRINCIPALI DEL TEMA ASSAS

Le caratteristiche principali le ho inserite direttamente nella Demo ma le riassumo brevemente qui:

• Pannello admin personalizzato dal quale è possibile gestire il logo del sito, l’immagine da usare come favicon, la categoria da visualizzare nella meravigliosa slideshow in home page, eventuale collegamento a Twitter e gli spazi pubblicitari opzionali;
• Il design complessivo del tema Assas è pulito ed altamente professionale e ciò lo rende perfetto per siti web rivolti a clienti business;
• Testato e perfettamente funzionamente con tutti i maggiori browser in circolazione;
• Codice XHTML validato e fogli di stile CSS3 per sfruttare al massimo le potenzialità SEO con i migliori motori di ricerca.

Ecco un’anteprima del Pannello di Configurazione

CONFIGURAZIONE ED UTILIZZO DEL TEMA ASSAS

Il tema Assas, nonostante presenti il pannello di configurazione personalizzato, necessita di alcune modifiche da effettuare direttamente nel codice di qualche pagina. La prima da modificare é la index.php dalla quale è possibile gestire i box presenti nella home page. L’operazione è abbastanza semplice. Aprite il file index.php con qualsiasi editor di testo e modificate ciò che trovate dalla riga 6 alla riga dino al tag “</center>” con quanto segue:

MODIFICARE I CONTENUTI DEI BOX NELLA HOMEPAGE

<div>
<img style="margin-right: 15px; float: left; margin-top: 8px;" src="http://img443.imageshack.us/img443/30/dashboard.png" alt="" />
<h3 style="clear: none; margin: 0px; margin-bottom: 20px; position: relative; display: inline;">TITOLO PRIMO BOX</h3>
<p>testo con riassunto primo box</p>
<a href="#AGGIUNGI LINK PUNTAMENTO">Leggi tutto <span>&rArr;</span></a>
</div>
<div>
<img style="margin-right: 15px; float: left; margin-top: 8px;" src="http://img805.imageshack.us/img805/4286/honey.png" alt="" />
<h3 style="clear: none; margin: 0px; margin-bottom: 20px; position: relative; display: inline;">TITOLO SECONDO BOX</h3>
<p>testo con riassunto secondo box</p>
<a href="#AGGIUNGI LINK PUNTAMENTO">Leggi tutto <span>&rArr;</span></a>
</div>
<div>
<img style="margin-right: 15px; float: left; margin-top: 8px;" src="http://img576.imageshack.us/img576/2048/browsers.png" alt="" />
<h3 style="clear: none; margin: 0px; margin-bottom: 20px; position: relative; display: inline;">TITOLO TERZO BOX</h3>
<p>testo con riassunto terzo box</p>
<a href="#AGGIUNGI LINK PUNTAMENTO">Leggi tutto <span>&rArr;</span></a>
</div>
<div>
<img style="margin-right: 15px; float: left; margin-top: 8px;" src="http://img706.imageshack.us/img706/8406/blockst.png" alt="" />
<h3 style="clear: none; margin: 0px; margin-bottom: 10px; position: relative; display: inline;">TITOLO DEL QUARTO BOX</h3>
<p>testo con riassunto del quarto box</p>
<a href="#">Leggi tutto <span>&rArr;</span></a>
</div>
</div>
<center>
<a href=""><img style="margin-top: 30px;" src="<?php bloginfo('template_directory'); ?>/images/working.png" alt="working" /></a>
</center>

Modificando inoltre il percorso che si trova nella riga 27 qui sopra si può inserire un’immagine a proprio piacimento al posto di quella di default.

MODIFICA DEL FOOTER PER VISUALIZZARE CORRETTAMENTE I WIDGETS DINAMICI

Durante l’installazione del tema Assas ho riscontrato alcuni problemi inerenti il corretto funzionamento dei widgets. Visto che c’ero ho sfruttato questo bel tutorial ed ho reso il suo footer completamente dinamico. Così facendo non bisognerà modificare a mano il codice per sostituirne il testo predefinito ed inoltre si potranno inserire tutti i widget che vogliamo in modo del tutto automatizzato. Modifica da apportare al file functions.php intorno alla riga 19

if ( function_exists('register_sidebar') ) {
 register_sidebar(array(
 'name' => 'Sidebar',
 'before_widget' => '<div>',
 'after_widget' => '</div>',
 'before_title' => '<h3>',
 'after_title' => '</h3>',
 ));
 register_sidebar(array(
 'name' => 'Footer1',
 'before_widget' => '<div>',
 'after_widget' => '</div>',
 'before_title' => '<h3>',
 'after_title' => '</h3>',
 ));
 register_sidebar(array(
 'name' => 'Footer2',
 'before_widget' => '<div>',
 'after_widget' => '</div>',
 'before_title' => '<h3>',
 'after_title' => '</h3>',
 ));
 register_sidebar(array(
 'name' => 'Footer3',
 'before_widget' => '<div>',
 'after_widget' => '</div>',
 'before_title' => '<h3>',
 'after_title' => '</h3>',
 ));
}

Modifica da apportare al file footer.php

<div id="bottom">
 <div id="bottom-glow">
 <div>
 <div>
 <div>
 <?php
 /* Widgetized sidebar */
 if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Footer1') ) : ?>
 <?php endif; ?>
 </div><!-- end .col1 -->
 <div>
 <?php
 /* Widgetized sidebar */
 if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Footer2') ) : ?>
 <?php endif; ?>
 </div><!-- end .co2l -->
 <div>
 <?php
 /* Widgetized sidebar */
 if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Footer3') ) : ?>
 <?php endif; ?>
 </div><!-- end .col3 -->
 </div><!-- end #column -->
 <div></div><!-- clear float -->
 </div><!-- end .centercolumn -->
 </div><!-- end #bottom-glow -->
</div><!-- end #bottom -->

Tutto qui. Per completare le cose modificate il file style.css alla riga 624 aggiungendo un ” padding-righ: 30px; ” ed il gioco è fatto. Spero apprezziate la Mod effettuata e qualsiasi domanda o dubbio postatela con i commenti.

Demo

Download Assas Template (682)