Question

我正在尝试在子主题中制作自定义WordPress循环，以便我可以将视频添加到主页的背景中。我已将模板添加到我需要使用的页面的子主题中。

问题是其他几个页面将使用相同的模板，因此我需要自定义循环，以便它只在首页上显示视频，但仍然使用该模板用于其余内容。

这是我到目前为止使用自定义循环的自定义模板;

    <?php 
get_header(); ?>

<?php if (is_front_page()): ?> 

<div class="fullscreen-bg">
<video loop muted autoplay poster="wp-content/uploads/2016/10/I_Waited_VA_Logo.png" class="fullscreen-bg__video">
    <source src="wp-content/uploads/2016/07/I_Watied_VA_Video_1_Long_01.webm" type="video/webm">
    <source src="wp-content/uploads/2016/07/I-Watied-VA-Video-1-Long.mp4" type="video/mp4">
    </video>
    </div>
<?php endif; ?> 

    <div id="your-content">
<?php 
while ( have_posts() ) :
    the_post();
    the_content();
 endwhile; 
 ?> 
 </div>



<?php
get_footer();
    ?>

显示视频，但无法正常显示。它也不适用于使用该模板的其他页面。

这是我在style.css中使用的CSS;

    @import url("../campaign/style.css");


    /* Full screen video*/
    .fullscreen-bg {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
z-index: -100;
    }

    .fullscreen-bg__video {
position: absolute;
top: 50%;
left: 50%;
width: auto;
height: auto;
min-width: 100%;
min-height: 100%;
-webkit-transform: translate(-50%, -50%);
   -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    }

    @media (max-width: 767px) {
.fullscreen-bg {
    background: url('wp-content/uploads/2016/10/I_Waited_VA_Logo.png') center center / cover no-repeat;
}

.fullscreen-bg__video {
    display: none;
}
    }

    #your-content {
    position: relative;
    z-index: 1;
   }

Answer 1

您可以使用函数is_font_page()创建一个只在首页上运行代码的条件语句。

像这样：

<?php
  if( is_front_page() ) {
    // code that will run only on the homepage goes here
  }
?>

假设您在阅读设置中设置了静态首页。如果你没有，你应该一起使用is_home() && is_front_page()。因此，创建一个仅在博客的第一页上运行代码的条件，is_home()。

更多关于codex中的is_front_page（） - https://codex.wordpress.org/Function_Reference/is_front_page

至于您的视频，您不应将内容包装在视频或视频容器div中。相反，您应该分别包装内容和视频，并使用CSS进行定位。

<强>标记

<div id="fullscreen-bg">
    <video loop muted autoplay poster="wp-content/uploads/2016/10/I_Waited_VA_Logo.png" class="fullscreen-bg__video">
        <source src="wp-content/uploads/2016/07/I_Watied_VA_Video_1_Long_01.webm" type="video/webm">
        <source src="wp-content/uploads/2016/07/I-Watied-VA-Video-1-Long.mp4" type="video/mp4">
    </video>
</div>
<div id="your-content">
  <?php 
  while ( have_posts() ) :
      the_post();
      the_content();
  endwhile; 
  ?> 
</div>

<强> CSS

#fullscreen-bg {
    position: fixed;
    top:0;
    bottom: 0;
    left: 0;
    right:0;    
    z-index: 0;
}

#your-content {
  position: relative;
  z-index: 1;
}

Answer 2

您的帖子循环位于<video>标记内，因此难怪这个糟糕的东西无法正常渲染。此外，正如其他答案中所述，您可以使用is_home()和is_front_page()来检查您在网站上的位置并相应地注入视频。

<?php get_header(); ?>

<?php if (is_home() || is_front_page()): ?>

<div class="fullscreen-bg">
    <video loop muted autoplay poster="wp-content/uploads/2016/10/I_Waited_VA_Logo.png" class="fullscreen-bg__video">
        <source src="wp-content/uploads/2016/07/I_Watied_VA_Video_1_Long_01.webm" type="video/webm">
        <source src="wp-content/uploads/2016/07/I-Watied-VA-Video-1-Long.mp4" type="video/mp4">
    </video>
</div>

<?php endif; ?>

<?php while (have_posts()): ?>

<?php
    the_post();
    the_content();
?>

<?php endwhile; ?> 

<?php get_footer();?>

自定义WordPress循环（仅限主页上的视频）

2 个答案: