Arts numériques

Ajouter une "image Ã la une" Ã un article

Stéphane Noel — 2012-03-13T09:33:13Z

Ajouter une illustration Ã un post permet de l'illustrer Ã diffÃ©rents endroits. Page d'entrÃ©e, liste, page de post. Cette fonction est prÃ©sente depuis wordpress 3.0, mais doit Ãªtre activÃ©e et configurÃ©e. DÃ©mo.

L'opÃ©ration se fait en trois temps :
– On dÃ©clare l'option dans le fichier functions.php
– On insÃ¨re le code permettant d'afficher l'image dans la loop wordpress
– On place les images dans les posts

1) Fichier "functions.php"

Comme pour les menu, il est nÃ©cessaire de dÃ©clarer l'emploi des "images Ã la une" dans le fichier functions.php.

Voici le code Ã placer :

2) Placer le code dans la loop wordpress

Dans la loop oÃ¹ vous en avez besoin, vous placerez le code minimal suivant. GÃ©nÃ©ralement avant le titre du post, mais vous Ãªtes libre Ã©videmment de le placer oÃ¹ vous voulez.

3) Ajouter des images aux posts

De retour dans l'interface d'administration de wordpress, on constate qu'un bloc est ajoutÃ© Ã la gestion des articles :

En cliquant sur le lien, on suit la procÃ©dure d'upload mais on veillera bien Ã choisir l'option "utiliser comme image Ã la une".

Sur la page dont la loop a Ã©tÃ© modifiÃ©e, on peut visualiser le rÃ©sultat :

Aller plus loin

La taille de l'image est celle de l'image uploadÃ©e, par dÃ©faut. Mais il est possible de forcer la taille de l'image en ajoutant un peu de code.

Deux opÃ©rations :
– dÃ©clarer un nouveau format d'image
– l'utiliser dans la boucle

1) DÃ©clarer un format d'image
On retourne pour Ã§a dans le fichier "functions.php" pour ajouter cette ligne

Dans l'ordre, on donne un nom Ã ce format, une taille en largeur et en hauteur.
Le dernier argument est true ou false, est important :
– True signale si Wordpress doit gÃ©nÃ©rer une image Ã cette taille prÃ©cise en coupant (crop) dans l'image au besoin. Cette mÃ©thode nous intÃ©resse car en plus de faire des images Ã taille identique, elle force Wordpress a crÃ©er une image Ã cette taille exacte.
– False rÃ©duit l'image en proportion dans la zone spÃ©cifiÃ©e Ã l'affichage. C'est ce qu'on appelle aussi le "box resizing", l'image se rÃ©duit jusqu'Ã rentrer dans l'espace dÃ©fini.

2) Updater le code dans la loop
On signale l'utilisation du format dans la loop simplement en ajoutant un argument dans la fonction :

On peut ajouter d'autres tailles dans le fichier functions.php selon ses besoins, et les demander dans la loop. Simple et efficace.

RÃ©cupÃ©rer seulement le lien de l'image

Un code un peu plus cabalistique permet d'afficher le lien vers l'image, au cas oÃ¹ on veut Ã©crire le reste du tag image ou placer l'image en fond d'un Ã©lÃ©ment par exemple.

Plusieurs sidebars dynamiques

Stéphane Noel — 2012-02-11T17:23:57Z

On peut placer dans un thÃ¨me plusieurs sidebars, ce qui permet de placer des infos Ã plusieurs endroits, typiquement de l'info supplÃ©mentaire dans le footer, ou d'avoir un prÃ©sentation graphique diffÃ©rente pour des contenus diffÃ©rents.

3 Ã©tapes sont nÃ©cessaires pour rÃ©aliser ceci :
1) DÃ©finir les sidebars dans le dossier "functions.php" pour que wordpress propose ces sidebars dans l'administration du site.
2) Composer les sidebars dans l'dministration
3) Appeller les sidebars aux endroits du thÃ¨me oÃ¹ elle devront apparaitre.

1) DÃ©finir les sidebar dans le fichier functions.php

On ouvre le fichier functions.php ou on le crÃ©e au besoin. On dÃ©clare indÃ©pendamment chaque sidebar comme suit :

 'PremiÃ¨re sidebar (sidebar)', 'id' => 'sidebar-1', 'before_widget' => '', 'after_widget' => '
