现在的位置: 首页wordpress>正文
如何在wordpress文章中添加广告位
2012年06月29日 wordpress 暂无评论

 今天看到别人的blog中的文章中插入有广告,感觉不错,既能增加网页的美观性,又可以多增加一个广告位,何乐而不为。于是折腾了起来。

想想应该可以用DIV+CSS来搞定,那么就可以用三步来搞定。
1、  首先要产生一个DIV标签;
2、  这个DIV标签要放在什么地方;
3、  用CSS来控制DIV的属性。
那么简单点就是在想要插入广告的地方添加DIV标签,属性直接在DIV里设定像如下:
如果在文章顶部插入广告,那么在主题目录下找到sing.php模板文件,找到“<?php the_content(…); ?>”,在其上面添加以下代码:
1.                 <div style="padding:0px 10px>   
2.                 此处添加广告代码   
3.                 </div>  
在文章左或右插入,同顶部插入一样,但代码稍有不同:
1.                 <div style="float:left;width:336px;height:280px;">  
2.                 此处添加广告代码   
3.                 </div>  
如果在左上面代码left改为right就行了,width和height控制高宽。
如果在文章底部即代码要加在<?php the_content(…); ?>”的下面。
 
但是这样太麻烦,大家都知道广告替经常换的,为了方便即要单独设置一个文件来生成DIV标签,也就是广告代码存放的地方,然后在后台生成一个控制广告地方就不用改模板文件了,下面看。
建立一个ad-0.php模板文件,内容如下:
1.                 <div class="ad_0">   
2.                 此处添加广告代码   
3.                 </div>  
上面就是一个DIV标签,也即是一个布居,但放在那呢,还要用CSS来控制他的属性。下面来看第二步,现在我们是想他放在文章的那个地方,同上面添加一样,但在什么地方用CSS来控制,在sing.php模板文件,找到“<?php the_content(…); ?>”,在其上面添加如下一行代码:
1.                 <?php include('includes/ad_0.php'); ?>  
然后我们在CSS里添加此DIV的属性,打开style.css样式文件:
1.                 .ad_0 {   
2.                     float:right;   
3.                     width:300px;   
4.                     height:300px;   
5.                     margin:0 0 10px 10px;   
6.                     border:1px solid #ccc;   
7.                     }  

Float属性可以去掉,那就在文章顶部,在文章左侧那就是left,上面是在右侧;width,height是控制宽高;margin是控制其与四周的空隙;border控制边框。

修改中文模版,建议使用Notepad++文本编辑软件,并在格式菜单中选择“以UTF-8 无BOM格式编码”或者在wordpress后台编辑器里编辑,不然会出现识别不了代码的现象


分享到:



给我留言

留言无头像?