construisez votre thème wordpress

mardi 2 février 2010 | programmation, tutorials


Ambiance chic et classe façon altaya ou del prado !
Cette semaine le n°1, ses fichiers php, son png et sa feuille de style, pour moins de 2 euros comme chez carglass !

L’objectif de ce tutorial est de faire un thème portfolio imitant la simplicité et l’ergonomie des indexhibit afin de comprendre les bases de la création de thème pour WordPress.
Petite précision : je ne connais pas l’interface d’administration d’indexhibit et j’ai aucun avis sur celle-ci :¬) mais j’aime beaucoup de le travail de Daniel Eatock.

Je vais supposer que l’administration de wordpress n’est plus un mystère (c’est en français et assez ergonomique ?).
Prérequis, wordpress propose d’écrire des pages ou des articles, les articles sont affichés de manière antéchronologique (bizarrement comme un blog) et les pages de manière statique. Ici je détourne un peu l’usage de wordpress mais il s’agit d’un exercice pour simplifier cette première approche, notre thème n’affichera que des pages, sachant qu’on pourra toujours afficher des articles avec quelques modifications supplémentaires.

1re étape Ajouter quelques pages : en principe une page existe déjà sous le nom de « à propos », ci-dessous j’ai quatre pages, idéalement avec une image et un petit texte (lorem ipsum) pour ne pas travailler à l’aveuglette.

ajouter pages

2e étape spécifiquement pour ce thème, il faut mettre une page statique en accueil :
Dans Réglages > Lecture (cliquer sur l’image pour zoomer).

Les choses sérieuses commencent :-)
Si vous aimiez ou aimez jouer au Lego© et bien ça n’a rien à voir ! enfin si un peu. Un thème est composé de multiples fichiers, des morceaux de php, une ou plusieurs feuilles de styles, des images et pour être propre un screenshot.png…
selon votre machine les fichiers seront à mettre dans un dossier plus ou moins comme ceci
mac : file:///Applications/MAMP/htdocs/wordpress/wp-content/themes/–le nom de votre thème –/
pc : c:/wamp/www/wordpress/wp-content/themes/–le nom de votre thème –/
ftp : www/wordpress/wp-content/themes/–le nom de votre thème –/

obligatoire : index.php, style.css
obligatoire pour notre exemple : head.php, page.php
Curieusement index.php peut-être vide (ici comme l’accueil est sur une page, notre index.php sera vide) mais son absence empêcherait la validité du thème !
Toutes les informations sur notre thème seront dans l’entête de la feuille de style.

Voici un début pour style.css, j’y ajoute tout de suite un RESET (8 lignes qui améliorent les styles par défaut de nos navigateurs), je n’ai rien inventé le reset css vient d’ici et l’entête est une modification/adaptation de celui par défaut.

/*
Theme Name: PageOnly Alpha Turbo
Theme URI: http://wordpress.org/
Description: Un thème à la indexhibit
Version: II
Author: Ben Jaiunblog
Author URI:https://jaiunblog.com
Tags: 

PageOnly Alpha Turbo II

*/


/* Begin  */
/*  RESET   */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0}
table{border-collapse:collapse;border-spacing:0}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:400}
ol,ul{list-style:none}
caption,th{text-align:left}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:400}
q:before,q:after{content:''}
fieldset,img,abbr,acronym{border:0}
/* la suite */
/* bientôt */

en image :

La tête dans… la page ? le header.php
Nos pages vont s’afficher grâce au fichier page.php, c’est une moulinette de wordpress qui pour simplifier dit que si on affiche une page statique, celle-ci se construit selon page.php. Page.php commence par une fonction php get_header(); qui va chercher et afficher header.php, on a donc un morceau de tête qui s’intercale…
On pourrait faire un collage rapide copier/coller de tout le header.php dans page.php mais l’intérêt ici est de pouvoir récupérer l’header dans d’autres pages comme dans l’index.php (pour bien comprendre, il faudrait regarder le thème par défaut de wordpress car ici notre thème n’exploite pas cette avantage).
header.php

<?php 
	/** 
 	* @package PageOnly 
	*/ 
?> 
<!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" <?php language_attributes(); ?>>
<head profile="http://gmpg.org/xfn/11">
	<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
	<title><?php wp_title('&laquo;', true, 'right'); ?> <?php bloginfo('name'); ?></title>
	<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
	<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
	<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
	<div id="page">
	    <div id="col">
			<div id="header">
			<h1><a href="<?php bloginfo('home'); ?>"><?php bloginfo('name'); ?></a></h1>
			</div><!--fin de div header-->
