«

»

sept 18

avatar

Monter un site web avec un CMS

Cet article est dédié à notre ami Mushu qui m’a demandé de lui expliquer comment j’avais monté notre présent site.

Plutôt que de lui répondre ne privé, je me suis dit qu’un petit article pourrait être utile pour ceux qui ne connaissent pas le principe du CMS, le site web pour les nuls.

Alors déjà, c’est quoi un CMS?

Un Content Management System, ou système de gestion de contenu, est un squelette de site web, généralement axé sur le blogging (au moins pour les plus célèbres).

En gros, ça vous donne une base de blog, contenant toutes les fonctionnalités de bases et implémentable en 2 min.

La force du CMS, c’est de vous épargner l’apprentissage des languages de programmation web pour un résultat vraiment sympa, du moins jusqu’à un certain point (j’y reviendrai plus tard).

Il exixte des dizaines de tuto qui expliquent de A à Z les fonctionnalités de chaque CMS. A ce propos, lequel choisir?

  • Le critère du noob: la communauté

Pêle-mêle: WordPress, Joomla, Mambo… vous avez l’embarras du choix!

Vous pouvez bien sûr les essayer, c’est gratuit, mais je vais vous mâcher le boulot.

Lorsque l’on monte son site, à moins qu’il ne s’agisse d’un bête blog purement consultatif, sans gestion d’utilisateurs, vous allez avoir besoin de diverses fonctionnalités supplémentaires, répondant à votre objectif.

Prenons le site des NCU, vous noterez la présence d’une shoutbox, d’un forum, d’une gallerie, d’un système de messages privés, … et bien toutes ces fonctions ne sont pas incluses dans WordPress. C’est ici qu’entre en jeu l’importance de la communauté associée à un CMS.

Sur WordPress, vous trouverez toujours un plugin (c’est ainsi qu’on appelle les extension sur ce CMS) répondant à vos besoin, déjà tout prêt à être ajouté.

Pas besoin de coder son extension, quelqu’un l’aura fait pour vous, ce qui rend ce CMS extrêmement accessible aux néophytes.

  • Php, CSS, MySQL…

Mais alors, il est donc parfaitement inutile de s’intéresser aux languages de programmation pour monter son site en CMS?

Je ne dirais pas ça. Certes, vous pouvez y parvenir sans, mais c’est quand même un sacré atout de comprendre ce qui se trame derrière.

Comprenez que, de nos jours, il est presque inutile, même pour une brute, de coder son site de zéro. Autant partir d’une structure et la modifier ensuite.

Connaître ces languages vous apportera une grande liberté dans la personnalisation de votre plateforme. Pour ce faire, je ne puis que vous recommander les tutoriels du Site du zéro. SI vous vous appliquez à suivre scrupuleusement ces « cours », en partant du HTML/CSS, vous ne saurez, certes, pas programmer au sens propre (c’est un apprentissage de très longue haleine), vous aurez les bases, du moins la compréhension du fonctionnement de votre CMS.

Derrière, vous pourrez toujours approfondir sur d’autres languages utiliser, et pour cela je vous conseille les vidéos de Grafikart.

Le minimum, à mon sens, c’est de bien se débrouiller en CSS pour facilement bidouiller l’aspect de votre site. Au final, il vous suffira de chopper un thème qui s’approche de ce que vous voulez et de le retravailler en changeant les couleurs, les textures…

  • L’hébergement

Commençons à rentrer dans le vif du sujet. Vous voulez votre site? il va d’abord falloir penser à le mettre quelquepart (non pas là…)

Il va donc vous falloir un hébergeur.

Vous avez bien sûr la possibilité de monter un serveur à la maison, mais cela vous coûtera quand même l’achat de matériel informatique, et imposera un fonctionnement 24/7 si vous voulez un site accessible à toute heure.

Le plus simple, c’est de se faire héberger.

Première solution: le FAI. J’entends par là les pages perso Free, Orange… Alors là, attention! Prenons Free par exemple, alors c’est cool c’est gratos mais par contre leur serveur PHP tourne encore en version 4.x, alors même que depuis un bail c’est php5 qui règne.

Concrètement, ça se traduit par l’impossibilité de faire tourner les dernières versions de WordPress , et même les anciennes vous interdiront les derniers plugins à la mode.

Bref, fuyez!

Si vous voulez un site stable, la possibilité de faire des backup automatiques réguliers en cas d’accident, la bonne version de Apache, SQL…, un bonne interface de gestion: il vous faut un hébergeur, un vrai.

