Question

我正试图围绕如何实现多个背景（对于滑块）进入我的标题。

我已经完成了所有自定义工具，我现在正在尝试设置，所以我可以通过我设置的不同背景图像让一些javascript循环。

标题首页代码（header-home.php）：

<header class="site-header">
<div class="row header-home" <?php
if ((get_theme_mod('slider_radio', 'slider') == 'static')) {
    echo 'style="background-image:url(' . get_header_image() . ');' . 'background-repeat: no-repeat;
 background-position: center; background-size: cover;min-height:100vh">';
} else {
    echo 'style="background-image:url(' .
        getsliderimage1() . ',url(\'' .
        getsliderimage2() . ',url(\'' .
        getsliderimage3() . ');' .
        'background-repeat: no-repeat;background-position: center; background-size: cover;min-height:100vh">';
} ?>
<?php get_template_part('template-parts/header/site', 'branding'); ?>
<?php get_template_part('template-parts/header/menu', 'top'); ?>
</div>

它引用的slider.php代码

function getsliderimage1()
{
    if (!empty(get_theme_mod('slider_image_1'))) {
        echo get_theme_mod('slider_image_1', get_bloginfo('template_url') . '/images/image1.jpg') . ')';
    }
}

function getsliderimage2()
{
    if (!empty(get_theme_mod('slider_image_2'))) {
        echo get_theme_mod('slider_image_2', get_bloginfo('template_url') . '/images/image1.jpg') . ')';
    }
}

function getsliderimage3()
{
    if (!empty(get_theme_mod('slider_image_3'))) {
        echo get_theme_mod('slider_image_3', get_bloginfo('template_url') . '/images/image1.jpg') . ')';
    }
}

我的问题是，当我打开我的slider_radio而不是'静态'时，slide.php会被加载，它只会破坏我的页面加载它。

显然我在某个地方犯了一个错误。我只是不能指出在哪里。现在正在寻找几个小时。

希望有人能告诉我我做错了什么。

这里是wordpress主题开发的新手。

谢谢！

修改：

让我再解释一下。我的目的是仅在自定义程序中使用背景时将图像背景添加到背景中。包含这些图像的3个控件（如果不使用则不包含）是slider_image_1，slider_image_2和slider_image_3

更新

似乎当我将我的函数直接粘贴到同一个文件中时，它不再有加载页面的问题。 Hmmn

Answer 1

我进行了大量的测试和编码，只需将所有内容转换为同一个文件并进行一些调整即可使用。

当你对链接使用echo并使用它们进入另一个echo时，斜杠会被删除。 U可以通过在没有函数的情况下对代码的每个部分使用回声来解决这个问题：

像这样：

<header class="site-header">
    <div class="row header-home" <?php
    if ((get_theme_mod('slider_radio', 'slider') == 'static')) {
        echo 'style="background-image:url(' . get_header_image() . ');' . 'background-repeat: no-repeat;
     background-position: center; background-size: cover;min-height:100vh">';
    } else {
        echo 'style="background-image:';
        if (!empty(get_theme_mod('slider_image_1', get_bloginfo('template_url') . '/images/image1.jpg'))) {
            echo 'url(' . esc_url(get_theme_mod('slider_image_1', get_bloginfo('template_url') . '/images/image1.jpg'))
                . ')';
            if (!empty(get_theme_mod('slider_image_2', get_bloginfo('template_url') . '/images/image1.jpg')) || !empty(get_theme_mod('slider_image_3', get_bloginfo('template_url') . '/images/image1.jpg')))
            {
                echo ',';
            }
        }
        if (!empty(get_theme_mod('slider_image_2', get_bloginfo('template_url') . '/images/image1.jpg'))) {
            echo 'url(' . esc_url(get_theme_mod('slider_image_2', get_bloginfo('template_url') . '/images/image1.jpg')) . ')';
            if (!empty(get_theme_mod('slider_image_3', get_bloginfo('template_url') . '/images/image1.jpg')))
            {
                echo ',';
            }
        }
        if (!empty(get_theme_mod('slider_image_3', get_bloginfo('template_url') . '/images/image1.jpg'))) {
            echo 'url(' . esc_url(get_theme_mod('slider_image_3', get_bloginfo('template_url') . '/images/image1.jpg')) . ')';
        }
        echo ';';
        echo 'background-repeat: no-repeat;background-position: center; background-size: cover;min-height:100vh">';
    } ?>
    <?php get_template_part('template-parts/header/site', 'branding'); ?>
    <?php get_template_part('template-parts/header/menu', 'top'); ?>
    </div>