', 'before_title' => '', 'after_title' => '
' )); register_sidebar(array( 'name' => 'DeuxiÃ¨me sidebar (footer)', 'id' => 'sidebar-2', 'before_widget' => '', 'after_widget' => '
', 'before_title' => '', 'after_title' => '' ));
}
?>

2) Composer la sidebar

Si l'opÃ©ration prÃ©cÃ©dente a bien Ã©tÃ© menÃ©e, on a maintenant maintenant deux Ã©lÃ©ments dans l'administration des sidebar de wordpress.

On glisse dedans les Ã©lÃ©ments au choix de la partie gauche, et on configure Ã©ventuellement ses paramÃ¨tres.

3) Appeler les sidebars dans le thÃ¨me

On revient maintenant au code : il faut afficher le code des sidebars Ã l'endroit oÃ¹ l'on en a besoin dans le theme :

Pour la premiÃ¨re sidebar le code sera :

La premiÃ¨re ligne contrÃ´le que la sidebar existe et qu'elle contient quelque chose. Si oui, on crÃ©e le code puis on injecte son contenu avec la fonction "dynamic_sidebar". C'est le "id" donnÃ© dans le fichier "functions.php" qui permet Ã wordpress de savoir quelle sidebar est injectÃ©e lÃ .

On remarque que la sidebar vient Ã l'intÃ©rieur d'une liste ul.

La deuxiÃ¨me sidebar a un code similaire :

C'est fait.

Personnaliser la boucle wordpress

Stéphane Noel — 2011-05-23T14:15:56Z

Query_posts est une fonction qui permet de dÃ©terminer ce que wordpress doit aller chercher dans les contenus du site. Par dÃ©faut, c'est wordpress qui s'occupe de savoir ce qu'il doit afficher en fonction du contexte : les derniers posts dans la page d'entrÃ©e ou telle page ou article. query_posts permet d'imposer Ã Wordpress votre requÃªte personnelle.

La syntaxe est simple : commenÃ§ons par un exemple simple : afficher les contenus de la catÃ©gorie 1. On placera ce code devant la fameuse boucle Wordpress :

Pour afficher un article particulier :

et pour une page

On peut associer plusieurs Ã©lÃ©ments dans une query, par exemple pour chercher des articles provenant des catÃ©gories 1, 2 et 3 :

ou enlever des catÃ©gories d'une recherche sur tous les articles

query_posts( 'cat=-1,-2,-3' );

On peut limiter le nombre de rÃ©sultat.Le nombre de post par page est dÃ©terminÃ© par les prÃ©fÃ©rences de wordpress, mais on peut supplanter cette configuration :

L'argument "-1" force Ã afficher tous les rÃ©sultats :

Cas particulier : afficher une sÃ©lection d'articles

Pour afficher plusieurs articles choisis, on utilisera un array

  'post', 'post__in' => array(1,4,8), 'order' => 'ASC' ); // faire la demande query_posts($args); ?>    
   
 // revenir aux contenus standard de la boucle // les 10 derniers articles (par dÃ©faut)

Cette mÃ©thode (ni aucune Ã ma connaissance) ne peut afficher les articles dans un ordre choisi : ici les articles sont affichÃ©s dans l'ordre ascendant, c'est Ã dire le plus vieux au dessus. L'ordre par dÃ©faut de Wordpress est desc, c'est Ã dire le plus rÃ©cent au dessus. On peut donc changer manuellement la date des articles pour forcer l'affichage, ou choisir une mÃ©thode comme l'ordre alphabÃ©tique du titre par exemple :

$args = array( 'post_type' => 'post', 'post__in' => array(1,4,8), 'orderby'=>'title', 'order' => 'ASC' );

Voir l'article sur les query sur le site Wordpress

Afficher le contenu "normal" aprÃ¨s une query personnalisÃ©e

A partir du moment ou on impose sa propre query (demande) Ã Wordpress, il perd la mÃ©moire et ne se rappellera plus ce qu'il devait initialement afficher dans la page. Si j'utilise ma query au dÃ©but de la page d'entrÃ©e du site, qui devait afficher les 5 derniers articles, j'aurais la surprise de voir que wordpress n'affiche plus ces contenus mais uniquement le contenu de ma query personnelle. Il a oubliÃ© ce qu'Ã©tait le contexte de la page.
Pour parer Ã Ã§a, on peut stocker la demande initiale, et lui rappeller une fois l'affichage personnel terminÃ©.