Le site NCU, par exemple, est chez OVH, l’un des leaders dans le secteur. Vous en avez plein d’autres, comme 1&1 ou Nuxit  par exemple, mais si vous voulez un truc pas cher qui tourne bien, je vous conseille one.com (et pas 1&1 hein)

Le pack de base vous offre un hébergement de 5Go associé à un nom de domaine de votre choix (en .com, .fr …) pour zéro la première année puis environ 16€ par an après, tout simplement imbattable. A titre d’exemple, chez OVH ou 1&1 l’équivalent coûte 26€ par an, et ce dès la première année.

  • Maitriser le FTP
Pour envoyer des fichiers sur votre hébergement, il va vous falloir un logiciel de FTP (File Transfer Protocol). Il en existe des dizaines, le plus connu étant sûrement Filezilla de Mozilla.
Pour ma part j’utilise WinSCP, parcequ’il est très léger et fonctionne bien.
Une fois le FTP installé, il vous faudra créer une nouvelle connexion à l’aide des logs fournis par votre hébergeur.
Attention à bien choisir le type de protocole (SSL, SSH…) en fonction de ce que l’hébergeur propose.
Lorsque vous serez connecté à votre hébergement, vous verrez, dans la fenêtre de droite, la racine de votre site dans laquelle vous balancerez les fichiers, et à gauche l’arborescence de votre PC.
C’est très simple, ça fonctionne comme un explorer windows.
  • Installer WordPress

Vous avez votre hébergement? Il est opérationnel? Vous avez rangé votre femme et vos enfants, sorti un pack de Kro et des chips?

C’est parti!

Rendez vous sur wordpress.org, site de référence pour la communauté française, et téléchargez la dernière version. Vous verrez c’est léger, seulement 6 ou 7 Mo.

Une fois le fichier récupéré, souvent sous forme de zip, décompressez-le.

Vous aurez alors un répertoire avec, dedans, tout un tas de fichiers et répertoires.

Transférez, à l’aide votre logiciel FTP, tous ces fichiers à la racine de votre site.

Et là, attention! Il faut bien prendre tous les fichiers et répertoires à l’intérieur du répertoire WordPress décompressé et les mettre comme ça en vrac dans la racine du site. Ne créez sutout pas un répertoire pour les mettre dedans!

Une fois cela fait (les transfert SSL sont assez longs, pas d’inquiétude), vous aurez quelquechose qui ressemble à ça:

Donc à gauche mon PC, a droite la racine de mon hébergement avec tous les fichiers/répertoires WordPress.

Bon, c’est presque fini (et oui, pour les nuls j’ai dit!).

Reste à faire ‘installation de WordPress. Au préalable, assurez vous du bon fonctionnement de votre base de donnée, celle fournie par votre hébergeur.

Pour cela, allez dans le panneau de gestion de l’hébergement et entrez dans la base de donnée (généralement via phpmysql). Créez une nouvelle base s’il n’y en a pas. Je ne vais pas ici décrire la gestion des bases, mais c’est très simple et vous trouverez facilement sur Google.

Allez c’est parti, allez dans votre navigateur internet et tapez ceci:

monsite.fr/wp-admin/install.php

Vous allez arriver sur la page d’installation de votre site.

Vous remplissez les champs:

  • Nom de la base de données: celle que vous avez créé dans la gestion de votre base
  • Identifiants/MdP: les logs de votre base de données, fournis par l’hébergeur
  • Hôte: vous laissez localhost
  • Préfixe de table: laissez wp_ (en gros les tables de votre base de donnée s’appelleront wp_***, donc vous pouvez mettre autre chose mais c’est pas très utile)

Page suivante:

Bon là rien de sorcier, ce sont vos futurs log d’admin, donc mettez ce que vous voulez.

Et ensuite… voilà! Votre site est prêt à fonctionner!

Bon sauf qu’il est moche et ne correspond en rien à ce vous recherchez au final, mais les bases sont là, la structure est en place.

  • Frontend/Backend

Ces deux notions sont importantes pour comprendre comment administrer votre site. En gros le frontend c’est ce que voit le visiteur, et le backend c’est la partie admin, gestion de votre site.

Pour bosser confortablement, le mieux c’est d’avoir deux écran: on met le backend sur un écran pour faire ses bidouilles et le frontend sur l’autre pour checker le résultat. A défaut, vous pouvez ouvrir deux onglets dans le navigateur.

A ce stade, je vous conseille tout simplement de naviguer dans le backend et de tripoter les option. C’est d’une simplicité déconcertante, nul besoin d’expliquer.
Il vous faudra tout au plus une heure pour faire le tour des options et comprendre ce que vous pouvez modifier.

  • Les Thèmes

