【综合原创】不用插件只用代码让2014(Twenty Fourteen)主题的特色内容幻灯自动演示
    ——让您的WordPress自带的Featured Content幻灯动起来 1


原装的2014(Twenty Fourteen)主题的特色内容(Featured Content)置顶之后,如果选择在首页的内容顶部设置幻灯(原译为滑块)演示,是必须经过人工点按前进箭头之后,每点按一下,幻灯才会替换,在现在看来,这样的设置,简直就是回到石器时代。

实际上,这个3.9版本的WordPress,这个幻灯的内核,根据我向江湖大哥求证,是一个很好的幻灯内核,名为Flexslider。只是WordPress在设计的时候,可能为了节省系统的消耗,把许多功能都置之一旁,只截取最基本的功能。结果,让我们回到石器时代去过活。

这里,我们要恢复这个幻灯播放器的一点点小功能——让它自动演示。

我根据江湖大哥的指示,亦步亦趋,竟然也能让这个石器时代的幻灯播放器自己动起来!所以,在这里和您分享。

要达到以上的目的,我们必须完成下面两回事儿:

一、为这个幻灯播放器自动播放添加一个javascript文件;
二、在functions.php加上一段代码。

一、创制和添加一个javascript文件

这个对某些从来没有上过服务器的朋友来说可能有些难度。但是我想,既然您能够自己设立一个WordPress博客站,应该懂得FTP吧?如果连这个也不懂,那么,我想,连最基本的,您也应该没的玩吧?

嗯,只要懂得FTP就行了。

第一步:自建一个myautosliding.js文件。

打开您的文本编辑器,就是英文里的Notepad,或者Notepad++都可以,把下面这段代码复制了粘贴在那个新建的文本文件上:

[cc lang="php" nowrap="false"]

jQuery(document).ready(function ($){

var timeOut = null;
var slidingPeriod = 7000; //这里的7000就是设定每张幻灯停留7秒。您可以根据自己的需要设置。

$('.featured-content .post-thumbnail img').mouseover(function(e,simulated){

//what happen if you hover your mouse

if(!simulated){

clearTimeout(timeOut);

//if you don't hover anymore
}
}).mouseout(function(e,simulated){
timeOut = setTimeout(autoAdvance, slidingPeriod);
});

// An autoslide function

function autoAdvance (){

// Simulated by a click on the next arrow.
$('#featured-content .slider-next').trigger('click',[true]);

// Setting delay in 7 seconds, as explained above
timeOut = setTimeout(autoAdvance, slidingPeriod);
}

autoAdvance();

});

[/cc]

这段代码里。唯一我们要知道的事,就是这一句:
var slidingPeriod = 7000; //这里的7000就是设定每张幻灯停留7秒。您可以根据自己的需要设置。

因此,您要快些,设置为5秒,就把这个数字改为5000.其他的,就不要去动它,江湖大哥就这么说。因此,我也不知道它们在做什么,就听大哥的话,依样画葫芦。哈哈哈。但是,我这里可以确保的是:我是亲自测试的,“临床”折腾,证明是有效和可行的。

粘贴好了之后,把这个文件保存和命名为:myautosliding.js。

要小心注意:这个文件的后缀是js,不是txt。如果您保存这个文件之后,在文件名上看到的是txt文件:myautosliding.js.txt或者myautosliding.txt,必须把它修改为:myautosliding.js。

第二步:上传myautosliding.js文件。

通过您常用的FTP软件(我用的是免费的FileZilla),链接您的服务器。点按进入您安装WordPress的文件夹,再进入wp-content文件夹,继续前进,再进入themes文件夹,找到您目前启用的的主题文件夹——我的是TwentuFourteen-child。整理一下整个前进的路线:

FTP进入服务器 =》wp-content文件夹 =》 themes文件夹 =》 您目前启用的主题文件夹

到达这里,在这个文件夹里,要创建一个新的文件夹。对准空白的地方,右键选单:创建文件夹(有些翻译为目录),把这个新创建的文件夹命名为:js。

创建了文件夹之后,点按进入js文件夹。进入这个文件夹之后,把我们刚才创建的那个myautosliding.js文件送进这个文件夹里(我就这么在FileZilla的版面,从左边的本地的文件夹里,把myautosliding.js文件拖拉到右边的服务器js文件夹里)。

确保这个文件上传,就完成了这部分的工作了。这时,您可以退出服务器了。

二、在functions.php加上一段代码。

以管理员身份,登录您的WordPress,进入控制面板中心(原译为仪表盘),进入主题选项,选择编辑。

右边的面板会出现您目前启用的主题,一般上是替您打开了style.css这个文件。我们不必这个文件,我们要修改的是functions.php文件。在编辑器的右边,您可以看到一大串的文件名。仔细查找,找到 functions.php后,点按一下这个文件。这时,编辑器应该显示这个文嘉的代码。您可以小心的确定一下,在您的编辑器的上头,应该可以看到functions.php这个文件的名称。确定了之后,把鼠标指针安置在这个文件的最尾端。注意:必须在最后一行文字之后空一行,再把下面这段代码复制了粘贴在functions.php里:

[cc lang="php" nowrap="false"]

