Créer son thème WordPress

Billet écrit en décembre 2008, oui je fais le tri même dans mes brouillons WordPress, déménagement oblige ? : P

Le blog de Calii est actuellement indisponible donc les liens donnés ci-dessous vers son blog vous renverront une erreur 404 😦

Un « projet » que j’ai entamé et pas (jamais?) fini…

J’ai suivi un lien donné par Jisee, le blog de Calii:
http://blog.calii.fr/2008/11/19/tuto-realiser-son-propre-theme-wordpress-partie-1-la-structure-htmlcss/
Dans cette première partie, précisons que ce morceau de code va dans le fichier style.css
div.padding {
padding: 5px;
}

Quant à ce morceau là:

@import"style.css";

Il était déjà dans le code html donné pour le fichier index.html

Créez un dossier montheme par exemple pour mettre ces deux fichiers cités ci-dessus.
—————————
2e étape chez Calii : on travaille en local (avec easyphp ou une solution Lamp, Mamp ou Xamp) voire sur un blog de test et on change l’extension du fichier index.html devient index.php
Ensuite on édite avec son éditeur de texte le fichier index.php et à la place des balises head /head (lignes 1 à 9 incluses) on copie colle les tags WordPress.
On ajoute aussi un en-tête au tout début du fichier style.css pour que le tableau de bord wordpress le reconnaisse.
On colle les 16 premières lignes du fichier index.php balises head et /head plus la balise body, puis ensuite on colle les lignes du header que calii nous donne (marqueurs de titre et description wp)
Ses lignes de header seront dans le fichier index.php Attention il y a une ligne (a première d’ajouter) et une ligne wp category dans le head est rempalcé par comments off.
—————————
La première partie de code de son 3e volet du tuto est à placer dans le fichier index.php (après la div id = content).
Pour la partie de gauche collez son code (le 3e de son article avec les marqueurs WP) à la place de cette ligne

left

dans votre index.php
A priori il faut placer le dernier morceau de code sa 3e partie juste après le code de la colonne de gauche dans le fichier index.php
—————————
Dans la 4e partie du tutoriel, ouvrez le fichier index.php et remplacer cette ligne

par le 2e code (celui de la recherche).
Et ensuite on colle dans le même fichier (index.php 😯 ) les 2e parties données pour chaque entrée de la sidebar. Il faut créer une classe (pour le style css, ici ça sera sidebox et insérer le code entre les balises ul et /ul sans oublier de choisir les « argments » que l’on veut.
Pour rendre sa sidebar widget ready il faut créer un nouveau fichier functions.php comme indiqué.
Par contre pour les balises à placer avant la barre de recherche (juste au début de la colonne de droite) et la denière juste après la div des balises il n’y en a pas trace dans son code source 😦
————————–
La 5e partie est plus claire, j’ai chosi à la place de la description de l’auteur de tester un affichage aléatoire de mes billets avec ce morceau de code trouvé dans le codex WP ici. Il récapitule ne fin d’article le contenu complet de son fichier index.php (toujours pas vu l’appel de la fonction widget ready de la sidebar) 😕 Je l’ai mis enfin au bon endrot après avoir bien relu j’avais mal placé la première ligne de code :/

————————-
La 6e partie voit s’occuper du fichier style.css.
Certes on l’ouvre mais on ne sait pas où mettre tous ces bouts de code donc je les ai mis à la suite de ce que l’on avait déjà mis dans ce style.css
Pour la barre de recherche il a ajouter une classe et a augmenté la taille de la case recherche avec ce code
class="myinput" size="30"
Ajout d’une ID pour les catégories (bien marqués dans son article en bleu les changements) : id="archive"
Autant la ligne (hauteur du footer mis au départ) est facile à supprimer car Calii nous donne un numéro de ligne 🙂 mais après les class du footer eh be je les ai mis à la fin de mon css.

Publicités

4 réflexions sur “Créer son thème WordPress

  1. koozedine dit :

    Désolé, mais c’était beaucoup trop long pour que j’arrive a tout lire: on est supposé être en vacances!

  2. darialalala dit :

    koozedine si t’es en vacances, repasse à la rentrée 😉 pour le lire lol
    c’est vrai que sans images c’est limite indigeste !

Les commentaires sont fermés.