Je vous conseille, avant d’installer des extension, de choisir votre thème et de l’activer.

En effet, certains plugins s’intègreront plus ou moins bien dans votre design, et cela peut devenir un critère de choix si vous hésitez entre plusieurs plugin pour une fonctionnalité.

Il existe des milliers de thèmes WordPress, dont beaucoup sont gratuits.

Alors bien sûr, les plus beaux sont payants, et parfois chers, mais en fouillant bien on trouve des contribution gratuites de qualité. Graphene, le thème de votre site, en est un bon exemple, avec son diaporama de news bien classieux et ses menus design.

Vous ne trouverez jamais exactement ce que vous cherchez, et créer un thème de A à Z demande une grosse maîtrise en PhP et surtout en CSS.

Mais, comme je vous l’ai dit au début de l’article, avec des petites bases en CSS vous pourrez facilement changer les couleurs et, si le coeur vous en dit, vous pourrez toujours ressortir photoshop pour refaire les boutons, les cadres de menus…. (il suffit de prendre le dossier images du thème et de remplacer les existantes par vos créations, que vous veillerez à faire de la même dimension).

Donc le plus simple, c’est de trouver un thème proche de vos envies et de le bricoler. Pour ce faire, installez le plugin firebug dans votre navigateur (pas wordpress hein, mais bien dans les extensions chrome, firefox,…). Cet outil est indispensable, il vous permet de repérer dans le code où sont inscrits tous les éléments de la page. Vous cherchez à remplacer une couleur? Facile, vous passez le pointeur sur l’élément de la page et ça vous affiche le bout de code dans Firebug. Des heures de recherche épargnées!

A ce sujet, le thème Graphene est exceptionnel, puisqu’il vous permet de changer toutes les couleurs dans le backend du site sans toucher au code. Mais c’est le seul thème que j’ai vu ainsi.

  • Les plugins

Bon ça y est, votre site est joli mais il lui manque toutes les fonctionnalités dont vous rêvez. Et là encore, rien de plus simple.

Rendez vous ici.

C’est tout en anglais, parfois vous trouverez des traductions pour vos plugins mais pas tout le temps. C’est le seul inconvénient que vous rencontrerez si la langue de Shakespeare n’est pas votre amie. Au pire, vous pouvez toujours farfouiller sur les forum francophones, vous y aurez des liens vers cette page de téléchargement.

A partir de là, vous tapez dans le champ de recherche le nom du plugin que vous recherchez, ou à defaut la fonctionnalité. Je vais vous expliquer, par exemple, comment rajouter un forum.

Tapez « bbpress » dans le champ de recherche. C’est le plugin forum le plus connu et le plus performant (à mon sens) pour WordPress. Comment je l’ai trouvé? Simplement en cherchant sur les forums, j’ai vu que c’était le nom qui revenait le plus souvent et dont on disait le plus de bien. C’est aussi ça la recherche de plugins, il faut souvent farfouiller pour trouver ce qu’on cherche, mais on trouve (presque) toujours.

Une fois sur la page du plugin, cliquez sur download, vous allez récupérer un fichier zippé. Ne l’ouvrez pas, ça ne sert à rien.

Rendez-vous dans le backend de WordPress et allez dans extensions->ajouter.

Cliquez sur « Envoyer » en haut, et là indiquez l’emplacement du fichier zippé récupéré et validez.

Et c’est tout, WordPress se charge de l’uploader et de le dézipper, là ou il faut, comme un grand. Il vous propose ensuite de l’activer, acceptez.

Première chose à faire avant tout, rafraichissez votre page (frontend) pour voir si l’installation du plugin n’a pas planté le site ou créé des choses bizarres. C’est rare, mais ça arrive. Généralement, en cherchant sur les forums encore (vous saisissez l’importance de la communauté), vous pourrez trouver une solution mais pour de rares exceptions il faudra choisir un autre plugins.

Votre forum est installé, il ne reste qu’à l’intégrer dans vos menus/pages et à le travailler dans le backend (ajouter des sous forums…)

Il en sera toujours ainsi pour tout plugin que vous installez.

  • Pour aller plus loin: les menus, la bannière, les widgets, les utilisateurs, les shortcodes…

Si vous avez bien farfouillé dans le backend vous devriez déjà savoir un peu comment ça marche.

La bannière c’est facile, il y a carrément une section dans apparence->En-tête.

Les menus sont facile à gérer aussi. Vous allez dans apparence->menus.

