如何将<img>从内容中移出并将其放置在页面模板的其他位置?

时间:2013-09-17 作者:Matoeil

现有网站在页面内容中放置了许多图像。我想重新设计模板,分离文本和图像的显示。我怎么能那样做?

4 个回复
最合适的回答,由SO网友:cybmeta 整理而成

例如,您可以使用,the_content 过滤,运行正则表达式以删除图像并将其捕获到变量中,然后在任何需要的地方打印该变量。

例如,将所有图像附加到内容末尾:

add_filter( \'the_content\', \'my_the_content_filter\' );
function my_the_content_filter($content) {

  //$matches will be an array with all images
  preg_match_all("/<img[^>]+\\>/i", $content, $matches);

  //remove all images form content
  $content = preg_replace("/<img[^>]+\\>/i", "", $content);

  //append the images to the end of the content
  foreach($matches as $img) {
       $content .= $img;
  }

  return $content;

}
按照@G.M.的建议,您可以将img的删除和显示分开。

定义删除图像的函数:

function remove_img_from_content($content) {

  //remove all images form content
  $content = preg_replace("/<img[^>]+\\>/i", "", $content);

  return $content;

}
定义获取图像的函数:

function get_the_images($content) {

     //$matches will be an array with all images
     preg_match_all("/<img[^>]+\\>/i", $content, $matches);
     return $matches;

}
现在,无论您想在哪里显示图像,都可以调用上面的函数来传递要从中提取图像的内容。例如,如果您在循环中:

//get the content of the current post inside the loop
$content = get_the_content();

//print the text without images:
echo remove_img_from_content($content);

//get the images and print them
$images = get_the_images($content);
foreach($images as $image) {
    echo $image;
}

SO网友:Maruti Mohanty

我想说,如果这是一个静态页面,那么不要在模板中将其分离出来,使用wp编辑器来编写html并单独设置样式。但是如果它是一个动态页面,那么如果您为它创建一个页面模板就太好了。

如果您计划使用页面模板,以下链接可能会有所帮助--

http://codex.wordpress.org/Page_Templates

http://www.expand2web.com/blog/custom-page-template-wordpress/

SO网友:gmazzap

@cybnet 答案很好(我投了更高的票),而且比我的简单。

当他编辑他的答案时,添加了类似于模板标签的功能,我已经写了这个标签。。我决定不删除这个答案,因为我使用了不同的方法。

(内联注释中代码后的解释)

add_action(\'pre_post_update\', \'separate_content_images\', 99, 2)
add_filter( \'the_content\', \'separate_content_images\', 99, 1 );

function separate_content_images( $content = \'\', $data = -1, $return_img = false ) {

  if ( empty($content) || is_object($content) ) { // function called directly inside loop
    if ( empty($content) ) global $post;
    if ( object($content) ) $post = $content;
    $content = is_object($post) && isset($post->post_content) ? $post->post_content : false;
  }

  if ( ! $content ) return;

  if ( is_int($content) && is_array($data) ) { // function triggered on post update
    $update = $content;
    $content = $data[\'post_content\'];
  }

  $imgs = preg_match_all("/<img[^>]+\\>/i", $content, $matches);

  // no images, return content when not in update, null otherwise
  if ( empty($matches) ) return $update ? null : $content;

  $post_images = array();

  foreach ($matches as $img_match ) {
    // save an array of all images in content
    $post_images[] = $img_match[0];
    // remove images from content
    $content = str_replace($img_match[0], \'\', $content); 
  }

  if ( $update ) {
    // update the post content preventing infinite loop by removing action
    remove_action(\'pre_post_update\', \'separate_content_images\', 99, 2);
    wp_update_post( array(\'ID\'=> $update, \'post_content\'=> $content) );
    add_action(\'pre_post_update\', \'separate_content_images\', 99, 2)
    // save all images in a custom field
    update_post_meta($update , \'_post_images\', $post_images);
  } else {
    return $return_img ? $post_images : $content;
  }

}
此函数挂接在更新前操作和内容过滤器中。

因此,当更新包含图像的帖子时,图像将从内容中剥离出来,并自动放入自定义字段。内容也会更新为cntain no图像。

如果使用显示包含图像的帖子the_content, 打印的是没有图像的内容。

但如何打印剥离的图像呢?为以下目的编写自定义模板标记:

print_post_images( $args = array(), $post = null ) {

  $defaults = array(
    \'wrap\' => \'div\',
    \'wrap_class\' => \'\',
    \'before\' => \'\',
    \'after\' => \'<br />\',
    \'link_to\' => \'self\' // self img link to file, \'post\' to post, other values no link,
    \'before_link\' => \'\',
    \'after_link\' => \'\',
    \'a_class\' => \'\',
    \'target\' => \'\',
    \'echo\' => true
  );

  if ( empty($post) ) global $post;
  if ( is_int($post) ) $post = get_post($post);
  if ( empty($post) || ! isset($post->post_content) ) return;

  $args = extract( wp_parse_args($args, $defaults) );

  // try to get images from custom field (for updated posts)
  $images = get_post_meta($post->ID, \'_post_images\', true);

  if ( empty($images) ) { // no images in custom field, try on content
    $images = separate_content_images( $post, -1, true );
  }

  if ( ! empty($images) ) {
    $out = \'\';
    if ($wrap) {
      $format = $wrap_class ? \'<%s class="%s">\' : \'<%s>\';
      $out .= sprintf($format, $wrap, esc_attr($wrap_class) );
    }
    foreach ( $images as $image ) {
      if ($link_to == \'post\' || $link_to == \'self\' ) {
        $format = $a_class ? \'<a href="%s" class="%s">\' : \'<a href="%s">\';
        if ( $target ) $format = str_replace(\'>\', \' target="%s">\', $format);
        if ($link_to == \'post\') {
           $url = get_permalink($post);
        } else {
           preg_match(\'/src=["\']([^"\']+)["\']/\', $image, $matches);
           $url = isset($matches[1]) ? $matches[1] : false;
        } 
        if ( ! $url ) continue;
        if ($before_link) $out .= $before_link;
        $out .= sprintf($format, esc_url($url), esc_attr($a_class), esc_attr($target) );
      }
      if ($before) $out .= $before;
      $out .= $image;
      if ($after) $out .= $after;
      if ($link_to == \'post\' || $link_to == \'self\' ) {
        $out .= \'</a>\';
        if ($after_link) $out .= $after_link;
      }
    }
    if ($wrap) $out .= sprintf("</%s>", $wrap);

    // enable a filter to customize the output
    $out = apply_filters(\'print_post_images\', $out, $post, $args);   

    if ($echo) echo $out; else return $out;
  }

}
现在,在您的循环中,无论您想在哪里添加

<?php print_post_images(); ?>
打印所有图像。您可以使用提供的参数自定义大量输出。此外,您可以使用自定义过滤器自定义输出\'print_post_images\'.

此函数可在循环外部使用,使用传递post ID或post对象作为第二个参数:

<?php print_post_images( $args, $post ); ?>
若您只想返回一组图像,请使用

<?php $images = separate_content_images( $post, -1, true ); ?>
在哪里$post 可以是post ID或post对象。

SO网友:Matoeil

非常感谢您的回答。我是如何整理的:

<?php 
        //get content from back office , filter imgs except featured img to place them later in  <div id=\'img_content_right\'>
                $content2 = get_the_content();                    
                $removed_imgs = array();                 
                $content2 = preg_replace_callback(\'#(?!<img.+?id="featured_img".*?\\/>)(<img.+? />)#\',function($r) {
                    global $removed_imgs;
                    $removed_imgs[] = $r[1];
                    return \'\';
                },$content2);

                    //add filter to the_content to strip images except img_menu et featured_img          
                    add_filter(\'the_content\', \'strip_images\',2);                    
                    function strip_images($content){            
                        $content=preg_replace(\'/(?!<img.+?id="img_menu".*?\\/>)(?!<img.+?id="featured_img".*?\\/>)<img.+?\\/>/\',\'\',$content);                                  
                        return $content;                            
                    }

          the_content(); 
?>


  <div id=\'img_content_right\'>
    <?php       
    //append the images stripped from content
     foreach($removed_imgs as $img){
                echo $img;
             }  
    ?>
</div>

结束

相关推荐

Resize uploaded images

Possible Duplicate:Resizing all images 我有一个我建立的新闻门户,客户想要不同大小的特色图片。我已经准备好了我想要的第一个尺寸,他们已经发布了大约200多篇帖子,都准备好了这个尺寸。现在,如果我改变大小,它只会在新帖子上改变/或重新上传当前的特色图片(手工操作太多了)。我的问题是,有没有办法调整上传图像的大小?