Creazione temi wordpress: ecco come creare un template

Creazione temi wordpress come fare? Nella guida di oggi vi spiegheremo passo per passo come creare un template perfetto nel vero senso della parola. Pronti a scoprire come fare passo per passo? Buona lettura cari lettori.

Creazione temi wordpress: il tutorial completo, ecco come creare un template

Per chi eventualmente fino ad oggi non lo sapeva, WordPress ad oggi è senz’altro uno degli CMS più utilizzati in tutto il mondo. Tantissime le persone che ad oggi utilizzando WordPress con risultati soddisfacenti. Detto questo, per quanto riguarda la creazione di un tema è difficile? La risposta è no. Pensate un po’ che molti utenti ne creano tantissimi per poi rivenderli e guadagnarci.

Tantissime aziende, infatti, sono propense il più delle volte per risparmiare soldi e tempo ad acquistare direttamente tempi già pronti sviluppati in WordPress. La piattaforma in questione è open source, tradotto vuol dire che la community ad essa collegata è folta e molto attiva. Davvero tanti i plugin disponibili che rendono personalizzabile al 100% ciò che si vuole.

Rispetto a qualche anno fa, ai tempi d’oggi con WordPress si può fare veramente di tutto. Creare un tema, far funzionare un sistema di prenotazioni per alberghi fino ad arrivare alle cose più facili. Insomma, c’è veramente l’imbarazzo della scelta questo è poco ma sicuro.

Tema WordPress: come è impostata la struttura

WordPress, per chi non lo sapesse, va di suo a richiamare le diverse librerie e il tema impostato dall’utente, attraverso il file index.php e style.php per caricare e successivamente mostrare il fronte-end del proprio blog.

Ovviamente cominciamo dalle cose molto più facili ma che al tempo stesso vi servono a capire la struttura e organizzazione generale di WordPress. Se avete creato una sottocartella nella directory chiamata wp-content/themes dentro la vostra cartella di Worpdress, potreste utilizzare un nome di vostro gradimento, come magari chetemabello. C’è da considerare però che il nome di tale cartella di cui vi stiamo parlando deve poi essere identico a quello del template di WordPress che si realizza.

Prima di tutto serve capire che layout si vuole del proprio blog. Avrete un’intestazione, chiamata con il nome Header, una barra di lato sliderbar, area contenuti conosciuta come Main Area e un piè di pagina noto come Footer.

Una volta che siete sicuri e avete definito nel miglior modo il layout si devono solamente creare dei file nella directory chetemabello, cosi come riportato a seguire:

  • header.php – Non altro che il nome del file dove all’interno è presente il codice per la parte dell’intestazione del tema
  • index.php: File essenziale che indica dove sono gli altri file
  • sidebar.php: Il file che all’interno riporta il codice della barra laterale
  • footer.php: File che si occupa di gestire il footer
  • style.css – File che specifica l’estetica del tema

E’ anche possibile per rendere le cose molto più facili scrivere i file sul proprio computer facendo affidamento ad un buon editor di testo come può essere notepad++.

Ora andiamo a scansionare nel dettaglio ogni file cosi da vedere cosa non deve mancare al suo interno. Prima di tutto, cosa fondamentale, è la dichiarazione doctype. Qual’è la sua funzione? La risposta è molto semplice, di dare info al browser su come il codice xhtml dev’essere interpretato. Niente di particolarmente complesso.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>

File numero uno: header.php

Agendo tramite questo file servirà aggiungere il seguente codice che ora riporteremo qui sotto.

 <html>
 <head>
    <title>Tema WordPress</title>
     <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">
  </head>
  <body>
     <div id="wrapper">
     <div id="header">
     <h1>HEADER</h1>
  </div>

Prima di continuare ovviamente è doveroso dare qualche info in più sopratutto per far capire tutto ai meno esperti del settore: ci troviamo davanti ad un codice html dove si trova una sola riga per il codice PHP e una funzione di genere standard di WordPress. E’ possibile dare la specifica del meta tag impostando il titolo del vostro sito Internet, la parola chiave o l’eventuale descrizione generale.

La riga che trovate qui sotto:

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" 

Va ad indicare a WordPress di procedere al caricamento del file chiamato stlye.css. Non altro che il design del sito. Dunque la parte in questione non fa altro che caricare il file dello stile, la grafica.

File numero due: index.php

<?php get_header(); ?>
<div id="main">
<div id="content">
<h1>Main Area</h1>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<h1><?php the_title(); ?></h1>
<h4>Posted on <?php the_time('F jS, Y') ?></h4>
<p><?php the_content(__('(more...)')); ?></p>
<hr> <?php endwhile; else: ?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p><?php endif; ?>
</div>
<?php get_sidebar(); ?>
</div>
<div id="delimiter">
</div>
<?php get_footer(); ?>

Il codice php numero uno va ad includere il file che prende il nome di header.php. Le righe che seguono sono invece codici php e funzionalità base di WordPress e si prende la briga di vedere se sul blog sono presenti contenuti.

A seguire arriviamo al file sidebar.php dove si vedono le categorie degli articoli. Il div invece divide le aree dal footer. Si termina dunque con il php del footer.

File numero tre: sidebar.php

In questo tipo di file è necessario aggiungere correttamente il seguente codice riportato qui sotto:

<div id="sidebar">
<h2><?php _e('Categories'); ?></h2>
<ul>
   <?php wp_list_cats('sort_column=name&optioncount=1&hierarchical=0'); ?>
</ul>
<h2 ><?php _e('Archives'); ?></h2>
<ul>
   <?php wp_get_archives('type=monthly'); ?>
</ul>
</div>

File numero quattro:  footer.php

Virando la vostra attenzione al file footer.php aggiungete le linee qui sotto:

<div id="footer">
<h1>FOOTER</h1>
</div>
</div>
</body>
</html>

Se tutto è andato per il verso giusto avete aggiunto l’etichetta footer.

File numero cinque: style.css

Arrivati a questo punto è tassativo dover aggiungere anche un paio di righe al file chiamato style.css. Eccole:

body { text-align: center; }
#wrapper { display: block; border: 1px #a2a2a2 solid; width:90%; margin:0px auto; }
#header { border: 2px #a2a2a2 solid; }
#content { width: 75%; border: 2px #a2a2a2 solid; float: left; }
#sidebar { width: 23%; border: 2px #a2a2a2 solid; float: right; }
#delimiter { clear: both; }
#footer { border: 2px #a2a2a2 solid; }
.title { font-size: 11pt; font-family: verdana; font-weight: bold; }

Il file CSS cosi imposterà gli aspetti standard del vostro tema.

Tutta questa procedura darà finalmente una struttura vera e propria al vostro sito Internet. D’ora in poi, infatti, potrete inserire ciò che più desiderate ogni genere dci contenuto per arrivare ad avere l’aspetto che più vi piace.

Conclusioni

Logicamente prima di fare un tema WordPress bisogna disporre di un domino e hosting. In circolazione ci sono una miriade di ottimi servizi ma uno dei migliori è sicuramente Sercurityhost.it che offre pacchetti super con massima sicurezza. Anche i prezzi sono vantaggiosi rispetto alla concorrenza. Perché non provare? Siamo sicuri che non vi pentirete della scelta fatta.

Posso Aiutarti?