Je vais baser cet article sur un des derniers sites que j’ai créé : 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
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
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 :
- Télécharger wordpress en français
- Télécharger le thème sandbox
- Télécharger le plugin NextGEN Gallery
- Télécharger le plugin cforms II
- Télécharger le plugin Google Sitemaps
- Télécharger le plugin Subscribe2
- Télécharger le plugin All in one SEO pack
- Télécharger le plugin Keywords Autolink
- Le codex WordPress, la source de tous les savoirs
43 réponses à “Réaliser un site internet avec WordPress”
Il faut vraiment que j’essaye wordpress. Quand je trouverais le temps, je l’appliquerais à gaiasphère…
Le site final est chouette.
Au départ réfractaire et préférant Spip et Dotclear, je trouve que depuis la version 1.5, la puissance et la flexibilité de WordPress en font un tout-terrain du site web. Il ne se limite (presque) plus aux blogs.
Voilà un joli compte-rendu et joli site réalisé ! De cette façon les non initiés peuvent se rendre compte des possibilités de WordPress !
Moi aussi je prône WordPress comme un CMS, j’ai d’ailleurs déjà réalisé 2 sites (usines à gaz) qui n’ont plus rien avoir du tout avec un blog (un site d’hébergement d’images et un site de jeux flash).
Moralité, utilisé comme il faut, WordPress convient aussi bien aux sites légers qu’aux usines à gaz. :D
offrir un tel billet à tes lecteurs est un super cadeau d’anniversaire pour wordpress, qui rappelons-le, fête ses 5 ans d’existence précisément aujourd’hui..
:-)
Je trouve par ailleurs le design du site web que tu as crée particulièrement réussi !
Quoique, seule chose (histoire de critiquer) : je ne suis pas trop fan du fait que les liens (dans le footer notamment) soient soulignés uniquement en « état normal ». Je sais pas ça fait bizarre… j’aurais trouvé plus naturel un soulignement uniquement en :hover.. bien classique mais qui reste peut être plus naturel à mon sens..
:o)
Excellent billet ! Ca prouve que wordpress est plutôt tout terrain et simple à customiser.
A propos de l’extensibilité de wordpress, j’ai vu passer récemment un billet d’un gars qui explique comment il a utilisé wordpress mu * pour créer un site de type « réseau social ».
Merci beaucoup pour ce billet !
Je viens de le lire une fois rapidement, je reviens très rapidement le lire en détail.
Le site est magnifique.
Merci à tous, je pense que cet article évoluera en fonction de mes relectures pour y ajouter des informations complémentaires.
Je viens juste d’y ajouter une partie sur les modèles de pages.
Bonjour.
J’ai aussi sorti quelques sites sous WordPress avec le même niveau de compétence que toi (cliquer pour voir mon book).
On en apprend tous les jours. Ton article m’a permis de découvrir de très intéressants plugins.
Je vais tâcher de prendre le temps de raconter mes expériences pour partager aussi.
Merci.
Ohohhh Quel link Ninja ce François-Xavier.
Mise à jour de l’article au passage : Ajout du lien pour télécharger le plugin Keyword Autolink de Julien de webinventif.
Ouah super travail et surtout article très intéressant et motivant.
Bravo à toi.
Super !
Tres bon article pour wordpress, ca donne envie de créer.
vous avez su me motiver, un tres grand merci.
Patrick
WordPress est bien plus qu’un système de blogs, c’est clair! Merci, grâce à toi je vais enfin pouvoir ajouter un bon formulaire de contact à mon site.
Shao69, Patrick, Ben : merci également à vous, si l’article vous a rendu service, c’est déjà ça de gagné.
Grégoire : j’avais loupé ton commentaire dans la foulée, ça a l’air très intéressant son truc de réseau social, effectivement.
2 bons points positifs pour moi avec cet article :
– J’ai commencé à mettre la main au cambouis pour réaliser mon propre thème WP
– Ca me fais un contact de plus pour ma future construction (je compte construire sur Rocheservière bientôt).
Merci bien voisin ;)
Greg : bon courage pour ton futur thème.
Si tu contacte les Maisons JPY, dis leur que tu viens de ma part, ça te rapportera rien mais ça fera plaisir au patron, en plus c’est quelqu’un de vraiment sympathique et de pro.
Chapeau… moi qui suis réticent a wordpress je suis bluffé.
Ça donne envi de creuser un peu et de s’intéresser a ce script qui semble bien plus puissant qu’on ne pourrait le croire.
Reste a être patient pour obtenir ta maitrise ;)
J’aime beaucoup ta façon de procéder, c’est très clair et je trouve que décrire ton raisonnement est la meilleure manière de montrer comment tu arrives au résultat final (donc on comprend bien, nous les noobs).
Merci, c’est très instructif :)
Je crois que c’est un formateur, d’où sa pédagogie pour noob grandement améliorée ;)
Sinon je voulais signaler qu’il y a un souci avec le keyword autolink, impossible d’accéder au blog où il est disponible :(
Morgan : à l’avenir évite les pseudos « SEO » sur l’Ajblog, c’est pas vraiment l’habitude de la maison. ;)
Pour le Blog de k-ny, c’est probablement temporaire, comme il code avec ses pieds il a surement tout cassé chez lui (je sens que je vais la regretter cette phrase).
Excellent article! Clair et précis.
Bravo!
Désolé Aymeric, je pensais pas mal faire :-s
Article vraiment très intéressant et surtout qui montre que l’on peut faire un site avec WordPress, facilement, sans être, comme tu le soulignes, développeur. Ca montre vraiment le potentiel de WP à ce niveau-là, comparé à d’autres CMS ou faut vraiment mettre les mains à la patte et où une customisation parfaite est souvent compliquée et lourde…
Et puis, étant moi même vendéen, et souhaitant peut-être faire construire par là-bas dans quelques temps, je suis tombé sur un site intéressant !! :mrgreen:
Marc : merci.
Morgan : pas de problèmes, juste que j’aime bien que mes commentateurs utilisent des identités « réelles » et pas du pseudo « SEO ». ;)
Francis : si tu es Vendéen, faudrait qu’on s’organise un petit repas prochainement alors.
Je suis vendéen mais je ne vis pas sur place. Je suis en Suisse. Mais toute ma famille vit sur Brétignolles sur Mer et mes parents travaillent sur Nantes…
Bonjour
Je cherche désespérément la réponse à une question et je crois que tu as cette réponse. Je cherche en fait à personnaliser le header. D’après ce que tu dis on peut le faire avec les modèles de page .
je sais comment fonctionne les modèles de page mais je n’arrive pas à faira appel à un autre header en utilisant les modèles de page ou autrement. Pour avoir une idée de ce que je veux faire il faut se connecter au site http://www.1pe2too.com/ cliquer sur espace privé.
là quand je saisi mon mot de passe je veux se voir afficher un autre header.c’est à dire sans le titre et avec un menu horizontal différent. Pour le menu différent je sais le faire ( avec sticky menu). ce que je n’arrive pas à faire c’est faire appel à un autre header. Merci pour ton aide
Désolé je n’avais pas vu que tu préférais que les commentateurs utilisent des identités « réelles ». C’était juste pour faire un peu d’humour dans le cas ou tu m’aurais répondu: Salut Stucru. Mais même là je ne sais pas si c’est le genre d’humour de la boite donc je retire le peudo stucru
Stéphane/stucru : oh non, pour les pseudos humoristiques, ça ne me dérange pas du tout, ce sont plutôt les pseudos pur SEO qui me dérangent.
Pour répondre à ta question :
tu fais une copie du fichier header.phhp de ton thème que tu renomme en header2.php ou header-private.php, comme tu le sens.
Ensuite tu prends ton modèle de page et tu change l’appel au fichier header, là je ne sais plus la teneur du script exact, probablement un truc du type wp_header, avec un include php vers le nouveau fichier header.
A partir de là quand tu charges ta page avec le nouveau modèle, elle charge ton nouveau fichier header à la place de l’ancien.
Il ne te reste plus qu’à personnaliser ce nouveau fichier header.
Merc beaucoup Aymeric pour cette piste.
Je crois que je vais reussir à me débrouiller avec ces éléments
Best regards
Super.
Merci pour cette article.
Merci aussi à Webinventif pour le lien.
Excellent travail partenaire.
J’utilise aussi wordpress pour certains sites tout simple, il peut vraiment apporter un plus indéniable à partir du moment où on a compris le système de loop.
Le seul aspect négatif à mon sens est la maigre qualité du moteur de recherche du codex. Bien souvent il faut l’éplucher en long en large et en travers avant de trouver l’info désirée.
Vraiment très bien cet article. Je suis moi même en train de creer le site de l’association dont je vais parti grâce à wordpress. Je l’ai choisi essentiellement pour que les autres membres puissent s’occuper du site sans moi sans avoir à trop mettre les mains dans le cambouis. Plus besoin de passer via ftp et n’importe qui peut s’en occuper depuis n’importe quel ordinateur. J’ai pu mettre exactement ce que je cherchais, (calendrier, formulaire de contact, livre d’or…) très facilement grâce aux nombreux pluggins. Le site ne ressemble plus du tout à un blog j’en suis très contente! C’est le top!
Bonjour et merci pour ce super article !
J’ai une petite question : comment as-tu intégré le blog ‘MAISONS JPY’ dans le site ?
Merci !
Carine : En fait le blog, à l’époque avait été intégré via un modèle de pages qui reprenait la boucle des articles. C’était une erreur. Il est tout à fait possible de définir une page directement via l’interface d’administration pour afficher les articles en automatique.
Pour ça, il suffit de créer une page, appelée par exemple blog, puis aller dans le back office :
Onglet réglages > Lecture > cocher « une page statique pour la homepage » choisir la page, puis choisir la page qui affichera les articles « page des articles ». Et c’est tout.
Merci beaucoup pour cette réponse !
C’est tout simple en fait !
Merci pour cet excellent article.
J’ai une question. En utilisant wordpress pour créer un site web, peut-on obtenir l’approbation, si le site est bon, de google adsense ?
J’attends votre réponse.
Amitiés.
Debbie
Debbie : il n’y a aucune raison pour qu’un site réalisé avec wordpress ne soit pas compatible avec la régie Google adsense.
Excellent billet sur les possibilités de wordpress, trop souvent regardé comme un excellent moteur de blog, en voici encore un bel exemple pour démontrer la puissance de wordpress.
Je trouve que la barre du bas est plutot pas mal du tout ;)
Moi je garde.
Erreur de tape : défférentes au lieu de différentes
Je suis très intéressé par ton enseignement sur la création du site avec wordpress.
Je voudrais savoir comment puis-je créer un site professionnel avec wordpress et combien vais-je payer?
Bonjour,
Je voudrais savoir si je peux créer un site wordpress avec Mac ?
Et aussi, ayant l’intention d’y ajouter des curriculi vitae, si je puis en ajouter dans des traductions en des langues qui se lisent de droite à gauche ?
Très amicalement et reconnaissante à l’avance.
Debbie1
Salut, je vous félicite pour ce merveilleux tutoriel, c’est bien écrit et on a pas trop de difficultés à comprendre. WordPress deviens de plus en plus puissant c’est donc pas étonnant que bon nombre de webmaster se tourne vers WP pour la gestion de contenue, en plus c’est pas très compliqué à faire.
Bonjours, Félicitations pour le travail fourni. Pouvez vous me dire combien de temps avez vous pris pour faire le site construire-en-vendee.fr ? Merci d’avance.