WordPress – « Thème-enfant »

Problématique

Vous avez chargé un thème WordPress. Mais des détails de présentation vous chiffonnent et vous voudriez changer le CSS. Par exemple, je préfère de loin les textes justifiés aux paragraphes en vrac que vous proposent la plupart de ces sauvages d’anglo-saxons (je plaisante, j’adore la Grande-Bretagne).

D’autre part, vous avez déjà vu que dans les mises à jours, on vous propose parfois celles du thème que vous utilisez. Drame cornélien : si je le mets à jour, je vais écraser mes modifications, sinon, je perds peut-être des fonctionnalités intéressantes.

Solution

Eh bien oui ! Dans ce cas, on peut avoir le beurre et l’argent du beurre : il suffit de créer un thème-enfant. Il suffit, me direz-vous, mais ce sera encore une galère. Non, il suffit, je le répète de procéder selon les étapes que je vais vous décrire.

Aujourd’hui, j’ai installé un site avec le thème « Skirmish » dont je veux faire un thème-enfant (je n’ai pas dit que je voulais faire un enfant à une certaine Skirmish que je ne connais pas). Je prendrai donc ce thème pour exemple.

Etape 1

Dans le répertoire wp-content/themes, créer le répertoire skirmsih-child

Etape 2

Créer dans ce nouveau répertoire, un fichier style.css (ça c’est habituel, normal et indispensable) avec le contenu suivant

/*
Theme Name:     Skirmish Child
Theme URI:      http://www.monsite.com/
Description:    Thème enfant pour le thème Skirmish
Author:         Adhemar Patamob
Author URI:     http://www.patamob.com/
Template:       skirmish                             
Version:        0.1.0
*/

@import url(« ../skirmish/style.css »);

Plusieurs points sont à retenir

  • il est judicieux dans le Theme Name et la Description de préciser le nom du thème-parent. Est-ce indispensable ? Je n’en sais rien (merci de le préciser si vous le savez) mais c’est conseillé, c’est plus prudent et ça marche
  • il est obligatoire dans le Template d’indiquer le nom du répertoire qui contient le thème-parent : attention, il s’agit du nom du répertoire et non pas le nom du thème parent.
  • dans les autres lignes vous faites ce que vous voulez sauf …
  • ne pas mettre un blanc avant les « : »,. Il faut laisser les « : » collés à leur label (Author URI, Template, etc …) sinon WordPress risque de bugger
  • enfin la ligne @import indique qu’on importe toutes les spécifications CSS du thème-parent (ici skirmish), elle doit donc précéder toute autre spécification CSS qui prend en compte vos modifications

Etape 3

Pour finir le tout, vous allez dans le tableau de bord WordPress, dans Apparence puis Thèmes où vous voyez apparaître votre thème-enfant (en général sans le snapshot d’exemple parce que vous avez oublié de le faire).

ET LE TOUR EST JOUÉ ! ALORS ON DIT MERCI QUI ?

Pour en savoir plus, quelques livres sur WordPress 

Installer une police non-standard en CSS

Tout d’abord, vous pourriez me reprocher une longue absence de deux mois. Mais rappelez-vous que ce blog a pour but de vous faire partager mes souffrances quand je développe du code, du HTML ou autres fariboles. Partager mes souffrances certes, mais aussi les solutions que j’ai trouvées …

Et donc pendant deux mois, j’ai assez peu développé, bien que je n’aie pris que trois jours de vacances. Et les petits développements n’ont posé aucun problème. Mais là, aujourd’hui, jour de la Saint Laurent (et donc Laurence – Bonnes Fêtes à toutes les Laurence que j’ai connues, mais là je m’égare), je replonge : j’ai décidé de relooker complètement mon site principal derniersparus.com. Et ça commence fort.

Problématique

Vous en avez un peu marre de Helvetica, Arial. Ne parlons pas de Times Roman ou Garamond qui sont des polices splendides mais totalement inadaptées aux pages Web, enfin c’est mon opinion. Calibri est un petit rayon d’harmonie et de lumière dans un monde de gribouillis. Mais vous avez envie d’afficher une police non-standard qui a peu de chances d’être sur la machine du fan de votre site. Comment faire ?

Solution

Dès le CSS2 est apparue l’instruction @font-face, mais seul Internet Explorer l’a correctement implémentée. Depuis CSS3, c’est chose faite. Il suffit de la déclarer dans votre CSS de la manière suivante (je prends l’exemple d’Unibody 8) :

@font-face {
    font-family: "Unibody";
    font-style: normal; 
    src: url('[lechemin]/Unibody 8-Regular.otf');
}
@font-face {
    font-family: "Unibody";
    font-style: italic;
    src: url('[lechemin]/Unibody 8-Italic.otf');
}
@font-face {
    font-family: "Unibody";
    font-weight: bold;
    src: url('[lechemin]/Unibody 8.otf');
}

  • [lechemin] indique évidemment le répertoire du site où vous avez rangé le fichier source de votre police
  • vous avez noté qu’on a déclaré les 3 types de polices : normal, italique et bold : vous pouvez en faire plus

Vous pourrez donc utiliser votre nouvelle font dans le corps de votre page, par exemple avec la balise :

<span style=’font-family:Unibody’>Elle est belle ma police ! Mais qu’elle est belle !</span>

Vous pourrez même l’utiliser dans une feuille CSS de la manière suivante :

#majoliepolice{
font-family: Unibody;
}
@font-face {
font-family: Unibody;
font-style: normal;
src:url(‘[lechemin]/Unibody 8-Regular.otf’);
)

mais ne me demandez pas pourquoi, veillez bien à mettre la déclaration @font-face APRÈS son appel dans le style. Déclarer une « variable » après son utilisation, c’est étrange, mais « Il y a plus de choses dans le ciel et sur la terre, Horatio, que n’en rêve votre philosophie. » Hamlet, William Shakespeare (tous les informaticiens ne sont pas d’incultes geeks que diantre ! palsembleu ! cornegidouille !).

ET LE TOUR EST JOUÉ ! ALORS ON DIT MERCI QUI ?

CSS – Balise

Problématique

Si vous utilisez une balise <ol> (ordered list) en mode « numéros », vous souhaitez peut-être commencer ailleurs qu’à 1.

Pour cela, il suffit de déclarer :

<ol start= »12″> (par exemple)

</ol>

Mais on raconte dans les milieux bien informés que cette balise ne serait plus maintenue, qu’elle serait deprecated ? Qu’en est-il ?

Solution

HTML : la commande start a, semble-t-il, connu des heures difficiles lors du passage à HTML 4.

Mais avec HTML 5, elle a retrouvé toute sa place, la preuve sur le site officiel du W3.org.

Et en CSS ? CSS ne connaît pour <ol> pour la description du mode d’énumération de la liste (il en a d’autres …) que les 4 propriétés suivantes :

list-style regroupement des propriétés suivantes dans une déclaration unique
list-style-image spécifie l’image qui fera office de marqueur de liste
list-style-position précise si le marqueur apparaîtra à l’extérieur ou à l’intérieur du contenu
list-style-type spécifie le type de marqueur

qui peuvent prendre les valeurs suivantes

list-style-image URl de l’image
list-style-position inside, outisde, inherit
list-style-type disc, square, circle, etc …

Donc :

  • en HTML, on peut proposer une position de départ différente de 1
  • en CSS, on ne le peut pas

LE TOUR EST JOUÉ ! ALORS ON DIT MERCI QUI ?

A lire

HTML, XHTML et CSS pour les Nuls (Jeff Noble, Ed Titlle)