Nous commençons par examiner certains des travaux grognards que j'ai effectués dans les coulisses pour étoffer certaines choses qui devaient être faites. Comme ajouter le reste des appels à wp_list_pages () pour afficher le reste de la liste des extraits pour chaque catégorie. Et aussi l'ajout dans le CSS pour changer la couleur de la barre séparant les catégories et les listes d'extraits. Nous avons également modifié les survols des catégories pour éclaircir les couleurs au lieu de la bordure blanche muette que nous y avions temporairement. Littéralement, nous avons utilisé la lighten()fonction de Sass pour faire le travail à notre place.
Le but de ce screencast est cependant de styliser la vue pour un seul extrait. Si j'avais créé cette zone du site plus récemment, les extraits de code pourraient être un type de publication personnalisé (comme les captures d'écran d'une galerie unique), mais ils n'existaient pas lorsque j'ai commencé à le faire. En tant que tels, ils ne sont que des «pages» et utilisent tous un modèle de page personnalisé. Pas un gros problème, vraiment, surtout maintenant qu'avoir beaucoup de pages n'est pas un problème de performance.
Les pages d'extraits de code individuels ressembleront beaucoup aux articles de blog. La structure de grille standard 2/3 1/3 et une barre latérale normale. Il y a cependant quelques différences. Il existe une hiérarchie claire des extraits de code, par exemple
Accueil »Extraits de code» Catégorie d'extrait »Nom de l'extrait
C'est parfait pour la sous-navigation «barre noire» qui évolue sur ce site. Notre plugin Yoast SEO fournit une fonctionnalité de fil d'Ariane, donc c'est facile - il suffit d'appeler une fonction.
Une autre différence est que nous produisons the_modified_time()au lieu de la date de publication. De cette façon, les gens connaissent la dernière date à laquelle un extrait de code a été mis à jour, ce qui est plus pertinent que lors de sa publication. Cela me motive également à revoir régulièrement les extraits de code.
Nous continuons un peu à mettre à jour un ancien extrait de code juste pour le plaisir.
Nous terminons en écrivant un peu de JavaScript qui fera fonctionner nos vues de sous-catégories. Ces vues ressemblent essentiellement à notre page d'accueil Extraits de code, mais uniquement si vous vous trouvez dans / snippets / javascript /, les extraits de code JavaScript seront affichés par défaut et la catégorie JavaScript mise en surbrillance. Croyez-le ou non, juste quelques lignes de code JavaScript sournois de pointe d'URL qui devraient probablement être un extrait de code sur lui-même.