Là vous créez un nouveau menu du nom de votre choix et choisissez son emplacement à l’aide des petits menus déroulants sur la gauche. Encore une fois, pensez à vérifier le résultat sur le frontend quand vous faites des modifs pour voir ce que ça donne.

Ajouter des éléments dans le menu en piochant dans la colonne de gauche. Vous aurez ainsi des liens directs sur vos pages, certaines fonctionalités issues de plugins (comme les forums bbpress par exemple), mais aussi la possibilité de mettre un lien vers ce que vous voulez via « Liens personnalisés ».

Ensuite vous agencez votre menu comme vous le souhaitez en bougeant les éléments à la souris. C’est graphique, donc facile. Vous pouvez aussi les décaler vers la droite ou la gauche pour faire des sous menus dans votre menu.

Les widgets sont des petis blocs, souvents associés à un plugin, qu’on peut mettre ou on veut sur la page. La shoutbox du site, par exemple, est un widget, de même que la dernière photo de la gallerie. Dans Apparence-> Widgets vous pourrez les gérer, de la même manière que les menus en les bougeants à la souris dans la zone de votre choix (colonne de gauche, de droite…)

La gestion des utilisateurs est un peu limite sur le WordPress de base, il vous faudra surement un plugin pour l’affiner (sur le site NCU j’ai mis Members). Ainsi vous pourrez facilement créer des rôles associés à des permissions (pour créer un fofo officiers par exemple).

Quoiqu’il arrive, évitez de laisser l’inscription libre si vous ne voulez pas vous faire spamer de comptes bidons balançant partout de la pub (ou pire…) Le mieux est que vous créiez vous même les comptes quand on vous en demande. Si toutefois vous voulez ouvrir les inscription, alors documentez vous sur les façon de se protéger du spam (même si, vous le verrez, c’est pas simple et qu’il faut souvent y revenir quand les spameurs ont trouvé la combine pour baiser votre verrou).

Je vais terminer par les shortcodes, car c’est important. Lorsque vous installez certains plugins, comme Nextgengallery par exemple (celle du site), vous devrez créer une nouvelle page dans laquelle vous taperez le shortcode du plugin (vous le trouvez dans la FAQ du plugin en général).

Pour NextgenGallery, j’ai mis [ album id=1 template=extend ], ce qui veut dire que cette page diffuse l’album n°1 avec un format extend (il en existe plusieurs dans Ngen). J’ai rien inventé, j’ai juste fait un copié collé sur le site du plugin.

Après, il ne vous reste qu’à ajouter un lien dans un menu qui mène vers cette page et hop, voilà votre gallerie.

Il existe pas mal de plugins qui fonctionnent ainsi, avec des shortcodes.

  • A vous de jouer!

Bon voilà, vous avez votre site. Pour une première fois, tout cela vous demandera pas mal de temps, de recherche, de bidouille mais j’espère avoir suffisament insisté sur le fait que c’est à la portée de n’importe quel geek éclairé.
N’hésitez pas à fouiller sur les forums pour trouver le nom des plugins qui vous conviendront, la communauté  est large et généreuse.
SI le coeur vous en dit, un jour vous aurez peut-être la foi pour pousser vos compétences en languages web. AInsi, comme Ben l’a fait, vous créerez votre propre plugin d’orga raid à la main! C’est un bon exemple de fonctionnalité qu’on ne trouve pas toute faite et qu’il faut coder.
Mais en attendant, si vous suivez pas à pas cet article, vous serez en mesure d’avoir un joli petit site web!
A vos claviers!!!
NB: les plugins utilisés sur ce site: AddMultipleUsers (pour faire de l’ajout massif d’utilisateurs plutot que de créer les comptes un à un, demande des connaissances en tableurs), Avatars (pour que les utilisateurs puissent mettre un avatar perso), bbPress (le forum), GD bbPress Attachement (pour que l’on puisse ajouter des pièces jointes dans nos post de bbPress), Members (gestion des rôles/permissions avancée), NextgenGallery (La gallerie du site), Pierre’s Wordpew (la shoutbox), Private Messages for WordPress (les MP), WP Maintenance Mode (pratique, à mettre en premier et activer ça permet de mettre un écran de travaux le temps de bidouiller), et NCUevents, la création de notre Rootsy.

4 comments

Passer au formulaire de commentaire

  1. avatar
    mushu

    Merci pour les explications

  2. avatar
    kighafarz

    Bah de rien, un peu de courage pour se lancer et tu verras, ça se fait très bien!

  3. avatar
    Zal

    Tu gères mec, merci pour ce beau tuto :)

  4. avatar
    kighafarz

    De rien de rien :)

Laisser un commentaire