菜鸟科技网

织梦如何添加浮动广告?

要在织梦CMS(DedeCMS)中添加浮动广告,需要通过修改模板文件、调用广告代码以及设置样式来实现,以下是详细的操作步骤和注意事项,帮助您顺利完成浮动广告的添加。

织梦如何添加浮动广告?-图1
(图片来源网络,侵删)

登录织梦后台,进入“核心”-“广告管理”模块,点击“增加一个新广告”,在广告管理界面中,填写广告名称,选择广告类型(如图片、Flash、代码等),上传广告素材或粘贴广告代码,并设置广告的显示方式(如首页、内页等),保存广告后,记录下广告的ID号,后续在模板中调用时会用到。

修改模板文件以实现浮动效果,织梦的浮动广告通常通过CSS定位和JavaScript控制来实现,打开需要显示广告的模板文件,一般是首页模板(index.htm)或公共头部模板(head.htm),在<head>标签内添加CSS样式代码,用于控制广告的位置和显示效果,添加以下代码可以实现右下角浮动的广告样式:

.float-ad {
    position: fixed;
    right: 10px;
    bottom: 10px;
    z-index: 9999;
    cursor: pointer;
}

在模板文件的<body>标签内合适的位置(如<div class="main">之后)添加广告调用代码,织梦提供了广告调用标签{dede:myad name='广告位标识'},广告位标识”是在广告管理中设置的标识名称,如果未设置标识,可以直接使用广告ID调用,例如{dede:myad aid='1'},将此标签包裹在之前定义的CSS类中,如下所示:

<div class="float-ad">
    {dede:myad name='float_ad'/}
</div>

如果需要更复杂的浮动效果(如点击关闭、定时隐藏等),可以结合JavaScript实现,在模板文件中添加以下JS代码(建议放在<head>标签内或底部):

织梦如何添加浮动广告?-图2
(图片来源网络,侵删)
<script>
document.addEventListener('DOMContentLoaded', function() {
    var adBox = document.querySelector('.float-ad');
    var closeBtn = document.createElement('span');
    closeBtn.innerHTML = '×';
    closeBtn.style.cssText = 'position:absolute;right:5px;top:5px;color:#fff;cursor:pointer;';
    adBox.appendChild(closeBtn);
    closeBtn.onclick = function() {
        adBox.style.display = 'none';
    };
});
</script>

此代码会为广告添加一个关闭按钮,点击后隐藏广告,如果需要定时隐藏,可以修改为:

setTimeout(function() {
    adBox.style.display = 'none';
}, 10000); // 10秒后自动隐藏

注意事项:

  1. 广告代码中可能包含外部资源(如图片、JS文件),需确保这些资源可以被正常访问。
  2. 部分浏览器可能会拦截浮动广告,建议使用合规的广告内容。
  3. 如果网站使用HTTPS协议,广告代码中的资源链接也需使用HTTPS。
  4. 浮动广告的z-index值应设置较高,以确保广告显示在其他内容之上。

以下是通过CSS控制不同位置浮动广告的样式参考:

广告位置 CSS代码示例
右上角 top: 10px; right: 10px;
左下角 bottom: 10px; left: 10px;
居中悬浮 top: 50%; left: 50%; transform: translate(-50%, -50%);

如果需要在多个页面显示不同的浮动广告,可以通过判断当前页面类型来调用不同的广告代码,在首页显示广告A,在列表页显示广告B:

织梦如何添加浮动广告?-图3
(图片来源网络,侵删)
{dede:global name='typename' runphp='yes'}
if(@me=='首页') @me = '{dede:myad name='home_ad'/}';
else @me = '{dede:myad name='list_ad'/}';
{/dede:global}

对于响应式网站,还需要考虑移动端的适配,可以通过媒体查询调整浮动广告在移动端的显示方式,

@media screen and (max-width: 768px) {
    .float-ad {
        right: 5px;
        bottom: 5px;
        transform: scale(0.8);
    }
}

测试广告的显示效果,清除浏览器缓存后刷新页面,检查广告是否按预期显示、是否可以正常关闭,以及在移动端的适配情况,如果广告无法显示,检查广告管理中的启用状态、模板标签是否正确调用,以及CSS样式是否存在冲突。

相关问答FAQs:

问题1:浮动广告在移动端显示异常,如何解决?
解答:移动端适配问题通常可以通过CSS媒体查询解决,建议为浮动广告添加响应式样式,例如在小屏幕设备上调整广告尺寸或位置,具体方法是在CSS中添加@media查询,根据屏幕宽度调整广告的widthheighttransform属性,确保广告内容本身也是响应式的,避免使用固定宽高的图片或元素。

问题2:如何实现滚动页面时浮动广告始终固定在视口内?
解答:织梦默认的浮动广告已通过position: fixed实现固定定位,无需额外设置,但如果遇到广告随页面滚动的问题,可能是CSS样式冲突导致,检查模板中是否有其他元素覆盖了浮动广告的z-index,或是否有全局样式重置了position属性,确保浮动广告的容器CSS中明确设置了position: fixed和较高的z-index值(如9999),同时检查父元素是否包含transformoverflow属性,这些可能会影响固定定位的效果。

分享:
扫描分享到社交APP
上一篇
下一篇