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 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!

 

Catégorie: Création de sites web, Spécial débutants
7 février 2012
O2switch Hébergement web