Oggi, voglio mostravi quanto sia semplice, per non dire elementare, creare il primo template WordPress.
Questa guida non vuole essere una guida dettagliata di come creare un template WordPress, ma vuole solamente mostrare i passi essenziali.
In rete ci sono innumerevoli tutorial più completi ai quali vi rimando per avere informazioni ed esempi aggiuntivi. Una ricerca su Google vi permetterà di trovare i link necessari.
A destra potete vedere – click per ingrandire – uno screenshot dellla home page del template.
Il primo template WordPress – codice Html
Il codice Html per creare una pagina a due colonne, compreso di foglio di stile(css), lo potete scaricare da questo link
File essenziali per un template WordPress
Vi sembrerà strano, ma per ottenere un template funzionante abbiamo bisogno solamente di due files.
Iniziamo a creare una cartella dentro a: /wp-content/themes dal nome “primo_template” – la cartella puo’ essere rinominata -.
Copiamo i files che abbiamo scaricato. Una cartella e due files:
- images(cartella)
- index.php
- style.css
Il primo template WordPress – modifichiamo il codice
Apriamo il file style.css in un editor, ed aggiungiamo all’inizio queste righe:
/* Theme name: Il mio primo tema WordPress Theme url: http://zanclus-claudio:8888 Description: Tema sviluppato per il Corso di WordPress Version: 1.0 Author: <a href="http://zanclus-claudio:8888" title="Il mio primo tema WordPress">Rebonato Claudio</a> Author url: http://zanclus-claudio:8888 Tags: 2 colonne, minimal */
Apriamo il file index.php in un editor.
Sostituiamo la riga numero 4
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
con
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
La riga numero 5
<title>Il mio primo template in WordPress</title>
con
<title><?php bloginfo('name'); ?></title>
La riga numero 6
<link rel="stylesheet" type="text/css" media="all" href="style.css" />
con
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
Ora inseriamo una nuova riga dopo la numero 6
<?php wp_head(); ?>
Il tag <img> alla riga numero 20
<img src="images/Fotolia_56411304.jpg" alt="immagine " width="250" height="167" class="stile_img_01"/>
con
<img src="<?php bloginfo('template_directory'); ?>/images/Fotolia_56411304.jpg" alt="immagine " width="250" height="167" class="stile_img_01"/>
Il tag <img> alla riga numero 30
<img class="imgLarghezzaMax" src="images/Fotolia_56411304.jpg" alt="immagine 2" />
con
<img class="imgLarghezzaMax" src="<?php bloginfo('template_directory'); ?>/images/Fotolia_56411304.jpg" alt="immagine 2"/>
Ora colleghiamoci all’amministrazione del nostro WordPress, portiamoci ad Aspetto >Temi e attiviamo il nostro tema.
Se proviamo a fare l’anteprima del sito vediamo il nostro primo template WordPress attivato.
I files finali sono disponibili per il download da questo link
Hai bisogno di realizzare a Verona o in un’altra parte d’Italia un template WordPress? CONTATTAMI
[…] come scorporare dall’unica pagina creata nel precedente articolo→, l’header ed il footer, per permettere una corretta gestione dei contenuti in […]