菜鸟科技网

dede如何加对联广告

第一步:在DedeCMS后台添加广告

这是最基础的一步,目的是让系统知道你的广告内容是什么(图片、文字、链接等)。

dede如何加对联广告-图1
(图片来源网络,侵删)
  1. 登录后台:使用你的管理员账号登录DedeCMS后台。

  2. 进入广告管理:在左侧菜单栏中,找到 【核心】 -> 【广告管理】 -> 管理】,并点击进入。

  3. 添加新广告:点击右上角的 【增加新广告】 按钮。

  4. 填写广告信息:在弹出的页面中,填写以下关键信息:

    dede如何加对联广告-图2
    (图片来源网络,侵删)
    • 广告名称:给广告起个名字,方便你日后识别,左侧对联广告”、“右侧对联广告”。
    • 广告位置这是最关键的一步! 对联广告通常不在系统预设的常见位置(如首页顶部、底部),所以这里我们自定义一个位置,你可以输入 duilian 或者 ad_zhong 这样的唯一标识符,记住这个名字,后面模板调用时需要用到。
    • :在这里输入你的广告代码。
      • 如果是图片广告:你需要粘贴完整的HTML代码,
        <a href="https://www.your-ad-link.com" target="_blank">
            <img src="/images/ad-left.jpg" alt="广告图片" width="120" height="300" />
        </a>
        • href 是广告的跳转链接。
        • src 是广告图片的路径(建议使用绝对路径,如 /uploads/ads/left.jpg)。
        • widthheight 是图片的尺寸。
      • 如果是代码/Flash广告:直接粘贴提供的广告代码即可。
    • 广告类型:选择“图片”或“代码”。
    • 启用状态:务必勾选 【启用】,否则广告不会显示。
    • 其他选项:如“过期时间”、“点击限制”等可以根据需要设置,通常对联广告可以不设置。
  5. 保存:点击页面底部的 【保存】 按钮。

重复以上步骤,为右侧的对联广告再添加一个,同样在“广告位置”中输入一个不同的标识符,duilian_right


第二步:在模板文件中调用广告

已经添加到后台了,现在需要把它显示在你的网站上,最常见的是放在首页模板文件中。

  1. 找到首页模板文件

    dede如何加对联广告-图3
    (图片来源网络,侵删)
    • 登录你的网站FTP或主机文件管理器。
    • 进入 templets 目录。
    • 找到你当前使用的模板文件夹(default)。
    • 找到首页模板文件,通常是 index.htm
  2. 编辑模板文件

    • 用代码编辑器(如VS Code, Sublime Text, Notepad++)打开 index.htm 文件。
  3. 添加广告调用代码

    • 在你希望显示对联广告的位置(通常是 <body> 标签内部,页面两侧的固定位置),插入DedeCMS的专用广告调用标签。

    • 左侧对联广告调用代码

      {dede:myad name='duilian'/}

      注意name='duilian' 中的 duilian 必须和你在后台添加广告时填写的“广告位置”完全一致。

    • 右侧对联广告调用代码

      {dede:myad name='duilian_right'/}

      同样,name='duilian_right' 也必须和后台的“广告位置”匹配。

  4. 添加CSS样式(非常重要): 对联广告通常是固定位置(Fixed Position),这样用户滚动页面时,广告会一直停留在屏幕两侧,你需要为这两个广告添加CSS样式。

    index.htm 文件的 <head> 标签内,或者在模板的公共CSS文件(如 style.css)中,添加以下样式:

    /* 左侧对联广告样式 */
    .ad-left {
        position: fixed; /* 固定定位 */
        left: 10px;     /* 距离左侧10px */
        top: 100px;     /* 距离顶部100px,可根据需要调整 */
        z-index: 9999;  /* 确保广告显示在最上层 */
    }
    /* 右侧对联广告样式 */
    .ad-right {
        position: fixed; /* 固定定位 */
        right: 10px;    /* 距离右侧10px */
        top: 100px;     /* 距离顶部100px,可根据需要调整 */
        z-index: 9999;  /* 确保广告显示在最上层 */
    }
    /* 为广告图片添加一些内边距,避免紧贴边缘 */
    .ad-left img, .ad-right img {
        padding: 5px;
        display: block; /* 避免图片下方出现间隙 */
    }
  5. 在HTML中应用样式: 回到你插入 {dede:myad} 标签的地方,给它们加上 div 容器并应用CSS类。

    修改后的HTML代码应该是这样的:

    <!-- 左侧对联广告 -->
    <div class="ad-left">
        {dede:myad name='duilian'/}
    </div>
    <!-- 右侧对联广告 -->
    <div class="ad-right">
        {dede:myad name='duilian_right'/}
    </div>
  6. 保存并上传:保存修改后的 index.htm 文件,并上传到服务器,然后刷新你的网站首页,就能看到对联广告了。


进阶技巧与注意事项

  1. 只对首页显示:通常对联广告只在首页出现,你可以使用DedeCMS的条件判断语句来实现。

    {dede:global name='cfg_phpurl'/}/index.php
    {dede:if $ismember != 1 && $typeid == ''}
        <!-- 非会员且不在栏目页时显示 -->
        <div class="ad-left">{dede:myad name='duilian'/}</div>
        <div class="ad-right">{dede:myad name='duilian_right'/}</div>
    {/dede:if}

    更简单的方法是判断当前页面是否为首页:

    {dede:global name='cfg_indexname'/}
    {dede:if $field.title == $cfg_indexname}
        <!-- 如果是首页 -->
        <div class="ad-left">{dede:myad name='duilian'/}</div>
        <div class="ad-right">{dede:myad name='duilian_right'/}</div>
    {/dede:if}

    或者直接使用 {dede:global name='cfg_isdefault'/} 标签判断是否为默认首页(即首页)。

    {dede:global name='cfg_isdefault'/}
    {dede:if $cfg_isdefault == 'Y'}
        <!-- 如果是首页 -->
        <div class="ad-left">{dede:myad name='duilian'/}</div>
        <div class="ad-right">{dede:myad name='duilian_right'/}</div>
    {/dede:if}
  2. 关闭广告功能:如果网站需要关闭广告,不要直接删除模板代码,最简单的方法是去后台将广告的“启用状态”取消勾选,这样广告就不会再显示了,模板代码可以保留以便日后重新启用。

  3. 移动端适配:固定定位的广告在移动端会严重影响用户体验,建议使用媒体查询(Media Query)在移动端隐藏广告。

    /* 在CSS文件中添加 */
    @media screen and (max-width: 768px) {
        .ad-left, .ad-right {
            display: none; /* 在小屏幕设备上隐藏广告 */
        }
    }

通过以上步骤,你就可以成功地在DedeCMS网站上添加并显示对联广告了,如果遇到问题,请仔细检查“广告位置”名称是否写错,CSS样式是否正确应用。

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