将jq幻灯片整合进WordPress,另外将幻灯片功能设置整合进后台
前言
幻灯片方案
随便在网站百度一下jq幻灯片就找出很多幻灯片方案,我找了一个著名的orbit幻灯片方案,把这个整合进WordPress,主题就以官方默认的twentyten主题为载体。
下载orbit幻灯片
先下载幻灯片文件,是一个压缩包,里面一般都是一个index.html
文件,还有js文件夹,css文件夹,以及images文件夹,反正大致都一样的,下面跟着云落开始做。
选择位置
首先你需要考虑你的幻灯片是想要显示在哪里的?全屏?超大?还是一般的?我们来看下本次演示的网站的格局吧
看看这个全屏截图,本次幻灯片我准备显示在红色框框的地方。用浏览器的F12检查一下这个位置在哪里?
检查一下,发现这货在content
上面,在container
下面,另外幻灯片一般都是在导航下面的,文件一般在header.php
或者index.php
文件里面,打开文件找下很好找的。
貌似找到了啊,然后我们开始在对应位置插入代码。
插入HTML结构
在之前找到的位置插入下面的代码
<div style="width:680px;height: 382px;"> <div id="featured"> <a class="orbit-item" href="http://sc.chinaz.com/" data-caption="#htmlCaption1"><img src="<?php echo esc_url( get_template_directory_uri() ); ?>/images/img1.jpg" alt="img1"></a> <a class="orbit-item" href="http://sc.chinaz.com/" data-caption="#htmlCaption2"><img src="<?php echo esc_url( get_template_directory_uri() ); ?>/images/img2.jpg" alt="img1"></a> <a class="orbit-item" href="http://sc.chinaz.com/" data-caption="#htmlCaption3"><img src="<?php echo esc_url( get_template_directory_uri() ); ?>/images/img3.jpg" alt="img1"></a> <a class="orbit-item" href="http://sc.chinaz.com/" data-caption="#htmlCaption4"><img src="<?php echo esc_url( get_template_directory_uri() ); ?>/images/img4.jpg" alt="img1"></a> </div> <span class="orbit-caption" id="htmlCaption1">3D《海底大冒险》将映 打响海底保卫战</span> <span class="orbit-caption" id="htmlCaption2">《私人》曝纪录片 章子怡:羡慕嫉妒恨</span> <span class="orbit-caption" id="htmlCaption3">赵又廷林更新戏里有情 跟高圆圆没分手</span> <span class="orbit-caption" id="htmlCaption4">柯震东回归《小时代3》 与郭采洁合体</span> </div>
看清除,里面还有图片文件的,把下载的文件里面的images文件夹放在主题根目录下面,当然你也可以合并到自己的图片文件夹,路径也一起改下就好了。
加载JQ
下面开始加载js,打开主题footer.php
文件,在</body>
标签前面插入下面代码
<script src="<?php echo esc_url( get_template_directory_uri() ); ?>/js/jquery-1.7.2.min.js"></script> <script src="<?php echo esc_url( get_template_directory_uri() ); ?>/js/jquery.orbit.min.js"></script> <script> $(window).load(function() { $('#featured').orbit({ bullets : true, startClockOnMouseOut : true, captionAnimation : 'slideOpen' }); }); </script>
加载CSS
将下面CSS代码加入主题的style.css
文件里面
/* 幻灯片CSS */ .orbit-wrapper { position: relative; margin: 0 auto; } #featured { position: relative; width: 680px; height: 382px; overflow: hidden; background: #fff url(images/loading.gif) 50% no-repeat; } .orbit > img { display: none; position: absolute; top: 0; left: 0; border: 0 none; } .orbit > a { display: none; position: absolute; top: 0; left: 0; line-height: 0; border: 0 none; } .orbit > div { position: absolute; top: 0; left: 0; width: 100%; height: 100% } .orbit-item { background-color: #f5f5f5; } /* 标题 */ .orbit-caption { display: none; position: absolute; left: 0; bottom: 0; z-index: 10; width: 100%; height: 75px; font: 20px/50px "Microsoft Yahei"; text-align: center; color: #fff; background: rgba(0,0,0,.6); } /* 导航 */ .orbit-bullets { position: absolute; z-index: 1000; list-style: none; bottom: 0px; left: 50%; margin: 15px 0 15px -50px; padding: 0; } .orbit-bullets li { float: left; margin: 0 5px; cursor: pointer; width: 10px; height: 10px; overflow: hidden; text-indent: -9999px; background-color: #000; } .orbit-bullets li.active { background-color: #49CFF1; } .orbit-bullets li.has-thumb { background: none; width: 100px; height: 75px; } .orbit-bullets li.active.has-thumb { background-position: 0 0; border-top: 2px solid #000; } .slider-nav { display: block } .slider-nav span { width: 75px; height: 75px; text-indent: -9999px; position: absolute; z-index: 1000; bottom: 0; cursor: pointer; } .slider-nav span.right { background: url(images/arrow.png) right 0; right: 0; } .slider-nav span.left { background: url(images/arrow.png) 0 0; left: 0; } .slider-nav span.right:hover { background-position: right bottom; } .slider-nav span.left:hover { background-position: 0 bottom; } /* 定时器 */ .timer { width: 40px; height: 40px; overflow: hidden; position: absolute; top: 10px; right: 10px; opacity: .6; cursor: pointer; z-index: 1001; } .rotator { display: block; width: 40px; height: 40px; position: absolute; top: 0; left: -20px; background: url(images/rotator-black.png) no-repeat; z-index: 3; } .mask { display: block; width: 20px; height: 40px; position: absolute; top: 0; right: 0; z-index: 2; overflow: hidden; } .rotator.move { left: 0; } .mask.move { width: 40px; left: 0; background: url(images/timer-black.png) repeat 0 0; } .pause { display: block; width: 40px; height: 40px; position: absolute; top: 0; left: 0; background: url(images/pause-black.png) no-repeat; z-index: 4; opacity: 0; } .pause.active { background: url(images/pause-black.png) no-repeat 0 -40px; } .timer:hover span.pause, span.pause.active { opacity: 1; }
效果预览
逼格版
如果你认为这个教程就已经结束了,那就大错特错了,其实这个教程才刚刚开始,因为之前这样换幻灯片的话,还需要进入主题代码修改,这个实在是low,作为为了逼格,请继续接下去看。
幻灯片选项
复制下面代码,重命名为slider.php
<?php add_action('admin_menu', 'orbit_page'); function orbit_page (){ if ( count($_POST) > 0 && isset($_POST['orbit_settings']) ){ $options = array ( 'slide1img','slide1url','slide1title','slide2img','slide2url','slide2title','slide3img','slide3url','slide3title','slide4img','slide4url','slide4title' ); foreach ( $options as $opt ){ delete_option ( 'orbit_'.$opt, $_POST[$opt] ); add_option ( 'orbit_'.$opt, $_POST[$opt] ); } } add_menu_page(__('幻灯片选项'), __('幻灯片选项'), 'manage_options', basename(__FILE__), 'orbit_settings'); } function orbit_settings(){?> <style type="text/css"> input{width:60%}.button-primary{width: 10%} </style> <div class="wrap"> <h2>幻灯片选项</h2> <form method="post" action=""> <table class="form-table"> <tr><td> 幻灯片一图片:<input type="text" name="slide1img" id="slide1img" value="<?php echo get_option('orbit_slide1img'); ?>"> </td></tr> <tr><td> 幻灯片一链接:<input type="text" name="slide1url" id="slide1url" value="<?php echo get_option('orbit_slide1url'); ?>"> </td></tr> <tr><td> 幻灯片一标题:<input type="text" name="slide1title" id="slide1title" value="<?php echo get_option('orbit_slide1title'); ?>"> </td></tr> <tr><td> 幻灯片二图片:<input type="text" name="slide2img" id="slide2img" value="<?php echo get_option('orbit_slide2img'); ?>"> </td></tr> <tr><td> 幻灯片二链接:<input type="text" name="slide2url" id="slide2url" value="<?php echo get_option('orbit_slide2url'); ?>"> </td></tr> <tr><td> 幻灯片二标题:<input type="text" name="slide2title" id="slide2title" value="<?php echo get_option('orbit_slide2title'); ?>"> </td></tr> <tr><td> 幻灯片三图片:<input type="text" name="slide3img" id="slide3img" value="<?php echo get_option('orbit_slide3img'); ?>"> </td></tr> <tr><td> 幻灯片三链接:<input type="text" name="slide3url" id="slide3url" value="<?php echo get_option('orbit_slide3url'); ?>"> </td></tr> <tr><td> 幻灯片三标题:<input type="text" name="slide3title" id="slide3title" value="<?php echo get_option('orbit_slide3title'); ?>"> </td></tr> <tr><td> 幻灯片四图片:<input type="text" name="slide4img" id="slide4img" value="<?php echo get_option('orbit_slide4img'); ?>"> </td></tr> <tr><td> 幻灯片四链接:<input type="text" name="slide4url" id="slide4url" value="<?php echo get_option('orbit_slide4url'); ?>"> </td></tr> <tr><td> 幻灯片四标题:<input type="text" name="slide4title" id="slide4title" value="<?php echo get_option('orbit_slide4title'); ?>"> </td></tr> </table> <p class="submit"> <input type="submit" name="Submit" class="button-primary" value="保存设置" /> <input type="hidden" name="orbit_settings" value="save" style="display:none;" /> </p> </form> </div> <?php }
然后在主题functions.php
中粘贴下面代码
include ('slider.php');
然后幻灯片的后台选项就好了,看一下,就是很简单的后台
然后将第一步骤在index.php插入的代码替换为下面的代码
<div style="width:680px;height: 382px;"> <div id="featured"> <a class="orbit-item" href="<?php echo get_option('orbit_slide1url'); ?>" data-caption="#htmlCaption1"><img src="<?php echo get_option('orbit_slide1img'); ?>" alt="<?php echo get_option('orbit_slide1title'); ?>"></a> <a class="orbit-item" href="<?php echo get_option('orbit_slide2url'); ?>" data-caption="#htmlCaption2"><img src="<?php echo get_option('orbit_slide2img'); ?>" alt="<?php echo get_option('orbit_slide2title'); ?>"></a> <a class="orbit-item" href="<?php echo get_option('orbit_slide3url'); ?>" data-caption="#htmlCaption3"><img src="<?php echo get_option('orbit_slide3img'); ?>" alt="<?php echo get_option('orbit_slide3title'); ?>"></a> <a class="orbit-item" href="<?php echo get_option('orbit_slide4url'); ?>" data-caption="#htmlCaption4"><img src="<?php echo get_option('orbit_slide4img'); ?>" alt="<?php echo get_option('orbit_slide4title'); ?>"></a> </div> <span class="orbit-caption" id="htmlCaption1"><?php echo get_option('orbit_slide1title'); ?></span> <span class="orbit-caption" id="htmlCaption2"><?php echo get_option('orbit_slide2title'); ?></span> <span class="orbit-caption" id="htmlCaption3"><?php echo get_option('orbit_slide3title'); ?></span> <span class="orbit-caption" id="htmlCaption4"><?php echo get_option('orbit_slide4title'); ?></span> </div>
后语
这个教程里面还有很多都是有问题的,但都是次要的,这里阐述了jq资源和WordPress整合的介绍,有人问的,那么一些很牛叉的多层的幻灯片怎么做?其实都是一样的,这个算是比较简单的jq资源整合,有问题的可以留言咨询。
相关链接
[download]Orbit幻灯片下载[/download]
-- 完 --
移动pc都兼容的幻灯片怎么做啊,还是需要单独做么
😀 😀 试试表情 🙄 😕
这个挺好用的
今天过来踩踩,有没有人去我网站踩踩呢。。来换换友联什么的。
博主,我测试不能响应式,移动端不能变小,是我主题的问题吗?谢谢
看看