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

【问题标题】：Custom WordPress loop (with video on home page only)自定义 WordPress 循环（仅限主页上的视频）
【发布时间】：2016-11-03 23:59:14
【问题描述】：

我正在尝试在子主题中制作自定义 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;
   }

【问题讨论】：

使用WP模板系统，您应该以主页模板与其他页面模板不同的方式进行此操作。此外，要检测它是否是主页，请使用 WP 函数 is_home() 和/或 is_front_page()

标签： php wordpress

【解决方案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()。

更多关于 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;
}

【讨论】：

我将我的 CSS 添加到我的原始帖子中，并且我还编辑了您和其他人建议的更改。它设置为静态首页，但 is_front_page() 似乎不起作用我也尝试了 is_home() 但没有运气。更改代码后，视频不再播放，但循环运行正常 the_post () 和 the_content() 似乎正在按应有的方式触发。

【解决方案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();?>

【讨论】：