PHP/HTML/CSS 图像轮播在 Wordpress 首页上的特色

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。