加入收藏 | 设为首页 | 会员中心 | 我要投稿 济源站长网 (https://www.0391zz.cn/)- 数据工具、数据仓库、行业智能、CDN、运营!
当前位置: 首页 > 教程 > 正文

不运用插件给WordPress添加幻灯片

发布时间:2022-06-23 20:01:51 所属栏目:教程 来源:互联网
导读:在网上问了一些朋友说要给wordpress添加幻灯片功能一般是使用插件了,如果小编不想使用插件怎么办呢?下面我来为各位介绍一个例子。 一些常见的网站都会有幻灯片,而且常在首页展示,这样网站就会显得高端大气很多。 峰尚今天给提供一个使用jQuery插件Orbit
  在网上问了一些朋友说要给wordpress添加幻灯片功能一般是使用插件了,如果小编不想使用插件怎么办呢?下面我来为各位介绍一个例子。
 
  一些常见的网站都会有幻灯片,而且常在首页展示,这样网站就会显得高端大气很多。
 
  峰尚今天给提供一个使用jQuery插件Orbit给wordpress添加幻灯片效果。
 
  简介:Orbit是一个设计良好并且容易使用的jQuery 图片滑动幻灯片插件,它除了支持图片滚动切换展示外,还支持针对内容的滚动。插件的定制性相当高,它提供了多个参数的设置,通过设置你可以将它打造成完全符合你要求的样式。 Orbit支持 IE7+, FF3.5+, Chrome、Safari 等浏览器,整个插件十分轻巧,仅仅4kb 左右,需要jQuery 1.5.1版本以上。
 
  插件官方主页
 
  使用方法:
 
  下载地址:官方下载文件
 
  下载解压后,将文件夹为orbit的放到WordPress 主题目录下或自定义路径。
 
  1、主题加载jQuery 库,注意是要1.5.1 版本以上的。
 
  2、首先将下面的代码放到主题的header.php中(建议加载方法):
 
  <link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/orbit/orbit-1.2.3.css">
  <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/orbit/jquery.orbit-1.2.3.min.js"></script>
  <script type="text/javascript">
      $(window).load(function() {
          $('#featured').orbit();
      });
  </script>
  3、HTML 部分。幻灯片一般都是在首页加载的,对于WordPress 主题,可以通过if 语气判断是否在首页来写入html.
 
  <?php if ( is_home() ){ ?>
  <div id="featured">
      <a href=”#”><img src="/banner1.jpg"  /></a>
      <a href=”#”><img src="/banner2.jpg"  /></a>
      <a href=”#”><img src="/banner3.jpg"  /></a>
          <a href=”#”><img src="/banner4.jpg"  /></a>
  </div> //phpfensi.com
  <?php } ?>
  对于上面的代码,你需要做的很多,比如再添加一个幻灯片、比如链接的url、图片的路径等等,什么仅仅算是一个演示.
 
  为了适合于你的主题,你可以通过orbit-1.2.3.css 修改相关代码自定义样式,比如宽高神马的.
 
  而对于幻灯片的相关参数设置,你可以去查阅官方文档自行解决.
 
  折腾这个需要你懂html、CSS,javascript 或者jquery 略懂一点就可以了,Jeff也是这样水平~jquery 插件就是方便,不一定要你看懂代码,会用就行.
 
 

(编辑:济源站长网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    热点阅读