Question

我正在构建一个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（＆＃39; the_content＆＃39;，$ page_data-＆gt; post_content）; $ title = $ page_data-＆gt; post_title; $ slug = $ page_data-＆gt; post_name; //获取精选图片的网址

$ background_image =＆＃39;＆＃39 ;; $ background_image_array = get_the_post_thumbnail（$ page_data-＆gt; ID，＆＃39; full＆＃39;）;

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

这将在每个页面上方显示每个页面的唯一精选图像作为缩略图（由于行echo get_the_post_thumbnail($page_data->ID, 'thumbnail');但是，我无法从此代码中获取图像的网址....对此有何帮助？

Answer 1

这是我更新的答案：

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

当然，你可以将它放在所需的位置，而不是回显它。

以下是来源：http://codex.wordpress.org/Function_Reference/get_the_post_thumbnail（与之前相同）

这是你的代码：

<?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>";
}
?>

一面注意：

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

...应使用字符串连接，如下所示：

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

Answer 2

试试这个

<?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>";
}
?>

Answer 3

试试这个

<?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');

Answer 4

需要使用$ page_data-＆gt; ID作为$ page_id。然后将其添加到以下代码中：

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

像魅力一样工作

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

4 个答案: