Share
La construction de thèmes est au cœur de WordPress. C'est la technique que vous utilisez pour créer des sites Web sur mesure pour vous-même ou vos clients. C'est une compétence essentielle pour quiconque souhaite concevoir et développer avec WordPress..
De plus en plus de thèmes WordPress sont réactifs: ils utilisent les requêtes de médias CSS pour s’adapter à différentes largeurs d’écran, adaptent la mise en page et apportent des modifications de conception et d’interface afin de rendre tout site créé à l’aide du thème plus lisible et interactif tailles d'écran.
Dans ce tutoriel, je vais vous montrer comment construire un thème Word First Mobile First, qui commence par le style des plus petits écrans et fonctionne à la hausse..
Dans ce tutoriel, je vais prendre un thème WordPress avec un style minimal, puis le styler pour le rendre mobile en premier. La conception finale sera très simple: l’idée est de couvrir les éléments constitutifs du contenu et de la mise en page. Vous pouvez ensuite ajouter vos propres éléments de design si vous le souhaitez..
Pour suivre les étapes de ce tutoriel, vous aurez besoin des éléments suivants:
Je suppose que vous êtes déjà familiarisé avec l'installation et l'utilisation de WordPress. Je vais travailler sur une installation WordPress à distance
et fournir des liens au fur et à mesure.
Si vous ne travaillez pas sur votre propre thème, vous aurez également besoin du code de départ du didacticiel. Vous pouvez voir mon thème sur http://rachelmccollin.co.uk/nettuts-wpresponsive-tutorial/ et télécharger le code du thème à différentes étapes de son développement à partir de xxx [à ajouter en fonction du système nettuts + downloads].
Mobile First est un terme inventé par Luke Wroblewski. Il fait référence à la
stratégie de changer la façon dont nous concevons les sites Web et les thèmes. Au lieu de commencer avec une conception de bureau et de l'ajuster ensuite pour les appareils mobiles, nous travaillons dans l'autre sens: nous commençons par concevoir et coder pour les appareils mobiles, puis nous ajoutons ce qui est nécessaire pour les écrans plus grands. Cela présente quelques avantages:
Un style minimal est appliqué au thème de départ et aucun style de mise en page n’est ajouté pour le moment. C’est ce qui sera ajouté à mesure que nous suivrons le didacticiel..
Les éléments inclus dans le thème sont indiqués ci-dessous:
Actuellement, le thème ressemble à ceci sur un smartphone (c'est-à-dire à une taille d'écran de 320 x 480px):
Comme je n’ai encore appliqué aucune largeur, le site devrait redimensionner pour des écrans plus petits, mais ce n’est pas le cas, car le smartphone l’affiche comme s'il faisait 960 pixels de large. La première chose à faire est de dire aux smartphones d'afficher le site à la largeur réelle de l'écran..
Pour que les smartphones se comportent bien en ce qui concerne la largeur de l'écran, j'ajoute une ligne dans le section dans header.php, comme suit:
Cela indique aux smartphones d'afficher la page à la largeur de l'écran du périphérique plutôt que de créer une fenêtre d'affichage virtuelle de 960 pixels de large, qui constitue le comportement par défaut..
Maintenant, le thème ressemble à ceci sur un petit écran:
Si vous avez déjà créé des feuilles de style responsive mais pas celles de Mobile First, ce sera une révélation. Vous souvenez-vous de tout le style supplémentaire que vous avez ajouté à vos requêtes multimédia pour les petits écrans? Vous en aurez besoin de très peu, car une page avec un style de mise en page minimal a déjà meilleure apparence sur mobile que sur le bureau, comme vous pouvez le voir sur cette capture d'écran prise à 1024 pixels de large:
Mais je dois encore ajouter un style de mise en page pour les petits écrans, ce qui est la prochaine étape.
Je commencerai par ajouter des largeurs et des flotteurs pour les éléments principaux, afin de s’assurer qu’ils s’étendent sur l’écran. J'ajoute quelques largeurs et un clarifier les deux déclaration aux éléments concernés:
en-tête, nav.main, .container, .content, .sidebar, footer width: 100%; clarifier les deux;
Ensuite, pour éviter que le design ne soit coincé dans le petit écran, je vais ajouter du rembourrage à certains éléments:
en-tête, nav.main, .container, footer padding: 10px;
Notez que ce sont les seules valeurs horizontales que je définirai en pixels, et je le fais parce que je ne veux pas que le remplissage devienne trop grand à mesure que la taille de l'écran augmente.
Maintenant, le site semble moins encombré et les principaux éléments sont affichés l'un en dessous de l'autre:
Ensuite, je vais ranger les zones de widgets et améliorer la navigation.
La navigation doit s’étendre sur la largeur de l’écran et je voudrais centrer chaque élément de menu. Je vais donc ajouter un peu de style au menu:
nav.main background: # 3394bf; débordement: auto; text-align: center;
Cela me donne un menu beaucoup plus intelligent:
Les zones de widgets sont toutes assez proches les unes des autres et il est difficile de voir où l’un se termine et où l’autre commence. J'ajouterai quelques bordures et un rembourrage pour résoudre ce problème
.barre latérale .widget padding: 10px 0; border-top: 1px solid # 3394bf;
Ensuite, les widgets de pied de page. Je vais faire quelque chose de semblable à eux aussi:
footer .widget padding: 10px 0; border-top: 1px solid #fff;
Cela ajoute une certaine séparation entre mes widgets:
J'ai maintenant une mise en page simple pour mon thème sur de petits écrans, avec quelques couleurs, bordures, marges et rembourrages pour vous aider. Je n’ajouterai aucun style supplémentaire ici, car cela pourrait ralentir le thème sur les appareils mobiles et je ne pense pas que ce soit toujours nécessaire sur les petits écrans. Donc, la prochaine étape consiste à commencer à créer des requêtes multimédia.
Pour ce thème, je vais cibler trois tailles d'écran supplémentaires:
Vous avez peut-être remarqué que mes requêtes multimédia ne sont pas toutes basées sur la largeur d'un périphérique spécifique. En effet, à mesure que la gamme de périphériques et la largeur d’écran s’élargissent, le ciblage de périphériques spécifiques devient moins fiable que le paramétrage des requêtes multimédia au moment où la présentation en profite. J'ai testé la mise en page en redimensionnant la fenêtre de mon navigateur. À 600px large, elle ressemble à ceci:
À mon avis, la conception semble fausse à cette largeur et peut bénéficier de certains changements de disposition.
Je commence donc par ajouter mes requêtes multimédia à la fin de la feuille de style:
/ * tablettes - portrait * / écran @media et (min-largeur: 600px) / * tablettes - paysage * / écran @media et (min-largeur: 800px) / * ordinateurs de bureau * / @ écran multimédia et ( min-width: 1025px)
Notez que j'ai utilisé largeur min, ne pas largeur maximale comme vous le feriez si vous dessiniez d'abord le bureau et écrivez des requêtes multimédia pour des écrans plus petits.
Ensuite, je passe au style pour les tablettes.
Je souhaite améliorer ma mise en page afin de mieux utiliser l'espace écran sur ces écrans plus grands, et j'ajouterai également des dégradés CSS pour affiner le design..
Tout d'abord, la mise en page. Dans ma requête multimédia pour les écrans de 600 pixels et plus, j'ajoute:
/ * layout - zones de widget côte à côte * / footer débordement: auto; .sidebar .widget, footer apart float: left; largeur: 49%; marge droite: 2%; .sidebar .widget: nth-child (pair), pied de page de côté: nth-child (pair) margin-right: 0;
Cela ajoute des flottants et quelques marges pour mieux utiliser la largeur de l'écran:
Je vais maintenant modifier la navigation, car la mise en page actuelle laisse beaucoup d’espace vide à côté de chaque élément et prend beaucoup de place. J'ajoute le style suivant pour créer une barre de navigation horizontale:
/ * navigation - place les éléments les uns à côté des autres * / nav.main text-align: left; rembourrage: 0 10px; nav.main li float: left; marge: 0; nav.main li a padding: 0 20px;
Je vais aussi ajouter un dégradé au menu pour cette taille d'écran et plus:
nav.main, nav.main a background: # 183c5b; / * Anciens navigateurs * / arrière-plan: -moz-linear-gradient (en haut, # 183c5b 0%, # 3394bf 100%); / * FF3.6 + * / background: -webkit-gradient (linéaire, gauche en haut, gauche en bas, couleur-stop (0%, # 183c5b), couleur-stop (100%, # 3394bf)); / * Chrome, Safari4 + * / background: -webkit-linear-gradient (haut, # 183c5b 0%, # 3394bf 100%); / * Chrome10 +, Safari5.1 + * / arrière-plan: -o-linear-gradient (haut, # 183c5b 0%, # 3394bf 100%); / * Opera 11.10+ * / background: -ms-linear-gradient (haut, # 183c5b 0%, # 3394bf 100%); / * IE10 + * / background: linéaire-dégradé (haut, # 183c5b 0%, # 3394bf 100%); / * W3C * /
En fonction des appareils et des navigateurs que je cible, je peux omettre certains de ces préfixes de navigateur, mais je les ai laissés à d'autres utilisateurs de mon thème..
Ainsi, j'ai maintenant une mise en page améliorée pour les tablettes en orientation portrait, comme le montre la capture d'écran:
Je ne ferai qu'un changement pour les écrans de cette largeur: je déplacerai la barre latérale à droite du contenu, car le contenu a l'air un peu étiré s'il couvre tout l'écran. Pour ce faire, j'ajoute les éléments suivants dans le ciblage de la requête multimédia largeur min de 800px:
.contenu largeur: 65%; float: gauche; .sidebar width: 33%; Flotter à droite; clair: droit; .sidebar .widget width: 100%; float: aucun; .sidebar .widget: premier-enfant border-top: none;
Cela fait quelques choses:
Accentsconagua
clair propriété pour la mise en pagebordure supérieure à partir du premier widget, qui n'en a plus besoinLe thème ressemble maintenant à ceci sur une tablette en mode paysage:
Si j'avais construit mon thème responsive de manière traditionnelle, en commençant par le bureau, je travaillerais d'abord sur cette taille d'écran, mais ici, je travaille avec le dernier. Vous avez peut-être déjà remarqué que cela rend les choses très efficaces. D'après mon expérience, la suppression du style de bureau dans les requêtes multimédia destinées aux mobiles demande beaucoup plus de travail que de peaufiner ma présentation de mobile pour le bureau..
Je vais ajuster la disposition du pied de page pour avoir les quatre zones de widget de pied de page côte à côte et ajouter une image d'arrière-plan à l'en-tête. Cette image n'est pas cruciale pour le contenu mais est là pour la décoration, donc je suis à l'aise avec le fait que ce n'est pas dans mon balisage.
Tout d'abord, la mise en page. En plus d’ajuster la disposition du pied de page, je vais ajouter un largeur maximale valeur à la corps tag pour éviter d’étirer la mise en page sur toute la largeur d’écrans très larges:
corps largeur: 95%; largeur maximale: 960px; marge: 0 auto; footer apart float: left; largeur: 23,5%; marge droite: 2%; footer apart: nth-child (pair) margin-right: 2%; footer apart.fourth margin-right: 0;
Le style ci-dessus est utilisé dans la requête multimédia pour les écrans avec largeur min de 1025px, et fait ce qui suit:
largeur maximale au corpsde côté éléments dans le pied de page.Quatrième), réduit sa marge à 0. J'ai délibérément utilisé une classe ici au lieu de nième enfant car j'ai besoin que cela fonctionne sur plusieurs navigateursAlors, à quoi ressemble mon thème sur le bureau?
Pas mal. Enfin, je vais ajouter une image de fond à mon en-tête..
header background: URL (images / banner-image.jpg) centre bas non-répétition; rembourrage en bas: 210px;
Cela ajoute mon image en tant qu'arrière-plan avec un rembourrage pour lui laisser de l'espace:
L'avantage d'utiliser cette approche est que cette image ne sera téléchargée que par des ordinateurs de bureau. Etant donné que ce n'est pas dans le style principal ni dans les requêtes multimédia pour les plus petits périphériques, cela ne les ralentira pas. L'utilisation d'images en tant qu'arrière-plan présente toutefois des inconvénients, en particulier en ce qui concerne l'accessibilité. Il est donc important d'utiliser cette technique uniquement lorsque l'image est uniquement conçue pour la conception et ne fait pas partie du contenu. Sinon, j'aurais pu ajouter une version plus petite de l'image dans mon balisage et utiliser CSS pour masquer cette image et afficher une version plus grande de la même image en tant qu'arrière-plan pour les écrans plus grands..
J'ai maintenant un thème réactif, Mobile First. En commençant par de petits écrans et en remontant, j'ai réduit la quantité de code nécessaire pour créer mon design réactif et j'ai pu m'assurer qu'une grande image ne soit pas envoyée aux appareils mobiles..
Alors que de plus en plus de développeurs et de propriétaires de sites exigent que leurs sites soient réactifs, pouvoir créer des thèmes WordPress réactifs deviendra une compétence inestimable. Dans ce tutoriel, j'ai montré que le processus n'était pas nécessairement fastidieux et ne devait pas prendre trop de temps. Bien sûr, vous pouvez aller plus loin dans le processus et ajouter du contenu spécifique au mobile ou un style supplémentaire ciblant des appareils spécifiques, mais c'est quelque chose de différent pour un autre jour.!
