construisez votre thème wordpress

2 février 2010 | programmation, tutorials | 7 commentaires


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

php et programmation

20 janvier 2010 | programmation, tutorials | 2 commentaires


Voici un petit article pour démystifier la programmation et comprendre par l’exemple le php (pas forcement en détail mais au moins donner une idée de son usage et son rôle).
la programmation
Pour simplifier, on peut dire que la programmation sert à fuir les opérations répétitives en demandant à un ordinateur de s’en charger, le but est souvent de trouver une astuce pour faire en 5 minutes plus ou moins intenses une opération qui devrait prendre plus de 5 minutes, la gymnastique intellectuelle étant parfois amusante, on pourra aussi passer plusieurs journées pour finalement gagner que quelques minutes mais tomber sur des erreurs intéressantes (graphiquement). On utilise un ou plusieurs langages qui demandent des connaissances spécifiques selon les environnements, les envies, les contraintes mais dans la plupart des cas on trouvera les ressources indispensables ou utiles sur le net ou dans des livres !

exemple avec le php
Voici un exemple de script php (définition wikipedia) facile à appliquer et pratique (pour les graphistes).
J’ai trouvé ce bout de php ici, il affiche la liste des fichiers php présents dans un dossier

foreach (glob("*.php") as $file)
echo "$file\n";

en français ça donnerait : pour chaque élément (de cette liste contenant (« des fichiers php ») tu en prends un) tu affiches « le nom de celui-ci »
en détail il y a trois fonctions :
glob() va chercher la liste des fichiers (comme un spotlight)
foreach ($machin as $truc) décompose $machin en $truc et applique en boucle à un $truc la ligne suivante (si $machin à dix $truc, j’aurais dix boucles)
echo « un truc » affiche un truc
(si c’est trop abstrait google -> glob, foreach, echo)

On va partir de la même base pour en faire une liste d’images, le php s’intègrera dans le html, mais il faut anticiper le résultat voulu, je voudrais avoir ce html :

<img src="image1.png" alt="image1.png"/>
<img src="image2.png" alt="image2.png"/>
<img src="image3.png" alt="image3.png"/>

Première retouche :

foreach (glob("*.png") as $file)
echo "$file\n";

ceci affiche les noms des png dans le dossier
Deuxième retouche :

foreach (glob("*.png") as $file)
echo "
<img src=’$file’ alt=’$file’ />";

ceci affiche les images png.

Version finale avec le xHTML + CSS + reset du CSS + le nom du dossier
J’ai juste copié/collé deux ou trois trucs en plus…


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>Liste des images jpg</title>
<style type= »text/css » media= »screen »>
/*reset du css */
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}
/* mon css */
body {
font-size: 62.5%; /* Resets 1em to 10px */
font-family: ‘Lucida Sans’, ‘Lucida Grande’, ‘Lucida Sans Unicode’, Verdana, Arial, Sans-Serif;
background: grey;
color: white;
padding:10px;
}

h1{
font-size: 2em;
}
img{
display: block;
margin:10px 10px 0 0;
float:left;
}
</style>
</head>
<body>
<h1>liste des png du dossier : <?php echo dirname($_SERVER[« PHP_SELF »]); ?></h1>
<?php
foreach (glob(« *.png ») as $file)
echo « <img src=’$file’ alt=’$file’/> »;
?>
</body>
</html>

Je vous laisse le zip du dossier à mettre dans le dossier htdocs ou www pour un test en localhost (en test local on lancera son serveur apache : mamp ou wamp ou lamp ou easyphp).

Télécharger les fichiers sources : list_png.zip avec une petite variante sur un « echo »…

image youtube

17 janvier 2010 | programmation, tutorials | 0 commentaire

Je viens de faire un petit plugin pour wordpress pour mettre les images de youtube dans mon flux (feed) RSS 2 sur ce blog.
C’est pour les articles qui passent dans certains lecteurs sans Flash.
Premier étape savoir que toutes les vidéos youtube ont une image de preview disponible ainsi :
http://www.youtube.com/watch?v=JWIoIOegZHE
à pour image ->
http://img.youtube.com/vi/JWIoIOegZHE/0.jpg

Deuxième étape connaitre le filtre pour le feed :

add_filter(‘the_content_feed’,’ma_fonction’);

Troisième étape l’expression régulière :
on va récupérer le JWIoIOegZHE sur le src après le embed et avant le &

