服务报价 | 域名主机 | 网络营销 | 软件工具| [加入收藏]
 热线电话: #
当前位置: 主页 > php教程 > wordpress教程 >

全面改造wordpress原生相册

时间:2016-10-19 18:04来源:未知 作者:最模板编辑 点击:
一直都觉得wordpress的原生相册是一个非常棒的功能,插入一组图片,使用拖动的方式建立相册,直接插入到文章之中,非常方便和实用,但是wordpress原生的相册基本功能很逊,只是把图

一直都觉得wordpress的原生相册是一个非常棒的功能,插入一组图片,使用拖动的方式建立相册,直接插入到文章之中,非常方便和实用,但是wordpress原生的相册基本功能很逊,只是把图片一个一个的默认输出出来,并不能满足我们的胃口,我们想要使用这个功能建立一些非常强大的滑块功能,并且输出到我们想要的位置去。

下面首先给出一个例子,就是对即将发布的《格子商铺》wordpress主题进行实验性开发,并开发完成带有一般商铺样式的相册滑块,这个滑块可以看出,是独立于文章正文而存在的,而发布这个滑块,是直接使用wordpress原生相册,即直接在编辑文章时,点击添加媒体-----选择创建相册---------选择图片--------插入相册,这样简单完成的(如下图):

全面改造wordpress原生相册

这里可以拖动图像位置,调整顺序,直接从本地拖入一张或者多张图片上传,非常方便,插入到正文,点击发布即可得到下面的效果:

全面改造wordpress原生相册

下面生成了小的略缩图,鼠标经过略所图,上面的大图会切换过去,并且鼠标在大图上经过,右侧会出现图片的细节(放大一倍显示),类似于京东的首屏图像展示。

这个功能会在《格子商铺》1.04版本添加,这几天修复好其他的bug就会开放免费下载,敬请期待!

wordpress原生相册[ Gallery Shortcode ] 详解

想要彻底改造原生相册,就必须了解原生相册的原始代码是如何运作的,wordpress关于原生相册是使用wordpress自带的短代码Gallery进行工作的,这个短代码在wordpress的文件夹wp-includes/media.php.  ,你可以点击进入此源码查看相关短代码的一些运作代码,就基本能够了解这个原生相册是如何进行输出的了。

 

全面改造短代码Gallery

查看了这个函数,你应该已经了解原生相册的输出方式了,现在,我们需要替换掉这个函数,写成我们自己想要的样式。

如果直接使用wordpress给我们的函数add_shortcode   像下面这样放进功能文件中,是不行的

add_shortcode('gallery', 'wpe_gallery_shortcode');

因为gallery这个短代码已经存在了,不能重复的添加,这样加进去就会报错,所以,我们可以首先把这个短代码删除,再重新使用我们自己的短代码输出:
remove_shortcode('gallery', 'gallery_shortcode');
add_shortcode('gallery', 'wpe_gallery_shortcode');

 

这样,我们就将wordpress原始的短代码'gallery‘给删除了,又重新添加了一个名称一样的新的短代码'gallery’

现在我们直接使用短代码的设置方式,将这个新设置的短代码重构一下,写成我们需要的样式:

function wpe_gallery_shortcode($attr) {

//所有的样式都能在这里写好哦

}

 

这样,一个全新的输出方式就形成了,这里你不仅能够确定好相册输出的html结构,还可以设定相册id,嵌套各种父级,修改css类名称,还可以确定好相册的裁切尺寸,这样就能方便的使用了。

 

这是原生代码没有更改过时候的输出结构:

全面改造wordpress原生相册

这种结构,很难被改造成我们想要使用的js滑块,不仅臃肿,还输出了很多莫名其妙的样式和空行。
更改之后的结构
 
全面改造wordpress原生相册
是不是清爽干净了许多? 你还可以使用多种方式去改造他,输出的结构可以按照js滑块代码所需要的结构去输出,这样,非常棒的原生相册滑块就做好了。
 
基本的原理就是这样,这种修改方式非常简单,希望对你有所启发!
(责任编辑:最模板)
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------