• 欢迎访问乐趣公园网站,WordPress信息,WordPress教程,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站,欢迎加入乐趣公园 QQ群
  • Git主题现已支持PHP7版本,速度应该会提高不少,不过云落的网站本来就很快了,所以感觉不是太明显
  • 最新版Git主题已支持说说碎语功能,可像添加文章一样直接添加说说,新建说说页面即可,最后重新保存固定连接,演示地址
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏乐趣公园吧
  • 云落的淘宝店铺已经开张了哦,传送门:https://kimipet.taobao.com

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

WordPress 云落 2年前 (2016-05-24) 296次浏览 已收录 16个评论
文章目录[隐藏]

将 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 幻灯片下载
乐趣公园 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:纯代码为 WordPress 网站添加首页幻灯片功能
喜欢 (20)
云落
关于作者:
无折腾,不生活,我是一个WordPress菜鸟,一个玩淘宝的卖家,欢迎你认识我,我是云落!
发表我的评论
取消评论
表情 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

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