将自定义css、html和js作为弹出窗口插入到当前页面中

时间:2021-07-01 作者:Daniel

我是wordpress开发的新手,我已经阅读了关于如何做我想做的事情的文档,但我找不到任何合适的答案。

我想做一个插件,可以显示一个弹出窗口时,有人去了一个特定的页面。弹出窗口中的信息可以根据管理员想要显示的内容进行自定义,但我不知道如何将css和js添加到访问者当前所在的页面。基本上是将html和css注入到身体中。我是一名初级开发人员,之前从未使用过php或wordpress(直到一周前,我的老板让我制作这个wordpress插件),但我对JS非常了解。

如果您能提供任何帮助或指出正确的方向,我们将不胜感激。

2 个回复
SO网友:Lefteris

我找到了一个小的解决方案,但它不是最好的,而不是你问的!

您可以在主题或子主题中创建自定义页面模板https://www.wpbeginner.com/wp-themes/how-to-create-a-custom-page-in-wordpress/#manual

并粘贴代码:

https://www.w3schools.com/howto/howto_js_alert.asp

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.alert {
  padding: 20px;
  background-color: #f44336;
  color: white;
}

.closebtn {
  margin-left: 15px;
  color: white;
  font-weight: bold;
  float: right;
  font-size: 22px;
  line-height: 20px;
  cursor: pointer;
  transition: 0.3s;
}

.closebtn:hover {
  color: black;
}
</style>
</head>
<body>

<h2>Alert Messages</h2>

<p>Click on the "x" symbol to close the alert message.</p>
<div class="alert">
  <span class="closebtn" onclick="this.parentElement.style.display=\'none\';">&times;</span> 
  <strong>Danger!</strong> Indicates a dangerous or potentially negative action.
</div>

</body>
</html>

SO网友:Rup

我想弹出式HTML在页面上的位置无关紧要?

您可以将wp_footer action, 通常在页面底部的</body> 关闭标记。这可能是编写弹出窗口div等的正确位置。您可以使用wp_enqueue_stylewp_enqueue_script, 你应该在wp_enqueue_scripts 钩(这里的JavaScript通常是从wp\\U页脚处理程序编写的,因此在编写弹出式HTML时,您也可以只编写脚本标记。但无论如何,我还是会使用wp\\U enqueue\\U脚本。)

相关推荐

在WooCommerce中更改通知的Html

我正在从头开始创建一个WooCommerce主题,我真的很想更改将默认WooCommerce消息包装在Cart 和Checkout 第页。我特别讨论的是在更新购物车或删除项目时,此元素中显示的默认消息:<div class="woocommerce-message" role="alert"> Your cart has been updated / Product was removed. Undo? </div