分别显示 WordPress 帖子内容图像和文本

Question

我正在查看 WordPress 博客，并试图弄清楚在显示内容时如何分别显示图像和文本。我想这样做的原因是因为我想创建一个自定义布局，并且我需要能够在不同时抓取所有文本的情况下移动图像。有谁知道如何做到这一点？

我已经得到的示例：（已更新）

<?php 

 require('blog/wp-blog-header.php'); 

?>

<?php 

$args = array( 'numberposts' => 2, 'post_status'=>"publish",'post_type'=>"post",'orderby'=>"post_date");
$postslist = get_posts( $args );
echo '<ul id="latest_posts">';

foreach 
    ($postslist as $post) :  setup_postdata($post); 

echo get_content_without_tag( apply_filters( 'the_content', get_the_content() ), 'a' );

$image = get_tag_without_text( apply_filters( 'the_content', get_the_content() ), 'a' );
?> 
<li>
<strong>
    <?php the_date(); ?>
</strong>
<br />

<a href="<?php the_permalink(); ?>" title="<?php the_title();?>"> <?php the_title(); ?></a>
<p>
    <?php echo $image[0]; ?>
</p>
</li>
  <?php endforeach; ?>
</ul>

错误：

警告：DOMDocument::saveHTML() 需要 0 个参数，1 个给定 在 /hsphere/local/home/poulaum/isosec.co.uk/blog/wp-includes/functions.php 在线 4874

和图片显示上述代码显示的内容：

Answer 1

您可以使用featured images。此特色图片不会包含在帖子内容中。但是，如果您的图片已经包含在帖子内容中，那么您需要将帖子内容分成两部分，正如您在问题中所说的那样。

我有两个函数，一个从内容中返回所有图像（或任何 html 标记内容），另一个函数返回没有所需标记/图像的文本。这两个函数都使用DOMDocument

第一个函数get_content_without_tag() 返回已从图像中剥离的内容。有两个参数

• $html -> 带有图片的文字要被剥离，在这种情况下，使用apply_filters( 'the_content', get_the_content() )来使用帖子内容

• $tag -> 要删除的标签的名称，在这种情况下，'a' 因为a 标签包含图像

这里是函数

function get_content_without_tag( $html, $tag )
{
    // Return false if no html or tag is passed
    if ( !$html || !$tag )
    return false;

    $dom = new DOMDocument;
    $dom->loadHTML( $html );

    $dom_x_path = new DOMXPath( $dom );
    while ($node = $dom_x_path->query( '//' . $tag )->item(0)) {
        $node->parentNode->removeChild( $node );
    }
    return $dom->saveHTML();
}

然后，您将使用它代替 the_content()，您只需要显示文本，去掉完整的 <a/> 标签，其中的图像如下所示

echo get_content_without_tag( apply_filters( 'the_content', get_the_content() ), 'a' )

第二个函数get_tag_without_text() 返回所需标签之间的内容，在您的情况下为图像。参数与第一个函数完全相同。这是函数

function get_tag_without_text( $html, $tag )
{
    // Return false if no html or tag is passed
    if ( !$html || !$tag )
    return false;

    $document = new DOMDocument();
    $document->loadHTML( $html );  

    $tags = [];
    $elements = $document->getElementsByTagName( $tag );
    if ( $elements ) {
        foreach ( $elements as $element ) {
            $tags[] = $document->saveHtml($element);
        }   
    }   
    return $tags;
}

如果您使用a标签，此函数会返回一个图像数组，因此，要显示第一张图像，请使用以下函数：

$image = get_tag_without_text( apply_filters( 'the_content', get_the_content() ), 'a' );
echo $image[0];

编辑

上面的代码仅使用WP_Query 测试，而不是get_posts。我已经修复了上面代码和您的代码中的一些错误，以使其与 get_posts 一起使用

这是您的代码的工作示例。 （记得用上面的新函数更新函数）

<?php
$args = array( 
    'numberposts' => 2, 
    'post_status' => 'publish',
    'post_type'   => 'post',
    'orderby'     => 'date'
);
$postslist = get_posts( $args );

echo '<ul id="latest_posts">';

    foreach ( $postslist as $post ) {  
        setup_postdata($post); 

        $content = get_content_without_tag( $post->post_content, 'a' );
        $image = get_tag_without_text( $post->post_content, 'a' );

        if ( $content ) 
            echo apply_filters( 'the_content', $content );
        ?> 

        <li>

            <strong>
                <?php the_date(); ?>
            </strong>

            <br />

            <a href="<?php the_permalink(); ?>" title="<?php the_title();?>"> 
                <?php the_title(); ?>
            </a>

            <?php 
                if ( $image ) { 
                    ?>

                <p>
                    <?php echo apply_filters( 'the_content', $image[0] ); ?>
                </p>

                    <?php 
                } 
            ?>

        </li>

        <?php 
    } 

echo '</ul>';