最新消息:已制作自适应 JS 调用版本,对 SEO 更加友好!
请移步获取通用 JS 调用代码=>
一、代码用途
看到博友提出让互推联盟数据统一的建议,我个人想了 2 个办法:
① 建立公用数据库,互推成员都能调用,实现这个页面的数据统一;
② 采用 iframe 框架调用方式,实现数据统一。
经过考虑,还是放弃了公用数据库的方案,感觉把事情弄得太复杂了!最终我决定采用最简单的 iframe 代码调用方案,经过半小时的 DIY,已搞定!
现在发布 iframe 代码,成员可以在自己的博客引用,就可以得到一个数据统一的互推联盟页面了,理论上各种建站程序都能使用。
二、效果预览
调用效果如下(面包屑导航请自行根据主题另行添加):
你也可以直接打开https://zhang.ge/bokehutui 查看自适应拉伸效果(最窄宽度为 750)。
三、iframe 代码
<iframe style="padding: 0px; width: 100%;" height="480" src="/bokehutui" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>此代码最后由 Mars 丶 Ge 编辑于 2014 年 3 月 20 日 22:00
四、调用方法
直接将上面的 iframe 代码插入页面模板相应位置即可,下面具体说一下 WP 是如何添加的:
① 将主题下的页面模板 page.php 复制一份,并重命名一下(比如:htlm.php)(如果有留言板的博友,可以直接复制一份留言板即可),将以下内容加到顶部,如果已存在,直接修改冒号后的名称即可:
<?php /* Template Name: 互推联盟 */ ?>
② 在页面你想引用的位置插入上面的 iframe 代码,如果你的主题是定义了边框线的,也可以将此代码放入对应 DIV 里面,比如知更鸟就可以将代码放到<div class=”entry_box_s_l”></div>之间,从而加上边框(请参考文章最后的实例代码)。
③ 建立新页面,输入页面名称,如“互推联盟”,并修改别名为拼音或英文,然后如下图在右侧页面模板下拉选择【互推联盟】,保存即可。
Ps:此页面宽度可以自适应拉伸,当然你也可以根据实际大小将width:100%改成你需要的宽度(经测:最窄宽度 750,小于这个宽度 TAB 按钮会错排!)。
五、成功案例:
MOREOPEN:http://moreopen.info/electunion
龙三公子:http://www.mybabycastle.com/hutui.asp
梦轩丽人:http://www.mengxlr.com/yqlj.html
附:知更鸟主题实例参考代码
下面我给出一个知更鸟的实例页面代码,供大家参考:
Ps:知更鸟主题的博客可以直接复制保存为 php 文件丢到主题目录,然后新建页面选择互推联盟模版即可。
<?php /* Template Name: 互推联盟 */ ?> <?php get_header(); ?> <div id="map_box"> <div id="map_l"> <div class="browse">现在位置: <a title="返回首页" href="<?php echo get_settings('Home'); ?>/">首页</a> >互推联盟</div> </div> <div id="map_r"> <div id="feed"><a href="<?php bloginfo('rss2_url'); ?>" target="_blank" title="RSS">RSS</a></div> </div> </div> <div class="clear"></div> <div class="entry_box_s_l"> <iframe style="padding: 0px; width: 100%;" height="480" src="/bokehutui" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no"></iframe> <div class="clear"></div> </div> <div class="entry_sb_l"> <i class="lb"></i> <i class="rb"></i> </div> <?php get_footer(); ?>
最后,有任何问题都可以留言反馈,多谢大家支持!