Créez des sites WordPress adaptés aux mobiles sans plugins

Les internautes du monde entier s'appuient de plus en plus sur la téléphonie mobileAccès au dispositifil est devenu essentiel de s'assurer que votre site web WordPress fonctionne correctement sur toutes les tailles d'écran. Bien qu'il existe de nombreuxplug-in (composant logiciel)peut aider à cela, mais ces plugins sont généralementAugmentation du temps de chargement du site web et de la complexité du code.

Cet article vous montrera comment créer un site web WordPress réellement adapté aux mobiles sans plugins, en personnalisant le codage et le CSS.

Pourquoi la convivialité mobile est-elle essentielle ?

Avant d'aborder les étapes spécifiques, il convient de comprendre pourquoi la convivialité mobile est cruciale pour les sites web modernes.

1. expérience utilisateurConception réactive : La conception réactive garantit que votre site WebUne expérience optimale sur tous les appareils.
2. Classement dans les moteurs de rechercheLes moteurs de recherche tels que Google indiquent clairement queLa convivialité mobile est un facteur important pour le classement dans les moteurs de recherche.
3. taux de conversionUn site mobile convivial est plus susceptible d'inciter les utilisateurs à une navigation plus approfondie, ce qui augmente la probabilité d'actions de conversion clés telles que les achats et les inscriptions.
4. tendances futuresL'environnement futur des réseaux se caractérisera parcentré sur l'appareil mobileLes sites qui ne sont pas optimisés risquent d'être éliminés.

Comprendre les principes de base d'un site web adapté aux mobiles

Avant d'aborder les étapes spécifiques de la mise en œuvre, nous devons d'abord comprendre ce qu'est un site web adapté aux mobiles. En voici quelques éléments clés :

1. Système de grille fluide: :Système de grille fluidePermettre à la présentation du site de varier en fonction de la taille de l'écranajustement automatique. Il est réactif au cœur de la conception et garantit que le contenu de la page s'affiche correctement sur différents appareils.
2. Imagerie flexibleLes images jouent un rôle important dans les pages web, et des paramètres d'image flexibles permettent de les afficher de manière appropriée sur différents écrans. Pour ce faire, on peutDéfinition de différentes résolutions et taillesCela permet d'éviter que les images ne deviennent trop volumineuses ou floues sur les appareils mobiles.
3. Demande de renseignements aux médiasLes requêtes média peuvent être basées sur les caractéristiques de l'appareil (telles que la taille ou la résolution de l'écran) pourAppliquer différents styles CSS. Permettre à votre site web deAdaptation à divers équipementsde l'ordinateur de bureau au smartphone.

Etapes pour créer un site web WordPress adapté aux mobiles sans plugins

Ensuite, nous verrons comment obtenir un design adapté aux mobiles pour votre site WordPress sans plugin.

Étape 1 : Vérifier la conception actuelle du site web

Avant d'apporter des modifications, vous devez savoir ce qui se trouve actuellement sur le site. Utilisez l'outilChrome DevToolspeut-êtreOutils de développement Mozilla FirefoxsuivantsondeLa mise en page, la taille des images et la structure de la grille du site.Identifier les domaines à amélioreret documenter les éléments de conception susceptibles de poser des problèmes.

Étape 2 : Créer ou modifier un thème WordPress

Pour rendre un site web adapté aux mobiles, il est nécessaire de modifier un thème existant ou de partir de zéro.Commencer à créer un nouveau sujet. Si vous n'êtes pas familiarisé avec le développement de thèmes WordPress, il est recommandé de commencer par un thème existant et d'y apporter des modifications.

Par exemple, nous pouvons utiliser le thème WordPress par défaut Twenty Twenty-One pour effectuer des modifications.

Dans le répertoire du thème WordPress (généralement situé dans le répertoire wp-content/themes/ ), créez un nouveau dossier et nommez-le pour votre thème personnalisé, par exemple vingt-et-unième-enfant.

Dans le dossier du nouveau thème personnalisé, certains fichiers du thème original doivent être copiés et modifiés. Il peut être nécessaire de copier style.cssetfunctions.phpainsi que des fichiers modèles (par exemple header.phpetfooter.php (etc.). Ces fichiers servent de base à l'élaboration de conceptions personnalisées et de modifications fonctionnelles.

existent style.css En haut du fichier, ajoutez des informations de base sur le thème enfant, telles que le nom du thème, le modèle, l'auteur, etc :

Code cssCopy
/*
 Nom du thème : Twenty Twenty-One Child
 Modèle : twentytwentyone
 Auteur : Your Name
 Description : Un thème enfant pour le thème Twenty Twenty-One.
 Version : 1.0
*/Version : 1.0

existent functions.php veillez à charger la feuille de style du thème parent afin d'hériter des styles du thème d'origine :

Code phpCopy
get('Version')
    ) ;
}
add_action('wp_enqueue_scripts', 'my_theme_enqueue_styles' ) ;

Étape 3 : Mise en place du système de maillage fluide

Le système de grille fluide est au cœur de la mise en œuvre du responsive design. En mettant en place une grille fluide, la mise en page du site peut s'adapter automatiquement à la taille de l'écran. Vous trouverez ci-dessous le code CSS de base que vous pouvez ajouter à la feuille de style de votre thème :

Copie du code CSS
body {
  font-family : Arial, sans-serif ; font-size : 16px ; font-size : 16px
  font-size : 16px ; line-height : 1.5 ; }
  line-height : 1.5 ;
  hauteur de ligne : 1.5 ; margin : 0 ;
  line-height : 1.5 ; margin : 0 ; padding : 0 ;
}

