Créer un thème responsive sous wordpress – le guide ultime

Site Internet

Notez le contenu

Le saviez-vous 🤔 ? 86,5 % des internautes français surfent sur internet via un mobile. C’est une écrasante majorité des internautes qui utilisent quotidiennement leur smartphone pour utiliser internet. Une question vous vient alors en tête, est-ce-que mon site s’adapte bien à tous les types d’écran ? Et surtout comment créer un thème WordPress responsive si ce n’est pas encore le cas.  Aujourd’hui, nous vous proposons de voir comment créer un thème WordPress responsive

Sommaire :

  1. Qu’est-ce-qu’un thème WordPress responsive 
  2. Créer le dossier de votre thème 
  3. Créer un fichier style.css
  4. Concevoir un fichier index.php
  5. Activer votre thème WordPress
  6. Élaborer un fichier function.php
  7. Créer un menu dans le fichier function.php
  8. Améliorer son thème avec d’autres fonctionnalités 
  9. Choisir un thème WordPress responsive 

Qu’est-ce-qu’un thème WordPress responsive 

Vous l’aurez peut-être déjà compris grâce à notre introduction, mais le mot “responsive” est un anglicisme qui désigne une application ou un site internet qui répond à des normes qui lui permettent de s’adapter à tous types de support. 
C’est un critère à ne pas négliger si votre cible utilise principalement un smartphone pour faire des recherches sur le net. Si vous souhaitez savoir si votre site web est responsive où non, Google mets à votre disposition cet outil : https://search.google.com/test/mobile-friendly?hl=FR

Test-mobile-friendly

Si vous n’avez pas encore créé votre site WordPress voici un article dédié sur comment créer un site avec WordPress.  

Il est aussi préférable d’avoir des connaissances de certains langages informatiques qui vous permettront de faire fonctionner WordPress. 

HTML : vous permettra de structurer vos contenus dans les fichiers templates 

CSS : vous aidera pour la mise en forme des articles et le design de votre site 

PHP : vous permettra de comprendre et de savoir coder avec le langage utilisé par WordPress

Créer le dossier de votre thème 

Dans un premier temps vous aurez besoin d’un éditeur de code, pour créer les différents fichier de votre thème, en voici quelques un : 

Pour créer un thème wordpress, vous devez d’abord créer un nouveau dossier dans le répertoire WordPress qui se situe sur votre serveur : wp-content/themes (pour y accéder vous pouvez utiliser un client FTP). 

Nous vous conseillons d’utiliser un nom court pour l’identifier facilement. Attention, n’utilisez pas de caractères spéciaux, ni d’accents, ou d’espaces. Ainsi votre chemin d’accès sera plus simple, si vous nommez votre fichier “montheme” votre chemin d’accès ressemblera à : wp-content/themes/montheme. 

Au sein de ce dossier, vous devrez retrouvez trois fichiers indispensables pour le bon fonctionnement de votre site : 

  1. Fichier style css : pour configurer le design et l’ajout de règle de style pour votre site internet
  2. Fichier index.php : pour afficher le contenu de votre site 
  3. Fichier functions.php : pour ajouter des fonctionnalités WordPress dans votre thème

Créer un fichier style.css

Le premier fichier que vous allez créer est le fichier style.css. Il est nécessaire pour déclarer et configurer votre thème. Il est indispensable pour deux raisons : 

  • Il permet d’ajouter votre thème dans l’interface d’administration de WordPress pour qu’il soit reconnu par le CMS
  • Il vous permettra d’ajouter des règles de style pour la mise en forme de vos contenus.  

Vous devrez ajouter les lignes de codes suivantes pour que WordPress reconnaisse votre nouveau thème

/*

Theme Name: My thème

Theme URI: https://www.monsite.com/monsite

Author: [renseignez ici votre nom]

Author URI: https://www.monsite.com/monsite

Description: [décrivez ici votre thème en quelques mots]

Version: 1.0

*/

Ici, vous donnez certaines informations à WordPress tel que le nom de votre thème, l’auteur du thème, une description de celui-ci, et son numéro de version. 

