Créer un thème WordPress intégralement N°8 : le menu css

Les premières parties de ce dossier se trouve ici :

Plusieurs notions sont à maîtriser pour que vous puissiez personnaliser votre menu de A à Z…

Le menu dans la feuille de style css

Devant la complexité de cette réalisation qui comporte des codes intriqués, nous allons déployer un exemple basique.  Observez le code ci-dessous pour mieux comprendre le rôle de chaque attribut.

float : indique tout simplement que l’élément doit flotter au-dessus d’un contenant. Puisque nous avons placé la div dans le fichier header.php, le menu flottera au-dessus du header.

li.menu-item : comme vu précédemment, li concerne les listes. Ici vous personnalisez le contenant de chaque titre inséré dans le menu (largeur, hauteur, couleur de fond…).

list-style : none; On peut personnaliser l’apparence des items (point, carré…) comme ceci :

Créer un thème WordPress intégralement N°7 : body et header en css

• Créer un thème WordPress intégralement N°1
• Créer un thème WordPress intégralement N°2 : le header
• Créer un thème WordPress intégralement N°3 : l’index.php
• Créer un thème WordPress intégralement N°4 : pages, archives et articles.
• Créer un thème WordPress intégralement N°5 : la sidebar
• Créer un thème WordPress intégralement N°6 : le footer et introduction au CSS.

Ce sont des notions passionnantes que vous allez découvrir dans ces quelques lignes, puisqu’elles vous permettront d’imprégner vos pages web de votre personnalité, de vos goûts. Vous pourrez même ensuite modifier le style de certains thèmes prêts à l’emploi comme Twentyeleven.

Codes css pour le body : couleurs, images…

Prenons une image pour inspiration :

Font-family correspond au choix de la police : il suffit ensuite de remplacer Arial par la police que vous affectionnez.

Font-size : c’est la taille de l’écriture vous pouvez agrandir (1.3 par exemple) ou rétrécir à l’infini.

Text-align : aligne le texte à droite (right), à gauche (left), ou au milieu (center). Il est préférable d’aligner un texte à gaucher bien sûr : si ici nous avons choisi center, c’est en fait pour pouvoir centre la page.

color : détermine la couleur du texte.

background : seul, ce code permet de personnaliser la couleur du fond. Il prend une autre fonction s’il est accompagné d’un autre terme, mais quoi qu’il en soit il désigne le fond de l’élément.

Mettre une image en fond du body

On peut créer de superbes univers en insérant une image inspirée et adaptée au reste du thème. Le seul inconvénient est que cela ralentit fortement l’affichage de votre site. Mais il y a des astuces pour alléger les fichiers. Commençons par faire simple en apprenant le code : background-image : url(images/nomdufichier.png);

Pour que cela fonctionne, il vous faut donc enregistrer le fichier image choisi dans le dossier images du répertoire de votre site, via le ftp. Cette image devra soit être grande pour couvrir tout le body, soit être plus petite et répétée.

Une image légère pour votre body grâce au css

En utilisant une image qui pourra être répétée sur tout la surface du body tout en offrant une belle apparence (rayures, points, ronds…), le fichier peut ne peser que quelques pixels : on utilise dans ce cas la fonction repeat (background-repeat:repeat;).

Le plus léger étant évidemement de ne pas mettre d’image mais une simple couleur à laquelle on peut rajouter un effet dégradé par exemple :

