• 国庆快乐，放假三天

  • 准备增加一个免登录支付功能

  • 微信扫码登录功能已经 ok 了

  • 主题更新一下，修复了头像挂掉的问题

  • 后羿更新网站文章可能不会那么闲了

  • 不得不说，美国贴吧的界面真是难看到死

  • 看到网上新闻美国的贴吧将成为中国公司

  • 推送试试

  • 睡觉之前测试一下

  • 发现了一个非常不错的插件

> WordPress > 纯代码为WordPress网站添加首页幻灯片功能

纯代码为WordPress网站添加首页幻灯片功能

WordPress 云落 3年前 (2016-05-24) 2187次浏览 6个评论
文章目录[隐藏]

将 jq 幻灯片整合进 WordPress，另外将幻灯片功能设置整合进后台

纯代码为WordPress网站添加首页幻灯片功能

前言

幻灯片方案

随便在网站百度一下 jq 幻灯片就找出很多幻灯片方案，我找了一个著名的 orbit 幻灯片方案，把这个整合进 WordPress，主题就以官方默认的 twentyten 主题为载体。

下载 orbit 幻灯片

先下载幻灯片文件，是一个压缩包，里面一般都是一个index.html文件，还有 js 文件夹，css 文件夹，以及 images 文件夹，反正大致都一样的，下面跟着云落开始做。

选择位置

首先你需要考虑你的幻灯片是想要显示在哪里的？全屏？超大？还是一般的？我们来看下本次演示的网站的格局吧
纯代码为WordPress网站添加首页幻灯片功能
看看这个全屏截图，本次幻灯片我准备显示在红色框框的地方。用浏览器的 F12 检查一下这个位置在哪里？
纯代码为WordPress网站添加首页幻灯片功能
检查一下，发现这货在content上面，在container下面，另外幻灯片一般都是在导航下面的，文件一般在header.php或者index.php文件里面，打开文件找下很好找的。
纯代码为WordPress网站添加首页幻灯片功能
貌似找到了啊，然后我们开始在对应位置插入代码。

插入 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; }

效果预览

纯代码为WordPress网站添加首页幻灯片功能

逼格版

如果你认为这个教程就已经结束了，那就大错特错了，其实这个教程才刚刚开始，因为之前这样换幻灯片的话，还需要进入主题代码修改，这个实在是 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');

然后幻灯片的后台选项就好了，看一下，就是很简单的后台
纯代码为WordPress网站添加首页幻灯片功能
然后将第一步骤在 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 资源整合，有问题的可以留言咨询。

相关链接

Orbit 幻灯片下载
-- 完 --
纯代码为WordPress网站添加首页幻灯片功能
扫码订阅，第一时间获得更新
微信扫码二维码，订阅我们网站的动态，另外不定时发送 WordPress 小技巧，你可以随时退订，欢迎订阅哦~
极客公园 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：纯代码为WordPress网站添加首页幻灯片功能
极客公园 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：纯代码为WordPress网站添加首页幻灯片功能
喜欢 (24)
云落
关于作者：
无折腾，不生活，我是一个WordPress菜鸟，一个玩淘宝的卖家，欢迎你认识我，我是云落！
作者主页 赞助作者
发表我的评论
取消评论
表情 加粗 删除线 居中 斜体 签到

Hi，您需要填写昵称和邮箱！

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(6)个小伙伴在吐槽
  1. 移动pc都兼容的幻灯片怎么做啊，还是需要单独做么
    wordpress建站吧2019-02-19 20:32 回复 Windows 10 | Chrome 55.0.2883.87
  2. :grin: :grin: 试试表情 :roll: :???:
    yuqyu2017-02-17 20:59 回复 Windows 8 | Chrome 57.0.2950.5
  3. 这个挺好用的
    DELL总代cxd2017-02-06 18:16 回复 Windows 10 | Chrome 53.0.2785.104
  4. 今天过来踩踩，有没有人去我网站踩踩呢。。来换换友联什么的。
    村庄2016-11-05 09:24 回复 Windows 7 | Firefox浏览器 49.0
  5. 博主，我测试不能响应式，移动端不能变小，是我主题的问题吗？谢谢
    belly2016-11-02 20:14 回复 Windows 7 | Chrome 54.0.2840.71
  6. 看看
    caoremix2016-10-15 06:27 回复 Linux | Safari浏览器 534.30