Une fois que les premières lignes de déclarations sont saisies, vous pouvez renseigner le code CSS que vous désirez appliquer à votre thème. Ici, vous donnerez les informations concernant le style et le design de votre site WordPress tel que : la couleur d’arrière-plan, la police, la taille des textes, …

Voici un exemple du style de l’élément body : 

body {

  background: #FFFFFF;

  font-family: « Source Sans Pro »;

  color: #4b5157;

  margin: 0 auto;

}

Petit tips, vous pouvez déclarer d’autres feuilles de styles (fichier .css) afin de structurer le design de votre thème et ainsi en faciliter la maintenance. Pour cela vous devrez les déclarer dans votre fichier.php que nous évoquerons plus tard. 

Concevoir un fichier index.php

Comment fonctionne les templates WordPress 

Les thèmes WordPress utilisent des systèmes de templates particuliers, ils correspondent à des fichiers .php. Leurs noms permettent au CMS de savoir quel fichier doit être chargé selon le contexte de la page à afficher. 

C’est ce qu’on appelle la hiérarchie des templates. 

Pour afficher un contenu, WordPress aura toujours comme dernier recours l’utilisation du fichier index.php. 

Voici la raison pour laquelle vous devez au minimum créer votre fichier index.php. Vous avez la possibilité d’en créer d’autres si vous souhaitez utiliser d’autres modèles de page. 

Créer un template simple 

Nous vous conseillons de ne pas faire un template trop spécifique. Tenter de créer un template le plus générique possible avec un template principal et un template secondaire au départ. Si vos besoins évoluent au cours du temps vous pourrez renommer votre template par un autre plus adapté et effectuer quelques ajustements. 

Cette procédure vous évitera de dupliquer du code, et cela vous facilitera la maintenance de votre thème WordPress

Pour éviter de dupliquer du code inutilement, nous vous conseillons de suivre les bonnes pratiques en créant deux fichiers suivants : 

  • le fichier header.php : il doit contenir la fonction suivante : 

wp_head()

  • le fichier footer.php: il doit contenir la fonction suivante : 

wp_footer()

Ils seront appelés en haut et en bas de vos templates grâce aux fonctions get_header();et get_footer();. 

Ils sont essentiels pour le fonctionnement de votre thème et pour les futurs plugins que vous installerez. Ils chargent les feuilles de styles et les fichiers JavaScript de vos pages.

Activer votre thème WordPress

Vous avez créé les principaux fichiers .php et vos feuilles de style sont créées, il est donc temps d’activer votre thème. 

Ici vous devez vous rendre sur WordPress dans l’onglet Apparence puis dans l’onglet Thèmes. 

C’est ici que vous retrouverez tous les thèmes disponibles pour votre site, il ne vous restera plus qu’à cliquer sur “Activer”.

Activer-thème-responsive-wordpress

Si votre thème n’apparaît pas dans la liste, vérifiez que tous vos fichiers .php soient bien enregistrés dans le bon dossier wp-content/themes/mytheme. 

Enfin, dans le fichier style.css vos lignes de code de doivent pas contenir d’espace avant les deux points. N’hésitez pas à jeter un coup d’œil de ce côté là pour vous assurer que ce n’est pas le cas. 

Élaborer un fichier function.php

Une autre étape importante pour la création de votre thème WordPress responsive, est la création de votre fichier functions.php. Il permet d’ajouter des fonctionnalités à votre thème WordPress dont l’une des fonctionnalités principales est la création de votre menu. 

Créer un menu dans le fichier function.php

Pour concevoir une zone de menu dans WordPress vous devez ajouter l’extrait de code suivant dans votre fichier functions.php : 

function register_my_menu(){

  register_nav_menu( ‘main-menu’, ‘Menu principal’ );

}

add_action( ‘after_setup_theme’, ‘register_my_menu’ );

Ajouter le menu au fichier de votre template 

A présent, vous devez ajouter votre menu à votre fichier template. Ainsi, WordPress saura à quel moment il devra charger la zone et donc le menu associé à cette zone. 

Pour cela, il faut utiliser la fonction wp_nav_menu()et la mettre dans un élément  <nav> pour faciliter son intégration comme élément de navigation : 

<nav id= »navigation »>

<?php

wp_nav_menu(

  array(

    ‘theme_location’ => ‘main-menu’,

    ‘menu_id’ => ‘primary-menu’,

 )

);