</header>

Answer 2

如果您使用bootstrap，那么效果会更好：

<header class="site-header">
    <?php get_template_part('template-parts/header/site', 'branding'); ?>
    <?php get_template_part('template-parts/header/menu', 'top'); ?>
    <div class="row header-home" <?php
    if ((get_theme_mod('slider_radio', 'slider') == 'static')) {
        echo 'style="background-image:url(' . get_header_image() . ');' . 'background-repeat: no-repeat;
     background-position: center; background-size: cover;min-height:100vh">';
    } else {
    echo '>';
    ?>
    <script>$('.carousel').carousel({
            interval: 2000
        })
    </script>
    <div id="designitCarousel" class="carousel slide carousel-fade" data-ride="carousel">
        <!-- Indicators -->
        <ol class="carousel-indicators">
            <li data-target="#designitCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#designitCarousel" data-slide-to="1"></li>
            <li data-target="#designitCarousel" data-slide-to="2"></li>
        </ol>
        <!-- Wrapper for slides -->
        <div class="carousel-inner" role="listbox">
            <?php
            if (!empty(get_theme_mod('slider_image_1', get_bloginfo('template_url') . '/images/image1.jpg'))) {
                echo '<div class="item active"><img src="';
                echo esc_url(get_theme_mod('slider_image_1', get_bloginfo('template_url') . '/images/image1.jpg')) . '"';
                echo 'alt="Image 1">';
                echo '<div class="carousel-caption">';
                echo '<h1>' . get_theme_mod('slider_text_1') . '</h1>';
                echo '</div>';
                echo '</div>';
            }
            if (!empty(get_theme_mod('slider_image_2', get_bloginfo('template_url') . '/images/image1.jpg'))) {
                echo '<div class="item"><img src="';
                echo esc_url(get_theme_mod('slider_image_2', get_bloginfo('template_url') . '/images/image1.jpg')) . '"';
                echo 'alt="Image 2">';
                echo '<div class="carousel-caption">';
                echo '<h1>' . get_theme_mod('slider_text_2') . '</h1>';
                echo '</div>';
                echo '</div>';
            }
            if (!empty(get_theme_mod('slider_image_3', get_bloginfo('template_url') . '/images/image1.jpg'))) {
                echo '<div class="item"><img src="';
                echo esc_url(get_theme_mod('slider_image_3', get_bloginfo('template_url') . '/images/image1.jpg')) . '"';
                echo 'alt="Image 3">';
                echo '<div class="carousel-caption">';
                echo '<div class="slide-text slide_style_left">';
                echo '<h1 data-animation="animated zoomInRight">' . get_theme_mod('slider_text_3') . '</h1>';
                echo '</div>';
                echo '</div>';
                echo '</div>';
            }
            ?>
            <a class="left carousel-control" href="#designitCarousel" role="button" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="right carousel-control" href="#designitCarousel" role="button" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>
        <?php
        } ?>
    </div>
</header>

额外的css：

.header-home {
    min-height: 100vh;
}
#designitCarousel {
    width:100%;
    height: 100%;
    max-height: 100vh;
    overflow: hidden;
    z-index: -5;
    position: absolute;
}
#designitCarousel img {
    width: 100%;
    height: auto;
}
.carousel-inner {
max-height: 100vh;
}
.carousel-inner > .item {
    max-height: 100vh;
}
.carousel-caption {
    padding-bottom: 25%;
}

获取多个图像作为背景

2 个答案: