Come creare un tema XHTML valido per WordPress parte 1

by

Questo piccolo HOW-TO e’ stato realizzato al fine di rendere la vita un po’ piu’ 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 po’ 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 e’ stato reso necessario in maniera tale da liberare tutto da vincoli pre-esistenti da layout precedenti.

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

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

Bisogna sapere:

  1. Il file che determina il caricamento della pagina iniziale e’ index.php
  2. Il sistema di gestione della compilazione del PHP e’ 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 succedera’  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 affinche’ io continui la serie.

1 Comment

Send your comment for the article
  1. Asking questions are truly nice thing if you are not understanding anything totally, except this paragraph offers good understanding even.

    Comment by dgn2200 firmware atheros 1.0.0.46 — 28 October 2016 @ 21:58

Leave a comment