Fran6art.com, blog d’un webdesigner WordPress freelance

Voici la deuxième partie du dossier de Jérémie Bresson consacré aux pièces jointes sous WordPress. N’hésitez pas à poser vos questions, ou encore à faire des requêtes si vous en avez. Bonne lecture !

Après avoir donné quelques clés pour comprendre la gestion des pièces jointes dans WordPress, je propose maintenant un exemple pratique : la personnalisation de la page de présentation des pièces jointes. Je ne vais pas présenter un template attachment.php en entier. Il s’agit surtout de montrer quelques fonctions intéressantes que l’on pourra facilement adapter à d’autres thèmes.

Aperçu de la visualisation de la page de pièce jointe

Pour créer ce template attachment.php, je suis parti du template single.php du thème par défaut en le dupliquant. Pour l’utiliser avec ce thème, il faut bien sûr supprimer le template attachment.php existant ainsi que, selon les besoins, les éventuels templates de plus haut niveau (image.php, video.php, …).

Tout au long de l’article, je présente les modifications effectuées sur une copie de single.php renommée attachment.php.

1. Afficher les informations

Le template d’affichage d’une pièce jointe est très similaire à celui d’un article. Les Marqueurs de modèle sont les mêmes. Parmi les fonctions importantes, on utilisera :

• the_title() : pour récupérer le titre du fichier
• get_permalink() : pour récupérer l’URL de la page de pièce jointe.
• the_content() : pour afficher la description de la pièce jointe.
• comments_template() : pour appeler les commentaires de la page
• …

Le template attachment.php a la même structure que tous les templates: il faut appeler le header et le footer avec les bonnes fonctions et utiliser la boucle WordPress en testant la présence de posts et en appelant le premier.

Ces appels de fonctions sont déjà faits dans les autres templates. Dupliquer single.php (ou index.php à défaut) permet de ne pas avoir à réinventer la roue, et présente l’avantage de produire une page directement dans le style du blog.

Pour marquer la différence avec les articles normaux, je souhaitais faire apparaître clairement le terme « Pièce jointe » dans le titre de la page. Il suffit de faire cet ajout au niveau de la balise de titre h2 :

1

<h2>Pièce jointe : <?php the_title(); ?></h2>

2. Récupérer les informations sur l’article principal

Par définition, les pièces jointes sont liées à un article. C’est dans WordPress l’article parent. On récupère la valeur de l’ID de cet article en utilisant la variable $post->parent.
À partir de là, en associant cet ID à des fonctions de WordPress, on récupère les informations sur l’article associé à la pièce jointe.

Le lien s’obtient en faisant :

1

<?php echo get_permalink($post->post_parent); ?>

et pour le titre :

1

<?php echo get_the_title($post->post_parent)?>

Dans mon exemple ceci m’a permis de rajouter un deuxième petit encadré (sur le modèle de celui affiché en bas d’article) avec le titre et un lien vers l’article principal :

1
2
3
4
5
6
7

<p class="postmetadata alt">
	<small>
	     	Cette pièce jointe à l'article
	     	“<a href="<?php echo get_permalink($post->post_parent); ?>" ><?php echo get_the_title($post->post_parent)?></a>”
	     	a été ajoutée le <?php the_time('l j F Y') ?> à <?php the_time() ?>.
	</small>
</p>

J’ai ensuite pris soin de modifier le cadre du bas pour parler de «pièce jointe» au lieu d’article et pour supprimer la référence aux catégories (il n’y en a pas pour les pièces jointes).

Aperçu de cette modification

3. Affichage du fichier à télécharger

L’URL du fichier à télécharger s’obtient facilement :

1

<?php echo $post->guid; ?>

Pour avoir le nom associé, on utilise la fonction PHP basename() :

1

<?php echo basename($post->guid); ?>

Je voulais également pouvoir proposer une icône pour que le lecteur identifie visuellement le fichier. WordPress sépare les fichiers en 8 types de fichiers différents en fonction de l’extension du fichier et propose pour chacune d’entre elles une icône personnelle. Pour les images, le fonctionnement par défaut de WordPress est d’utiliser les miniatures…
J’ai donc écrit une petite fonction PHP get_filecat($file_name) pour avoir le comportement que je voulais : quelle que soit la pièce jointe, retourner le type du fichier dans tous les cas (en utilisant « image » et « default » dans les cas non prévu par WordPress).

Pour être utilisée, cette fonction doit être collée dans le fichier du template ou dans le fichier functions.php dans le dossier du thème. J’ai utilisé ma fonction pour modifier la classe du lien et j’ai géré l’affichage par une feuille de style. Dans mon fichier CSS, j’ai donc un style correspondant à chaque type de pièce jointe (a.pj-image, a.pj-audio, a.pj-spreadsheet, et ainsi de suite). Chaque style se charge d’afficher l’icône associée au lien avec un background-image.

Cela donne les lignes suivantes :

1
2
3
4
5

<p class="attachement">
	<a href="<?php echo $post->guid; ?>" class="pj-<?php echo get_filecat($post->guid); ?>" title="Télécharger le fichier joint">
		<?php echo basename($post->guid); ?>
	</a>
</p>

Il aurait également tout à fait été possible d’afficher l’image avec la balise img, mais je préfère la méthode du CSS, car ainsi l’image n’est pas sélectionnable.

Pour ceux que cela intéresse, j’ai récupéré les icônes sur le site : dryicons.com

Aperçu de cette modification

4. Prévisualisation en cas d’image

WordPress gère très bien les fichiers joints de type image. Il crée deux sortes de miniatures (petit et moyen) et propose des fonctions pour les afficher.

La fonction wp_attachment_is_image($post->id) permet de vérifier si la pièce jointe est une image.
wp_get_attachment_image_src($post->id, $size) (codex en anglais) récupère dans un tableau [0] l’url, [1] la largeur et [2] la hauteur de l’image à la taille $size. $size peut prendre les valeurs “thumbnail”, “medium” et “original” (il peut aussi être un tableau de valeurs).

Le code suivant va donc afficher l’aperçu de l’image (au format moyen) :

1
2
3
4
5
6
7
8
9
10

<?php if (wp_attachment_is_image($post->id)) {
		$att_image = wp_get_attachment_image_src( $post->id, "medium");
?>
		<p><strong>Prévisualisation :</strong></p>
		<p class="center">
			<a href="<?php echo wp_get_attachment_url($post->id); ?>" title="<?php the_title(); ?>">
			<img src="<?php echo $att_image[0];?>" width="<?php echo $att_image[1];?>" height="<?php echo $att_image[2];?>"  class="attachment-medium" alt="<?php $post->post_excerpt; ?>" />
			</a>
		</p>
<?php } ?>

Aperçu de cette modification

5. Naviguer dans les pièces jointes

Je voulais également pouvoir proposer une navigation dans les différentes pièces jointes.
Les fonctions previous_post_link() et next_post_link() ne fonctionnent pas comme je l’attendais :

• previous_post_link() : affiche un lien vers l’article «parent» de la pièce jointe
• next_post_link() : n’affiche jamais rien.

Pour proposer une navigation d’une pièce jointe à l’autre (pour un même article) j’ai créé deux nouvelles fonctions :
previous_att_link() et next_att_link() qui fonctionnent exactement comme previous_post_link() et next_post_link() et qui les remplacent dans le template.

Aperçu de cette modification

Voilà ! Et si vous avez des questions, n’hésitez pas à laisser un commentaire !