•  

4. Personnalisation du footer

Etape 4 sur 4Site opérationnel

Le footer


personnaliser footer


Je vais m’attaquer au bas du site, le footer. Je vais enlever les 3 widgets et les remplacer par un message aléatoire à la place, changer les couleurs de fond par des background images et modifier la couleur du texte.


site footer personnaliser fond the voice


Voici la mise en place de l’image de fond :

.site-footer {
    background: url(/wp-content/uploads/2015/11/fond-footer.png);
}

et le résultat :


résultat personnalisation footer


J’enlève ensuite les widgets qui étaient dans les 3 colonnes du footer :


enlever widget footer


Voici le footer avec les widgets enlevés :


footer theme wordpress the voice resultat


Je vais maintenant ajouter un texte alternatif à la place des widgets que j’ai désactivé, à chaque rechargement de page une phrase aléatoire s’affichera.

Après une petite recherche j’ai trouvé ce code (script) sur Internet :

<script>
aleatoire=Math.floor(Math.random()*4)
switch(aleatoire){
case 0:document.write("phrase 1");break;
case 1:document.write("phrase 2");break;
case 2:document.write("phrase 3");break;
}
</script>

Je vais le coller dans le fichier footer.php de mon thème, enregistrer le fichier sur mon bureau et l’envoyer dans le thème enfant.

Je vais agrandir la taille du texte et faire un réglage de la marge du haut (padding).

Je vais premièrement ajouter une class CSS à mon script pour lui affecter ensuite des propriétés, je l’entoure comme ceci :

<div class="text-random"> monscript </div>

text rondom footer


Ensuite j’utilise l’inspecteur, je crée 3 propriétés dans l’inspecteur CSS et modifie leur valeurs pour directement prévisualiser le résultat en direct.


personnaliser footer inspecteur phrase


font-size: 64px; | Propriété taille du texte avec une valeur de 64px
font-family: 'HWTArtz', Arial, Helvetica, sans-serif; | Propriété police du texte
color: #3f6c7b; | Propriété couleur du texte
padding: 24px 0px 0px 0px; | Propriété marge valeur de 24px en haut

Je suis satisfait du résultat je colle donc mes éléments CSS dans le fichier style.css du thème enfant :

.text-random {
    font-size: 64px;
    font-family: 'HWTArtz', Arial, Helvetica, sans-serif;
    color: #3f6c7b;
    padding: 24px 0px 0px 0px;
    
}

Voici le footer une fois modifié avec la mise en place des textes aléatoires :


footer resultat avec phrase aléatoire


Vous l’aurez remarqué les liens html sont en rouge, ça ne rend pas terrible, je vais enlever la couleur rouge en remplaçant par la même couleur que le texte gris.


personnaliser lien html footer


Voici la petite modification du code couleur :

.site-info a {
    color: #C3C3C3;
}

Voilà le footer est terminé :


footer personnalisation terminé


La personnalisation du thème m’a pris à peu près 1 heure. Depuis la rédaction de ce tutoriel il est possible que vous aperceviez d’autres changements, n’hésitez pas si besoin à me poser des questions sur des éléments nouveaux que j’ai pu ajouter au site depuis.


personnalisation theme wordpress resultat final


Une question ? un avis ? une demande ? n'hésitez pas !