Php Wordpress将图像作为背景添加到动态创建的部分

我正在构建一个Wordpress主题，它将我的所有页面显示为一个页面上的部分，并且菜单滚动到每个部分。对于每个部分，我希望用户能够添加一个背景图像或背景颜色，但他们都有能力是不同的。然而，在我使用的代码中，当您更改一个页面部分的背景图像时，它会更改所有页面部分的背景图像

是否有一种方法可以更改下面的代码，这样当用户为特定页面选择背景图像（特色图像）时，它只会更改相应的部分

<?php $pages = get_pages(array('sort_column' => 'menu_order'));
foreach ($pages as $page_data) {
    $content = apply_filters('the_content', $page_data->post_content);
    $title = $page_data->post_title;
        $slug = $page_data->post_name;
    //get url of featured image
    $thumb_id = get_post_thumbnail_id();
    $thumb_url_array = wp_get_attachment_image_src($thumb_id, 'thumbnail-size', true);
    $thumb_url = $thumb_url_array[0];
    //check if page has featured image
    if ( has_post_thumbnail() ) {
    $featured_image = $thumb_url;
    }
    else {
$featured_image = '';
    }
    echo "<section id='$slug'  class='main fullscreen'>";
echo '<article class="main parallax" style="background:url(' . $featured_image . ') 50% 0 repeat fixed;">';
echo $content;
    echo '</article>';
echo "</section>";
}
?>

试试这个

<?php $pages = get_pages(array('sort_column' => 'menu_order'));
foreach ($pages as $page_data) {
    $content = apply_filters('the_content', $page_data->post_content);
    $title = $page_data->post_title;
        $slug = $page_data->post_name;
    //get url of featured image


 $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'single-post-thumbnail' );




    echo "<section id='$slug'  class='main fullscreen'>";
echo '<article class="main parallax" style="background:url(' . $image[0] . ') 50% 0 repeat fixed;">';
echo $content;
    echo '</article>';
echo "</section>";
}
?>

以下是我最新的答案：

<?php 
if ( has_post_thumbnail()) {
  $image_url = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'full');
  echo $image_url[0]
}
?>



当然，你可以把它放在你的循环中所需的位置，而不是重复它

来源如下：（同上）

这是您的代码：

<?php $pages = get_pages(array('sort_column' => 'menu_order'));
foreach ($pages as $page_data) {    

  $featured_image_url = '';

  if ( has_post_thumbnail()) {
    $featured_image_url = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'full');
  }

echo "<section id='" . $slug . "' class='main fullscreen'>";
echo '<article class="main parallax" style="background:url(' . $featured_image_url . ') 50% 0 repeat fixed;">';
echo $content;
echo '</article>';
echo "</section>";
}
?>

试试这个

<?php $pages = get_pages(array('sort_column' => 'menu_order'));
foreach ($pages as $page_data) {
    $content = apply_filters('the_content', $page_data->post_content);
    $title = $page_data->post_title;
        $slug = $page_data->post_name;
    //get url of featured image
    $thumb_id = get_post_thumbnail_id($page_data->ID);  // update
    $thumb_url_array = wp_get_attachment_image_src($thumb_id, 'thumbnail-size', true);
    $thumb_url = $thumb_url_array[0];
    $thumb_id = get_post_thumbnail_id();
    if((isset($thumb_id) && $thumb_id != '')){
        $thumb_url_array = wp_get_attachment_image_src($thumb_id, 'thumbnail-size', true);
        $thumb_url = $thumb_url_array[0];
        echo "<section id='$slug'  class='main fullscreen'>";
                echo '<article class="main parallax" style="background:url(' . $thumb_url . ') 50% 0 repeat fixed;">';
            echo $content;
                echo '</article>';
          echo "</section>" ;  
     }
     else {
         echo "<section id='$slug'  class='main fullscreen'>";
                echo '<article class="main parallax" style="background:#fff;">';
            echo $content;
                echo '</article>';
          echo "</section>" ;
     }
}
?>

需要使用$page\u data->ID作为$page\u ID。然后将其添加到以下代码中：

$background_image = wp_get_attachment_image_src( get_post_thumbnail_id( $page_data->ID ), 'single-post-thumbnail' );

很有魅力
恐怕这个答案在所有页面分区上都会显示相同的特征图像，而不是我刚才仔细检查过的每个分区的唯一图像，事实并非如此，它们是每个页面的独立特征图像。要获得不同页面的特征图像，您必须在
get_post_缩略图_id
中传递页面id，我已经在我的答案中更新了。令人恼火的是，这仍然只是在所有部分显示相同的特征图像-我真的认为这一个会起作用@SamSkirrow是否所有部分的旅游内容都不同？是的，所有部分的内容都不同sections@SamSkirrow那么我认为你所有的帖子/页面的特色图片都是一样的？我只是仔细检查了一下，事实并非如此，它们是每个页面的独立特色图片。奇怪的是，我刚刚注意到背景图像总是关于页面图像的任何内容-它不考虑任何其他页面谢谢（还有$slug spot-我还没有看到！）。你能详细说明一下我应该在你链接的页面上寻找什么吗？或者我怎么能用我的方法不那么迂回当然，对不起，我没有说得更具体。删除所有拇指逻辑，将默认的
$background\u image
值指定为“”（空，与当前的
else
循环相同）。接下来，只需分配以下内容：
$background\u image=get\u-the\u-post\u缩略图（$post\u-id，'full'）
最后，像在循环中一样，将背景图像分配给for循环迭代生成的div。我忘记了一个细节，您需要使用
$page\u data->ID
定义$post\u ID。这在示例循环的链接中引用，但是如果你不完全熟悉这个循环，这并不明显。很抱歉耽搁了你的时间，现在就开始吧。page_data->ID是个救星，你能看看我上面的更新吗，因为我不知道如何将图像的URL显示为背景URL没有问题-我去睡觉了，刚刚吃完早午餐。我用另一个函数更新了我的答案以获取URL，还添加了你的更新答案。一旦你确认它有效，你能将它标记为已接受吗？谢谢
echo "<section id='$slug'  class='main fullscreen'>";

echo "<section id='" . $slug  . "'  class='main fullscreen'>";

<?php $pages = get_pages(array('sort_column' => 'menu_order'));
foreach ($pages as $page_data) {
    $content = apply_filters('the_content', $page_data->post_content);
    $title = $page_data->post_title;
        $slug = $page_data->post_name;
    //get url of featured image
    $thumb_id = get_post_thumbnail_id($page_data->ID);  // update
    $thumb_url_array = wp_get_attachment_image_src($thumb_id, 'thumbnail-size', true);
    $thumb_url = $thumb_url_array[0];
    $thumb_id = get_post_thumbnail_id();
    if((isset($thumb_id) && $thumb_id != '')){
        $thumb_url_array = wp_get_attachment_image_src($thumb_id, 'thumbnail-size', true);
        $thumb_url = $thumb_url_array[0];
        echo "<section id='$slug'  class='main fullscreen'>";
                echo '<article class="main parallax" style="background:url(' . $thumb_url . ') 50% 0 repeat fixed;">';
            echo $content;
                echo '</article>';
          echo "</section>" ;  
     }
     else {
         echo "<section id='$slug'  class='main fullscreen'>";
                echo '<article class="main parallax" style="background:#fff;">';
            echo $content;
                echo '</article>';
          echo "</section>" ;
     }
}
?>

$post_id = $page->ID;
$background_image = '';
$background_image = get_the_post_thumbnail($post_id, 'full');

$background_image = wp_get_attachment_image_src( get_post_thumbnail_id( $page_data->ID ), 'single-post-thumbnail' );