首页 > 解决方案 > 如何在 wordpress 中使用 out 插件创建浏览器推送导航

问题描述

我想将所有最新帖子显示为来自我的新 wordpress 网站的通知。我有一个用于浏览器通知的 JavaScript 代码,但我无法从每个最新帖子中动态调用描述,请帮助我根据需要修改此代码。

<script type="text/javascript" charset="UTF-8">
var articles = [
<?php $the_query = new WP_Query( 'posts_per_page=20' );
while ($the_query -> have_posts()) : $the_query -> the_post(); ?>
["<?php the_title(); ?>","<?php the_permalink() ?>"],<?php endwhile; wp_reset_postdata(); ?>
["100% FREE Offers Available on KiduDeals.com","<?php echo get_home_url(); ?>"]
];

setTimeout(function(){ 
var x = Math.floor((Math.random() * 10) + 1);
var title=articles[x][0];
var desc='<?php the_expert(50); ?>';
var url=articles[x][1];
notifyBrowser(title,desc,url);
}, 50000);

document.addEventListener('DOMContentLoaded', function (){  
if (Notification.permission !== "granted")
{
Notification.requestPermission();
}
});

function notifyBrowser(title,desc,url){
if (!Notification) {
console.log('Desktop notifications not available in your browser..'); 
return;
}
if (Notification.permission !== "granted")
{
Notification.requestPermission();
}
else {
var notification = new Notification(title, {
icon:'<?php echo get_bloginfo('template_url');?>/assets/images/favicon.png',
body: desc,
});

// Remove the notification from Notification Center when clicked.
notification.onclick = function () {
window.open(url);      
};

// Callback function when the notification is closed.
notification.onclose = function () {
console.log('Notification closed');
};

}};
</script>

标签: javascripthtmlwordpress

解决方案


推荐阅读