?>

</nav>

Vous devez donc utiliser le morceau de code ci-dessus dans votre fichier header.php créé précédemment. Étant chargé sur toutes les pages de votre site, il sera parfaitement adapté pour déclarer votre zone de menu. 

La procédure est la même si vous souhaitez ajouter un menu de pied de page. Il faudra simplement veiller à déclarer votre zone de menu avec un nouveau nom unique. 

Enregistrer votre menu dans l’interface WordPress

Pour cela rendez-vous dans la rubrique Apparence de wordpress et cliquez sur l’onglet menu. 

Appuyez sur Créer le menu. Au sein de la colonne Pages, vous trouverez toute la liste des éléments dont vous disposez. Pour structurer votre Menu, il vous suffit de les glisser déposer dans l’ordre de votre choix pour constituer votre menu. 

Désormais vos éléments de menu sont ajoutés, il est nécessaire de les associer à la zone de menu que vous avez créé plutôt.  Vous devriez retrouver votre zone de menu à côté de la case “Afficher l’emplacement”.

Emplacement menu responsive WordPress

Cochez la case suivante correspondante puis enregistrez votre menu. 

Améliorer son thème avec d’autres fonctionnalités 

Enfin, vous pouvez ajouter d’autres lignes de code pour améliorer le style de votre thème et ajouter des fonctionnalités pour l’expérience utilisateur. 

Pour avoir un thème WordPress responsive, il faudra ajouter des morceaux de codes au sein de vos fichiers style.css pour que vos contenus s’adaptent à toutes les tailles d’écran. 

Nous avons une solution si vous ne souhaitez pas passer par toutes ces étapes qui peuvent être fastidieuses lorsque vous n’avez pas ou peu de connaissances en codage. 

Choisir un thème WordPress responsive 

Avoir un site WordPress responsive est devenu une norme depuis quelques années, les créateurs de thème WordPress se sont donc adaptés à cette nouvelle demande. 

Voici donc notre sélection de thèmes WordPress 100% responsive

Nous vous en avons déjà parlé, mais Divi est un thème WordPress qui peut s’adapter à toutes vos envies. Simple d’utilisation, ses fonctionnalités vous permettront d’adapter votre thème à toutes les tailles d’écran. 

Watson est aussi un thème WordPress responsive, il conviendra à toutes les personnes qui souhaitent créer un blog en ligne. Son design est simple et minimaliste.  

Flatsome est un thème WordPress e-commerce à la base, mais son créateur y a glissé un blog et des fonctionnalités pour créer un portfolio, c’est donc un thème versatile. 

Port est un thème polyvalent, son design minimaliste permettra de l’adapter à divers projets. Sa page d’accueil en particulier vous donnera l’occasion de faire de très beaux sites vitrine. 

Désormais vous avez toutes les clés pour créer un thème WordPress responsive, il ne vous reste plus qu’à choisir de quelle manière vous souhaitez le faire. 

Chez Neocamino nous vous proposons un service complet de création ou de refonte de site web, en allant même jusqu’à la rédaction de vos pages commerciales si vous ne souhaitez pas perdre de temps à vous en occuper. 

Nous vous proposons également un service de maintenance de site web afin d’assurer sa sécurité et prospérité. Déléguez-nous votre communication digitale et consacrez-vous à ce que vous faites de mieux !

Vous aimez cet article ? Partagez-le !

Si vous avez aimé cet article, retrouvez nos ressources associées :

👉 La checklist pour lancer votre site web !

Et nos autres articles sur le sujet :

Votre site est-il conforme au RGPD ?

Votre site est-il conforme au RGPD ?

Obligation légale qui touche toutes les entreprises, il est normal de se demander si votre site est conforme au RGPD ?  Ce règlement vise à protéger les données personnelles des citoyens de...

lire plus

checklist-site-web
CHECKLIST OFFERTE

Tous les essentiels pour lancer votre site web

Qu’attendez-vous pour passer à la prochaine étape ?

Bénéficiez d’un échange sur votre projet de création d'entreprise ou sur les résultats de votre plan d'actions digital.
30 minutes sans engagement avec un expert pour vous orienter vers les bonnes solutions