Création de votre propre modèle de page de galerie d'images dans WordPress

Aujourd'hui, je vais vous expliquer comment créer un modèle personnalisé pour les pages "Galerie" dans WordPress. Je me souviens que par le passé, je voulais implémenter une galerie dans mon thème et que les options me frustraient. La galerie intégrée à WordPress fonctionne bien, mais ne convient pas tout à fait à la facture la plupart du temps. De plus, les plugins comme la galerie NexGen sont souvent plus que ce dont vous avez besoin ou envie. Je vais vous montrer à quel point il est facile de créer une page de modèle de galerie que vous pouvez facilement modifier et modifier pour les futurs thèmes ou versions..

Vue d'ensemble

À travers le tutoriel, je vais vous montrer comment créer un modèle de galerie sur le thème inclus dans WordPress, TwentyEleven. Vous pouvez utiliser n'importe quel thème, mais pour cet exemple, j'utilise TwentyEleven.

Étape 1: dupliquez le modèle de page existant.

Allez dans le répertoire du thème, wp-content / themes / theme auquel vous souhaitez ajouter le modèle de galerie. Trouver page.php et copier et coller et renommer en template-gallery.php. Pour les modèles personnalisés, j'aime bien ajouter le préfixe 'modèle-' car cela facilite la recherche..

Étape 2 Définir le modèle de galerie

WordPress reconnaît les définitions de modèles dans l'en-tête des fichiers de modèles de thèmes. Pour définir le modèle, ajoutez un commentaire PHP comme dans l'exemple ci-dessous. Pour ce faire, ouvrez le template-gallery.php que vous venez de créer et ajoutez le bloc de commentaires spécifiant le nom du modèle.

http://codex.wordpress.org/Theme_Development#Custom_Page_Templates

Étape 3 Modifier le modèle pour charger les images de page

WordPress traite les pièces jointes aux pages sous forme de publications post_type - pièce jointe avec la page en tant que parent. WordPress a une fonction intégrée pour interroger les publications qui sont les enfants d'une page spécifique post / post_type. get_children (); accepte toutes sortes de paramètres pour extraire le contenu des enfants associé à un parent. Consultez la documentation sur http://codex.wordpress.org/Function_Reference/get_children. Cette fonction WordPress nous permet de facilement extraire des pièces jointes pour une page spécifique.

Pour notre galerie, nous voulons que les images apparaissent avant le contenu. Nous allons donc charger les images de page dans la boucle de page, mais avant le contenu. Pour TwentyEleven, vous pouvez placer le fragment juste en dessous . Dans d'autres thèmes, vous pouvez insérer le code dans la boucle ci-dessus . Découvrez le code ci-dessous pour voir comment get_children ($ args); est mis en œuvre et lisez l'explication après.

  -1, // Utiliser -1 charge tous les messages 'orderby' => 'menu_order', // Ceci garantit que les images sont dans l'ordre défini dans la page Gestionnaire de médias 'order' => 'ASC', 'post_mime_type' => 'image ', // Assurez-vous qu'il ne tire pas d'autres ressources, telles que des vidéos' post_parent '=> $ post-> ID, // Partie importante - garantit le chargement des images associées' post_status '=> null,' post_type '=> 'attachement' ); $ images = get_children ($ args); // continué ci-dessous…?>

Explication de $ args

'numéros' Nous pouvons définir le nombre d'images extraites par la fonction. Pour interroger toutes les images, utilisez -1
'commandé par' Nous pourrions commander par titre ou par date ou par une autre option, mais l'avantage de 'menu_order' est que l'ordre dans le gestionnaire de médias pour la page correspond à l'ordre dans lequel les images sont chargées..
'post_mime_type' Nous voulons seulement les messages qui sont des "images"
'post_parent' Nous voulons tirer les enfants de la page en cours. Nous pouvons accéder au $ post global et à son identifiant de propriété à transmettre en tant que parent_id
'Type de poste' 'post_mime_type' veille à ce que seules les images soient extraites, mais définir le 'post_type' comme 'pièce jointe' permet d'affiner la requête..

Vérifiez que le message contient des images et une boucle

Après get_children ($ args); interroge les pièces jointes et renvoie les valeurs que nous voulons vérifier que la requête a renvoyé des résultats. Certaines pages peuvent ne pas avoir d'images attachées et nous n'avons pas besoin de parcourir des résultats vides. Nous allons utiliser une condition pour voir si $ images retourne une valeur, et si c'est le cas, nous savons que la page a des pièces jointes et nous pouvons les parcourir en boucle.

 // continué d'en haut… si ($ images) ?>

Pour chaque image jointe, nous voulons produire l'image. Chaque $ image L'objet a plusieurs propriétés auxquelles vous pouvez accéder et que vous pouvez afficher. Le plus important pour cet exemple est la source de chaque image, qui est la guid propriété. Pour des raisons d'accessibilité et de référencement, nous pouvons afficher le titre et la place de l'image dans les attributs alt & title des images..

Étape 4 Ajouter le plugin Javascript Gallery

Pour la prochaine étape, nous allons ajouter un plugin jQuery pour donner vie à notre galerie. Le plugin que nous allons utiliser est Flux Slider, un plugin Javascript / jQuery pour slider. Téléchargez le source et placez le flux.min.js à l'intérieur de wp-content / themes / theme / js dossier. Puisque j'utilise le thème TwentyEleven, jQuery n'est pas inclus du côté public. Je devrai donc m'assurer de l'inclure. Si vous utilisez un thème différent, assurez-vous que jQuery est chargé..

modifier footer.php

Incluez jQuery (si pas déjà inclus) et le flux.min.js script dans le pied de page - assurez-vous flux.min.js est en dessous de l'inclusion jQuery mais avant wp_footer (); une fonction.

La fin

Comme vous pouvez le constater, il est très facile de récupérer des images attachées à une page et de personnaliser leur sortie. Vous pouvez facilement inclure cette même boucle dans des publications ou un type de publication personnalisé..

Vous pouvez facilement échanger le plugin jQuery pour une autre option de votre choix. Tout ce que vous avez à faire est d'éditer la boucle HTML avec le balisage approprié et d'inclure le plugin.

WordPress est très flexible, et ceci est un autre exemple de la facilité avec laquelle il est construit!

Code