<ul><?php wp_list_pages('title_li=<h2>Pages</h2>'); ?></ul>
		</div><!--fin de la div col-->

page.php

<?php
/**
 * @package WordPress
 */
get_header(); //ceci charge le fichier header.php 
?>

	<div id="content">
		<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
		<div class="post" id="post-<?php the_ID(); ?>">
		<h2><?php the_title(); ?></h2>
			<div class="entry">
				<?php the_content('<p>Read the rest of this page &raquo;</p>'); ?>
				<?php wp_link_pages(array('before' => '<p><strong>Pages:</strong> ', 'after' => '</p>', 'next_or_number' => 'number')); ?>
			</div>
		</div>
		<?php endwhile; endif; ?>
	<?php edit_post_link('Edit this entry.', '<p>', '</p>'); ?>
	</div><!--fin de content-->
</div><!--fin de page-->
</body>
</html>

Dans header.php une ligne php nous intéresse particulièrement :

<ul><?php wp_list_pages('title_li=<h2>Pages</h2>'); ?></ul>

Le php va produire du html en communicant avec la base de données, ici il va faire une liste des pages que l’on a ajouté dans wordpress avec les liens.

en version simplifiée

<ul>
<li><a href="page01">page 01</a></li>
<li><a href="page02">page 02</a></li>
</ul>

en version moulinette WordPress avec les options classiques (voir la documentation de wp_list_pages)

<ul>
<li class="pagenav">
<h2>Pages</h2>
<ul>
<li class="page_item page-item-24"><a href="http://localhost/wordpress/01/" title="01">01</a></li>
<li class="page_item page-item-25"><a href="http://localhost/wordpress/02/" title="02">02</a></li>
<li class="page_item page-item-26"><a href="http://localhost/wordpress/03/" title="03">03</a></li>
<li class="page_item page-item-27"><a href="http://localhost/wordpress/04/" title="04">04</a></li>
</ul>
</li>
</ul>

Pour le reste dans page.php, en simplifiant, ça affiche le titre, le contenu de notre page et un bouton « éditer » si la personne qui visite le site est autorisée à modifier la page.

...
<h2><?php the_title(); ?></h2>
...
<?php the_content('<p>Read the rest of this page &raquo;</p>'); ?>
...
<?php edit_post_link('Edit this entry.', '<p>', '</p>'); ?>

Voici le code en html produit par tout ce php :

<body class="page page-id-24 logged-in">
	<div id="page">
	    <div id="col">
			<div id="header">
			<h1><a href="http://localhost:8888/wordpress">*****</a></h1>
			</div><!--fin de header-->
			<ul><li class="pagenav"><h2>Pages</h2><ul><li class="page_item page-item-24 current_page_item"><a href="http://localhost:8888/wordpress/01/" title="01">01</a></li>
			<li class="page_item page-item-25"><a href="http://localhost:8888/wordpress/02/" title="02">02</a></li>
			<li class="page_item page-item-26"><a href="http://localhost:8888/wordpress/03/" title="03">03</a></li>
			<li class="page_item page-item-27"><a href="http://localhost:8888/wordpress/04/" title="04">04</a></li>
			</ul></li></ul>
		</div><!--fin de la colonne-->
	<div id="content">
		<div class="post" id="post-24">
		<h2>01</h2>
			<div class="entry">LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM !</div>
		</div>
		<p><a class="post-edit-link" href="http://localhost:8888/wordpress/wp-admin/page.php?action=edit&amp;post=24" title="Modifier l&rsquo;article">Edit this entry.</a></p>	</div><!--fin de content-->
</div><!--fin de page-->
</body>

Fin des choses sérieuses :-) on passe à la suite et donc au CSS… une remarque pertinente serait de constater un peu trop d’emballage de div inutiles qui n’auront pas besoin de CSS, on pourrait les supprimer (libre à vous) sauf si vous voulez mettre plusieurs images en background et faire des sous-blocs… je suis parti du thème par défaut qui emballe beaucoup :-).

En lisant le html et avec un peu d’intuition les blocs à css-ifier sont #page, #header, #col, #content, body, p, ul, li, a…
C’est l’heure de faire un schéma de nos blocs et de leurs places pour éclaircir la situation !

Fin de l’épisode 1.
En attendant que je peaufine mon CSS, un peu de techniques CSS et gabarits proches de notre résultat.