.container {
  max-width : 1280px ;
  margin : 0 auto ; padding : 0 20px ; } .container { max-width : 1280px ; }
  padding : 0 20px ;
}

.grid {
  display : grid ; grid-template-columns : repeat(12, 1fr) ; }
  grid-template-columns : repeat(12, 1fr) ; } .grid { display : grid ; grid-template-columns : repeat(12, 1fr) ; }
  grid ; grid-template-columns : repeat(12, 1fr) ; gap : 10px ; }
}

.grid-item {
  grid-column : span 4 ; }
}

Ce code définit un système de grille de base avec 12 colonnes et peut être adapté à vos besoins.colonnes du modèle de grillepeut être défini pour chaque colonne de la base de donnéesrapport de largeur(math.) genreécartest utilisé pour définir la valeur de l'attributespacement.

Étape 4 : Ajouter des images flexibles

Des images flexibles sont essentielles pour optimiser les affichages mobiles. Cela est possible grâce à l'utilisation desrcsetrépondre en chantanttaillesvous pouvez sélectionner différentes tailles d'image en fonction de la densité de l'écran de l'appareil. Voici un exemple de code :

htmlCopier le code<code><img src="image.jpg"
     alt="Description de l&#039;image"
     srcset="image.jpg 1x, image@2x.jpg 2x"
     sizes="(max-width: 768px) 50vw, 100vw"
     loading="lazy"
     style="width: 100%; height: auto; margin: 0 auto; display: block;">

Dans cet exemple, lesrcsetpermet au navigateur deSélection de la taille optimale de l'image(math.) genretaillesdéfinit la largeur de l'image en fonction de la largeur de l'appareilTaille de l'affichage.loading="lazy"Les propriétés peuventRetard dans le chargement des imagesjusqu'à ce que l'utilisateur fasse défiler l'image jusqu'à cette position, ce qui réduit le temps de chargement initial.

Étape 5 : Demande de renseignements sur les médias

Les requêtes de média permettent d'optimiser la conception réactive d'un site web en appliquant des styles différents en fonction des caractéristiques de l'appareil. Vous trouverez ci-dessous un exemple d'application des requêtes de média en CSS :

cssCopier le code

@media only screen and (max-width : 1.0) 800px) {
  .grid {
    grid-template-columns : repeat(6, 1fr) ; }
  }
}

@media only screen and (max-width : 600px) {
  .grid {
    grid-template-columns : repeat(2, 1fr) ; }
  }
}

Dans ce code, la requête média ajuste le nombre de colonnes de la grille en fonction de la largeur de l'écran de l'appareil. Lorsque la largeur de l'écran est inférieure à800 pixelsUne fois cette opération effectuée, la grille passera deRéduction de 12 à 6 colonneset lorsque la largeur de l'écran est inférieure à600 pixelsLorsque la grille sera plusRéduit à 2 colonnes. Cette adaptabilité garantit que votre contenu s'affiche sous la meilleure forme possible sur tous les appareils.

Étape 6 : Tester et optimiser le site web

Après avoir effectué toutes les étapes précédentes, testez et optimisez votre site web à l'aide de différentes méthodes.Appareils et navigateurs pour tester la réactivité du site webLe site web doit être testé et vérifié pour s'assurer que toutes les fonctionnalités fonctionnent correctement. En fonction des résultats des tests, il peut être nécessaire d'ajuster le style CSS ou la structure HTML afin de garantir une expérience optimale pour l'utilisateur.

Conseils et astuces supplémentaires

1. Utiliser le préprocesseur CSS: Envisagez d'utiliserPréprocesseurs CSS tels que Sass ou Lesspour écrire un code plus efficace et modulaire. Ces outils peuvent vous aider à gérer des fichiers CSS complexes et à rendre le code plus facile à maintenir.
2. Une conception simpleLa conception réactive : En conception réactive, le maintien d'un design épuré permet non seulement d'améliorer l'expérience de l'utilisateur, mais aussi d'accélérer le chargement.
3. Mises à jour et maintenance régulièresLa conception réactive n'est pas gravée dans le marbre, et vous devez régulièrement vérifier et mettre à jour votre code pour vous assurer que votre site web est toujours le plus beau possible.
4. Prévisualisation en direct à l'aide d'outils de développementUtilisation : UtilisationChrome DevToolspeut-êtreFirefox Developer EditionL'exécution d'une prévisualisation en direct peut vous aider à écrire du code instantanément tout enVoir l'effet des modifications.

rendre un verdict

La création d'un site web WordPress adapté aux mobiles ne doit pas nécessairement s'appuyer sur des plugins. En utilisant des techniques frontales de base telles que les systèmes de grille fluides, les images flexibles, les requêtes média et autres, il est possible d'optimiser efficacement un site web pour différents appareils et tailles d'écran.

Pour ceux qui souhaitent apprendre et maîtriser ces techniques en profondeur, la Constructeur de site web autodidacte WP Vous pouvez apprendre à créer et à optimiser un site web pour les appareils mobiles en partant de zéro, en acquérant un ensemble complet de connaissances, des concepts de base aux techniques avancées.

Contactez nous
Vous n'arrivez pas à lire le tutoriel ? Contactez-nous pour une réponse gratuite ! Aide gratuite pour les sites personnels et les sites de petites entreprises !	Service clientèle WeChat
① Tel : 020-2206-9892
② QQ咨询：1025174874
(iii) Courriel : info@361sale.com
④ Horaires de travail : du lundi au vendredi, de 9h30 à 18h30, jours fériés.