Comme Ã§a :

// on recopie la requete par defaut  // on fait sa demande personnalisÃ©e  // on affiche tout Ã§a    // on remet en place la requete initiale

IntÃ©grer colorbox dans wordpress

Stéphane Noel — 2010-04-20T10:58:07Z

Ajouter un systÃ¨me de visualisation de galerie dans son thÃ¨me est assez simple mais il faut Ãªtre rigoureux. Une petite marche Ã suivre est donc utile ici.

Didacticiel ou plug and play ?

Le but de cet article est de parcourir un cas pratique de mise en place d'un plugin javascript manuellement. Pour ceux qui veulent juste employer colorBox dans wordpress, il existe une solution toute faite, un plugin Wordpress beaucoup plus simple et rapide.
TÃ©lÃ©charger le plugin "jQuery Colorbox" sur le site officiel de Wordpress

Colorbox ?

Colorbox est un systÃ¨me de type "lightbox". En cliquant sur la vignette dans une page web, on ouvre l'image en grand avec un commentaire et un fond partiellement obscurci. Un grand classique du web 2.0.
Comme les autres systÃ¨mes de galerie, colorbox permet de faire entrer dans ces cadres d'autres types de contenu, notamment grace Ã ajax.

Colorbox n'est pas le seul systÃ¨me existant. Je le prend ici pour ce didacticiel car il est rÃ©cent, bien conÃ§u et s'appuie sur jQuery, une des bibliothÃ¨ques javascript (ou framework) les plus utilisÃ©es.

Sommaire

Pour placer colorbox dans son theme, on devra
– TÃ©lÃ©charger le plugin
– Placer la css, les images et la feuille de script de colorbox dans le theme
– TÃ©lÃ©charger Ã©ventuellement jQuery et le placer dans le thÃ¨me
– crÃ©er sa propre feuille javascript (pour activer le plugin) dans le dossier de thÃ¨me encore
– placer les codes d'inclusion javascript et css dans le header du thÃ¨me

et enfin, dans l'administration de wordpress, incorporer des images (vignettes avec lien vers l'image grand format)

Ooouf. Le tout devrait prendre moins d'un quart d'heure si on fait Ã§a dans l'ordre.

1. TÃ©lÃ©charger

On tÃ©lÃ©charge le module de colorbox ici
Si vous n'avez pas encore utilisÃ© jQuery dans votre thÃ¨me, tÃ©lÃ©chargez le Ã partir du site de jQuery.

Petite remarque de compatibilitÃ© : alors que j'Ã©cris ce didacticiel (20 avril 2010) les versions de colorbox et jquery sont parfaitement compatible. Il se peut que ce ne soit plus le cas dans quelques annÃ©es, pour des tas de raisons. VÃ©rifiez donc cette compatibilitÃ©, Ã§a Ã©vite des pleurs de rage)

2. Installer les fichiers dans le thÃ¨me

Le plugin colorbox est livrÃ© avec de la documentation et des dÃ©mos, ce qui est bien pratique mais un peu confusant pour le nÃ©ophyte. Nous allons prendre dans le dossier juste ce qui nous intÃ©resse :
– La version "minifiÃ©e" (compressÃ©e au maximum) du fichier javascript, qui se trouve dans le dossier "colorbox" et s'appelle jquery.colorbox-min.js.
– La css et le dossier d'images qui se trouve dans le dossier de l'exemple 1.

Nous placerons ces fichiers et dossiers dans le thÃ¨me, dans un dossier "colorbox" pour ne pas mÃ©langer ces fichiers au reste de votre thÃ¨me.
Si vous n'avez pas encore jQuery (absolument nÃ©cessaire au bon fonctionnement de colobox), placez le au premier niveau de votre thÃ¨me.

3. Charger Jquery et colorbox dans le code du header

