Question

我对编码非常陌生，并且已经在本地wordpress网站的首页上创建了图像轮播。它根本不显示我的图像。这是我的PHP代码：

///HOMEPAGE IMAGE CAROUSEL///
$sliderholder = '<div class="slider-holder" >';
$sliderholder .= '<span id="slider-image-1" ></span>';
$sliderholder .= '<span id="slider-image-2" ></span>';
$sliderholder .= '<span id="slider-image-3" ></span>';
$sliderholder .= '</div>';

$imageholder = '<div class="image-holder" >';
$imageholder .= '<img src="http://localhost/EllesSite/wp-content/uploads/2018/09/pexels-photo-1002638.jpeg" class="slider-image-1" />';
$imageholder .= '<img src="http://localhost/EllesSite/wp-content/uploads/2018/09/pexels-photo-905877.jpeg" class="slider-image-2" />';
$imageholder .= '<img src="http://localhost/EllesSite/wp-content/uploads/2018/09/pexels-photo-399161.jpeg" class="slider-image-3" />';
$imageholder .= '</div>';

$buttonholder = '<div class="button-holder" >';
$buttonholder .= '<a href="#slider-image-1" class="slider-change" ></a>';
$buttonholder .= '<a href="#slider-image-2" class="slider-change" ></a>';
$buttonholder .= '<a href="#slider-image-3" class="slider-change" ></a>';
$buttonholder .= '</div>';

add_action( 'loop_start', 'using_front_page_conditional_tag' );
function using_front_page_conditional_tag() {
if ( is_front_page() ) {
        echo $sliderholder.$imageholder.$buttonholder;

    } 
}

?>

还有我的CSS：

/*IMAGE CAROUSEL*/
.slider-holder {
        width: 100%;
        height: 400px;
        background-color: yellow;
        margin-left: auto;
        margin-right: auto;
        margin-top: 0px;
        text-align: center;
        overflow: hidden;


    }

    .image-holder {
        width: 2400px;
        background-color: red;
        height: 400px;
        position: relative;
        clear: both;

        -webkit-transition: left 2s;
        -moz-transition: left 2s;
        -o-transition: left 2s;
    }

    .slider-image {
        float: left;
        margin: 0px;
        padding: 0px;
        position: relative;
    }

    #slider-image-1:target ~ .image-holder 
    {
        left: 0px;
    }

    #slider-image-2:target ~ .image-holder
    {
        left: -800px;
    }

    #slider-image-3:target ~ .image-holder
    {
        left: -1600px;
    }

    .button-holder
    {
        position: relative;
        top: -20px;
    }

    .slider-change
    {
        display: inline-block;
        height: 10px;
        width: 10px;
        border-radius: 5px;
        background-color: brown;
    }

我能够使这些图像出现在网站首页的某个阶段，但是它们的样式根本不正确，页面上确实很乱而且很粗糙。现在，我根本无法在网站上看到我的图像。我不知道哪里出了问题，我想这就像将每个div声明为一个变量，然后在有关首页的'if'语句之后回显变量一样简单。我把头撞在墙上。希望有人能提供帮助。谢谢。

Answer 1

仅在首页上显示内容的最简单方法是为其创建特定的模板。

在您的主题（或更妙的是，您的CHILD主题-here是一个很好的教程）中，将 page.php 复制到一个新文件并将其命名为 front -page.php （如果front-page.php已经存在，请使用它）。该模板仅加载在Wordpress设置中设置为“主页”的页面上。

在这种情况下，您只需在希望将其显示在front-page.php模板中的位置处，为转盘添加标准html。

Wordpress头版上的PHP / HTML / CSS图像轮播功能

1 个答案: