Wordpress - 定位内容中的图像

时间:2015-04-25 09:10:34

标签: php jquery html wordpress

我的wordpress主题,单帖页面(显示单个帖子的页面)中有以下代码。

<article id="post-<?php the_ID(); ?>"<?php post_class('col-md-12'); ?>>
<div class="container">

    <header class="entry-header">
        <h1 class="entry-title"><?php the_title(); ?></h1>
    </header>

    <?php
        $thumb = get_post_thumbnail_id();
        $img_url = wp_get_attachment_url( $thumb,'full' ); //get full URL to image (use "large" or "medium" if the images too big)
        $image = aq_resize( $img_url, 1200, 720, true ); //resize & crop the image
    ?>

    <?php if($image) : ?>
    <img class="img-responsive singlepic" src="<?php echo $image ?>"/>
    <?php endif; ?> 

    <?php if ( $post->post_type == 'data-design' && $post->post_status == 'publish' ) {

if ( $attachments ) {
    foreach ( $attachments as $attachment ) {
        $class = "post-attachment mime-" . sanitize_title( $attachment->post_mime_type );
        $thumbimg = wp_get_attachment_link( $attachment->ID, 'thumbnail-size', true );
        echo '<li class="' . $class . ' data-design-thumbnail">' . $thumbimg . '</li>'; 
    }
}  
}
?>

<div class="entry-content">

    <?php the_content(); ?>

    <?php
        wp_link_pages( array(
            'before' => '<div class="page-links">' . __( 'Pages:', 'web2feel' ),
            'after'  => '</div>',
        ) );
    ?>
</div><!-- .entry-content -->

</div>
</article><!-- #post-## -->

它将标题后的特色图像作为大图像然后发布内容,然后发布其余部分。

我想定位内容中的图片,并以与显示特色图片相同的方式显示它们。

*注意 - 对'if($ attachments){...'函数的更改不会改变任何内容(也不会完全删除它),因此我不确定该部分的作用。唯一影响内容的代码是调用它时('')

1 个答案:

答案 0 :(得分:0)

有时以前我习惯使用代码来删除内容区域中的所有图像,然后将其与内容分开显示。这可能会对你有所帮助。

functions.php文件中 -

function stripe_images_from_content($content){

$images = array();  
$subject = $content;

$subject = preg_replace('~<img [^\>]*\ />~', '', $subject);
$subject = preg_replace('~\[caption[^\]]*\][^\]]*\]~', '', $subject);

$image_urls = array();

$match_count = preg_match_all( '/<img.*src=["\']([^"\']*)["\'].*\/>/', $content, $image_urls );

if (is_numeric($match_count) && $match_count > 0) {

    if( is_array($image_urls[1]) and count($image_urls[1]) > 0 ){

        foreach( $image_urls[1] as $i ){

            $featured_image_url = $i;               
            $image_id = get_attachment_id_from_src( $featured_image_url );

            if (! is_numeric($image_id)) {

                $match_count = preg_match( '/(.*)-\d+x\d+(\.(jpg|png|gif))/', $featured_image_url, $matches );

                if (is_numeric($match_count) && $match_count > 0) {
                    $base_image_url = $matches[1] . $matches[2];

                    $images[] = get_attachment_id_from_src( $base_image_url );
                }
            }
            else{
                $images[] = $image_id;
            }

        }

    }       

}

$data = new stdClass();

$data->images = $images;
$data->content = $subject;

return $data;

}

此功能的作用是将所有图像插入帖子的内容区域并将其剥离。然后返回没有图像的图像和内容。

single.php文件中 -

$content = stripe_images_from_content(get_the_content());

现在你需要做两件事。 $content->images包含在帖子内容区域中插入的所有图片。 $content->content保留了原始内容图片。 第一次您需要明智地使用$content->images来显示图片,第二次the_content()函数替换为echo wpautop($content->content);

希望这对你有所帮助。