Réaliser un site internet avec WordPress

Wordpress a depuis longtemps dépassé le stade du simple moteur de blog pour devenir un CMS à part entière permettant de créer des sites complets, du moins, à mon humble avis.

C’est pour cette raison que j’ai décidé de l’utiliser pour des projets de sites à la technicité relativement simple et ce pour plusieurs raisons : la souplesse de personnalisation de ses templates et de ses boucles, la très large communauté, un nombre de plugins absolument hallucinant permettant de répondre à de très nombreuses problématiques, la relative propreté de son code.

Je vous propose donc de faire un tour d’horizon d’un projet de site internet entièrement réalisé avec Wordpress.

Je vais baser cet article sur un des derniers sites que j’ai créé : Construire en Vendée.

capture d'écran du site Construire en Vendée

Le cahier des charges

Créer un site internet attractif à vocation prospective.

Le site devra refléter l’activité de la société, permettre du contact facilité (demande de devis principalement) et créer une certaine interactivité avec les visiteurs (partie blog, abonnements, newsletter…).

Secteur d’activité : Constructeur, maître d’oeuvre orienté maisons individuelles.

Le site devra présenter l’activité de la société, ainsi que certaines de ses réalisations sous la forme d’un « portfolio ».

L’ensemble des contenus pourront être mis à jour par le client.

Une dimension référencement très forte est intégrée à ce dossier, mais ce n’est pas ce qui nous intéresse aujourd’hui.

Pourquoi WordPress

Après étude des besoins du client, et des contenus initiaux, il est clair que le site n’aura pas une architecture du contenu profonde, pas de réelles rubriques (à part sur la partie blog) ni sous rubriques, ni sous sous… donc le défaut principal de WordPress pour organiser son contenu (le système de page parent/page enfant), ne pose aucun problème.

De plus j’ai déjà en tête une liste de plugins répondant parfaitement aux besoins du site, donc réduction des coûts, ce qui intéresse, vous vous en doutez, le client.

Passons maintenant aux choses sérieuses, la production.

Le site internet complet réalisé avec WordPress

Petit message : pour que vous compreniez mieux la relative facilité de personnalisation des boucles WordPress, je précise que je ne suis pas développeur, que je connais juste assez le PHP pour pouvoir intervenir sur du code simple, je sais ce qui est faisable, je ne sais pas forcément le faire. Tous les « trucs » appliqués sur ce site, je les ai, soit appris dans le codex WordPress, soit créés de toute pièce sur des questions de logique et de bon sens (faut être curieux dans ce métier).

Le site a été développé à partir de WordPress 2.3.3, la versions 2.5 n’étant pas encore sortie à cette époque, mais normalement tout est transposable sur WordPress 2.5.

Le design

Contrairement à ce que j’ai déjà publié sur différents projets, je ne vais pas m’étendre sur cette partie juste préciser certains points techniques.

Je base mon travail de design pour des sites réalisés avec WordPress sur le thème Sandbox, vierge de toute décoration mais dont les classe automatiquement générées sont très intéressantes pour le designer et permettent un habillage personnalisé pour chaque page du site si le besoin s’en fait sentir.

Au besoin, vous pouvez écrire vos boucles via des fonctions personnalisées dans le fichier functions.php du thème ou en dur dans vos pages en fonction de vos besoins en terme de maintenance ou de réutilisation de ces fonctions (si vous n’utilisez une boucle qu’une seule fois, il n’est pas forcément nécessaire de la centraliser dans le fichier functions.php).

Le header / Haut de page

Haut de page du site construire en vendée

Rien à la main, que du WordPress de base et de la fonction du thème Sandbox personnalisée :

	<div id="header">
		<h1 id="blog-title"><a href="<?php echo get_option('home') ?>/" title="<?php bloginfo('name') ?>" rel="home"><?php bloginfo('name') ?></a></h1>
		<ul id="boutonsplus">
		<?php wp_list_pages('include=15,16,14&title_li=&sort_column=menu_order'); ?>
		</ul>
		<?php sandbox_globalnav() ?>
	</div>

Comme vous le voyez, le code générant le header est plutôt simple, nous avons deux boucles générant des listes de pages.

