Share
Dans la première partie de ce didacticiel, vous avez appris à créer un fichier de modèle pour un type d'article personnalisé afin d'afficher les images et les titres présentés pour chaque article. Vous avez enregistré un type de publication 'animal' personnalisé et créé un fichier appelé archive-animal.php afficher une archive d'animaux.
Dans ce didacticiel, vous apprendrez le code CSS nécessaire pour ajouter une disposition de grille aux images et superposer des titres de publication sur les images. Vous apprendrez ensuite comment ajouter un effet de survol pour que le nom de l'animal n'apparaisse que lorsque l'utilisateur survole sa souris avec la souris..
Ce tutoriel utilise un thème enfant avec le thème Twenty Twelve comme parent. Vous aurez besoin d'une installation WordPress avec ce thème installé (il devrait être installé par défaut). Si vous ne savez pas comment configurer un thème enfant, consultez les instructions du Codex WordPress..
Vous aurez également besoin d'un éditeur de code avec accès FTP à votre site, sauf si vous développez localement, auquel cas vous n'avez pas besoin de FTP..
Vous aurez besoin du thème enfant créé dans la partie 1 de ce didacticiel, avec le archive-animal.php fichier modèle.
Vous pouvez télécharger l'ensemble de codes, y compris les fichiers de thème enfant, à l'aide du lien de téléchargement ci-dessus..
La page d'archive que vous démarrez affiche l'image et le titre de chaque message, comme indiqué sur la capture d'écran. Dans cette partie du didacticiel, vous n'avez pas du tout besoin de modifier la page d'archivage, mais simplement la feuille de style du thème..
Pour disposer les images dans une grille, vous devez utiliser des flottants. Ouvrez la feuille de style de votre thème et ajoutez ce qui suit:
.post-type-archive-animal article.entry-content position: relative; float: gauche; clair: aucun; marge: 10px;
Ce CSS cible les archives des animaux en utilisant .post-type-archive-animal, une classe que WordPress applique à la corps élément parce que le thème Twenty Twelve utilise le body_class () fonction pour assigner des classes à cet élément.
Il supprime tous les paramètres clairs pour le article élément et ajoute un float et une marge pour la mise en page.
Vous allez maintenant avoir vos annonces dans une grille:
L'étape suivante consiste à positionner le titre de chaque message de manière à ce qu'il soit superposé à l'image, puis à ajouter un arrière-plan semi-opaque pour améliorer la lisibilité..
Sous le CSS que vous avez déjà ajouté, ajoutez ce qui suit:
/ * style pour ajouter une superposition d'image et un fond opaque * / .post-type-archive-animal .entry-content img position: relative; débordement caché; fond: transparent; float: gauche; .post-type-archive-animal .archive-title position: absolute; text-align: center; gauche: 0; en bas: 0; largeur: 140px; hauteur: 70px; arrière-plan: rgba (255, 255, 255, 0,5); remplissage: 50px 5px 30px 5px; filtre: alpha (opacité = 50);
Cela fait quelques choses. Tout d'abord, sur le .contenu d'entrée img élément qu'il ajoute position: relative de sorte que le positionnement absolu travaillera pour la .titre-archive élément contenu dans celui-ci, ainsi que l'ajout d'un float qui assure le bon fonctionnement de la mise en page.
Ensuite, pour le .titre-archive élément, il ajoute un positionnement absolu et met en place en utilisant la la gauche et droite valeurs. Il ajoute la largeur, la hauteur et le rembourrage, ce qui ajoute jusqu'à 150 pixels sur 150 pixels, la taille des images miniatures de ce thème. Enfin, il ajoute un fond semi-opaque en utilisant rgba, avec un repli pour IE en utilisant filtre: alpha (opacité = 50).
Le texte est maintenant superposé aux images sur un fond semi-opaque:
Vous pouvez décider que vous êtes satisfait de la page d'archive telle qu'elle est. Dans certains cas, il est préférable que les titres soient constamment visibles. Toutefois, si vous souhaitez que les images aient une priorité plus élevée et soient visibles sans texte ni arrière-plan les masquant lors du premier chargement de la page, vous pouvez ajouter un effet de survol en masquant le texte jusqu'à ce que l'utilisateur place la souris sur une image..
Pour ce faire, vous devez modifier le style de la .titre-archive classe et ajouter un style supplémentaire pour la :flotter Etat comme suit:
/ * style pour ajouter l'effet de survol * / .post-type-archive-animal .archive-title position: absolute; text-align: center; gauche: 0; en bas: 0; largeur: 140px; hauteur: 70px; opacité: 0; remplissage: 50px 5px 30px 5px; .post-type-archive-animal .archive-titre: survol, .post-type-archive-animal .archive-titre a: hover display: block; arrière-plan: rgba (255, 255, 255, 0,5); -moz-opacité: 0,7; filtre: alpha (opacité = 50); opacité: 1;
Ceci fournit une version légèrement différente du style pour le .titre-archive élément, avec opacité mis à 0. Le positionnement, le remplissage et la largeur sont exactement les mêmes que ceux que vous avez ajoutés précédemment pour l'effet de superposition.
Il cible ensuite le titre et les liens qu'il contient à l'état de survol, et ajoute un arrière-plan et une opacité à ceux-ci. Ces paramètres sont similaires à ceux que vous avez ajoutés précédemment lors de l'ajout d'un arrière-plan semi-opaque aux titres, mais maintenant cet arrière-plan (et le titre lui-même) n'apparaissent que lorsque l'utilisateur survole la souris avec la souris sur une image..
Lorsque la page d'archive est chargée pour la première fois, les images apparaissent sans aucun texte superposé:
Lorsque l'utilisateur passe la souris sur l'une de ces images, le titre apparaît:
Vous avez maintenant une belle page d'archive utilisant une grille d'images avec un effet de survol pour le texte.
Dans ces deux tutoriels, vous avez appris à:
Le code requis pour cela est relativement simple et compatible avec les principaux navigateurs, y compris les anciennes versions de IE..
Pages Codex:
Accentsconagua
the_post_thumbnailTutoriels:
Ressources CSS:
