Comment rendre WordPress réactif

Comment créer un thème/modèle WordPress responsive ?

À cette époque, ceux qui n’ont pas utilisé WordPress pour créer un site Web n’osent pas dire qu’ils ont construit un site Web. Qu’est-ce que WordPress ? WordPress est le système de gestion de contenu de site Web (ou système de blog/blog) le plus célèbre au monde, appelé WP. Selon des enquêtes pertinentes, la part de marché mondiale de WordPress a atteint 48 % en 2015 et il continue d’être le champion mondial des systèmes de sites Web open source. Et il continue de croître rapidement... En ce qui concerne les CMS open source nationaux, seuls quelques-uns survivent réellement et se tiennent à jour. Les Dongyi, dedecms, phpcms, empirecms, phpwind, discuz, etc., autrefois puissants, peuvent-ils encore survivre ?

Outils/Matériaux

HTML5

CSS3

Navigateurs modernes, tels que : Chrome, Firefox, Edge, etc.

Recommandations associées : "Tutoriel WordPress"

Méthodes/étapes

1. (< ;head> ), ajoutez le code de requête suivant :

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

2 Ajoutez ensuite un élément de requête multimédia au fichier CSS, tel que :

@media screen and (max-width:480px) {
//当浏览器屏幕小于480px时，此代码块生效
}
@media screen and (min-width:481px) and (max-width:720px) {
//当浏览器屏幕大于480px小于720px时，此代码块生效
}
@media screen and (min-width:721px) and (max-width:1079px) {
//当浏览器屏幕大于721px小于1079px时，此代码块生效
}

Le. La plage peut être basée sur Modifiez-la vous-même en fonction de la situation réelle. OK, c'est la différence entre réactif et non réactif. Tant que vous connaissez le html+css, je pense que vous le maîtriserez bientôt. Cela ne semble-t-il pas très simple ?

3. Après avoir compris les points clés, nous pouvons commencer à créer des pages statiques réactives. Ensuite, placez simplement la page statique sur les fonctions et boucles liées à WordPress. Lorsque vous avez créé une page HTML statique, vous pouvez vous référer aux « Fonctions couramment utilisées dans le développement et la production de thèmes WordPress : openue.com/post/597 » pour créer des modèles.

Notes

Pendant le processus de conception, essayez d'éviter d'utiliser une largeur et une hauteur fixes pour les CSS, utilisez plutôt le pourcentage et utilisez rem au lieu de px pour les polices.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!