La première, celle de « boutonsplus » permet de n’afficher que les pages listées par leur identifiant (include=15,16,14), la seconde, sandbox_globalnav() n’est ni plus ni moins que la même chose (ou presque) mais que l’on retrouve dans le fichier functions.php du thème Sandbox, je l’ai juste personnalisée, car par défaut elle liste l’ensemble des pages du site, je voulais juste afficher les pages présentes dans le menu, donc je l’ai modifiée de la même façon que la partie « boutonsplus » en ne lui faisant afficher que les pages désirées.

Si vous surfez un peu sur le site, vous vous rendrez compte que l’habillage du header change sur certaines pages. j’ai simplement créé de styles sur mesure pour le header en fonction des classes intégrées en automatique dans la balise body par le thème sandbox (le body de chaque page du site contient des classes fixes et variables, dont l’identifiant unique de la page en cours), on joue ensuite sur les notions d’héritage, analysez la feuille de style CSS du site pour comprendre comment ça marche.

La Homepage et les pages intérieures

Homepage du site Construire en vendée

Pour changer la page affichée par défaut par votre site wordpress, rien de plus simple, utilisez l’option suivante : dans l’interface d’administration : onglet options, sous menu Lecture : Affichage de la page d’accueil. Choisissez « une page statique » pour la page d’accueil et voila, votre homepage a changé pour une des pages que vous avez créé initialement. Trop dur.

La homepage sous forme d’images cliquables est en fait une page de texte. Je suis juste passé par le mode d’édition html de l’éditeur wysiwyg pour ajouter des classes aux 4 paragraphes pour que je puisse m’amuser avec la feuille de style CSS. les effets de rollover sont entièrement gérés via CSS.

Pour les pages intérieures, vous remarquerez que tout comme le header, la couleur de certains titres et des liens changent en fonction de la page, même technique que pour le header tout est basé sur une question d’héritage avec les classes de la balise body générées par le thème Sandbox.

Les images sont gérées par le plugin Nextgen Gallery, j’y reviendrai plus tard.

Sur chaque page se trouve le même visuel message « rencontrons-nous pour étudier votre projet gratuitement » de façon à optimiser la prise de contact du visiteur, ou qu’il soit, il peut rapidement prendre contact avec la société.

Les modèles de pages

Bien que je n’ai pas eu besoin d’utiliser cette possibilité de WordPress, je pense qu’il est nécessaire de vous en parler.

Lorsque vous travaillez sur une Page dans le backoffice, et non pas sur un billet, vous avez dans les onglets de droite un onglet appelé « modèle de page » qui par défaut est sur « modèle par défaut ».

Ces modèles de pages, sont en fait des fichiers de template complémentaires basés en général sur le fichier page.php de votre thème sur lesquels on greffe des données d’identification de modèle.

Pour créer un modèle de page, faites une copie du fichier page.php dans votre dossier template et renommez cette copie en modele1.php (ou tout autre nom à votre convenance). Editez ce fichier avec votre éditeur de texte favori et ajoutez tout en haut du fichier les lignes suivantes :

<?php
/*
Template Name: NomduModele
*/
?>

Publiez ce fichier sur votre serveur dans le dossier de votre template et retournez dans la page d’édition de Page de votre WordPress. Si vous regardez l’onglet « modèle de page », le nom NomduModele s’est ajouté à la liste des modèles de pages présents.

A partir de là, laissez jouer votre imagination sur les possibilités de modification de mise en page des Pages basées sur ce modèle : sidebar personnalisée, header personnalisé, ajout d’une boucle wordpress pour par exemple ajouter un menu complémentaire sur toutes les pages basées sur ce modèle, etc… les possibilités sont sans fin.

La sidebar / colonne de droite

En relation avec le dernier élément du menu « blog Maison JPY », elle est simplement gérée en mode widgets, le template Sandbox supportant les Widgets WordPress, autant en profiter.

Le contenu est volontairement limité, les rubriques du blog, le formulaire de recherche, une petite galerie des images du site gérée par le un Widget du plugin Nextgen Gallery très aisément configurable.

Le footer / Pied de page

