Ajout du style à notre thème WordPress

Nous sommes à la dernière étape de ce tutoriel pour créer un thème WordPress facilement.

Il est maintenant temps pour nous d’améliorer le style de notre thème.

Utilisons les règles css suivantes :

/*
Theme Name: Mon thème
Theme URI: https://www.tutowp.fr/tutowp
Author: TutoWP
Author URI: https://www.tutowp.fr/tutowp
Description: Thème simple avec un menu et une barre latérale
Version: 1.0
*/

* {box-sizing: border-box;}
body {background: #f1f1f1; color: #23282d; font-family: Arial, sans-serif; margin: 0;}

a {color: #3498db; text-decoration: none;}
a:hover {color: #2980b9; text-decoration: underline;}
input[type="text"] {border-radius: 4px; border: none; padding: 10px; border: 1px solid #23282d;}
#s {margin: 0 0 10px 0;}
button, input[type="submit"] {cursor: pointer; border-radius: 4px; border: none; background: #23282d; color: #3498db; padding: 10px;}

#header {text-align: center; padding: 50px 0;}
#header nav ul {margin: 0; padding: 0;}
#header nav ul li {display: inline-block;}
#header nav ul li a {display: block; padding: 10px; text-decoration: none;}
#header nav ul li.current-menu-item a {border-bottom: 2px solid #3498db;}

#wrap {display: flex; width: 960px; margin: 0 auto;}
#loop article {margin: 0 0 50px 0; background: #fff; padding: 20px; border: 1px solid #ccc;}
#pagination {text-align: center; margin: 0 0 100px 0;}
#sidebar {padding: 0 0 0 50px; flex: 0 0 350px;}
#sidebar .widget {padding: 20px; margin: 0 0 20px 0; background: #fff; border: 1px solid #ccc;}
#footer {padding: 100px 0; display: flex; background: #23282d; color: #f1f1f1;}
#footer .widget {flex: 1; padding: 0 40px;}

@media screen and (max-width: 959px) {
    #wrap {width: 100%; flex-direction: column; padding: 0 20px;}
    #sidebar {padding: 0;}
    #footer {flex-direction: column;}
}

Vous noterez la règle « @media screen and (max-width: 959px) » qui permet de gérer le responsive design pour les écrans d’une largeur inférieure à 959px.

Et voilà ! Vous avez toutes les clés en mains pour créer votre propre thème WordPress ! Bravo !