首页 > 解决方案 > 如何使用 Echo 设置 div 背景图像?

问题描述

我使用 jquery 和 php 为 wordpress 主题创建了一个简单的加载更多 ajax 按钮。我可以加载更多帖子,但我尝试使用 echo 将 div 的背景图像设置为我的 functions.php 文件中的帖子缩略图,但我不确定如何?我尝试创建变量并将其传递到 url,但它不起作用。这是我的代码:

add_action( 'wp_ajax_load_more', 'load_more' );

function load_more() {
    // load more posts
    $paged = $_POST['page']+1;
    $ppp = $_POST['ppp'];

    $query = new WP_Query( array(
        'post_type' => 'project',
        'status' => 'publish',
        'order' => 'ASC',
        'posts_per_page' => $ppp,
        'paged' => $paged
    ) );

    if($query->have_posts()):
        while($query->have_posts()): $query->the_post();

            $thumbnail = the_post_thumbnail_url();

            echo '<div class="col-lg-4 col-md-6">';
                echo '<div class="project">';
                    echo '<div class="project-content">';
                        echo '<div class="project-img" style="background:url( THUMBNAIL HERE )">';

                        echo '</div>';
                    echo '</div>';
                echo '</div>';
            echo '</div>';
        endwhile;
    endif;

    wp_reset_postdata();

    die();

```}

标签: phpwordpressecho

解决方案


如果您想设置一个等于帖子缩略图的变量,我认为您需要使用该get函数:

get_the_post_thumbnail_url()

然后,您可以将变量名称回显为背景图像:

echo '<div class="project-img" style="background:url(' . $thumbnail . ')">';

推荐阅读