Ma reconversion pro

Du bâtiment au développement web

Préparer WordPress en local

Salut,logo-theme custom wordpress

Dans ce premier article sur la création d’un thème WordPress, nous allons préparer notre environnement de travail. Je te propose de travailler en local, ce qui sera aussi simple et surtout cela évitera de prendre un hébergement ou un VPS.

Je n’ai pas pour vocation à faire des thèmes WordPress loin de là mais je trouve intéressant de savoir comment modifier correctement un thème existant ou comment en créer un entièrement.

Comme je suis actuellement en train de faire de petit projet WordPress pour des associations de mon entourage ou des amis, je me suis dit que tant qu’à bosser sur WordPress, autant en faire profiter ceux que ça peux intéresser, même s’il y a déjà des tonnes de ressources sur ce sujet… Comme toujours, ces articles vont aussi me servir de carnet de note le jour ou j’ai besoin d’y revenir…

Cet article va déroger à ma nouvelle règle de faire des articles courts, on a plusieurs choses à mettre en place avant de ce lancer dans le code…

Des templates

Alors longtemps dans le début de mon apprentissage, j’ai lu et entendu parler de template sans forcément savoir précisément ce que c’est. Un template, pour wordpress, est un modèle de page tout simplement. Nous aurons souvent à construire pour un même site, différent template en fonction du contenu que nous avons à présenter.

Pour exemple, je te recommande d’aller jeter un oeil sur des sites internet très visités, réalisé avec WordPress, et de voir comment le contenu est mis en avant suivant les pages. Il y a des pages où la disposition va être identique mais différentes de certaines autres. Le modèle de page étant différent, il y a donc un template différent à chaque fois.

Les sites de Tech Crunch et des Rolling Stones, sont réalisés avec WordPress par exemple.

tech crunch home page wordpress

Tech Crunch

rolling stones home page wordpress

Rolling Stones

Un template dans wordpress

Rappel de base du fonctionnement de PHP

WordPress utilise ce principe de modèle de page et cela est permis grâce à PHP. Pour rappel, PHP est un langage coté serveur. Le code PHP va être interprété par le serveur et celui ci va générer le code HTML correspondant à la page demandée. Cela permettrait par exemple d’avoir un seul template, type de page et mise en forme CSS,  et d’avoir des liens qui appellent d’autre page donc d’autre contenu mais d’appeler toujours le même modèle de page et de changer simplement le contenu de cette page. C’est exactement cela qu’on appelle un site web dynamique. La page est construite par le serveur uniquement si l’utilisateur la demande.

(Je me lance dans la production de schémas, mais c’est un vrai métier ça aussi, a priori pas le mien…)

fonctionnement d'un site dynamique

Pour faire la même chose avec un site statique, cela fonctionnerait très bien mais il faudrait réaliser chaque page en HTML/CSS et appeler une page différente à chaque fois. La quantité de travail serait plus importante.

WordPress permet même d’aller plus loin, puisqu’il permet d’appeler des morceaux de pages  pour en faire une. Cela n’est pas une spécificité de WordPress, puisque c’est le langage PHP qui permet cela avec les includes pour ne parler que de cette technique, il y en a d’autres.

Un template va donc être un moyen d’afficher le contenu que l’on a demandé, et qui est récupéré sur la base de donnée.

PHP va nous permettre d’éviter de réinventer la roue à chaque fois qu’on aura besoin d’un même contenu. J’ai pour habitude de dire que PHP va nous permettre d’être fainéant, c’est un peu l’idée… On sait par exemple qu’on va utiliser le même header et le même footer sur chaque page, donc il suffira d’appeler ces portions de page aux bons endroits.

« Pourquoi on ne fait pas un copier collé? ça évite PHP non? ».

On pourrait c’est vrai, mais si jamais il faut modifier le header et le footer, tu es bon pour modifier toutes les pages où ces parties apparaissent… C’est le meilleur moyen pour laisser des choses qu’on ne veux plus et y passer un temps de malade. On a dit qu’on serait, fainéant, en fait on va être malin…

Si tu connais un peu wordpress, il y a une interface d’administration qui permet de rentrer du contenu dans la base de donnée de manière organisée. Cela est transparent, tu n’as pas à gérer la BDD, ni besoin d’écrire des requêtes SQL. En revanche, WordPress, permet de gérer les contenus, donc à toi de veiller à mettre les bonnes informations aux bons endroits… On reparlera de ça plus tard, c’est un point important.

Un thème WordPress comment ça marche ?

emoji thinking

Un thème WordPress est l’ensemble des templates d’un projet. C’est ce qui définira l’affichage de la page d’accueil, les pages, les articles, etc. Chacun de ces éléments peut être découpés en plusieurs parties comme le header, le footer, la sidebar, le corps de la page etc… On peut aller plus loins en segmentant encore la sidebar et le corps  de la page en plusieurs parties. En gros notre template, c’est une chaîne d’assemblage de voiture. On va avoir une série de pièces détachées, que l’on choisira d’assembler comme on le souhaite ensuite.

Nous ne parlerons pas du contenu à proprement parlé mais bien de la façon dont on va l’afficher et le mettre en page. Nous allons construire une page avec du langage HTML, exactement comme on le ferait pour un site statique, sauf qu’on ne va pas forcément tout écrire… Cela peut être un peu déroutant au début, mais en fait on s’y fait très vite.  Dans un second temps, le travail de mise en page CSS est exactement le même que pour un site statique, on va styliser des éléments en les ciblants grâce aux sélecteurs habituels.

Définir les besoins

Alors la première étape est de savoir ce que nous avons besoins d’afficher et à quel endroit . Dans l’idéal il est bon de faire une petite maquette ou un croquis d’une page.

On va travailler sur une seule page, donc un seul template, je te propose de suivre la trame suivante. Elle est très basique mais elle permettra de comprendre le principe de la construction d’un template et donc d’un thème.

mockup

Il est toujours important de savoir sur quelle base on part, puisque le premier travail est de construire correctement la structure de la page et donc d’imbriquer les balises HTML.

Cette « maquette » va donc être la trame de toutes nos pages, ce sera donc le template de base.

Voyons maintenant  un peu plus en détail comment WordPress se débrouille pour assembler les morceaux de notre page.

WordPress en local

Avant toutes choses je te conseille de télécharger un thème vierge, ou thème blank. J’ai choisi de travailler avec le thème HTML5 Blank, le nom est facile à retenir… Il y en a d’autre que tu peux utiliser, mais dans la mesure où ces thèmes ne contiennent pas grand chose et qu’on va tout construire depuis zéro, pas besoin d’en tester 50…

Pour faire ces premiers tests avec WordPress, je te conseille d’installer WordPress en local sur ta machine. Pour cela il te faut WAMP ( pour Windows) ou MAMP (M pour Mac), qui te permettra d’avoir un serveur local, avec Apache, PHP et MySQL. Pour suivre cette série d’article, je te conseille de ne pas utiliser l’hébergement gratuit proposé par WordPress, donc nutilise pas WordPress en ligne.

Je travaille sous Mac, j’utilise donc MAMP, mais je pense que cela fonctionne de la même façon dans WAMP. Pour la suite je vais parler de MAMP, suis donc de la même façon si tu as WAMP.

L’installation de WordPress en local

Une fois que tu as installé MAMP , rends toi à la racine du fichier MAMP et tu dois avoir un fichier htdocs dans lequel tu trouveras un fichier qui s’appelle www.

arborescence MAMP

A ce stade, décompresse  le fichier WordPress que tu as téléchargé et colle le dans le dossier www de MAMP. Tu peux le renommer suivant le nom de ton projet.

Maintenant ouvre un nouvel onglet dans donc navigateur préféré, et dans la barre d’url tape localhost, l’auto-completion va te proposer une adresse, valide la, tu devrais arriver sur une page assez moche, qui ressemble à l’image suivante, c’est la racine de ton serveur local.

localhost

Ensuite clique sur le lien contenant le dossier wordpress que nous avons collé juste avant (intitulé wordpress sur la photo précédente).  A ce stade, tu vas pouvoir faire l’installation de wordpress. Tu as juste à suivre les instructions, c’est assez simple, je ne rentre pas dans le détail. Pense juste à bien gardé tes accès identifiant et mots de passe…

La base de donnée

Comme je te l’ai dis, WordPress a besoin d’une base de donnée, et il faut, lorsqu’on travail en local, la créer!

« Euh oui mais moi je sais pas faire, je vaux juste faire un beau thème! »

Pas de panique, il n’y a pas grand chose à faire!

Dans le navigateur, saisie phpmyadmin dans la barre d’url, l’auto-completion doit te proposer une adresse en local qui commence par localhost, valide la.

Tu devrais arriver sur cette page là:

php myadmin local login

Normalement en local le nom d’utilisateur est « root » et le mot de passe est à laissé vide ou saisir « root ». Si problème regarde sur Stack Overflow il y a des explications pour modifier cela, ou laisse moi un message, j’essaierais de t’aider si je le peu. Je en rentre pas dans le détail cet article pourrait devenir interminable…

Si tu n’a pas de problème, ce que j’espère tu dois arriver sur la page d’administration de PHP MyAdmin.

Dans la colonne de gauche tu dois avoir un lien Nouvelle base de données, clique dessus. Dans le cors de la page, le gros bloc du milieu, un petit champ de formulaire a du apparaître:

