Blogueur sous WordPress depuis 2 ou 3 ans, autant je prenais plaisir à améliorer le référencement de mon blog, autant j’avais d’énormes difficultés pour modifier un thème WordPress. Et puis un jour, j’ai décidé d’aller plus loin, plutôt que de me contenter de télécharger les nombreux thèmes gratuits qui existent sur le net, je me suis lancer dans la réalisation de mon propre thème. Après pas mal de recherches, je me suis aperçu qu’un thème était composé de fichiers template et d’un fichier CSS (feuille de style). Tout au long de ce blog, je vous fais profiter de mon (in)expérience dans la création de son thème WordPress perso.
Voici donc une série d’articles rédigés sur mon blog qui pourra vous intéresser :
Articles similaires
16 septembre 2008 -- Création thème wordpress en français blogityourself v#2 (0)
Voici donc le nouveau thème de mon blog wordpress! Dans un précédent billet, j'expliquais sa mise en forme sur papier. Pour résumer, je suis parti d'un thème existant, Revolution Blog, et j'ai modifi...
15 janvier 2009 -- C'est le bronx dans mon thème wordpress (0)
Comme d'habitude, j'arrive ce soir du boulot, j'allume ma bécane, et je pars direct sur mon blog. Et que vois-je, mon thème est à la ramasse au niveau de la sidebar de droite, la bannière de mon head...
9 janvier 2009 -- Blogityourself nouveau thème wordpress! (13)
Au bout de 6 mois d'existence du blog, j'avais besoin de faire peau neuve et voici le résultat ;) Le thème a été fait maison et j'en suis assez content. Il y a encore des choses à effectuer (commentai...
19 comments
Grrr says:
août 1, 2008
A quel stade en es tu ? As-tu installé wordpress en local sur ton PC ?
Une fois que c’est fait, le mieux à mon avis est de commencer à modifier des choses très simples dans la feuille de style (fichier .CSS), comme les couleurs (« background » pour la couleur de fond, « color » pour la couleur du texte), afin de comprendre un peu comment ça fonctionne…
David says:
août 1, 2008
Bonjour Grr,
Je fais la manip de ma feuille de style direct sur l’admin wordpress. Pour les couleurs, je vois à peu près. C’est surtout l’agencement. Par exemple, je suis embêté avec le sous-titre de mon blog, j’aimerai qu’il soit un peu plus haut.
Grrr says:
août 1, 2008
Ouch c’est quand même un sacré bordel ce fichier CSS !! En tout cas si on parle bien du même : http://blogityourself.net/wp-content/themes/bigbrain-fr/style.css
Est-ce que si tu mets le header a une hauteur plus importante, par exemple :
#header { width: 917px; height: 80px; margin: 0 auto;
à la place de
#header { width: 917px; height: 50px; margin: 0 auto;
est-ce que ça améliore pas les choses ?
David says:
août 1, 2008
C’est bien ce fichier CSS et c’est carrément le bordel !
J’ai fais la modif et ça marche ! merci beaucoup! Si tas d’autres conseils, je suis très preneur
Grrr says:
août 1, 2008
Ah bah c’est déjà ça ;o)
Je ne sais pas comment le fichier apparaît dans wordpress, mais par contre en le regardant en ligne il est très très moche, donc déjà ce que je ferais c’est ranger un peu tout ça. Par exemple avec quelques retours à la ligne pour avoir
#logo h1 a {
color: #000000;
}
#logo h2 {
float: left;
padding: -60px 0 0 40px;
font-size: 30;
border: none;
}
A la place de l’actuel :
#logo h1 a { color: #000000; } #logo h2 { float: left; padding: -60px
0 0 40px; font-size: 30; border: none; }
Déjà c’est plus compréhensible !
Sinon le mieux pour commencer c’est de trifouiller un peu pour voir ce que ça fait, et comprendre le fonctionnement d’une feuille de style CSS.
Par exemple comprendre que si tu définis un style « logo » il sera valable pour tout ce qui est entre des balises « div id=logo ».
Mais que si tu définis en plus un style « logo a » cela ne concernera que les liens (balise ) qui sont dans un « div id=logo »… C’est « en cascade », d’où le « C » de CSS !
Un bon truc pour voir à quoi tu touches c’est de mettre des bordures (que tu enlèveras après en mettant 0px) dans un élément, par exemple :
#logo h2 {
float: left;
padding: -60px 0 0 40px;
font-size: 30;
border: 1px solid red; /* bordure */
}
Ça permet de voir sur la page quels éléments sont concernés…
Après il y a des sites comme http://css.alsacreations.com/ qui expliquent pas mal de choses sur les CSS.
Autre possibilité : tout simplement enregistrer une page d’un site que tu trouves bien, avec sa feuille de style, et trifouiller tout ça pour voir.
Il faut aussi bien comprendre que les styles CSS te permettront de présenter ton site comme tu veux (disposition, couleurs, polices…),
mais que tout ce qui est « contenu » (nombre de billets affichés dans la page d’accueil par exemple) est du domaine de wordpress.
Grrr says:
août 1, 2008
Mierda mon commentaire est complètement parti en live !!
Au lieu de (balise) il fallait lire (balise « a ») mais il m’a transformé ça en vrai lien de 20 lignes !!
David says:
août 1, 2008
Ok merci je vais faire du rangement, histoire d’y voir plus clair
David says:
août 1, 2008
Je vais partir sur ce theme de base
CSS WordPress Débutant : couleur du texte, titres de la sidebar et footer says:
déc 15, 2008
[...] Premier point : ce billet s’adresse aux débutants. Nous allons voir tout simplement comment modifier la couleur du texte, les titres de la sidebar ainsi que le css du footer. Pour celles et ceux qui arrivent en cours, sachez que j’ai déjà rédigé quelques billets sur la feuille de style WordPress. [...]
InDaFrance says:
jan 29, 2009
Lol, la photo ça m’a fait rire parceque je l’avais créé pour mon autre site BlogoSquare pour mon article Best of WordPress theme galore et elle est venue jusqu’ici. Merci d’en faire bon usage. Très bon site que vous avez là, c’est vrai avec WordPress qui devient de plus en plus populaire, on en demande des hacks et des astuces surtout avec les thèmes.
Moi j’ai trouvé les tuto de SmallPotato(en anglais) très bien. Une liste en français comme ça aurait ravi nombreux.
David says:
jan 29, 2009
Salut et bienvenue sur mon bloug !
J’ai utilisé cette image au tout début du blog et il est vrai qu’au début je n’indiquais pas la source ^^ Veux tu que je l’indique ? Tu connais les tuto de Fran6art ?
InDaFrance says:
jan 29, 2009
Non, c’est pas la peine. C’était juste parceque je me demander comment une image d’un site anglophone puisse atterrir sur un site français? Alors là, le SEO commence vraiment à m’intéresser. Google avait donc raison de nous dire de bien ajouter les attributs title et alt sur les images pour mieux les référencer.
Fran6art? Pas du tout. Je me baladais plus sur les sites anglophones. Je crois que je dois ajouter quelques bons blogues en français à mon blogroll maintenant que je blogue aussi en français sur InDaFrance.
Je vais y jeter un coup d’oeil sur le site, Fran6art pour voir. Merci.
MonstroMoi » Blog Archive » Thèmes Wordpress says:
août 14, 2009
[...] pour débuter dans la création de thèmes wordpress: http://blogityourself.net/comment-modifier-theme-wordpress/ [...]
Bqqmf » Les Templates says:
oct 4, 2009
[...] pour débuter dans la création de thèmes wordpress: http://blogityourself.net/comment-modifier-theme-wordpress/ [...]
Tony says:
fév 3, 2010
Bonjour David, on m’a chargé de modifier un blog wordpress, donc on m’a donné le code et l’identifiant du blog.
J’en ai changé la banniere et changé le theme parmis les propositions themes WP, maintenant j’ai voulu changer le code CSS dans son editeur mais WP me demandent de payer.
Faut-il payer?
Faut-il le modifier en local et comment? J’ai un OVH et filezilla
Désolé je ne connais pas grand chose du web
David says:
fév 3, 2010
Bonjour Tony,
si wordpress te demande de payer c’est que le blog est hébergé par wordpress. Pour être libre de toute contrainte, tu dois te payer un hébergement du typer ovh, et là tu installes WP
Tony says:
fév 3, 2010
Ok Merci beaucoup
Changer la couleur de fond de son blog wordpress | davidlouis.fr says:
mai 31, 2011
[...] pas mal d’internautes vont sur un de mes billets en faisant la requête Google « Changer couleur fond wordpress« . Et malheureusement pour eux, ils n’ont pas la réponse, car je n’en parle [...]
darknote says:
jan 25, 2013
si on part d’un thème existant, on ne modifie pas directement style.css mais on créé un thème enfant puis dedans on met un fichier style.css avec les modifications.
on doit maintenir à site à jour ( version de WordPress, plugins,voir thème )