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 :
- Qu’est-ce-qu’un thème WordPress responsive
- Créer le dossier de votre thème
- Créer un fichier style.css
- Concevoir un fichier index.php
- Activer votre thème WordPress
- Élaborer un fichier function.php
- Créer un menu dans le fichier function.php
- Améliorer son thème avec d’autres fonctionnalités
- 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
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 :
- Fichier style css : pour configurer le design et l’ajout de règle de style pour votre site internet
- Fichier index.php : pour afficher le contenu de votre site
- 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.
Créer les fichiers du header et du footer
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”.
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”.
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 !
Social Media Manager
