Nous avons maintenant une conception Photoshop à partir de laquelle travailler pour la page d'accueil de la zone Snippets. Il est beaucoup plus facile à parcourir qu'avant, mais conserve l'esprit arc-en-ciel qu'il avait auparavant. Nous pouvons maintenant nous lancer dans sa création dans nos modèles WordPress. Écrire tout le HTML et PHP et CSS et VOUS CONNAISSEZ LE DRILL!
La première étape consiste à parcourir notre en-tête personnalisé que nous avions prêt à utiliser dans notre conception statique. Cela signifie changer un peu de HTML pour avoir les bons éléments wrapper. Cela signifie également s'assurer que la logique conditionnelle dans l'en-tête est en place pour charger le CSS spécifique à cette zone est bonne. Cela me fait toujours penser à la règle 1, 2 ou 3 que j'ai pour les fichiers CSS et les fichiers JavaScript sur un site Web donné. CSS-Tricks est un exemple parfait de site Web «2» où nous avons des styles globaux et un CSS pour chaque section spéciale du site où il a un peu de style unique. Cette disposition d'extraits de code est certainement unique.
Pour obtenir toute la sortie de cette page dont nous avons besoin, nous utilisons à nouveau un tas d'appels à wp_list_pages (). Nous parlons de la façon dont cela pourrait être problématique parce que c'est un appel tellement intensif et que nous avons eu des problèmes avec lui dans le passé lorsque nous avons créé la zone Almanach. Cependant, puisque nous avons augmenté notre utilisation de la mémoire et que nous utilisons la mise en cache, ce n'est pas un gros problème.
Nous terminons le screencast avec tout ce dont nous avons besoin en sortie sur la page et une configuration de grille très basique. Maintenant, nous pouvons passer à la faire ressembler à notre maquette et finalement ajouter les interactions.