Les fichiers nécessaires seront ajoutés d’ici peu !
Pour aller plus loin, chez francis : http://www.fran6art.com/wordpress/creez-votre-theme-wordpress-de-a-a-z/

suite et fin
/* fichier css avec le maximum de commentaires ! */

/*
Theme Name: PageOnly Alpha Turbo
Theme URI: http://wordpress.org/
Description: Un thème à page à la indexhibit
Version: II
Author: Ben Jaiunblog
Author URI:https://jaiunblog.com
Tags: 

PageOnly Alpha Turbo II

*/

	
/* Begin  */
/* reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0}
table{border-collapse:collapse;border-spacing:0}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:400}
ol,ul{list-style:none}
caption,th{text-align:left}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:400}
q:before,q:after{content:''}
fieldset,img,abbr,acronym{border:0}


	
/* Start */
/* mise en page */
body {
	font-size:62.5%; /* Resets 1em to 10px */
	font-family:'Lucida Sans', 'Lucida Grande', 'Lucida Sans Unicode', Verdana, Arial, Sans-Serif;
	background:#fff url(img/fond.gif) repeat-y top left;
	color:#333;
}

#col {
	width:100px; /*largeur de ma colonne */
	float:left; /* utile pour que #content soit au top */
}

#header {
	width:100px; /* décoration de la page */
	height:100px;
	background:transparent url(img/head.png) no-repeat top left;
}

#content {
	padding:17px 20px; /* blanc tournant */
	margin-left:100px; /* placement à gauche de la colonne de 100 px */
}




	
/* lien */
a {
	color:#bbbbbb; /*tous les liens du site */
	text-decoration:none;
}

/* lien dans la navigation*/
.pagenav ul {
	margin-right:27px; /* ajustement calage visuel */
	float:right; /* fer du bloc ul à droite */
}

.pagenav a:hover {
	color:black; /* au passage de la souris */
}

.pagenav a {
	padding-left:18px; /* pour l'ajout d'une puce bitmap */
	height:17px; /* fixe la hauteur */
	line-height:17px; /* centre le texte sur la verticale */
	display:block; /* pour fixer la hauteur */
	outline-style:none; /* suppr le cadre */
}

li .current_page_item a,li .page_item .page_item.current_page_item a {
	color:#555;
	background:transparent url(img/puce.png) no-repeat center left; /* une puce sur la page current */
}



/* typo */

h2 { 
	/* titre h2 utilisé dans content */
	font-size:2em; /* 2 x 10px = 20px */
	color:#cccccc;
	border-bottom:solid 1px #ddd; /* filet */
	margin-bottom:20px;
}

#content p {
	width:400px; /* largueur maximum des textes */
	margin-bottom:20px; /* à améliorer pour la grille typo */
}

/* typo hors champ */
#col h2 {
	line-height:5px; /* pour gagner quelques pixels */
	text-indent:-9999px;
	border:none;
}

#header h1 {
	text-indent:-9999px;
}

Le résultat :) avec trois images en plus (un dégradé pour l’ombrage, un g entête et une puce).

Les fichiers : exhib.zip

  • Unique Post


7 commentaires

Den Chamanie le 3 Fév 2010 vers 9:15

Génial, j’attends la suite, bon j’ai juste regarder en diagonal l’épisode 1.
Dernièrement j’ai réalisé un petit site avec Indexhibit. Je connaissais pas ce CMS, j’avais vu que beaucoup de graphiste s’en servait.
Ca donne ca : http://petiteau.emilie.free.fr
L’admin reste simple pour un utilisateur peu avertis. C’est l’avantage.
Mais perso j’en veux pas pour moi ! Alors je me suis lancé dans à peu près la même démarche. Un portfolio façon Indexhibit avec wordpress.
Ça donne ça : http://denchamanie.fr
Et j’ai pas encore finit.
J’attends la suite, même si j’ai pas pris le même chemin pour la même démarche.
C’est très intéressant de travailler sur des thèmes ou l’on cherche à en faire le moins, aller au plus simple. Ça change.

Nils le 4 Fév 2010 vers 1:04

Et maintenant WordPress sous Android!

cedrik le 4 Fév 2010 vers 22:12

O U I / /

Den Chamanie le 11 Fév 2010 vers 20:12

Essayé et approuvé ! Bravo et merci ;)

Flo le 22 Déc 2011 vers 15:30

Could you translate this tut into English? Would be great!

Comments are closed.