在WordPress中使用JavaScript广告代码,可以通过以下几种方式实现:
WordPress社区提供了多种插件来轻松添加和管理广告,例如:
如果你希望通过代码来添加广告,可以在WordPress的functions.php
文件中添加自定义的JavaScript代码。例如,以下代码将在网站加载时显示一个简单的弹窗广告:
<script>
document.addEventListener("DOMContentLoaded", function() {
var popup = document.getElementById('popup');
var popup_box = document.querySelector('.popup_box');
var popup_close = document.querySelector('.popup_close');
// 窗口加载时弹出
window.onload = function() {
popup.style.display = "block";
}
// 点击窗体其他位置时关闭
window.onclick = function(event) {
if (event.target == popup) {
popup.style.display = "none";
}
}
popup_box.onclick = function() {
popup.style.display = "none";
}
// 点击关闭按钮时关闭
popup_close.onclick = function() {
popup.style.display = "none";
}
});
</script>
然后,在主题的CSS文件中添加相应的样式:
#popup {
position: fixed;
top: 0;
left: 0;
display: none;
width: 100%;
height: 100%;
margin: auto;
background: rgba(36, 36, 36, 0.8);
}
.popup_box {
z-index: 10;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 280px;
height: 396px;
margin: auto;
text-align: center;
}
.popup_close {
position: relative;
width: 36px;
height: 36px;
background: #fff;
color: #999;
float: right;
font-size: 24px;
text-align: center;
border-radius: 50%;
line-height: 36px;
font-weight: bold;
}
.popup_close:hover, .popup_close:focus {
color: red;
cursor: pointer;
}
.popup_img {
position: relative;
top: 36px;
left: 0px;
width:240px;
height:360px;
border-radius: 15px;
}
请注意,使用自定义代码或插件添加广告时,应确保遵守相关广告法规和平台政策,避免侵犯用户隐私或违反服务条款。
领取专属 10元无门槛券
手把手带您无忧上云