Comment créer une grille d'affichage de miniatures de messages dans les thèmes WordPress

Lors de la création de conceptions de sites WordPress, avez-vous déjà eu envie de créer une grille d'affichage de messages? La disposition de la grille convient parfaitement aux sites centrés sur les médias tels que notre galerie WordPress ou un autre site de type vitrine. Les frameworks thématiques comme Genesis ont déjà un système Grid Loop pré-construit. Toutefois, si vous essayez d’afficher une grille dans votre thème WordPress personnalisé, nous sommes là pour vous aider. Dans cet article, nous allons vous montrer comment créer un affichage en boucle de grille des miniatures de publication dans votre thème WordPress..

Remarque: vous devez avoir une bonne compréhension de CSS et du fonctionnement de la boucle WordPress..

Avant de commencer, examinons ce que nous essayons d'accomplir:

Si vous remarquez, les articles sur cette page sont affichés dans une grille. Il y a une bordure sur les poteaux du côté gauche, mais pas du côté droit. Avec une boucle de publication normale, toutes les publications suivent le même style. Vous aurez donc une bordure droite sur les deux publications, ce qui pourrait paraître bizarre. Notez également que l'espacement est assez symétrique. Ce qui, encore une fois, n’est pas possible avec la boucle normale. Maintenant que vous pouvez voir ce que nous essayons d'accomplir, examinons comment le faire..

La première chose à faire est de vous assurer que les miniatures des publications WordPress sont activées dans votre thème. Vous devez également réfléchir à la façon dont vous souhaitez redimensionner vos images WordPress, car vous en aurez besoin..

Une fois que vous avez configuré les vignettes et les tailles, commençons. Permet de configurer nos requêtes de boucle:

Le code ci-dessus semble assez simple car nous avons fait des commentaires en ligne. Une chose que vous auriez probablement besoin d’éditer est la variable posts_per_page qui vous convient. Vous pouvez également ajouter d'autres paramètres de requête si vous le souhaitez. Maintenant que nous avons démarré la boucle, voyons comment nous voulons afficher les messages qu'elle contient..

Nous commençons le code en vérifiant si le compteur est 1, ce qui signifie afficher notre grille de gauche. Nous entrons simplement et commençons une division avec une classe css personnalisée «griditemleft». À l'intérieur, nous avons ajouté la vignette du message et son titre. Vous pouvez ajouter ou soustraire des éléments de la boucle (extraits, dates, informations sur l'auteur, nombre de commentaires, etc.). Remarque: dans nos vignettes, nous appelons une taille d'image supplémentaire. Vous devrez probablement remplacer le nom de la taille par votre propre taille que vous avez créée..

Après la première grille, nous avons ajouté un elseif qui cherche à savoir si le compteur $ correspond au nombre spécifié dans nos grilles $ (ce qui devrait être le cas car nous serons au deuxième post). Si le compteur correspond, alors nous pouvons afficher notre grille de droite, qui commence par une classe CSS personnalisée «griditemright». Avis après la fermeture de la grille griditemright, nous ajoutons une classe claire. Nous expliquerons cela quand nous arriverons à la partie CSS.

Une fois la boucle terminée, nous remettons le compteur à 0 afin qu’il puisse recommencer à la ligne suivante..

Nous pouvons simplement terminer la boucle que nous avons commencée en ajoutant ce code:

Le code ci-dessus continue essentiellement le compteur jusqu'à atteindre la limite spécifiée dans notre variable query_post. La raison pour laquelle nous n'avons pas ajouté le code postal de navigation ci-dessus est que beaucoup de gens utilisent un plugin ou une méthode d'affichage différente pour cela. Nous laissons donc le champ libre à vous de décider vous-même.

Donc, notre code de boucle final ressemblera à ceci:

Maintenant que le code PHP est prêt, voyons comment nous allons le styler.

Notre sortie par défaut ressemblerait à ceci:

    Post Image 
Titre de l'article
    Post Image 
Titre de l'article
    

Voici les classes que vous devez modifier:

 #gridcontainer margin: 20px 0; largeur: 100%;  #gridcontainer h2 a color: # 77787a; taille de police: 13px; #gridcontainer .griditemleft float: left; largeur: 278px; margin: 0 40px 40px 0; #gridcontainer .griditemright float: left; width: 278px; #gridcontainer .postimage margin: 0 0 10px 0; 

Nous espérons que ce tutoriel vous orientera dans la bonne direction pour créer un affichage en boucle de grille pour vos publications WordPress..