子比主题在论坛上方加广告，官方给的方法并不是很好用，我试了一下，直接就加到了标题上面，而我是想在标题和作者下面，文章内容框中，文章的正上方加入广告，与似乎求助DeepSeek，并且又根据我自己的需求修改了一点点，得到一个完全无边框的图片广告。
代码如下
<script>
document.addEventListener(‘DOMContentLoaded’, function() {
// 广告配置 – 您可以修改这些值
const adConfig = {
imageUrl: ‘图片地址’, // 替换为您的广告图片URL
linkUrl: ‘广告目标地址’, // 替换为您的广告链接
altText: ‘广告标题’,
newTab: true, // 是否在新标签页打开链接
containerStyle: ‘margin-bottom: 20px; text-align: center;’
};// 查找文章内容区域
const contentDiv = document.querySelector(‘.wp-posts-content’);if (contentDiv) {
// 创建广告容器
const adContainer = document.createElement(‘div’);
adContainer.className = ‘custom-ad-container’;
adContainer.style.cssText = adConfig.containerStyle;// 创建广告链接
const adLink = document.createElement(‘a’);
adLink.href = adConfig.linkUrl;
if (adConfig.newTab) {
adLink.target = ‘_blank’;
adLink.rel = ‘noopener noreferrer’;
}// 创建广告图片
const adImage = document.createElement(‘img’);
adImage.src = adConfig.imageUrl;
adImage.alt = adConfig.altText;
adImage.style.maxWidth = ‘100%’;
adImage.style.height = ‘auto’;// 组装广告元素
adLink.appendChild(adImage);
adContainer.appendChild(adLink);// 在文章内容前插入广告
contentDiv.parentNode.insertBefore(adContainer, contentDiv);
}
});
</script><style>
.custom-ad-container {
transition: transform 0.3s ease;
}.custom-ad-container:hover {
transform: translateY(-2px);
}.custom-ad-container img {
display: block;
margin: 0 auto;
}
</style>
直接在后台找到Zibll主题设置 – 全局&功能 – 自定义代码，在自定义底部HTML代码中填写上面的代码；
修改adConfig对象中的值：
- imageUrl: 替换为您的广告图片URL
- linkUrl: 替换为您的广告目标链接
- altText: 添加适当的替代文本
- 根据需要调整其他配置选项
这段代码虽然是全站都加载，但是它会锁定论坛页面内容，只在论坛内容上方显示，其它地方是不显示的。
如果还有其它页面的需求，可以求助AI。
本文来自投稿，不代表瓜5博客立场，如若转载，请注明出处：https://blog.gua5.com/majia/171