function my_autosliding_tf_child() {
if (!is_admin()) {
if (is_front_page()) {
wp_enqueue_script( 'my_Autosliding', get_stylesheet_directory_uri() . '/js/myautosliding.js', '', '1.0', true );
}
}
}

add_action('wp_enqueue_scripts', 'my_autosliding_tf_child');

[/cc]

注意粘贴的地方,排列应该是这样的:

1)这是原来functions.php文件的最后一行
2)按回车键空一行
3)把上面的那段代码粘贴在这里

确定粘贴在正确的位置之后,在编辑器的下面,点按保存文件。

工作完毕。收工。

哈哈。可能有些朋友说:我这样做了。可是我的首页没有看到幻灯。

哈哈。原来您还没有设置幻灯演示呢!

这个和本文无关。

但是,我总不能就此掉头就走,还是要告诉您:你要设置幻灯演示啊。

怎么设置?这个问题在搜寻器里,问的人很多。

到您博客的控制面板里,找到“外观”,在外观里有个“自定义”选项,进入自定义选项。

选择“特色内容”选项。在打开的面板上,可以看到“布局”,拉下选单,里面有两个选择,一个是网格,一个是滑块。选择滑块。

在那里,您还可以看到有个“标签名”的栏目在那里空着。

我必须在这里先说明一下。

WordPress这个网格或者滑块的选取显示,是根据两个选择来获取选择显示的文章。

一是文章设置“置顶”的,才在这里显示,最多六篇文章。

二是通过您设定的特定标签名来显示,最多也是六篇文章。

怎么设置置顶?

哈哈,就知道您会问这个问题。

在每篇文章编辑器的右边,有个“公开度”,点按这个选项,就会看到几个选择:

公开度:
1)公开
1.1)将文章置于首页顶端
2)密码保护
3)私密

那里没有上面的序号。序号是我加上去,以方便讲解。一般上预设为公开,如果您要让该文“置顶”,您还必须在“1.1)将文章置于首页顶端”前面的方格子里打勾,这篇文字就归类为置顶了。

密码保护和私密选项,与本文无关,暂时不说。

这是第一种置顶和在首页让幻灯选取显示的指标。

我个人比较喜欢第二种“标签名”的置顶设置。

刚才上面说到:WordPress这个网格或者滑块的选取显示,是根据两个选择来获取。

一是文章设置“置顶”的,才在这里显示,最多六篇文章。

二是通过您设定的特定标签名来显示,最多也是六篇文章。

第一种我已经解释了,第二种就是我们在自定义选项下看到的:

标签名。

那里是空着的。在文章里,除了上面说的在置顶项目前面打勾选择以外,您也可以在文章编辑器的右边的标签地方设置一个“暗码”作为选取置顶的标签。例如,您在标签那里,添加一个和该文章无关的标签:“zz”,那么在这个自定义的栏目里填上“zz”标签名(不要开关引号),那么,所有有zz标签的文章都会当作置顶的文章处理,显示在首页的这个特定内容的显示里。

您现在明白了吗?

这个特定的标签,必须与众不同。所以我举例子“zz”——应该不会有zz两个英文字母的标签吧。

那么,思考快的朋友马上就要问了:这个zz不是会显示在标签云里吗?

WordPress真伟大!

所以它在自定义的特色内容选项里,又添加了一项选择:“不在前端显示标签”。您看到了吗?在那个标签名下,有一个“不在前端显示标签”,只要您在这选项前面的方格子打勾选择后,这个zz标签,就不在标签云里出现了。

好了,最后,必须在这个自定义的顶端,点按保存,让您的设置生效。千万要记得。

这回,真的全部功德圆满,工作完毕,打道回府了。

祝您成功。

这个《Wordpress初学记》系列,是我折腾学习Wordpress的学习笔记,是记录我自己的学习历程。资料都是从网络上或者书籍中,大量阅读之后,通过“临床”折腾测试后得到的结果。我是个电脑技术的门外汉,不会写代码更看不懂代码。因此,千万不要问我问题,或者问我为什么,我是无法回答的。文中即使有错误,那也是我的造化,错有错着,竟然可以瞒骗程序过关。

注意:

修改任何文件或者代码,记得事前必须备份。

一般上,我们修改任何文件或者代码,都必须是在主题的子模板(child theme)上修改。不然,主题版本一晋级,就会把您这些苦心修改的部分全部覆盖——没了!

“子模板(child theme)”?知道是什么吧?!

设立网站选择好主题之后,第一件事儿,就是添加自己的“子模板(child theme)”。有任何修改或者添加,都应该修改或者添加在“子模板(child theme)”上。切记。

 

代码资料来自:代码原作者:Kimi
代码原文:Setting Autoplay Twenty Fourteen Slider

 

 

Download PDF

说点什么

1 评论 在 "【综合原创】不用插件只用代码让2014(Twenty Fourteen)主题的特色内容幻灯自动演示
    ——让您的WordPress自带的Featured Content幻灯动起来"

提醒
avatar
排序:   最新 | 最旧 | 得票最多
steven
游客

這是一篇非常好的文章,解決了sliding 不會動的問題,非常謝謝大蔥兄的分享。

wpDiscuz