Segnalo un tutorial molto interessante estrapolato da wpdesigner su come realizzare un tema in WP (WordPress), citandone la fonte. Questo post lo evolverò continuamente traducendo dal sito originale e adattando gli step per arrivare alla realizzazione completa. L’architettura di un Tema WP si compone di una serie di elementi racchiusi all’interno di una cartella che conterrà l’intero tema:
- style.css
- index.php
- home.php
- single.php
- page.php
- archive.php
- category.php
- search.php
- 404.php
- comments.php
- comments-popup.php
- author.php
- date.php
Naturalmente il primo file .css è il foglio di stile che dara la grafica al template.
Iniziamo ora con il file index.php:
Doctype – Indica il tipo di doctype.
<html> Inizia la pagina.
<head> Inizio head (intestazioni). </head> Fine head.
<?php bloginfo(stylesheet_url); ?> Questa funzione chiama automticamente il foglio di stile CSS
<?php bloginfo(stylesheet_url); > – chiama lo style.css (foglio di stile)
Questo è il risultato finale (al momento) del file principale index.php
<!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″>
<title>[php] bloginfo(‘name’); [/php][php] wp_title(); [/php]</title>
<meta http-equiv=”Content-Type” content=”[php] bloginfo(‘html_type’); [/php]; charset=[php] bloginfo(‘charset’); [/php]” />
<meta name=”generator” content=”WordPress [php] bloginfo(‘version’); [/php]” /> <!– leave this for stats please –>
<link rel=”stylesheet” href=”[php] bloginfo(‘stylesheet_url’); [/php]” type=”text/css” media=”screen” />
<link rel=”alternate” type=”application/rss+xml” title=”RSS 2.0″ href=”[php] bloginfo(‘rss2_url’); [/php]” />
<link rel=”alternate” type=”text/xml” title=”RSS .92″ href=”[php] bloginfo(‘rss_url’); [/php]” />
<link rel=”alternate” type=”application/atom+xml” title=”Atom 0.3″ href=”[php] bloginfo(‘atom_url’); [/php]” />
<link rel=”pingback” href=”[php] bloginfo(‘pingback_url’); [/php]” />
<body>
</body>
</html>