保持启用HTML元素只在首页

Question

我有一个WordPress的网站，其中包含了音频单元，从而一首歌曲自动启动，当有人访问该网站。它看起来像这样：

<figure><audio controls autoplay loop src="song-path.mp3"></audio></figure>

这是一个自定义的HTML控件。我需要这个标签是有效只在首页上，虽然所以我做了这个CSS：

audio, canvas, progress, video {
display: none;
 }

.home audio, canvas, progress, video {
display: inline-block;
}

有了这个CSS我能保持有源音响主页上，并从所有其他网页隐藏它，但歌曲不断被隐藏播放器中播放。

有没有办法对所有的网页，但家里的完全禁止或静音的歌曲？

谢谢

Answer 1

为什么你不加它只能在首页上？

if ( is_front_page() ) :
    the_widget( 'play_mp3_widget' );
else :
    the_widget( 'dontplay_mp3_widget' ); //* Or do Nothing *//
endif;

Answer 2

我认为最好你可能想只是调查发布您的Widget或PHP代码在特定页面上。

https://wordpress.stackexchange.com/questions/76959/how-to-add-a-specific-widget-to-only-1-page

但是，如果这是不可行的，你可以停止使用JavaScript您的音频。首先，添加一个ID到您的音频元素。

<audio id="myAudio" controls autoplay loop src="song-path.mp3"></audio>

接着，添加此代码需要的地方。

<script>
var myHomeAudio = document.getElementById("myAudio"); 
myHomeAudio.pause(); 
</script>

更新：如果你去JavaScript的路线，该ID的名称并不重要 - 只是把该元素的ID和你的方式引用它的JS比赛护理。如果您想尝试使用“家”蛞蝓名自动检测，这可能工作。

var pathArray = window.location.pathname.split('/');
var currentPage = pathArray[0];
if (currentPage !== "home"){ // Not equal to the Home page
  var myHomeAudio = document.getElementById("myAudio"); 
  myHomeAudio.pause(); 
}

说了这么多，如果时间允许，你可能要调查服务器端模型，不必对网页这个小部件，其中不使用它。