Wie ändere / modifiziere ich the_post_thumbnail (); HTML-Ausgabe?

Ich arbeite daran, ein benutzerdefiniertes Thema zu erstellen, und habe ein bisschen mit diesem Thema zu kämpfen. Ich versuche, die HTML-Ausgabe der the_post_thumbnail();Funktion zu ändern . Ich muss dies tun, weil ich versuche, Retina-Bilder auf meiner Website zu unterstützen und die Funktionalität lieber in mein Thema einbinden möchte, als ein Plugin in das Backend zu laden.

Standardmäßig the_post_thumbnail();nur Anrufe, get_the_post_thumbnail();die ich hier gefunden habe . Mein erster Gedanke war , mich in den Filter 'post_thumbnail_html' einzufügen , aber ich kann ihn anscheinend nicht zum Laufen bringen. Damit...

So rufe ich meine Post-Thumbnails in der Schleife auf:

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

Dies ist der Code, den ich ausgeben muss, wenn ich the_post_thumbnail();...

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

Und der folgende Code ist der, den ich derzeit in meiner Datei functions.php habe:

<?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);
?>

Ein paar Dinge zu beachten. Ich bin nicht sicher, wie ich den entsprechenden Metadatentext im Attribut 'data-alt' übergeben soll. Außerdem muss ich in der Lage sein, die spezifische post_thumbnail-Größe zu übergeben, die ich benötige, da ich in meinem gesamten Thema benutzerdefinierte post_thumbnail-Größen verwende. Zuletzt können Sie sehen, dass das Attributarray zusätzlich zur Standardklasse 'retina' sowie allen anderen Attributen in diesem Array Klassen übergeben muss.

Vielen Dank im Voraus für jede Hilfe. Es ist wirklich nicht viel online zu diesem Thema und ich dachte, meine Frage sei anders genug, um einen zusätzlichen Beitrag für diese Community zu rechtfertigen. Bitte lassen Sie mich wissen, wenn Sie Gedanken, Lösungen und / oder Erläuterungen haben.

Ok, ich glaube, ich bin zu einer Lösung gekommen. Es scheint nicht so schön und einfach zu sein, wie ich es gerne hätte, aber andererseits erfordern größere Änderungen an der Standard-Wordpress-Funktionalität manchmal drastische Maßnahmen. :) :)

Dies ist meine Arbeitslösung zum Umschreiben der HTML-Ausgabe für Post-Thumbnails auf meiner Website, um mit dem Retinise.js- Plugin zu arbeiten. Natürlich kann dieser Code für andere HTML-Manipulationen nach dem Miniaturbild angepasst werden.

In meiner Datei functions.php habe ich folgende Funktion erstellt:

<?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);
?>

Wenn ich dann the_post_thumbnail();eine WP-Schleife aufrufe, verwende ich diesen Code:

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

Dieser Code sollte funktionieren (offensichtlich mit geringfügigen Änderungen), wenn Sie außerhalb einer WP-Schleife arbeiten. Hoffe, das spart jemand anderem Zeit und Frust! Wenn ich dazu komme, werde ich vielleicht einen vollständigen Start veröffentlichen, um die Fragen und Antworten zu beenden, wie ich in Netzhautunterstützung zu meinem Thema gebacken habe. Keine Plugins verwendet!

Hier sind ein paar Links, die bei Interesse jemanden in die richtige Richtung weisen!

• Hinzufügen zusätzlicher Bildgrößen zu WP
• Retinise.js
• Erstellen Sie zusätzliche Bilder in Netzhautgröße

hackische Lösung:

Da WordPress standardmäßig viele Klassen zum Code hinzufügt <img>, können Sie, wenn Sie dieses Verhalten nicht mit Gewalt ändern, immer etwas über str_replace vor dem String "einfügen" class=. In Code:

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

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

Es ist ziemlich sicher anzunehmen, dass wenn etwas mit "class =" beginnt, es das ist, was Sie wollen. Natürlich könnte es durch seltsame Dateinamen, die das enthalten, durcheinander gebracht werden class=, aber besonders mit WordPress ist das höchst unwahrscheinlich.

Sie können das auch suchen <imgund ersetzen. Wenn ich darüber nachdenke, denke ich, dass das ein bisschen sicherer sein sollte.

Vielleicht könnten Sie sich einhaken in 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');

Dies muss getestet und möglicherweise geändert werden. Ich fand die Idee hier. Klassennamen hinzufügen, um Miniaturansicht zu veröffentlichen ( vwp_get_attachment_imageam Ende auf Quellcode prüfen ).

Sie müssen den Hook hinzufügen, bevor Sie the_post_thumbnail()Ihr Thema aufrufen .

Außerdem weiß ich nicht, was Sie verwenden müssen, da Sie data-altmeiner Meinung nach ein Feld verwenden könnten attachement, das mit dem Filter übergeben wird (es könnte ein benutzerdefiniertes Feld sein).