始终使用<Figure>发布图像

时间：2015-01-12 作者：Borek Bernard

对于帖子中的全幅图像，默认行为如下：

如果单独插入图像，则会生成此HTML结构：<p><img/></p>with a caption, 生成HTML结构：<figure><img/><figcaption/></figure>为了设计风格（我希望图像与标准段落相比有更大的边距），我想<figure> 在这两种情况下，不仅仅是有标题时。怎么做？

Edit: 我注意到的一件事是，只要编辑器中切换了视觉选项卡和文本选项卡，行为就会改变，即在预览或保存帖子之前。也许正确的解决方案是以某种方式强制WordPress编辑器始终使用[caption] 无论发生什么，都要使用短代码。

2 个回复

最合适的回答,由SO网友:birgire 整理而成

您可以尝试image_send_to_editor 过滤器：

/**
 * 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 );

您可以在将图像插入编辑器时修改图像的html。

我添加了支票current_theme_supports( \'html5\' ) 在上述过滤器中，要检查您是否具有以下内容：

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

在您的主题中。但您可能不希望此筛选器回调依赖于当前主题，因此如果需要，可以将其删除。

您也可以尝试get_image_tag 滤器

Update: 以下是@bueltge评论中有用的unautop函数（为了更好的可读性）：

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

SO网友:powerbuoy

我知道这是一个有公认答案的老问题，但我使用了the_content 这个答案的版本，在某些情况下，它实际上失败了，并将更多的内容包装在一个图形中。

我想这就是人们不应该使用正则表达式解析代码的原因。

所以。。。我想出了另一个使用DOMDocument的解决方案。它远没有regexp短，但感觉稳定：

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

结束

文章导航

小码农CODE

始终使用<Figure>发布图像

相关推荐

apply_filters() function