Wordpress - 在内容中定位图像

Question

我的 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-## -->

它将帖子标题和特色图片作为大图片，然后发布内容，然后是其余内容。

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

*NOTE - 对 'if ( $attachments ) { ...' 函数的更改不会改变任何东西（也不会完全删除它），所以我不确定该部分的作用。唯一影响内容的代码是调用时（''）

Answer 1

以前我曾经使用以下代码剥离内容区域中的所有图像，然后将它们与内容分开显示。这可能会对您有所帮助。

在您的 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);

希望这对你有帮助。