Yann "Bug" Dubois

Développeur WordPress freelance à Paris
Flux RSS

Créer un thème WordPress Responsive sans plugin

18 December 2012 Par : gfardoux Catégorie : Français

Je ne vais pas vous apprendre ici à créer un thème WordPress, mais juste à le rendre responsive uniquement grâce à une feuille de style différente, et donc… sans plugin 🙂

C’est quoi un thème responsive ? C’est simplement un thème qui va s’adapter graphiquement à tous types d’écran et de supports sur lesquels il est consulté ( pc / tablette / smartphone ). Nous allons devoir donc nous pencher sur les résolutions les plus utilisées de nos jours (source) :

Les résolutions d’écrans les plus utilisées

  • 1366×768 HD : 15,10%
  • 1024×768 XVGA : 13,73%
  • 1280×800 8:5 WXGA : 11,53%s
  • 1440×900 8:5 WSXGA : 7,99%
  • 1280×1024 5:4 SXGA : 7,14%
  • 1920×1080 16:9 HD 1080 : 5,57%
  • 800×600 4:3 SVGA : 4,52%
  • 1680×1050 8:5 WSXGA+ : 4,02%
  • 1600×900 16:9 HD+ 900p : 3,57%
  • 320×480 2:3 HVGA : 2,66%

Évidemment nous n’allons pas développer un thème dans 50 tailles différentes, on va simplifier. Pour les écrans d’ordinateur, on va garder 1366×768 / 1024×768 / 800×600 / 320×480. Vous pouvez bien sur pousser le bouchon encore plus loin en gérant plus de résolutions sur votre thème, à vous de voir 🙂

Il est préférable de se passer de plugin car charger une feuille de style sera beaucoup plus rapide que de charger un plugin qui lui va charger le style responsive, car vous l’aurez compris, tout se passe via le CSS 🙂

Le thème TwentyEleven est-il responsive ?

J’ai développé pour les besoins du tutoriel un thème simple avec des blocs bien visible afin que vous puissiez tester directement en live le résultat. Bien entendu je n’ai pas recréé un thème complet, je me suis basé sur TwentyEleven (le thème fourni par défaut à l’installation de WordPress) avec un “child thème”. Vous me direz “mais TwentyEleven est responsive, il s’adapte à tout les écrans non ?!” – Oui, mais uniquement car il a été développé en version relative, avec des % et des em. Si vous avez un template fixe, il ne s’adapte pas aux différentes résolutions.

Retrouvez le thème de démo ici : http://demo.celyan.com – vous pouvez aussi télécharger le thème de démo responsive ici : Démo responsive

Donc j’ai du modifier un peu le CSS de TwentyEleven pour avoir un site fixe et pouvoir créer un vrai thème responsive. Bon donc on commence par quoi ? Et bien par développer le thème en pensant à la résolution la plus grande ( souvenez vous, 1366 x 768 ). Mais on on ne vas pas faire un site de 1366 pixels de large, c’est bien trop gros ( à mon goût, on peut très bien faire un site de 1366px de large minimum tout dépend de ce que vous voulez faire ) mais ici on va prévoir des marges sur les côtés pour les résolutions supérieure à 1170px. Donc notre site fera maximum 1170px ( comme ça on aura aussi une marge pour les 1280×800 qui est quand même la 3ème résolution la plus utilisée ).

J’ai créé une 2ème sidebar ( colonne de widget ), afin d’avoir 3 colonnes a modifier selon la résolution ( contenu, sidebar1, sidebar 2 ) et pouvoir les bouger de place si on est sur des versions mobiles par exemple.

N’oubliez pas de télécharger le thème de démo pour tester car j’ai du modifier le header, le footer, la sidebar et simplifier les pages pour avoir quelque chose du plus simple visuellement.

Changer dynamiquement la résolution de son écran

Donc voilà notre thème est parfait pour les 1280 et + ! Maintenant on va voir pour l’afficher correctement en 1024px. Comment paramétrer son écran en 1024 sans avoir à changer sa résolution ? Je vous conseil ce site : http://quirktools.com/screenfly/ vous mettez l’url de votre site et choisissez parmi de nombreuses résolutions de différentes devices.

Choisissez Desktop pour les résolutions d’écran d’ordinateur et mettez 1024×768. On voit que le site n’est pas affiché dans sa totalité, normal on a fixé ça a 1170px minimum !

Création de la feuille de style CSS

Donc on va créer maintenant le côté responsive, on va donc créer un nouveau fichier css que l’on peut nommer responsive.css. Il ne faut pas oublier de déclarer le nouveau fichier css dans le header du thème comme ceci :

Maintenant on retourne dans le fichier responsive.css pour lui ajouter ces lignes :

@media only screen and (min-width: 1024px) and (max-width: 1169px) {
 
}

Ce qui veut dire :

Tout les écrans compris entre 1024px et 1169px, pourquoi max-width: 1169px ? Car souvenez vous dans notre feuille de style principale ( style.css ) on lui dit width:1170px donc dès que l’écran contient un pixel de moins on passe aux nouvelles dimensions de template. Donc on va devoir redéfinir la taille de la largeur du site et des différentes colonnes comme ceci :

@media only screen and (min-width: 1024px) and (max-width: 1169px) {
#page{
max-width:1024px;
width:1024px;
}
#primary{
width:468px;
}
#secondary{
width:250px;
}
#tertiary{
width:146px;
}
}

Vous remarquez ici qu’on ne met que la largeur des éléments, pas besoin de remettre les autres paramètres qui ne changent pas en fonction de l’écran.

On passe donc à la résolution suivante, 800×600. Pour cette résolution il faut se poser quelques questions, car 800px de large ce n’est pas énorme pour un site, donc il va falloir penser a revoir notre présentation, après chacun fera comme il l’entend.. on est pas là pour apprendre a développer un thème je le répète. Donc moi j’ai décidé de me séparé de la sidebar 1 sur cette résolution. Il suffira d’un display:none, et de biensur redimensionner les autres colonnes pour adapter, ce qui donne :

@media only screen and (min-width: 800px) and (max-width: 1023px) {
#page{
max-width:800px;
width:800px;
}
#primary{
width:500px;
}
#secondary{
width:200px;
margin-left:20px;
}
#tertiary{
display:none;
}
}

J’ai du rajouter une marge gauche de 20 px sur #secondary car les marges étaient prévues sur #tertiary de chaque côté mais comme nous le faisont disparaître sur cette résolution… 🙂

Maintenant nous voyons la dernière résolution, 320×480 pour les mobiles, même principe… sauf qu’on va mettre la sidebar en dessous !

@media only screen and (min-width: 320px) and (max-width: 799px) {
#page{
max-width:320px;
width:320px;
padding:0;
}
#primary{
margin: 0 0 20px;
float: inherit;
width:280px;;
}
#main #secondary{
width:300px;
clear:both;
padding:10px;
margin: 10px 0;
}
#tertiary{
display:none;
}
}

Conclusion : un thème compatible

Voilà donc un thème compatible dans la plupart des résolutions, bien sur c’est un thème simple, pour les besoins du thème, vous épargnerez mon côté webdesign qui ne vous aura pas échappé 🙂

Je ne détaille pas le css… ce n’est pas le but du tuto, si vous avez des questions il reste les commentaires, n’hésitez pas 🙂

 

[ Mise à jour : Ajout lien pour télécharger directement le thème, disponible aussi ici. ]

A lire également...

WordPress › Error

There has been a critical error on your website.

Learn more about debugging in WordPress.