Come creare un tema XHTML valido per WordPress parte 1

by Tonylog

Logo WordPress

Questo piccolo HOW-TO è stato realizzato al fine di rendere la vita un pò più semplice a chi non vuole usare un template che “potenzialmente” viene usato da centinaia di altri siti o anche solamente a chi ha voglia di sperimentare con il proprio blog WordPress e personalizzarlo con un tema da lui stesso ideato.

I requisiti per la realizzazione dei temi WordPress sono davvero minimi, basta avere una conoscenza minima di HTML e CSS ed un tema qualsiasi da modificare al fine di avere un tema personale per il proprio blog.

Scendiamo nei dettagli:

Passo1

Tutti i temi WordPress hanno all’inizio del file style.css una piccola serie di informazioni che vengono poi visualizzate nella pagina di attivazione del tema, andiamole a vedere:

/*

Theme Name: Nome del Tema

Theme URI: http://sitoincuièusatoiltema.it

Description: Tema realizzato da me

Version: 1.0 BETA

Author: Tuo nome

Author URI: http://sitopersonaleautore.com

*/

Andare a spiegare le singole voci mi sembra un pò superfluo ma vorrei mettere un punto al riguardo la necessita dell’uso del file nominato style.css in quanto se WordPress non lo trovasse il tema risulterebbe danneggiato.

Passo 2

Adesso prendiamo un file header.php standard di WordPress e cancelliamo tutte le caratteristiche che lo riconducono allo stile:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="
<?php bloginfo('html_type'); ?>; 
charset=<?php bloginfo('charset'); ?>" />
<title><?php bloginfo('name'); ?> 
<?php if ( is_single() ) { ?> &raquo; Blog Archive <?php } ?> 
<?php wp_title(); ?></title>
<meta name="generator" content="WordPress 
<?php bloginfo('version'); ?>" /> <!-- leave this for stats -->

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

type="text/css" media="screen" />

<link rel="alternate" type="application/rss+xml"

title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" />

<link rel="alternate" type="text/xml"

title="RSS .92" href="<?php bloginfo('rss_url'); ?>" />

<link rel="alternate" type="application/atom+xml"

title="Atom 0.3" href="<?php bloginfo('atom_url'); ?>" />

<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<?php wp_get_archives('type=monthly&format=link'); ?><?php wp_head(); ?>

</head>

<body>

<div id="page">

<div id="header">

<div id="headerimg">

<h1><a href="<?php echo get_settings('home'); ?>">
<?php bloginfo('name'); ?></a></h1>    <div class="description"><?php bloginfo('description'); ?></div>

</div>

</div>

<hr />

Questo è stato reso necessario in maniera tale da liberare tutto da vincoli pre-esistenti da layout precedenti.

Il tema è già attivabile, quindi si può già fare l’upload della cartella nel percorso dei temi ed attivare la nostra base/tema per WordPress, non guardatelo adesso è orribile ma è solo una base di partenza…..

N.B. Ho inserito il comando <hr /> affinchè si possa distinguere l’header.

Bisogna sapere:

  1. Il file che determina il caricamento della pagina iniziale è index.php
  2. Il sistema di gestione della compilazione del PHP è gestito da funzioni racchiuse tra <?php ….. ?>
  3. Le Funzioni GENERALI che ci permettono di caricare le varie parti della pagina sono:

Conclusione:
In questo articolo abbiamo preso un tema qualsiasi WordPress e lo abbiamo analizzato, abbiamo fatto del terreno fertile su qui andremo a personalizzare, ne abbiamo tratto la parte descrittiva del file style.css e le funzioni che caricano le varie sezioni della pagina.

Cosa succederà nel prossimo articolo?

Nel prossimo articolo andremo ad iniziare la costruzione del nostro tema personale su piattaforma WordPress.

Se hai apprezzato la lettura di questo articolo invia una commento affinchè io continui la serie.

Labels:
Published: 16 June 2007 at 15:13

Send your comment for the article

Leave a comment