it-swarm.com.de

Verwenden Sie immer <figure> für Post-Bilder

Das Standardverhalten bei Bildern in voller Breite in Beiträgen lautet wie folgt:

  • Wenn Sie nur ein Bild einfügen, wird diese HTML-Struktur erstellt: <p><img/></p>
  • Wenn Sie ein Bild einfügen mit einer Beschriftung , wird die HTML-Struktur erzeugt: <figure><img/><figcaption/></figure>

Aus Gründen des Stils (ich möchte im Vergleich zu Standardabschnitten einen größeren Rand um Bilder haben) möchte ich in beiden Fällen <figure> erhalten, nicht nur, wenn es eine Beschriftung gibt. Wie es geht?

Bearbeiten : Eine Sache, die mir aufgefallen ist, ist, dass sich das Verhalten ändert, sobald Visuell und Text Tabs im Editor gewechselt werden, d. H. Sogar bevor der Beitrag in der Vorschau angezeigt oder gespeichert wird. Vielleicht wäre die richtige Lösung, den WordPress-Editor zu zwingen, immer den [caption]-Shortcode zu verwenden, egal was passiert.

4
Borek Bernard

Sie können den image_send_to_editor Filter ausprobieren:

/**
 * Wrap the inserted image html with <figure> 
 * if the theme supports html5 and the current image has no caption:
 */

add_filter( 'image_send_to_editor', 
    function( $html, $id, $caption, $title, $align, $url, $size, $alt ) 
    {
        if( current_theme_supports( 'html5' )  && ! $caption )
            $html = sprintf( '<figure>%s</figure>', $html ); // Modify to your needs!

        return $html;
    }
, 10, 8 );

hier können Sie den HTML-Code des Bildes ändern, wenn es in den Editor eingefügt wird.

Ich habe den Check für current_theme_supports( 'html5' ) im obigen Filter hinzugefügt, um zu prüfen, ob Sie etwas haben wie:

add_theme_support( 'html5', array( ... ) );

in Ihrem Thema. Möglicherweise möchten Sie jedoch nicht, dass dieser Filterrückruf von Ihrem aktuellen Thema abhängt, sodass Sie ihn gegebenenfalls entfernen können.

Sie können auch den get_image_tag Filter ausprobieren.

Update : Hier ist die nützliche Unautop-Funktion aus dem Kommentar von @ bueltge (zur besseren Lesbarkeit):

// unautop for images     
function fb_unautop_4_img( $content )
{ 
    $content = preg_replace( 
        '/<p>\\s*?(<a rel=\"attachment.*?><img.*?><\\/a>|<img.*?>)?\\s*<\\/p>/s', 
        '<figure>$1</figure>', 
        $content 
    ); 
    return $content; 
} 
add_filter( 'the_content', 'fb_unautop_4_img', 99 );
6
birgire

Ich weiß, dass dies eine alte Frage mit einer akzeptierten Antwort ist, aber ich habe die the_content-Version dieser Antwort verwendet, und unter bestimmten Umständen schlägt sie tatsächlich fehl und umschließt mehr als das Bild in einer Figur.

Ich denke, dies ist der Grund, warum man Code nicht mit regulären Ausdrücken analysieren sollte.

Also ... Ich habe mit DOMDocument eine andere Lösung gefunden. Es ist bei weitem nicht so kurz wie das reguläre Format, fühlt sich aber stabil an:

<?php
add_filter('the_content', function ($content) {
    # Prevent errors so we can parse HTML5
    libxml_use_internal_errors(true); # https://stackoverflow.com/questions/9149180/domdocumentloadhtml-error

    # Load the content
    $dom = new DOMDocument();

    # With UTF-8 support
    # https://stackoverflow.com/questions/8218230/php-domdocument-loadhtml-not-encoding-utf-8-correctly
    $dom->loadHTML('<?xml encoding="utf-8" ?>' . $content);

    # Find all images
    $images = $dom->getElementsByTagName('img');

    # Go through all the images
    foreach ($images as $image) {
        $child = $image; # Store the child element
        $wrapper = $image->parentNode; # And the wrapping element

        # If the image is linked
        if ($wrapper->tagName == 'a') {
            $child = $wrapper; # Store the link as the child
            $wrapper = $wrapper->parentNode; # And its parent as the wrapper
        }

        # If the parent is a <p> - replace it with a <figure>
        if ($wrapper->tagName == 'p') {
            $figure = $dom->createElement('figure');

            $figure->setAttribute('class', $image->getAttribute('class')); # Give figure same class as img
            $image->setAttribute('class', ''); # Remove img class
            $figure->appendChild($child); # Add img to figure
            $wrapper->parentNode->replaceChild($figure, $wrapper); # Replace <p> with <figure>
        }
    }

    # Turn on errors again...
    libxml_use_internal_errors(false);

    # Strip DOCTYPE etc from output
    return str_replace(['<body>', '</body>'], '', $dom->saveHTML($dom->getElementsByTagName('body')->item(0)));
}, 99);
2
powerbuoy