$regex=’|<embed src.*?youtube.com/v/(.*?)&|’;

On finalise :

<?php

/*
Plugin Name: YoutubeImg
Plugin URI: https://jaiunblog.com
Description: affiche les images de youtube
Author: Ben
Version: 1.0
Author URI: https://jaiunblog.com
*/

$img= »;
function youtube($content) {
if(strstr($content, »youtube.com/v/ »)){
$regex=’|<embed src.*?youtube.com/v/(.*?)&|’;
preg_match_all($regex, $content, $result, PREG_PATTERN_ORDER);
$images = $result[1];
foreach($images AS $image){
$img= $img. »<a href=’http://www.youtube.com/watch?v=$image’><img src=’http://img.youtube.com/vi/$image/0.jpg’/></a> »;
}
$content=$img.$content;
return $content;
}

}
add_filter(‘the_content_feed’,’youtube’);

?>

Ce n’est pas parfait, les images sont au début de l’article mais je vous laisse peaufiner :)

les liens, wordpress et opml

29 septembre 2009 | programmation, tutorials | 0 commentaire

Je viens d’ajouter des liens ! https://jaiunblog.com/liens/
Voici une technique pour ajouter dans votre blog votre marque-page firefox en quelques clics via le format OPML ;¬)

  • 1re étape : installer ceci : OPML Support for Firefox
  • 2e étape : menu / marques-pages / organiser… : j’exporte mon bookmark en OPML (sauf astuce ? il faut tout sauvegarder)
  • 3e étape : je charge l’éditeur d’OPML http://editor.opml.org/
  • 4e étape : j’ouvre mon « gros » OPML, je copie/colle les branches souhaitées dans un nouveau fichier OPML, je sauvegarde !
  • 5e étape : j’ouvre avec un éditeur texte (notepad++) et je passe l’encodage en ANSI (utf-8 ne marchait pas chez moi)
  • 6e étape : dans WordPress / Outils / Importer / Liens – faire parcourir – choisir la catégorie – importer
  • 7e étape : tester :-)

scriptographer

28 avril 2009 | tutorials | 5 commentaires

Si vous aimez Illustrator et que savez lire, cet article est pour vous ! Je vais y aborder le plugin (ou module en français) assez étrange Scriptographer, celui-ci a la particularité de vous permettre de créer des outils ou des scripts et ainsi d’ouvrir de nouvelles expérimentations.
Si vous êtes ou pensez être incompétents en programmation, il est livré avec des scripts, si vous aimez l’aventure — let’s go !

première étape : télécharger et installer !
http://www.scriptographer.com/Download/
le logiciel est gratuit mac os x et windows, java est nécessaire et la dernière version est toujours la plus performante !
J’utilise celui sous Illustrator CS 2, la version scriptographer 2.0.023.

Une fois installé, on a deux outils dans la palette verticale // et ** (des pinceaux magiques) et des fenêtres en plus, les pinceaux magiques en regardant sur le site vous devriez découvrir leurs usages !

scripto01

L’aide du site devrait vous aider à surmonter les difficultés d’installation.

On se lance !
Comme on peut le voir sur ma capture, les scripts sont des fichiers textes .js éditables par double clics. En bas de la fenêtre principale « scriptographer » , on trouve des pictos « play », « stop », « rafraichir », « nouveau », « console d’erreur et sortie », « // » et « ** ».
Faites « nouveau » et nommer le « coloriage.js » . Éditer-le (sur pc notepad ou mieux notepad++).

On va faire un script qui applique une liste de couleurs « rouge, violet, jaune , rose, bleu, vert » successivement sur les objets sélectionnés. Ça donne ceci ;¬)

scripto02

On commence par faire « var sel = activeDocument.getSelectedItems(); » qui récupère la sélection multiple…
Ensuite on définie notre palette de couleurs

var colorz = new Array();
colorz[0]=new RGBColor(0.5,0,1); // violet
colorz[1]=new RGBColor(1,0,0); //rouge
colorz[2]=new RGBColor(0,1,0); // vert
colorz[3]=new RGBColor(0,1,1); // bleu clair
colorz[4]=new RGBColor(1,1,0); // jaune
colorz[5]=new RGBColor(1,0,1); // rose

