Utiliser des images lors de l'affichage d'une liste d'archives dans WordPress peut être très puissant. Cela peut augmenter l’attrait visuel de vos pages d’archives et de votre site dans son ensemble et vous aider à illustrer ce que représente votre site..

WordPress facilite les choses avec les images en vedette, vous permettant d'afficher l'image en vedette de chaque article lorsque vous la publiez via la boucle..

Ce didacticiel est la première d’une série en deux parties dans laquelle vous apprendrez à créer un fichier modèle pour afficher des images pour une archive de type de publication personnalisée et à styler cette page d’archive pour créer une grille d’images avec les titres de publication superposés lorsque l’utilisateur survole une image.

Dans cette première partie, vous apprendrez ce qui suit:

• Comment enregistrer un type de publication personnalisé à utiliser lors de la création de la page d'archive
• Comment coder la boucle pour afficher les images et les titres correctement
• Les paramètres et les classes que vous devez ajouter à l'image et au titre pour maximiser l'accessibilité et permettre d'ajouter du CSS pour styliser la grille d'images

Dans la partie suivante, vous apprendrez à coder le CSS pour afficher votre grille d’images avec l’effet de survol..

Ressources dont vous aurez besoin pour ce tutoriel

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 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..

Enregistrement du type de message personnalisé

La première étape consiste à enregistrer votre type de message personnalisé.animal'.

Dans le thème de votre enfant, créez un nouveau functions.php fichier et y ajouter ce qui suit:

  __ ('Animaux'), 'singular_name' => __ ('animal'), 'add_new' => __ ('Nouvel animal'), 'add_new_item' => __ ('Ajouter un nouvel animal'), 'edit_item' = > __ ('Edit animal'), 'new_item' => __ ('Nouvel animal'), 'view_item' => __ ('Voir l'animal'), 'search_items' => __ ('Recherche d'animaux'), 'not_found '=> __ (' Aucun animal trouvé '),' not_found_in_trash '=> __ (' Aucun animal trouvé à la corbeille '),); $ args = array ('labels' => $ labels, 'has_archive' => true, 'public' => true, 'hierarchical' => false, 'supports' => array ('titre', 'éditeur', ' extrait ',' custom-fields ',' thumbnail ',' attribut de page '),' taxonomies '=> array (' post_tag ',' category '),); register_post_type ('animal', $ args);  add_action ('init', 'wptp_create_post_type'); ?>

Cela enregistre le type de publication personnalisé à l'aide de deux paramètres:

• 'animal', le nom du type de message personnalisé
• $ args, le tableau d'arguments pour le type de publication personnalisé. Ceux-ci incluent des arguments de support, si le type de publication est hiérarchique (ce n'est pas le cas, donc se comporte comme une balise), si le type de publication contient une archive, ce qui doit être vrai pour que votre page d'archive fonctionne, et les libellés, définis comme un tableau utilisant étiquettes $.

La fonction permettant d’enregistrer le type de message personnalisé est ensuite associée à WordPress à l’aide du bouton 'init' crochet d’action, ce qui signifie qu’il s’exécute lors de l’initialisation de WordPress.

Sauvez votre functions.php fichier.

Le nouveau type de message sera maintenant affiché dans le menu d'administration de WordPress, comme indiqué dans la capture d'écran:

Cela fait, la prochaine étape consiste à ajouter des données. Ajoutez quelques animaux, avec une image sélectionnée et du texte factice pour chacun. Vous aurez alors une liste d'animaux:

Faire fonctionner l'URL de la liste d'archives

Avant de travailler sur le fichier de modèle pour répertorier les publications à partir de votre nouveau type de publication personnalisée, vous devez configurer vos liens permanents afin que vous puissiez facilement accéder à la page de votre site affichant les archives du nouveau type de publication personnalisée..

Dans l’écran Permaliens, modifiez les paramètres de permaliens pour que les "jolis permaliens" soient activés, en cliquant sur le bouton %après le nom% option. Cela signifie que vous pourrez facilement saisir l'URL de l'archive du type de publication..

Enregistrez vos modifications sur les permaliens.

Affichage de la page d'archive

Dans votre navigateur, tapez l'URL de votre site suivi de /animal pour afficher les archives. Dans le cas de mon site de démonstration, l’URL complète est http://rachelmccollin.co.uk/wptutsplus-image-archive/animal/. Cela affichera l'archive de votre type de message personnalisé:

Comme vous pouvez le constater, la page affiche pour le moment l'image, le titre et tout le contenu de chaque animal. Si vous faites défiler la page, vous les verrez tous listés.

La prochaine étape consistera à créer un fichier modèle pour afficher uniquement l'image et le titre de chaque animal..