Il faut maintenant charger ces fichiers dans le html, pour pouvoir l'utiliser partout oÃ¹ c'est nÃ©cessaire. Pour cela, on ouvrira le fichier "header.php" (si votre thÃ¨me l'utilise, ce qui est probablement le cas) et on placer les codes suivant Ã l'intÃ©rieur de la balise "head" :

   /colorbox/colorbox.css" />

Ã‡a devrait donner quelque chose comme Ã§a :

4. Activer ColorBox et paramÃ©trer son comportement

Il nous reste a crÃ©er un fichier "monscript.js" que l'on placera au premier niveau du thÃ¨me (on a dÃ©clarÃ© dans le head son existance ici plus haut). On y placera le code suivant :

$(document).ready(function(){
$("a[href$='.jpg'],a[href$='.png'],a[href$='.gif']").colorbox({transition:"none", maxWidth:"80%", maxHeight:"80%"});
});

Ce code dit : "lorsque la page est chargÃ©e, active colorBox sur tous les liens qui mÃ¨nent vers une image, que tu affiches dans une fenÃªtre de maximum 80% de la hauteur et largeur de la fenÃªtre du navigateur". Ce code va donc affecter automatiquement tous les liens vers des images, qu'ils soient un texte ou une image.

5. InsÃ©rer des images dans les articles

La machinerie est en place. Il faut maintenant l'activer en plaÃ§ant des images dans vos articles. Attention a bien vÃ©rifier que le champ "cible du lien" est rempli avec l'adresse web du fichier, pour que colorBox puisse s'appliquer.
Attention : Si vous voulez placer une lÃ©gende pour l'image, il faut placer une balise title sur le lien (la balise a) et non sur l'image. Editer dans ce cas le code html du texte de l'article.

Plus loin avec colorBox

ColorBox peut Ãªtre personnalisÃ© plus loin au niveau de l'affichage.
On peut le modifier niveau des effets, en faire un diaporama, etc. On modifiera pour Ã§a le script d'activation minimal ici plus haut avec des paramÃ¨tres, voir pour Ã§a la page de documentation ou les exemples.
ColorBox peut aussi ouvrir des pages en ajax plutÃ´t que de simples images, voir encore une fois la documentation Ã ce sujet.

Il est possible aussi d'ouvrir et de modifier le fichier css du plugin pour modifier bords, couleurs, fond du bloc. et y placer d'autre boutons.

Voir en ligne : Le site du plugin

Utiliser les champs personnalisÃ©s

Stéphane Noel — 2010-03-25T19:32:15Z

Les champs personnalisÃ©s permettent d'ajouter des informations complÃ©mentaires via la page d'administration de Wordpress, et les utiliser dans les gabarits. Un cas typique : une illustration pour accompagner l'article dans la page d'entrÃ©e.

Un cas pratique

Imaginons une page d'entrÃ©e de site dans laquelle vous voudriez la liste des 5 derniers articles, et pour chacun une grosse illustration accrocheuse en plus du titre et des premiÃ¨res lignes de l'article. Par dÃ©faut, Wordpress ne peut faire Ã§a : il affiche le dÃ©but du texte mais ne peut pas sÃ©lectionner une image dans ce texte pour la placer Ã un enroit particulier. C'est lÃ que l'utilisation d'un champ personnalisÃ© devient utile.

CrÃ©er un champ personnalisÃ©

Dans un article ou une page, aller en bas du formulaire. Vous y trouverez le formulaire permettant l'ajout de champs personnalisÃ©s. On y Ã©crit deux choses : un nom et une valeur. Dans notre cas, "illustration" sera le nom, la valeur sera l'adresse (url) de l'image Ã afficher.

Une fois le nom du champ entrÃ© une premiÃ¨re fois, wordpress va le garder en mÃ©moire et vous le proposer dans les autres formulaires d'article, ce qui est pratique pour ne pas oublier son orthographe exacte.

Utiliser le champ personnalisÃ© dans un template

L'information du champ personnalisÃ© est stockÃ©e dans la base de donnÃ©e, bien sÃ »r, et elle est disponible dans la loop wordpress, dans les gabarits.
Plusieurs fonctions permettent d'y avoir accÃ¨s, on utilisera ici get_post_custom_values('nom'). C'est du php. Voici le code pour afficher notre image dans un tag html d'image :

" >

Le rÃ©sultat de la fonction get_post_custom_values est une liste contenant dans notre cas un seul Ã©lÃ©ment : l'adresse de l'image. On place cet Ã©lÃ©ment dans le code html d'une image et le tour est jouÃ©.

Voir la page d'info en franÃ§ais sur le codex wordpress

Quelques liens

Stéphane Noel — 2009-08-12T12:12:35Z

Les mises Ã jour du CMS Wordpress sont trÃ¨s frÃ©quentes et la documentation toujours Ã la traine, parfois confuse et mal mise Ã jour entre les versions. Voici cependant quelques sites oÃ¹ trouver de l'information.

TÃ©lÃ©charger

– Wordpress en franÃ§ais

Documentation

– Un mÃ©mo utile Ã imprimer : Wordpress help sheet
– Un autre mÃ©mo utile Ã imprimer : Wordpress advanced help sheet
– Template tags
– Marqueurs conditionnels
– Autres tips utiles

– http://codex.wordpress.org/Stepping_Into_Template_Tags
– http://codex.wordpress.org/Theme_Development
– http://codex.wordpress.org/The_Loop

– 10 useful tips
– Power tips for developers
– Advanced tips

la page "search.php" et d'autres

Stéphane Noel — 2008-11-04T14:43:36Z

Cette page propose les rÃ©sultats du moteur de recherche interne. On y liste logiquement les titres et dÃ©buts de texte. Ici aussi on trouve un "loop" wordpress, avec le titre et la fonction php

Ã la place de la fonction php

D'autres "sous-templates"

Il est intÃ©ressant de pouvoir structurer son site avec les catÃ©gories et de faire une page spÃ©cifique Ã l'affichage des catÃ©gories. On utilise alors la page "categorie.php". On peut y placer par exemple le dernier article en Ã©vidence et ensuite la liste courte des autres. A vous de voir si ce mode de structuration vous convient.
Une page particuliÃ¨re par catÃ©gorie est mÃªme possible.

La page "404", qui s'affiche si une erreur se trouve dans l'url (l'appel d'un post qui n'existe pas par exemple) peut aussi faire l'objet d'une mise en page particuliÃ¨re.

Une page pour afficher un auteur du blog, une page par document, cela est possible, voir la documentation de Wordpress Ã ce sujet (une liste de liens sur la droite de cette page).

Préparer le travail en Wordpress avec un serveur local

Stéphane Noel — 2008-09-08T20:50:17Z

Pour démarrer la fabrication de tempates pour wordpress, il est préférable d'installer sur votre machine un serveur local.

Un serveur local, pourquoi faire ?

Un CMS (Content Management System) est un système dynamique installé sur un serveur web. Pour fonctionner, il s'appuie sur principalement deux technologies : le php et mysql. Ces technologies sont open source, disponibles, gratuites et donc très répandues.

Php est un langage de programmation. Il permet d'exécuter du code, d'interagir avec des formulaires, de lire et d'écrire des fichiers, et de faire des requêtes à des bases de données. Mysql est un système de base de donnée. Il organise l'écriture de données et l'extraction, à la demande, des informations écrites selon des critères variés : par date, par titre, par taille.

Php est utilisé pour produire des pages web de manière dynamique : il reçoit les demandes du visiteur du site (montre-moi le dernier texte qui a été écrit) et il construit une page en transmettant la demande à Mysql, et en traitant l'information qu'il reçoit. Il la dispose dans une page htmlet y ajoute d'autres informations prévues par celui qui a construit les pages. Ces pages s'appellent généralement des templates.

Pour réaliser cette opération, il faut disposer d'un serveur. "Serveur" est le nom de l'ordinateur, mais aussi le nom de l'environnement installé sur cette machine, ce qui crée une confusion. C'est donc un ordinateur d'un type particulier, conçu pour rester allumé toute sa vie, avec un logiciel système particulier, destiné à traiter des demandes provenant de l'extérieur. Le système de serveur open source le plus répandu est le serveur Apache.

1. Pas besoin de payer

Le web, comme on l'a déjà vu, est un ensemble de serveurs reliés entre eux par des routeurs, reliés à des clients (nous). Pour développer un site utilsant PHP et Mysql, comme Wordpress par exemple, il est obligatoire que le site se trouve sur un serveur et qu'on y accède à travers le serveur. Il faut donc posséder un espace d'hébergement, un service payant donc.
Un serveur local tourne sur votre ordinateur, ce qui signifie que son usage est gratuit. En contrepartie, évidemment, ce que vous travaillez sur votre serveur local n'est pas accessible sur le web.

2. Travailler offline

L'avantage d'une telle solution, c'est aussi qu'elle vous évite d'être dépendant d'une connection à un serveur en ligne. On peut donc travailler sur la plage, dans le train, dans une cave au Pakistan.

3. Tests énergivores

Puisque c'est votre ordinateur qui exécute vos scripts, vous disposez de la pleine puissance de votre ordinateur, ce qui n'est généralement pas le cas lorsque vous hébergez un site en ligne (à moins de disposer d'un serveur dédié). Il est donc possible de lancer des scripts très lourds sans honte.

Les blogs et Wordpress

Stéphane Noel — 2008-09-08T20:48:39Z

Worpress appartient à la grande famille des CMS, acronyme de Content Management System. Il appartenait initialement à la sous-famille des blogs, mais s'est imposé comme CMS à tout faire, au risque de devenir ce qu'on appelle dans le domaine informatique une "machine à gaz".

CMS

Les Content Management Systems ont été inventé pour soulager les webmaster et rendre plus rapide la mise à jour des sites.
Lorsqu'un site était fabriqué en html pur, il dépendait souvent d'un webmaster, par qui toute l'information passe car il est le seul à pouvoir l'injecter dans les pages composées en html. Chaque page ajoutée nécessite de modifier d'autres pages pour y faire des liens vers ces nouvelles pages. Tout cela génère de la lenteur et des erreurs, et met en péril l'activité d'un site.
Dans un site dynamique, les contenus sont envoyés vers une base de donnée grâce à des formulaires, par autant de rédacteur que nécessaire. Les pages vues par le public sont générées "à la demande", en récupérant l'information dans la base de donnée. Ainsi, les page sont toujours à jour.

Les premiers sites dynamiques open source sont apparus à partir de 1999. La plupart du temps ils s'appuient sur un langage de programmation (généralement le php) et un système de base de donnée (généralement mysql).

Du développement sur mesure à l'open source

Développer un CMS demande du temps et des compétences. Ils ont d'abord été développés pour des projets spécifiques, sur mesure, mais les développeurs se sont vite aperçu que les besoins des clients étaient souvent les mêmes : créer des pages avec des titres et un contenu, composé d'intertitres, de liens et d'images, de pièces jointes. L'idée de fabriquer un outil général et de le vendre plusieurs fois est rapidement l'évidence.
Pour des raisons souvent politiques, des développeurs vont alors décider que ces outils puissants ne devraient pas être seulement accessibles à des compagnies privées et autorités publiques, mais devraient profiter à tous. Fin des années 90, pas mal de pages personnelles existent, et certains projets politiques et culturels utilisent déjà le web comme moyen pour diffuser de l'information sur leur activité avec un budget réduit.
Plusieurs outils de publication apparaissent ainsi sur le réseau, s'appuyant la plupart du temps sur PHP et Mysql, des technologies open source disponible sur un grand nombre de serveur moyennant un supplément de prix. Développés par des individus, puis par des communautés, ils vont s'appuyer sur les forums de discussion pour gérer le développement de leur outil. Des expériences parfois douloureuses de gestion de groupe vont s'ensuivre, avec de nombreux forks et flooding et flaming. Le début des années 2000 va voir apparaître des CMS plus robustes, rodés par quelques années d'expérimentation, et dont certains ont survécu jusqu'à nous, comme typo3, spip ou Joomla. La plupart de ces projets seront téléchargeables en ligne, avec des licences encore nouvelles à l'époque, la licence libre GNU.

Les blogs et Wordpress

Les blogs apparaissent à la même période, mais seront popularisés vers 2004-2005, quand l'accès haut débit va se démocratiser.
"Blog" est la contraction de "Web log", ou journal de bord en ligne. Les blogs sont à l'origine des mini-sites destinés à accompagner une activité, comme celle d'un professeur par exemple, mais sont rapidement devenus une activité autonome. La structure de départ d'un blog est simple : chaque nouveau billet (ou article ou post en anglais) pousse les anciens contenus plus bas dans la page. Les nouveaux contenus sont toujours affichés en haut donc, et on scrolle vers le bas pour remonter dans le temps.
Le site est ensuite découpé par page reprenant un certain nombre d''articles.

Pour faciliter l'accès aux articles déjà écrit et structurer les contenus, la notion de mot-clé, ou tag, a rapidement fait son apparition.

Wordpress est distribué en version 1 en 2004, son succès est fulgurant. Il est complet, facile à installer et soutenu rapidement par une large communauté, ce qui lui garanti une évolution rapide du code (débugage et ajout de fonctionnalités) et une large offre de thèmes graphiques.

Une interface privée des milliers d'interaces publiques

Wordpress dispose d'une forte communauté et celle-ci produit beaucoup de thèmes graphiques, aussi appelés gabarits, qui permettent de personnaliser l'affichage public du site. Pour administrer son site, on accède par mot de passe à une administration privée qui est la même pour tous ; On peut certes personnaliser quelques couleurs et l'affichage ou non de certaines fonctionnalités ou plugin, mais le "backend" est à 90% identique pour tous les utilisateurs, ce qui permet un apprentissage plus facile.

Les CMS en général

Stéphane Noel — 2008-09-08T20:48:17Z

Un CMS est un outil permettant de gérer des contenus en ligne, c'est-à -dire de composer des textes accompagnés de contenus riches (images, vidéos, sons), de les organiser en structure arborescente, de les afficher côté public, de les administer, modifier et supprimer via une interface privée.
Les CMS apparaissent à la fin des années 90', aux multiples problèmes que pose le développement et la gestion des sites web, un type de media nouveau et à la demande exponentielle dès la création des serveurs web en 1991.

Un Cms doit être :
– intuitif et lisible par le visiteur
– facile à prendre en main par l'administrateur sans connaissance des technologies web (html, css, ftp, etc.)
– personnalisable par un administrateur avancé (choix d'un thème graphique, fonctionnalité ajoutées sous forme de plugin)
– et une personnalisation poussée doit être possible par quelqu'un connaissant uniquement les css, par quelqu'un connaissant les css et aussi le html, ainsi que par quelqu'un connaissant les css, le html ou encore php et mysql. C'est ce qu'on nomme la progressivité des apprentissages.

Pour qu'un CMS soit populaire, les deux atouts sont la documentation et la communauté. La communauté autour d'un logiciel est devenu le point le plus important depuis quelques années : plus des personnes se saisissent d'un CMS, plus elles s'entraident de manière efficace, les "seniors" donnant des conseils aux débutants, écrivant des didacticiels et participant à des forums.

Pourquoi les CMS : le goulet du webmaster

Lorsqu'un site web est "statique", c'est à dire construit en html et css pur, sans base de donnée ni code d'exécution, il est généralement maintenu par une personne, le webmaster. Celui-ci travaille généralement sur une version du site sur son ordinateur personnel, et uploade les mises à jour par ftp. Ceci signifie que toutes les modifications à apporter au site passent par lui, quel que soit le nombre de personnes qui s'occupent des contenus.
C'est ce qu'on appelle le "goulet du webmaster".

Ceci a le désavantage de rendre lentes les mises à jour, de monopoliser une personne à une tâche technique rébarbative. En outre, les changements dans la structure du site (ajouter, ou supprimer une partie du site) nécessitent des modifications dans quasiment toutes les pages du site, pour updater la navigation et les liens internes au site.

CMS : séparation de la gestion du contenu et de sa mise en forme

Avec les cms, on réduit grandement ces désavantages en séparant la gestion des contenus (textes, images, documents).
Les webmasters éditoriaux gèrent le contenu du site via des pages d'administration standard, ils ont la possibilité de modifier textes, images et même la structuration du site sans aucune intervention du webmaster.
Le webmaster s'occupe désormais de produire pour la partie "publique" du site des "templates", ou pages type, qui affichent certains contenu de manière générique. Un seul template d'article par exemple peut afficher individuellement tous les articles. On a donc un séparation des tâches d'un côté, et une économie d'échelle dans le développement d'autre part.

De plus, beaucoup d'excellents CMS sont disponibles en open source, ce qui abaisse encore la charge de travail et le coût du développement.

Les CMS sont donc devenus les alliés incontournables des graphistes intégrateurs.