Les couleurs sont codées en RVB de 0 à 1 par couche et pas de 0 à 255.
J’ajoute un compteur « var count » afin d’appliquer la colorz 0, puis 1,2,3,4,5… puis 0,1,2,3… quand count sera plus grand que le nombre de couleurs dans colorz, il revient à 0.
Puis j’applique la couleur sur mes éléments selectionnés en faisant la différence entre les textes et les autres.
Attention, si la sélection contient des groupes, ça ne marche pas (mais on devrait pouvoir y remédier), on dégroupe le plus possible (crtl + maj + G).

version complète coloriage.js :

var sel = activeDocument.getSelectedItems();
var colorz = new Array();
colorz[0]=new RGBColor(0.5,0,1); // violet
colorz[1]=new RGBColor(1,0,0); // rouge
colorz[2]=new RGBColor(0,1,0); // vert
colorz[3]=new RGBColor(0,1,1); // bleu clair
colorz[4]=new RGBColor(1,1,0); // jaune
colorz[5]=new RGBColor(1,0,1); // rose

var count = -1;

for (var i = 0; i < sel.length; i++) { // on fait une boucle dans notre sélection count++; // on gère le compteur if(count >(colorz.length-1)){
var count = 0;
} //

art = sel[i]; // art est un élément vectoriel
if (art instanceof TextFrame) { // si c’est un texte
art.characterStyle.fill.color= colorz[count]; // on applique la couleur n° 0,1,2,3… selon count
} else { // sinon
art.style.fill.color= colorz[count]; // on applique la couleur n° 0,1,2,3… selon count
} // fin du si c’est un texte
} // fin de la boucle

On sélectionne les objets à colorier (on dégroupe le plus possible) puis « play » en bas de la fenêtre scriptographer !
Done !

comment faire un plugin pour wordpress

22 octobre 2008 | programmation, tutorials | 0 commentaire


Je vais prendre 5 minutes pour contribuer au monde merveilleux de wordpress avec un mini tutorial sur les plugins (ou extensions pour être correcte).
Je passe les détails sur l’installation d’un plugin dans wordpress ;¬) enfin rapidement pour ceux qui découvre, si vous avez accès au ftp de votre blog, les extensions sont dans le dossier /wordpress/wp-content/plugins/ et on les active dans la partie « Extensions » du panneau d’administration.

Pour faire ce merveilleux plugin, il faut avoir quelques notions de php, ici le plus difficile est de comprendre les variables tableaux et la fonction strtr ; si ça semble imbuvable, le site du zéro est assez pédagogique.

À quoi va servir ce plugin ;¬) nous allons faire un mini traducteur des jours en grolandais ! Rien d’utile mais en poussant un peu plus le principe, on peut imaginer des petites fonctions avancées en php et xhtml (pour convertir les liens .mp3 en player flash).

Premiers pas indispensable : L’entête

/*
Plugin Name: Grojour
Plugin URI: https://jaiunblog.com
Description: traducteur grlandais
Author: Ben
Version: 1.0
Author URI: https://jaiunblog.com
*/

Il s’agit de commentaire php entre /* et */ c’est la description (seul le Plugin Name est obligatoire).

Deuxième étape La fonction utile

function gJour($text){
$traduction = array(
"Lundi" => "Lendi",
"Mardi" => "Mordi",
"Mercredi" => "Credi",
"Jeudi" => "Joudi",
"Vendredi" => "Dredi",
"Samedi" => "Sadi",
"Dimanche" => "Gromanche",
"lundi" => "lendi",
"mardi" => "mordi",
"mercredi" => "credi",
"jeudi" => "joudi",
"vendredi" => "dredi",
"samedi" => "sadi",
"dimanche" => "gromanche"
);
$text= strtr($text,$traduction);
return $text;
}

Pour la pédagogie : echo gJour(« On est lundi ? »); // donne : On est lendi ?
Ne pas oublier le « return $variable » sinon le filtre effacera ses cibles.

Pour finir, la magie de wordpress : les filtres

add_filter("the_content","gJour");
add_filter("the_time","gJour");

On cible les « morceaux » qui vont être filtré par notre fonction gJour, ici the_content et the_time, le contenu et la date du billet. À noter, les filtres sont appliqués juste avant l’affichage des pages et si on désactive le plugin, le site redevient comme avant :-)

grojour.zip

Update : deux liens complémentaires
http://blog.site2wouf.fr/2008/08/tutoriel-wordpress-un-plug-in-simple-pour-comprendre.html
http://www.pasunclou.com/2008/09/29/ecrire-un-plugin-wordpress/