J’ai fait le choix d’utiliser un grand pied de page, pour y caser toutes les informations redondantes ou qui ne sont pas facilement accessible dans la navigation initiale du site :

  • Coordonnées de la société pour encore optimiser la prise de contact.
  • Liste complète des pages du site présentée comme « plan »
  • Les informations du blog que l’on trouve classiquement dans la sidebar
  • Un formulaire de contact que l’on retrouve également sur la page contact, mais du coup, il est également présent sur toutes les pages du site.
  • Les Partenaires, principalement pour le référencement, on y trouvera uniquement les sites à thématique proche.
  • Les « micro » mentions légales, tiens ça me rappelle qu’il faut que je m’occupe de la page complète mentions légales.

Dans la série trucs et astuces :

Le plan du site est généré avec une boucle basique sur l’ensemble des pages du site : <?php wp_list_pages('title_li=&sort_column=menu_order' ) ?>

La partie Blog est un copié/collé des fonctions que l’on trouve dans le fichier sidebar.php, j’ai juste fait un choix au niveau des informations à afficher.

Pour le formulaire, il s’agit du plugin cforms permettant de générer en ligne des formulaires complexes.

Les plugins utilisés

Pour gérer les images : NextGEN Gallery
Le choix s’est porté sur Nextgen Gallery, tout simplement car nous avions besoin de fonctionnalités intégrées au plugin entre autre, la possibilité de gérer… des galeries d’images. Il possède également son Widget permettant d’insérer une micro galerie et ajoute un bouton d’outil dans l’éditeur wysiwyg pour insérer dans un billet ou une page, au choix, une image seule ou une galerie complète.

Pour gérer les formulaires : cforms
Plugin extrêmement puissant permettant de gérer à peu près tout type de formulaire via l’interface d’administration de WordPress, du simple formulaire de contact à l’enquête en ligne. Il ajoute un bouton pour insérer un formulaire dans une page ou un billet mais peut également insérer un formulaire dans votre template avec la fonction suivante : <?php insert_cform('2'); ?> 2 étant l’identifiant du formulaire que j’ai inséré, il vous suffit juste de récupérer l’identifiant de votre fomulaire et de changer ce chiffre.

Pour gérer la sitemap : Google Sitemaps
Le grand classique.

Pour le formulaire de recherche : Search Everything
Permettant d’intégrer les Pages dans les recherches, obsolète depuis WordPress 2.5

Pour la newsletter : Subscribe2
Plugin permettant de gérer des newsletter simples, mais surtout générant des envois automatiques d’emails pour tout nouveau contenu publié sur le site. Voir l’article : Une Newsletter dans wordpress, c’est possible avec le plugin Subscribe2

Pour les liens internes : SH-Autolink
Pour générer des liens automatiques de page à page sur des mots clés ou ensemble de mots clés. Pour rappel, il a maintenant un remplaçant, le plugin Keyword Autolink de webinventif.

Pour les élément du head optimisés : All in One SEO Pack
C’était la solution de facilité, mais je pense m’orienter vers une solution personnalisée moins lourde et mieux intégrée au moteur WordPress.

Et c’est tout, vous retrouverez les liens utiles tout à la fin de l’article.

Pour en finir avec ce site internet WordPress

J’avais déjà eu l’occasion de développer défférentes choses autour du moteur wordpress, mais qui restaient assez proches du modèle du blog, en réalisant ce projet, je me suis prouvé à moi même que WordPress tenait sans aucun problème la comparaison avec d’autres CMS plus lourds pour des projets relativement simple.

La batterie de plugins existants permet de répondre à un nombre assez important de problématiques, il faut juste prendre le temps de les tester, de lire des retours d’utilisateurs et de vérifier si ils ne sont pas intégrés n’importe comment au moteur wordpress, au risque de casser votre joli code tout propre. Et surtout, choisissez de préférence des plugins référencés dans le codex WordPress.

Si vous prenez vraiment le temps de vous intéresser au fonctionnement de WordPress et à la façon dont vous pouvez personnaliser son mode de rendu html et ses boucles, vous obtenez un outil de rêve pour les webdesigners, vous pourriez même avoir un site avec un habillage en fonction du mois, du jour, voir de l’heure de la journée, mais là, faut vraiment avoir le temps ou les moyens.

Ah oui, un dernier point : CSS, CSS et encore CSS !

les liens utiles :

Cordialement,
Aymeric Jacquet

Tags : , , ,