Création d'un fichier de modèle pour l'archive de type de message personnalisé

Pour afficher correctement les animaux, vous allez créer un fichier modèle spécialement pour afficher les archives de ce type de publication personnalisé..

Ajout de balises d'inclusion et du titre de l'archive

Dans votre thème enfant, créez un nouveau fichier vierge appelé archive-animal.php.

Ajoutez le code pour appeler l'inclus - l'en-tête, le pied de page et la barre latérale, ainsi que les balises d'ouverture et de fermeture des éléments à afficher sur la page. Ces éléments sont cohérents avec d'autres fichiers modèles utilisant le thème Twenty Twelve et préservent le style du thème parent:

  
 
 // laisse de la place pour le titre de l'archive // ​​laisse de la place ici pour la boucle 
 
  

Ensuite, ajoutez le titre de l'archive qui s'affichera comme titre de la page. Cela va après l'ouverture 

 étiquette:

Cette utilise post_type_archive_title () pour afficher le nom du type de publication dont l'archive est affichée. Cela enveloppe ceci dans un Et un

balise pour préserver la cohérence avec le thème parent en termes de sémantique et de style.

Ajouter la boucle et la remplir avec du contenu

Ensuite, sous l'en-tête de l'archive, ajoutez le code de base de la boucle:

  // laisse de l'espace pour ajouter le contenu de chaque message 

Vous avez maintenant une boucle vide dans vos pages d’archives, mais elle n’a encore rien généré.

Ajoutez ce qui suit dans la boucle:

  // laisse de l'espace pour ajouter le contenu de chaque message 

Vous avez maintenant une boucle vide dans vos pages d’archives, mais elle n’a encore rien généré.

Ajoutez ce qui suit dans la boucle:

 
  "archive-image", 'alt' => trim (strip_tags ($ wp_postmeta -> _ wp_attachment_image_alt)),); ?> "> 

Cette utilise the_post_thumbnail () pour afficher l'image sélectionnée pour chaque poste (ou chaque animal). Les paramètres pour cela sont les suivants:

• 'la vignette' - la taille de l'image qui sera affichée, qui est la taille de la vignette
• $ attr - un tableau d'attributs: la classe du img élément en sortie du the_post_thumbnail () fonction, qui sera utilisé pour le style; et le 'alt' attribut, qui utilise strip_tags pour afficher alt attributs définis lors du téléchargement de l'image moins les balises HTML. Cette utilise $ wp_postmeta accéder aux métadonnées de l'image

Cette image est dans un lien vers le post permalink (">).

L'étape suivante consiste à ajouter le titre du message sous l'image. Faites ceci en ajoutant le code suivant sous le code pour afficher l’image sélectionnée mais au-dessus de la fermeture. étiquette:

 
">

Ceci ajoute le titre du message (c'est-à-dire le nom de l'animal) dans un autre lien vers le permalien du message, qui est à nouveau dans un h2 tag avec le titre-archive classe. L’ajout de cette classe facilitera l’apparition ultérieure du style et h2 La balise ajoute une sémantique au titre de l'article et est utile pour l'accessibilité..

Votre fichier de modèle complet contiendra désormais les éléments suivants:

  
 
  
  
   
  "archive-image", 'alt' => trim (strip_tags ($ wp_postmeta -> _ wp_attachment_image_alt)),); ?> "> 
">
 
  
 
  

Enregistrez votre fichier de modèle et revenez à la page d'archive de votre navigateur. Lorsque vous actualisez la page, vous constaterez que l'image et le titre sont maintenant affichés pour chaque message. De plus, le titre de la page est passé de 'Archives' à 'Animaux', ce qui est beaucoup plus utile. Voici à quoi ressemble la page d'archive:

Vous avez maintenant les images et les titres en place, mais ils sont affichés les uns sous les autres et il n'y a pas d'effet de survol. Dans la suite de ce didacticiel, je vais vous montrer comment ajouter le CSS, qui fera trois choses principales:

• Afficher les images dans une grille
• Masquer les titres
• Faire en sorte que les titres apparaissent lorsque l'utilisateur passe sa souris sur une image

Après cela, vous aurez une liste d’archives attrayante que vous pourrez utiliser pour tous les projets où les publications utilisent les images présentées..

---

Ressources utiles

Pages Codex:

• Thèmes pour enfants
• Hiérarchie des modèles
• La boucle
• Affichage des images en vedette avec the_post_thumbnail

Tutoriels:

• Création de thèmes enfants
• Le guide complet des types d'articles personnalisés
• Un guide du débutant pour la boucle
  
• Comment ajouter des images à votre thème

Code