background-image: -moz-linear-gradient(top, #000, #181818);
background-image: -webkit-gradient(linear, left top, left bottom, from(#000), to(#181818));
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#000,endColorstr=#181818);
-ms-filter: « progid:DXImageTransform.Microsoft.gradient(startColorstr=#000,endColorstr=#181818) »;

Les codes css indiqués pour le body sont applicables à tout autre contenant de votre page web.

Le header et le css

Certaines fonctionnalités sont plus intéressantes pour le header que pour le body. Notamment la longueur et la hauteur d’un contenant. Dans la feuille de style on note : #header{ puis les attributs de votre choix, en refermant bien avec } à la fin.

En indiquant : height: 60px; on créé une largeur similaire à celle de l’entête de top10hébergeurs.com. Pour imposer une longueur on écrit : width : 1000px; mais on peut aussi raisonner en %. Par exemple sur cette page, le header fait toute la longueur et s’il y a besoin de préciser le width on indiquera 100%.

Ensuite, vous pouvez choisir la police du titre indépendamment de celle de la description de votre site :

#header h1 pour le titre et #header p pour la description. Ces termes peuvent changer d’un thème à l’autre : ils sont en lien avec le nom donné aux éléments dans le header.php et index.php.

Bientôt nous vous expliquerons les composants css utiles à la mise page d’un menu : ce ne sera pas une partie de plaisir pour tout le monde!

Créer un thème WordPress intégralement N°6 : le footer et introduction au CSS.

Pour harmoniser la création de votre site, nous vous conseillons de vous référencer aux numéros publiés dernièrement :

• Créer un thème WordPress intégralement N°1
• Créer un thème WordPress intégralement N°2 : le header
• Créer un thème WordPress intégralement N°3 : l’index.php
• Créer un thème WordPress intégralement N°4 : pages, archives et articles.
• Créer un thème WordPress intégralement N°5 : la sidebar

Créer le footer : copyright.

Nous y voilà : la fin de la création de vos templates. Le footer est le pied de page : vous pouvez y indiquer quelques informations. Généralement on y trouve le nom du webmaster, le copyright, des coordonnées et/ou des liens.

Après avoir créé le fichier dans Notepad, ouvrez une div qui permettra plus tard de personnaliser la couleur, le fond, la taille… de votre footer. Pour afficher un Copyright qui indique automatiquement l’année actuelle, onnote : print (date(Y)). Vous pouvez rajouter une petite phrase descriptive, notamment si vous souhaitez mettre en avant le fait que c’est vous qui avez réalisé ce thème! En revanche vous devrez vous procurer les codes nécessaires à la rédaction des accents car ils ne sont pas pris en compte par les navigateurs :

Rien de compliqué n’est-ce pas? Alors passons à la suite.

La feuille de style, c’est quoi?

Pour l’instant tous vos fichiers ont beau être créés, votre site n’est pas prêt à l’ouverture : il n’ a aucune forme et les éléments vont s’afficher les uns après les autres de manière illisible. Donnons un peu de caractère à tout cela en créant la feuille de style, toujours avec Notepad. Cette fois le suffixe n’est pas php mais css : style.css

D’emblée, indiquez le nom du thème de manière à ce que cela apparaisse dans les réglages de WordPress : 

Nous allons par la suite introduire des codes assimilés à chaque template : header, page, index… Dans un prochain billet nous publierons des codes, mais pour le moment il est nécessaire que vous compreniez certaines notions de CSS.

Les bases du CSS pour personnaliser votre thème WordPress

Chaque div qui est présente dans vos templates est représentée dans la feuille de style par deux accolades : { et }. A l’intérieur de chacune d’elle, divers détails seront introduits, séparés de points-virgules. Sans cela, vous perdez toute la mise en page… Si vous êtes confronté à ce problème une fois votre site mis en ligne, tâchez de remettre le symbole manquant et tout se remet en place, comme si de rien n’était.

Afin de styliser chaque template, on indique avant chaque accolade, le nom de l’élément en question :

body{ background:#ddd;}

ici,  nous avons apporté une couleur gris clair au body, c’est à dire l’ensemble de la page (background signifie fond de page et s’utilise aussi bien au header qu’à la sidebar…) Chaque élément (comme body) est suivi de deux-points puis du code couleur (ne pas oublié le #). Vous trouverez sur la toile des sites qui vous permettent de trouver le code html couleur de votre choix.  Le CSS repose donc sur ces indications (et bien d’autres!).

Prêt pour la customisation? Suivez notre prochaine publication pour découvrir de nouveau codes CSS et donner un look à votre site!

Créer un thème WordPress intégralement N°5 : la sidebar

En espérant ne pas avoir perdu de lecteurs en cours de route, nous allons ici aborder la sidebar ou barre latérale. Pour les voir les 4 premières parties de notre guide création de thème wordpress, c’est par ici :

• Créer un thème WordPress intégralement N°1
• Créer un thème WordPress intégralement N°2 : le header
• Créer un thème WordPress intégralement N°3 : l’index.php
• Créer un thème WordPress intégralement N°4 : pages, archives et articles.

Principes de bases de la sidebar

Elle a de multiples intérêts : ergonomie (facilite la navigation interne de votre site), référencement, revenus publicitaires, partage via les réseaux sociaux… Elle doit donc être affinée après sa mise en place pour tirer un maximum de bénéfices de ces fonctions. Entrons dans le vif du sujet : comme d’habitude, créez votre fichier sidebar.php.

Création de la barre latérale pour WordPress

Voici une ébauche de code php que vous allez coller dans votre fichier. Pour pouvoir le personnaliser par la suite, nous allons expliquer les fonctions de chaque balise.

• ul : cela impose la forme de liste. En effet dans une colonne latérale les éléments s’affichent en colonne.
• li : concerne le titre de la liste (catégorie, articles récents…) Dans notre exemple, la balise li joue un rôle pour le référencement de votre site : remarquez-vous la présence des balises h2? Elles indiquent aux robots des moteurs de recherche quels sont les mots-clés qui définissent le site. Vous pouvez modifier h2 en h3 si vous voulez donner moins d’importance à ces termes.
• div : nous l’avons déjà utilisée dans les fichiers précédents et puisque vos notions sont désormais suffisantes, nous allons pouvoir vous expliquer leur intérêt! Les div sont un « cadre » imaginaire : lorsqu’on utilisera la feuille de style et qu’on indiquera la police de cette div, celle-ci sera attribuée à tout le texte inclu dans la div. Ainsi vous pouvez personnaliser chaque élément de votre site.

Intégration des widgets WordPress dans votre sidebar

Pour que la colonne latérale fonctionne, elle doit appeler function.php. Dans ce fichier nous allons indiquer la fonction widget selon l’image ci-dessous.

Grâce à ces quelques simples manipulations, votre thème supporte les réglages de widgets directement depuis l’interface de WordPress : très pratique!

Utilisations des Widgets de WordPress

C’est tout simple : cliquez sur « Apparence », « Widgets » et choisissez par exemple « calendrier » : glissez le dans la colonne latérale qui est affichée à droite. Sauvegardez si demandé et le calendrier apparaît dans votre sidebar.

Très bientôt nous aborderons le footer qui est le dernier élément que nous proposons dans ce tutoriel. Ensuite nous apprendrons à customiser l’apparence de votre style grâce à la feuille de style et le langage css : lorsque vous aurez compris cela vous pourrez maîtrisez tout fichier similaire et donc intervenir sur les thèmes gratuits proposés sur WordPress!

Créer un thème WordPress intégralement N°4 : pages, archives et articles.

Si vous arrivez en cours de route, il est recommandé de parcourir les billets précédents relatifs à la création de thèmes pour mieux profiter des informations que nous souhaitons mettre à votre disposition ici.

Voir :

• Créer un thème WordPress intégralement N°1
• Créer un thème WordPress intégralement N°2 : le header
• Créer un thème WordPress intégralement N°3 : l’index.php

Créer la page, les archives et l’article seul.

Dans l’épisode N°3 vous avez eu accès aux explications permettant de créer l’index.php. Pour construire la page nous allons dans un premier temps faire simple : copiez l’ensemble de votre fichier index et collez le dans un fichier nommé page.php. 

Puisque les contenus sont identiques, vous ne verrez aucune différence entre vos pages et vos articles du point de vue  de l’apparence. Par exemple, ils sont tous les deux suivis de commentaires. Or, si vous construisez des pages, c’est sans doute leur souhaitez-vous une apparence autre que celle de vos articles.

Suppression des commentaires des pages WordPress

Pour retirer les commentaires de vos pages, ôtez la ligne de code relative à cette fonction dans votre fichier page.php. Vous pouvez aussi personnaliser la sidebar en créant un autre fichier qui ne serait appelé que par la page (et pas les articles). Mais nous verrons cela plus tard.

Pour les archives et articles seuls, procédez de la même manière : copiez le contenu de l’index dans archive.php et single.php. Généralement on souhaite que les archives montrent les articles en extraits : pour cela nous allons modifier le code.

Personnaliser les archives sous WordPress

Dans le code que vous venez de coller, trouvez ceci :

Remplacer content par excerpt sans modifier la ponctuation : vous venez de permettre l’apparition des articles sous forme d’extraits. Si vous aviez laissé le terme précédent, ils seraient apparus intégralement.

Personnaliser l’article seul : single.php

Admettons que vous souhaitiez insérer une publicité dans votre article (pour cela il faut que la longueur du billet s’y prête : les annonces ne fonctionnent plus si elles sont mal intégrées à la structure). Créez votre annonce sur Adsense et munissez-vous de votre code. Pour qu’il s’immisce dans la partie texte, repérez le content dans single.php : 

Intégrer une publicité à la fin de l’article est un stratégie comme une autre : à la fin de la lecture, l’internaute se laisse distraire par l’image ou les mots-clés qui le captivent et il clique. Cela n’est valable que dans le cas où il n’y a pas d’autres annonces qui risquent de s’afficher au même niveau. Insérez votre code Adsense au dessus de :

<?php comments_template(); ?>

Vous pouvez réutiliser cette manoeuvre pour d’autres intégrations comme le partage vers les réseaux sociaux : en bas de page leur position est légitime puisque le lecteur est en capacité de juger s’il aime et souhaite recommander votre sujet ou pas.

Ces techniques de base ne sont que quelques gouttes dans la mer : WordPress offre de bien nombreuses possibilités pour la création de sites et il convient de vous exercer pour ensuite appréhender des techniques plus poussées. Dans le prochain numéro, vous allez créer la sidebar et le footer… peut-être même le menu. Enfin, ne soyons pas trop ambitieux!