如何正确使用PHPCMS V9的广告模块

Question

如题所述

Answer 1

前言
在phpcms中，正确合理的使用广告模块，能给我们制作网页时节省很多的时间，但是由于官方文档的不完善，往往我们不能正确的使用广告模块，其实，在使用过程中有一个关键，那就是要对广告模板进行重新设置，重设之后才能正常使用广告模块，不会出现错误提示了！步骤如下：

广告模板设置1.png
在菜单“模块 > 模块管理 > 广告 >”，点击“广告模板设置”。注意：在默认中phpcms会自动添加8个广告模板，除了test模板外，默认是只能查看，不能修改了，点击“删除”按钮后，会出现“设置”按钮，就可以修改默认的模板了，如下图所示：

广告模板设置_图片列表广告模板设置.png
完成上面步骤后，需要添加版位，点击“添加版位”按钮，如下图所示

添加版位.png
添加广告，如下图所示：

添加版位2.png

可以添加多个图片，如下图所示：

添加广告.png
在index.html中的广告位添加调用广告的代码，由于默认的调用方式，只能展示一张图，所以使用了get 标签，另外，由于需要图片切换显示，所以使用了jquery的SuperSlide 插件[1]，将插件在header.html中引用即可，代码如下：
最新代码
<!--1号广告位-->
<div id="ads960X100" class="ads960X100 bot"> {pc:get sql="SELECT setting FROM v9_poster WHERE spaceid = 15 AND type='images' AND disabled=0 ORDER BY listorder ASC" num="5"}
{loop $data $r}
{php $narry = string2array($r[setting]); }
<div class="hd">
<ul></ul>
</div>
<div class="bd">
<ul>
{loop $narry $j}
<li><a href="{$j[linkurl]}" target="_blank"><img src="{$j[imageurl]}" alt="{$j[alt]}"/></a></li>
{/loop}
</ul>
</div>
{/loop}{/pc} </div>

<!--1号广告位 END-->
原代码

<!--1号广告位-->
<div id="ads960X100" class="ads960X100 bot"> {pc:get sql="SELECT setting FROM v9_poster WHERE spaceid = 15 AND type='images' AND disabled=0 ORDER BY listorder ASC" num="5"}
{loop $data $r}
{php $narry = string2array($r[setting]); }
<div class="hd">
<ul>
<?php for($x = 1; $x <= count($narry); $x++){
echo "<li>" . $x . "</li>"; }
?>
</ul>
</div>
<div class="bd">
<ul>
{loop $narry $j}
<li><a href="{$j[linkurl]}" target="_blank"><img src="{$j[imageurl]}" alt="{$j[alt]}"/></a></li>
{/loop}
</ul>
</div>
{/loop}{/pc} </div>

<!--1号广告位 END-->
在index.html尾部需要添加的js 代码如下：
最新代码

<script type="text/javascript">
jQuery(".ads960X100").slide({titCell:".hd ul",mainCell:".bd ul",autoPage:true,autoPlay:true,delayTime:1200}); //广告播放
</script>
原代码

<script type="text/javascript">
jQuery(".ads960X100").slide({mainCell:".bd ul",autoPlay:true,delayTime:1200}); //广告播放
</script>
需要使用的css代码如下，我将它添加到default.css中

.ads960X100{ width:960px; height:100px; overflow:hidden; position:relative; border:1px solid #ddd; }
.ads960X100 .hd{ height:15px; overflow:hidden; position:absolute; right:5px; bottom:5px; z-index:1; }
.ads960X100 .hd ul{ overflow:hidden; zoom:1; float:left; }
.ads960X100 .hd ul li{ float:left; margin-right:2px; width:15px; height:15px; line-height:14px; text-align:center; background:#fff; cursor:pointer; }
.ads960X100 .hd ul li.on{ background:#f00; color:#fff; }
.ads960X100 .bd{ position:relative; height:100%; z-index:0; }
.ads960X100 .bd li{ zoom:1; vertical-align:middle; }
.ads960X100 .bd img{ width:960px; height:100px; display:block; }

[1]: SuperSlide 致力于解决网站大部分特效展示问题，使网站代码规范整洁，方便维护更新，截止发文前，版本是2.1.2。