WordPress主题嵌入淘宝商铺

2011年12月20日16:35:34 126 已收录 15,087
摘要

  之前有童鞋问,另一个站的淘宝商铺是如何加到Wordpress主题中的,其实使用iframe 标签可很轻松实现这一功能。   通过添加iframe 标签可以使任何HTML页面实现内联框架,方便嵌入任意网页。下面以WP默认主题twentyeleven为例,教大家制作一个独立的商铺页面模版。   其中http://wopus.taobao.com/为嵌入的网页的地址width=976 height=1530为嵌入的网页的宽度和高度,可根据自己的页面大小适当调整。

之前有童鞋问,另一个站的淘宝商铺是如何加到Wordpress主题中的,其实使用iframe 标签可以很轻松实现这一功能。

通过添加iframe 标签可以使任何HTML页面实现内联框架,方便嵌入任意网页,代码如下:

  1. <IFRAME src="http://wopus.taobao.com/"  style=" margin: 10px 0 0 1px;" width=976  height=1530 scrolling=no ALLOWTRANSPARENCY="no"></IFRAME>  

其中:

  • http://wopus.taobao.com/为嵌入网页的地址。
  • width=976  height=1530为嵌入网页的宽度和高度,可根据自己的页面大小适当调整。
  • scrolling="no" 为嵌入网页的滚动设置,当内容范围大时,可设置为允许滚动 scrolling="yes"。
  • ALLOWTRANSPARENCY="true" 为允许透明设置,把true改为no为不透明。

将上面代码加到模版文件的适当位置即可。

下面以WP默认主题twentyeleven为例,教大家制作一个独立的商铺页面模版:

复制一份twentyeleven主题page.ph模版,重命名为:taobao.php,打开这个模版文件在最上面添加

  1. <?php   
  2. /*
  3. Template Name: taobao  
  4. */  
  5. ?>  

其中的模版名称:taobao  可以任意。

并用:

  1. <?php get_header(); ?>   
  2. <div id="primary">   
  3.     <IFRAME src="http://wopus.taobao.com/"  style=" margin: 10px 0 0 10px;" width=976  height=1530 scrolling=no ALLOWTRANSPARENCY="no"></IFRAME>   
  4. </div><!-- #primary -->   
  5. <?php get_footer(); ?>  

替换原来模版中的所有代码,保存之后,进入WP后台新建一个页面,右下模板选择:taobao,发布即可。

Wordpress主题嵌入淘宝商铺效果演示

是不是有些像淘宝客,可进入WP后台---设置---阅读---首页显示选择一个静态页,并选择这个新建的页面作为主页。

下面是已制作好的HotNewsPro2.7版主题专用模版

 

将下载解压后的模版文件上传到HotNews主题根目录中,新建页面右下模板选择“我的商铺”模版,请自行修改模版嵌入网页的地址链接。

