web-dev-qa-db-fra.com

Comment puis-je changer/modifier the_post_thumbnail (); sortie HTML?

Je travaille sur la construction d'un thème personnalisé et je lutte depuis un moment avec celui-ci. J'essaie de modifier la sortie HTML de la fonction the_post_thumbnail();. Je dois le faire parce que j'essaie de prendre en charge les images de rétine sur mon site et préfère intégrer la fonctionnalité dans mon thème plutôt que de charger un plugin sur le backend.

Par défaut, the_post_thumbnail(); appelle simplement get_the_post_thumbnail(); que j'ai trouvé ici . Ma première pensée a été de brancher le filtre 'post_thumbnail_html ', mais je n'arrive pas à le faire fonctionner. Alors...

Voici comment j'appelle mes miniatures de messages dans la boucle:

<?php the_post_thumbnail('custom-thumbnail-size', array('class' => 'unique-class-here', 'title' => 'unique-title-here')); ?>

C’est le code dont j’ai besoin pour sortir lorsque j’appelle the_post_thumbnail();...

<img src="" alt="" data-src="image.png" data-alt="Alt text" class="retina unique-class-here" />

Et le code ci-dessous est ce que j'ai actuellement dans mon fichier functions.php:

<?php
function modify_post_thumbnail_html($html, $post_id, $post_thumbnail_id, $size, $attr) {
    $src = wp_get_attachment_image_src(get_post_thumbnail_id(), $size);
    $html = '<img src="" alt="" data-src="' . $src['0'] . '" data-alt="" class="retina" />';
    return $html;
}
add_filter('post_thumbnail_html', 'modify_post_thumbnail_html', 99, 5);
?>

Quelques choses à noter. Je ne suis pas sûr de savoir comment passer le texte de métadonnées approprié dans l'attribut 'data-alt'. De plus, je dois pouvoir passer à la taille post_thumbnail spécifique dont j'ai besoin, car j'utilise des tailles post_thumbnail personnalisées dans mon thème. Enfin, vous pouvez voir que le tableau d'attributs doit transmettre des classes en plus de la classe 'rétine' par défaut, ainsi que de tout autre attribut de ce tableau.

Merci d'avance pour votre aide. Il n'y a vraiment pas beaucoup d'informations en ligne sur ce sujet et je me suis dit que ma question était suffisamment différente pour justifier un poste supplémentaire dans cette communauté. S'il vous plaît laissez-moi savoir si vous avez des idées, des solutions et/ou besoin de clarifications.

phpfunctionspost-thumbnailshtmlwp-get-attachment-image
7
kaffolder

Ok, alors je pense que je suis peut-être venu à une solution. Cela ne semble pas aussi agréable et facile que je le souhaiterais, mais là encore, des modifications majeures de la fonctionnalité par défaut de Wordpress nécessitent parfois des mesures drastiques. :)

Ceci est ma solution de travail pour réécrire la sortie HTML pour les vignettes de post sur tout mon site afin de travailler avec Retinise.js plugin. Bien entendu, ce code peut être adapté à d’autres manipulations HTML post-miniatures.

Dans mon fichier functions.php, j'ai créé cette fonction:

<?php
function modify_post_thumbnail_html($html, $post_id, $post_thumbnail_id, $size, $attr) {
    $id = get_post_thumbnail_id(); // gets the id of the current post_thumbnail (in the loop)
    $src = wp_get_attachment_image_src($id, $size); // gets the image url specific to the passed in size (aka. custom image size)
    $alt = get_the_title($id); // gets the post thumbnail title
    $class = $attr['class']; // gets classes passed to the post thumbnail, defined here for easier function access

    // Check to see if a 'retina' class exists in the array when calling "the_post_thumbnail()", if so output different <img/> html
    if (strpos($class, 'retina') !== false) {
        $html = '<img src="" alt="" data-src="' . $src[0] . '" data-alt="' . $alt . '" class="' . $class . '" />';
    } else {
        $html = '<img src="' . $src[0] . '" alt="' . $alt . '" class="' . $class . '" />';
    }

    return $html;
}
add_filter('post_thumbnail_html', 'modify_post_thumbnail_html', 99, 5);
?>

Ensuite, chaque fois que j'appelle the_post_thumbnail(); dans une boucle WP, j'utilise ce code:

<?php the_post_thumbnail('custom-thumbnail-size', array('class' => 'retina additional-class')); ?>

Ce code devrait fonctionner (évidemment avec des modifications mineures) si vous travaillez en dehors d'une boucle WP. J'espère que cela sauvera du temps et de la frustration à quelqu'un d'autre! Peut-être que quand j'arriverai à cela, je posterai un début complet à la fin de la période de questions sur la manière dont j'ai intégré le support rétinien à mon thème. Aucun plugin utilisé!

Voici quelques liens pour diriger quelqu'un dans la bonne direction s'il est intéressé!

8
kaffolder

solution de hackish:

puisque wordpress ajoute beaucoup de classes par défaut au <img>, si vous ne modifiez pas ce comportement de force, vous pouvez toujours "injecter" quelque chose via str_replace avant la chaîne class=. Dans du code:

$image = get_the_post_thumbnail( $post->ID, 'medium', array( 'class' => 'myclass' ) );
$moreattrs = 'data-fullimg= "full.jpg"';

$image = str_replace('class=', $moreattrs.' class=', $image );

Il est assez prudent de supposer que si quelque chose commence par "class =", c'est ce que vous voulez. Bien sûr, il pourrait être gâché par des noms de fichiers étranges contenant ce class=, mais surtout avec wordpress, c'est très improbable.

vous pouvez également rechercher <img et le remplacer; en y réfléchissant, je suppose que cela devrait être un peu plus sûr.

2
Sebastian Schmid

Peut-être pourriez-vous vous connecter à wp_get_attachment_image_attributes:

function my_custom_image_attributes( $attr, $attachment ) {
  remove_filter('wp_get_attachment_image_attributes','my_custom_image_attributes');
  $image = wp_get_attachment_image_src( $attachment->ID, 'full' );
  $attr['data-src'] = $image[0];
  $attr['data-alt'] = $attachment->post_title;
  $attr['class'] .= ' retina';
  return $attr;
}
add_filter('wp_get_attachment_image_attributes','my_custom_image_attributes');

Cela doit être testé et peut-être modifié. J'ai trouvé l'idée ici Ajouter le nom de la classe à poster miniature (recherchez le code source vwp_get_attachment_image à la fin).

Vous devez ajouter le crochet juste avant d'appeler the_post_thumbnail() dans votre thème.

De plus, je ne sais pas ce que vous devez utiliser comme data-alt. À mon avis, vous pouvez utiliser un champ de la attachement qui passe avec le filtre (ce pourrait être un champ personnalisé).

0
Simon