如何根据当前时间自动改变特色图片

问题描述：

我正在自定义一个带有静态首页的wordpress网站。我正在使用响应/动态主题。如何根据当前时间自动改变特色图片

我想要做的是让首页上加载的精选图片根据时间不同而不同。例如：说有人在下午6点前往我的网站，我想让首页上的精选图片展示夜空的图片。但是，如果有人在下午6点之前（早5点）访问我的网站，那么特色图片应该会显示白天的图片。

Iv'e无处不在寻找一个插件来为我做这件事，但似乎并不存在。 Iv'e也无休止地搜索了这个，并且找不到具体的解决方案，但是我已经能够找到消息来帮助我开始。

通过PHP和SQL添加来自外部源特色图片： http://www.wpexplorer.com/wordpress-featured-image-url/ （它会更容易只使用和更新语句，并改变图像的URL数据库）在给定的时区

获取时间： Get current date, given a timezone in PHP?

我本来可以使用很多代码从提供的链接来实现我想要的，但我碰到了一个问题。我无法在wordpress数据库中找到精选图片的图片网址。我看过_postmeta和_posts都没有运气。相反，它只是显示主题附带的图像的图像网址，但之后已被更改。这可能与我一直使用Jetpack插件（光子）从wordpress.com服务器加载图像的事实有关，但我已关闭该功能，仍然无法在数据库中找到图像url 。

由于我不是一个在PHP和SQL的专业人士，它将是很好的被指向正确的方向，甚至更好，如果有人可以拿出一个解决方案。我知道这不是一个简单的实施，但绝对值得，因为在其他地方找不到解决方案。

答

这可以很容易地用JavaScript做..

下面是一个简单的例子，我做的事： https://jsfiddle.net/p2snuf1a/

var date = new Date(); 
 
var hours = date.getHours(); 
 

 
var sunset_img= "http://at-cdn-s01.audiotool.com/2014/06/03/documents/85NwUJbwC0Gx0rbiKePSWWcKUqhmdP/0/cover256x256-46428e19514b49058125b21b8107c2eb.jpg"; 
 

 
var night_img = "https://pbs.twimg.com/profile_images/2973095145/47f74748e0c6240db5e0b3034af6da16.jpeg"; 
 

 

 
if(hours > 18){ 
 
    document.getElementById('feature_img').setAttribute('src', night_img); 
 
} 
 
else{ 
 
    document.getElementById('feature_img').setAttribute('src', sunset_img); 
 
}

基本上，它得到当前的小时，设置了一些变量到图像链接（这些也可以是本地存储的图像）。然后检查小时是大于还是小于特定时间，所以18点是下午6点。

您可以为其他时间/图像组合添加更多'else if（）'选项。

如果你位于你的CSS您的图像，你可以使用“.sytle”而不是.setAttribute

的

这实际上是辉煌的Lizzeiy！但唯一的问题是，我得到以下错误：未捕获TypeError：无法读取属性'setAttribute'为空 – dev4cthefuture

您是否能够向我显示您编写的代码？ – Lizzeiy

答

嗯，这是preety简单的任务，但我可以看到一个问题吧。 PHP将使用它自己的服务器时间计算白天和黑夜。所以如果你的服务器在纽约，有人正在从印度冲浪你的网站，它将显示图像取决于纽约时间。因此，要实现用户的本地时间，您必须使用javascript或使用地理位置API，这将显示给定位置的确切时间。这是一个例子。

http://api.geonames.org/timezone?lat=47.01&lng=10.2&username=demo

现在，我们只假设你想改变取决于服务器时的图像。所以，因为你只有昼夜两个图像，硬编码应该不是问题。（如果你想拥有自定义字段，可以查看“高级自定义字段”插件，它是在你的帖子中添加自定义字段的精彩插件）。

我还没有测试过这个代码，但它应该可以工作。

date_default_timezone_set('America/Chicago'); 

$am_pm = date('a'); 

if($am_pm == 'am'){?> 
    <img src="<?php echo get_template_directory();?>/images/am.png" alt="Good Morning"> 
<?php }elseif($am_pm == 'pm'){?> 
    <img src="<?php echo get_template_directory();?>/images/pm.png" alt="Good Evening"> 
<?php }?>

如何根据当前时间自动改变特色图片

相关推荐