首页 文章

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

提问于
浏览 次
0

我正在构建一个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>";
}
?>

UPDATE 将我的缩略图逻辑更改为以下内容：

<?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; //获取精选图片的网址

$ background_image =''; $ background_image_array = get_the_post_thumbnail（$ page_data-> ID，'full'）;

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'); 但是，我无法从此代码中获取图像的URL ....对此有何帮助？

php arrays wordpress foreach

4 回答

  • 0

    这是我更新的答案：

    <?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'>";
    回复于
  • 0

    试试这个

    <?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>";
}
?>
    回复于
  • 1

    试试这个

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

    UPDATE 将我的缩略图逻辑更改为以下内容：

    $post_id = $page->ID;
$background_image = '';
$background_image = get_the_post_thumbnail($post_id, 'full');
    回复于
  • 0

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

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

    奇迹般有效

    回复于

相关问题