it-swarm.com.de

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

Ich arbeite an der Entwicklung eines benutzerdefinierten Themas und habe einige Probleme damit. Ich versuche, die HTML-Ausgabe der Funktion the_post_thumbnail(); zu ändern. Ich muss dies tun, weil ich versuche, Retina-Bilder auf meiner Site zu unterstützen und die Funktionalität lieber in mein Theme einbinden möchte, als ein Plugin auf das Backend zu laden.

Standardmäßig ruft the_post_thumbnail(); nur get_the_post_thumbnail(); auf, die ich gefunden habe hier . Mein erster Gedanke war, in den 'post_thumbnail_html ' Filter einzustecken, aber ich scheine es nicht zum Laufen zu bringen. So...

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();... aufrufe.

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

Und der folgende Code ist, was ich derzeit in meiner functions.php-Datei 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 bestimmte post_thumbnail-Größe zu übergeben, die ich benötige, da ich in meinem Thema benutzerdefinierte post_thumbnail-Größen verwende. Zuletzt können Sie sehen, dass das Attributarray zusätzlich zur Standardklasse 'retina' sowie zu 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 stellte mir vor, dass meine Frage anders war, um einen zusätzlichen Beitrag für diese Community zu rechtfertigen. Bitte lassen Sie mich wissen, wenn Sie irgendwelche Gedanken, Lösungen und/oder Klärungen benötigen.

7
kaffolder

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 große Änderungen an der Standard-Wordpress-Funktionalität erfordern manchmal drastische Maßnahmen. :)

Dies ist meine funktionierende Lösung, um die HTML-Ausgabe für Post-Thumbnails auf meiner Website neu zu schreiben und mit dem Retinise.js -Plugin zu arbeiten. Natürlich kann dieser Code auch für andere HTML-Manipulationen für Post-Thumbnails angepasst werden.

In meiner functions.php-Datei habe ich diese 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(); in einer 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. Ich hoffe, das spart jemand anderem Zeit und Ärger! Vielleicht werde ich, wenn ich dazu komme, einen vollständigen Anfang veröffentlichen, um die Fragen und Antworten zu beenden, wie ich die Retina-Unterstützung für mein Thema gebacken habe. Keine Plugins verwendet!

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

8
kaffolder

hackische Lösung:

da wordpress dem <img> standardmäßig eine menge klassen hinzufügt, können sie, wenn sie dieses verhalten nicht gewaltsam ändern, immer etwas über str_replace vor den string class= 'einfügen'. 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, das ist, was Sie wollen. Natürlich könnte es durch seltsame Dateinamen, die diesen class= enthalten, durcheinander gebracht werden, aber besonders bei WordPress ist das höchst unwahrscheinlich.

sie können auch nach <img suchen und diesen ersetzen. Wenn ich darüber nachdenke, denke ich, dass das ein bisschen sicherer sein sollte.

2

Vielleicht könnten Sie sich in wp_get_attachment_image_attributes einhängen:

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 zum Posten des Thumbnails hinzufügen (vwp_get_attachment_image-Quellcode am Ende prüfen).

Sie müssen den Hook erst hinzufügen, bevor Sie the_post_thumbnail() in Ihrem Theme aufrufen.

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

0
Simon