weinxin
我的微信
分享交流WordPress经验与技巧,关注前端设计与网站制作。仅用于功能演示。
Begin主题购买
Begin主题购买

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:126   其中:访客  100   博主  22   引用   3

    • 自由风 1

      虽然嵌入了淘宝商铺,但是点击淘宝商铺里链接后,在新弹出的窗口中跳转到淘宝页了,能否在淘宝商铺打开链接时还是在iframe框架里显示点击的内容。

      • 大亚湾 1

        博主,新春快乐!!新年新气象!!

        • yanshome 1

          这个挺不错的,谢谢鸟哥,向你学习!

          • Coach Outlet Online 1

            值得一试~~谢谢!

            • xiang-jiang.tk 0

              问个问题,这个不设高度可以么?链接的框架页面高度都不是统一的,不好限定!

              • 家长培训 2

                知更鸟您好!很喜欢你的主题,已经安装上了,正在学习中,谢谢你!现在想请教一下如何在HotNews2.7中加入支付宝功能?谢谢!

                  • 知更鸟 Admin

                    @家长培训 WP支付宝插件
                    http://wordpress.org/extend/plugins/wp-alicart/

                  • 家长培训 2

                    谢谢!这么快就回答了!我试一试!

                    • 家长培训 2

                      请问一下,这个主题自带的小工具中有注册功能吗?怎样特别设立新访客注册功能?带邮箱验证码的?谢谢!

                        • 知更鸟 Admin

                          @家长培训 后台勾选允许任何人注册后,顶部登录位置会出现注册按钮的

                        • 家长培训 2

                          谢谢!顶部出来注册框了。但是注册邮箱没有收到注册用户密码。

                          • 家长培训 2

                            不好意思总请教你问题,感觉打扰你了!

                            • 家长培训 2

                              顶部导航菜单与LOGO位置调换。我根据HotNews pro 主题使用问题总汇介绍的方法,在网站首页确实出来效果了。但是在其它页面却又是原来的样子:LOGO在顶部导航菜位置下面,请问是怎么回事?是不是还有哪个文件没有修改啊?谢谢!我的网址:http://achiever.web-161.com/wordpress

                              • 电子皮带秤 0

                                新年新气象啊!支持博robin持续更新啊啊

                                • 爱上阳光爱上梦 0

                                  偶然看到了HotNews pro 主题,真是太漂亮了!非常喜欢,毫不犹豫的就下了,可是安装上后有好多问题呀,我是个菜鸟,很菜的鸟。没办法只能自己慢慢研究了……

                                  • 校园风云 0

                                    请教一下老师http://zmingcx.com/videos/video模块是怎么做的呢?谢谢

                                    • 零度烽火 5

                                      按照鸟哥的方法,我的淘宝商铺已经搞好了

                                      • 比目鱼积累网 0

                                        浏览器不兼容啊!咋回事!谷歌浏览器foot拉的长,ie浏览器页面不居中!

                                        • 嘟嘟嘟 4

                                          可以直接把商铺通过ifram调用到主页cms.php中,但是跟楼上的童鞋一样,会出现浏览器兼容问题,IE下貌似正常,但是火狐,谷歌浏览器的友情链接页面都会被拉的很长,下面大概有几百像素的空白

                                          • sll0075 0

                                            你好 请问我的怎么错位了啊 小弟是菜鸟 还请多指教啊http://qilinbihua.sinaapp.com/?page_id=1998

                                            • 米多多 3

                                              请问鸟兄 如何在taobao 我的商铺 模版下加入 评论功能呢

                                                • 米多多 3

                                                  @米多多 自己搞定了 不用回复了 再次感谢鸟兄出来这么好的主题

                                                • 米多多 3

                                                  又有一个问题,请问鸟兄 如何在这个模版启用分页功能 也就是同一个我的商铺页面 通过分页功能浏览多个商铺页面

                                                  • 蛋疼的人 1

                                                    你好,看到你这个功能很强大,于是我联想到了能不能把嵌入的网页让他自动填表。也就是当别人打开这个页面的时候是已经登陆的状态。这个应该怎么实现!!、??

                                                    • 济南立昱机械 0

                                                      浏览器不兼容啊!咋回事!谷歌浏览器foot拉的长,ie浏览器页面不居中!

                                                      • 电动吊篮 0

                                                        谷歌浏览器 不行

                                                        • 零度烽火 5

                                                          为什么博客你的 淘宝商铺,不再显示淘宝店了,成了空白,原先好好的呢?

                                                          • 追寻如风 2

                                                            很不错的模块,学习了~~

                                                            • xupeng111 0

                                                              非常感谢提供这样的知识,谢谢博主,有一个问题,就是嵌入的页面总是有一个难看的框,能不能把这个框也去掉呢?我只希望嵌入一个短小的页面。无需滚动。

                                                              • Adazi资讯网 3

                                                                学习了,收下了~~

                                                                • yumanutong 6

                                                                  好吧,想起来html的这个引用,我记得这个对百度不好,因为百度不能探索到这下面的内容,也就是这个崁套的内容,不过还是没关系的,应该不会影响

                                                                  • 开心淘宝 1

                                                                    不错。学习了

                                                                    • mieyan423 4

                                                                      鸟哥,我放这个商铺,为什么会出现乱码,页面不居中了,地址是http://www.xubaoguo.com/koucaishop,真心希望鸟哥回复!

                                                                        • 知更鸟 Admin

                                                                          @mieyan423 估计是模版编码有误,重传商铺模版,然后在后台主题编辑页面修改网址

                                                                        • 如何瘦腿最快最有效 1

                                                                          来看看学习一下

                                                                          • 猫主席 3

                                                                            鸟哥您好,
                                                                            一个站能不能多添加几个商铺?
                                                                            因为是把模板改了。。。添加模板时候发现总是那一个商铺。

                                                                            求指导啊!谢谢!

                                                                            • 山那边 1

                                                                              鸟哥的模板是我见过的功能最强大的,我差点为了鸟哥的模板,投身WP,呵呵。鸟哥这页上的“上篇 下篇”有点错行。

                                                                              • york 0

                                                                                鸟哥,你好。 最近我想折腾一个能让用户从前台上传图片的功能,没有思路,你能指点一下 或者有插件推荐吗?

                                                                                  • 知更鸟 Admin

                                                                                    @york 试试这个可能行wp-user-frontend

                                                                                  • hutuchong18 0

                                                                                    正在安装您上传的主题:taobao.zip

                                                                                    正在解压缩安装包…

                                                                                    正在安装主题…

                                                                                    无法安装这个包。 主题缺少 style.css 样式表。

                                                                                    主题安装失败。

                                                                                    • Prudentwoo 1

                                                                                      为什么我按照您的做法会到右边栏目去呀。。。。显示有问题呀。

                                                                                      • 统计年鉴 1

                                                                                        鸟哥,这个模板下载不了了。

                                                                                        • 淡不定 0

                                                                                          鸟哥,这个模版没法下载呀,555。。。。。

                                                                                          • samga 2

                                                                                            鸟哥,请问一个问题,怎么样才能把网站LOGO那一行高度变大呢?我想用一个大点的LOGO,但是上传之后下面被遮挡了。

                                                                                              • 知更鸟 Admin

                                                                                                @samga 打开主题style文件查找:.logo
                                                                                                修改其中的宽高

                                                                                              • ray 1

                                                                                                你好,最新的wp3.8不能使用贵博主题了。。。提交后主题没有显示

                                                                                              • 来自外部的引用: 3

                                                                                                • WordPress主题嵌入淘宝商铺 | 愚人码头
                                                                                                • WordPress主题嵌入淘宝商铺 | 玛雅大陆
                                                                                                • WordPress技术+建站:WordPress主题嵌入淘宝商铺[转载] | TAHOROOM