理解和更改发布的图像的结构

时间:2015-04-09 作者:Bram Vanroy

目前这是(默认)Wordpress图像输出:

Float left, with caption, link to img

<figure id="attachment_10220" style="width: 167px;" class="wp-caption alignleft">
    <a href="http://link-to-my-image.jpg"><img class="wp-image-10220 size-medium" src="http://link-to-my-image-167x251.jpg" alt="" width="167" height="251"></a>
    <figcaption class="wp-caption-text">My caption</figcaption>
</figure>

Float right, without caption, link to img

<a href="http://link-to-my-image.jpg" class="img-link">
    <img class="alignright size-medium wp-image-10214" src="http://link-to-my-image-257x386.jpg" alt="" width="257" height="386">
</a>

Float left, without caption, no link

<img class="alignleft wp-image-10218" src="http://link-to-my-image.jpg-167x251.jpg" alt="" width="167" height="251">
首先,我想知道这些图像的输出是在哪里定义的,我应该看什么函数?我的目标是使输出更加统一:

将每个图像包装在figure-标记(如第一个示例)

  • 不要添加任何style 属性将float class(alignleft,alignright)添加到地物标记中
  • 不输出附件(attachment\\u xxx)或图像ID(wp image xxx)
  • 从图像中删除任何高度和宽度属性
    • 基于以上示例的最终预期输出:

      <figure class="wp-caption alignleft">
          <a href="http://link-to-my-image.jpg">
              <img class="size-medium" src="http://link-to-my-image-167x251.jpg" alt="">
          </a>
          <figcaption class="wp-caption-text">My caption</figcaption>
      </figure>
      <figure class="alignright">
          <a href="http://link-to-my-image.jpg">
              <img class="size-medium" src="http://link-to-my-image-257x386.jpg" alt="">
          </a>
      </figure>
      <figure class="alignleft">
          <img src="http://link-to-my-image.jpg-167x251.jpg" alt="">
      </figure>
      

    1 个回复
    SO网友:websupporter

    让我们从您的第一个代码开始。如果添加文本、标题等,将生成一个短代码:[caption]功能img_caption_shortcode() 在wp内容/媒体中。php负责执行短代码。但只有在使用字幕时,才会生成此短代码。否则,只需插入<a>- 和<img>-标签

    谁来决定,插入什么

    添加媒体文件后,会发生一个有趣的ajax请求:send-attachment-to-editor. 它发送所有数据,如“图像大小”、“url”、“html”。。。

    功能wp_ajax_send_attachment_to_editor() 可以在wp admin/includes/ajax actions中找到。此ajax请求调用php。此函数用于将图像附加到帖子。对我们来说更有趣的是:这个函数创建HTML,它将发布在编辑器中。因此,这里决定[caption] 短代码或简单<img>-将使用标签。

    过滤介质\\u send\\u to\\u editor自wp_ajax_send_attachment_to_editor() 使用筛选器media_send_to_editor 让我们有机会修改此代码。给出了三个参数:-当前HTML输出-附件ID-信息、图像大小、对齐。。。

    举个例子:

     add_filter( \'media_send_to_editor\', \'test_media\', 10, 3 );
     function test_media( $html, $id, $attachment ){
        return \'<a href="http://example.com">TEST</a>\';
     }
    
    这将始终打印链接http://example.com/

    我希望这对你有帮助。

    要想现在接收输出,我建议您使用“更好的”短代码:

    <?php
      add_filter( \'media_send_to_editor\', \'use_always_caption\', 10, 3 );
         function use_always_caption( $html, $id, $attachment ){
            $post = get_post( $id );
            //Return if its not an image
            if ( \'image\' != substr( $post->post_mime_type, 0, 5 ) )
                return $html;
            $rel = \'\';
            $url =  isset( $attachment[\'url\'] ) ? $attachment[\'url\'] : \'\';
    
            if ( strpos( $url, \'attachment_id\') || get_attachment_link( $id ) == $url )
                $rel = \' rel="attachment"\';
    
            $align = isset( $attachment[\'align\'] ) ? $attachment[\'align\'] : \'none\';
            $size = isset( $attachment[\'image-size\'] ) ? $attachment[\'image-size\'] : \'medium\';
            $alt = isset( $attachment[\'image_alt\'] ) ? $attachment[\'image_alt\'] : \'\';
            $caption = \' \';
            if( isset( $attachment[\'post_excerpt\'] ) && ! empty( $attachment[\'post_excerpt\'] ) )
                $caption = $attachment[\'post_excerpt\'];
            $title = \'\'; // We no longer insert title tags into <img> tags, as they are redundant.
            add_filter( \'get_image_tag\', \'remove_id_from_class_and_hw\', 10, 6 );
            $html = get_image_send_to_editor( $id, $caption, $title, $align, $url, (bool) $rel, $size, $alt );
            remove_filter( \'get_image_tag\', \'remove_id_from_class_and_hw\', 10, 6 );
            $html = preg_replace( \'^toremove--width="(.*)"--toremove^\', \'\', $html );
            return $html;
         }
    
         function remove_id_from_class_and_hw( $html, $id, $alt, $title, $align, $size ){
             list( $img_src, $width, $height ) = image_downsize( $id, $size );
             $class = \'align\' . esc_attr( $align ) .\' size-\' . esc_attr( $size );
             return \'<img src="\' . esc_attr( $img_src ) . \'" alt="\' . esc_attr( $alt ) . \'" \' . $title . \' class="\' . $class . \'" toremove--width="\' . $width . \'" height="\' . $height . \'"--toremove />\';
         }
    
         remove_shortcode( \'caption\' );
         add_shortcode( \'caption\', \'better_img_caption_shortcode\' );
         function better_img_caption_shortcode( $attr, $content = null ){
            if ( ! isset( $attr[\'caption\'] ) ) {
                if ( preg_match( \'#((?:<a [^>]+>\\s*)?<img [^>]+>(?:\\s*</a>)?)(.*)#is\', $content, $matches ) ) {
                    $content = $matches[1];
                    $attr[\'caption\'] = trim( $matches[2] );
                }
            }
    
            $output = apply_filters( \'img_caption_shortcode\', \'\', $attr, $content );
            if ( $output != \'\' )
                return $output;
    
            $atts = shortcode_atts( array(
                \'id\'      => \'\',
                \'align\'   => \'alignnone\',
                \'width\'   => \'\',
                \'caption\' => \'\',
                \'class\'   => \'\',
            ), $attr, \'caption\' );
    
            $atts[\'width\'] = (int) $atts[\'width\'];
            if ( $atts[\'width\'] < 1 )
                return $content;
    
            $class = trim( \'wp-caption \' . $atts[\'align\'] . \' \' . $atts[\'class\'] );
    
            $figcaption = \'\';
            if( ! empty( $atts[\'caption\'] ) )
                $figcaption = \'<figcaption class="wp-caption-text">\' . $atts[\'caption\'] . \'</figcaption>\';
            return \'<figure class="\' . esc_attr( $class ) . \'">\'
                . do_shortcode( $content ) . $figcaption . \'</figure>\';
    
         }
    ?>
    
    我复制粘贴了一点:)

    那么,我要做的是:使用过滤器media_send_to_editor 我强制WordPress始终使用[caption]-短代码。我们使用过滤器稍微改变了图像输出get_image_tag 函数使用的get_image_tag() 要创建<img>-标签此功能可在wp include/media中找到。php。因为我不想创建整个短代码,而让WordPress来做,所以我需要保留宽度和高度(我想你无论如何都应该保留它),因为字幕创建是由image_add_caption() (可在wp admin/includes/media.php中找到)需要字符串中的这些值。我加了一个丑陋的toremove-- 以后再移除它。

    在第二步中,我删除现有[caption]-快捷编码并用我自己的代码覆盖它。我自己的基本相同,但我删除了ID和Style属性。我坚持[caption]-短代码,因此一旦用户禁用插件,图片仍将以合理的方式显示。

    文件:

    结束

    相关推荐

    Unattaching unlinked images

    据我所知,默认WP行为:将图像上载到帖子并保存(作为草稿或已发布帖子)时,图像将“附加”到帖子。进入“媒体”>“库”>“上载到”列,可以再次检查这一点。为了将图像标记为未附加到任何帖子,必须手动删除帖子。(还有别的办法吗?)我的主要问题是:如果图片没有在现有帖子中插入或链接,我有没有办法告诉WordPress将其标记为“未附加”?编辑要澄清:我们将20张(或更多)图片上传到帖子并插入。这些都是WordPress自动附加到帖子上的。我们希望这样做,因为我们的主题模板会在每篇文章中提取所有附加的图