Donne le nom que tu veux à la base de donneés, pourvu que ce nom n’existe pas déjà sur ta machine.Ensuite fais comme moi, cherche dans le menu déroulant UTF8_general_ci. Il s’agit de l’encodage des caractères, cela signifie pour faire très court que la base de donnée reconnaîtra les caractères spéciaux français (accents etc..).

Tu peux maintenant poursuivre et terminer l’installation de WordPress. Tu connais tes accès à la base de données, ce sont les mêmes que pour PHP MyAdmin ainsi que le nom de la base de données.

Une fois que tu as installé WordPress, tu dois avoir un thème de base qui s’affiche à l’adresse:

localhost:(numéro, ex 8888)/wordpress/, qui doit ressembler vaguement à ça:

theme twenty seventeen

Ceci est la home page du thème initial de WordPress, qui s’appelle Twenty Seventeen, il y en a peut être même 2 autres. Tu as donc déjà un thème mais ce n’est pas celui qu’on veut, sauf si on aime les cactus…

Je te propose maintenant de revenir dans ton explorateur de fichier dans le fichier racine de ton projet wordpress, celui qu’on a mis dans MAMP/htdocs/www.

Entre dans le fichier wordpress, et tu vois il y a tout un tas de fichier. Nous allons passer le plus clair de notre temps dans le fichier wp-content (celui où on mettra le thème). Je te conseille ne pas faire l’aventurier et de ne pas toucher aux dossiers wp-admin et wp-include, cela pourrait causer de gros problèmes…

Le dossier WP-CONTENT

Installation du thème blank

Ce dossier est composé de plusieurs dossiers et fichiers, mais celui qui va nous intéresser est le dossier « thèmes ». Entre dans ce dossier et tu dois avoir un dossier qui s’appelle… Twenty Seventeen! Tous les éléments de ce thème sont dans ce dossier, donc si on voulait le modifier on travaillerait sur les fichiers contenus à l’intérieur.

Colle maintenant dans le dossier thèmes, le fichier décompressé de html5blank, le thème que l’on a téléchargé plus tôt. C’est un thème donc on le range avec les thèmes, jusque là rien de compliqué.

Maintenant si tu reviens sur ton navigateur, tu vois que le thème n’a pas changé, et c’est tout à fait normal. Il faut maintenant activer le thème depuis l’administration de WordPress.

Pour y avoir accès, il faut que tu complètes l’url de ta page. Tu dois avoir une url du type:localhost:(numéro, ex 8888)/wordpress/. Et bien pour avoir accès à l’admin il te suffit d’ajouter wp-admin après le slash, ce qui donne :

localhost:(numéro, ex 8888)/wordpress/wp-admin

Petit détail, wp-admin correspond au dossier wp-admin dont je t’ai parlé tout à l’heure. Il ne faut pas rentrer directement dans les fichiers, mais toute la saisie du contenu de ton projet va se faire grace à l’administration depuis le navigateur. Je te propose, tant que nous en sommes à parler de l’administration, d’explorer seul l’outil d’administration de WordPress si tu ne le connais pas déjà.

Revenons à l’activation de notre thème. Dans la sidebar de gauche, vas dans Apparence/Thèmes, puis clique sur le thème html5blank qui doit apparaître et clique sur Activer. Ceci va remplacer automatiquement le thème de base de WordPress par celui qu’on va créer, mais qui ne resemble pas à grand chose pour le moment. Ne déprime pas, c’est normal…

home html5 blank

On va s’arrêter là pour cet article, on a bien préparé le terrain,  notre environnement de travail est opérationnel, on ira plus loin ensuite. On verra comment WordPress gère un thème et nous demande d’organiser les fichiers.

D’ici là, je te propose de trouver un sujet pour ton projet, d’ajouter des photos dans la partie média, et de créer 3 pages et 2 articles et de leur attribuer 1 catégorie chacun, pense à utiliser du Lorem Ipsum, si tu es à court d’imagination…. N’hésite pas à remettre le thème de base ou en trouver un autre pour faire des tests d’affichage et commencer à comprendre comment WordPress fonctionne. Personnellement c’est un peu comme ça que j’ai appris à me servir de wordpress au départ, ça m’a permis d’aller plus vite ensuite.

Je te dis donc bon courage, et à très vite pour la suite,

Guillaume

 

2 Comments

  1. Bonjour
    Article interressant, nous pouvons suivre pas á pas les explications pour les mettre en pratique.
    Bon courage pour les prochains articles
    Emmanuel

     

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

© 2019 Ma reconversion pro

Theme by Anders NorenUp ↑

%d blogueurs aiment cette page :