twentytwenty-banner

不知不觉间,又迎来了新的一年,在这里首先祝大家新年快乐(好像有点晚),时间总是过得特别的快,我们周围的一切也在不断的变化,而这些变化,往往会被我们匆忙的脚步忽略。而多年后,当我们拿起记录这些变化的照片,我们总是倾向于去比对,去寻找这些变化是怎么发生的。那么,我们有时候会希望把这种变化更加清晰的展现给别人,而在WordPress中,TwentyTwenty 插件就是一个很好的解决方案。

TwentyTwenty 插件通过使用两张相同大小的图片,然后可以通过滑动来更好的比对两张图片的差异,具体效果如题图,若想切实的体验一下插件的效果,可以在文末点击演示页面的链接仔细体验。

TwentyTwenty 插件使用方法

首先要注意的是 TwentyTwenty 插件要使用两张相同大小的图片,且仅支持IE9及以上的浏览器。插件的使用方法就是像平常一样添加两张图片,然后切换编辑器到“文本”模式,找到两张图像对应的代码,类似下面这样的

<img src="http://www.example.com/wp-content/uploads/2014/12/before-photo.jpg" alt="Before photo" width="604" height="402" class="alignnone size-large wp-image-2367" />
<img src="http://www.example.com/wp-content/uploads/2014/12/after-photo.jpg" alt="After Photo" width="604" height="402" class="alignnone size-large wp-image-2366" />

然后在第一张图像代码的前面加入[twentytwenty],第二张图像代码的后面加入[/twentytwenty]即可!
加入后的代码如下所示:

[twentytwenty]<img src="http://www.example.com/wp-content/uploads/2014/12/before-photo.jpg" alt="Before photo" width="604" height="402" class="alignnone size-large wp-image-2367" />
<img src="http://www.example.com/wp-content/uploads/2014/12/after-photo.jpg" alt="After Photo" width="604" height="402" class="alignnone size-large wp-image-2366" />[/twentytwenty]

结语

不得不说,TwentyTwenty 插件是一个十分有人文情怀的插件,在这个发展如此快速的时代,我们也确实应该注意停下脚步,关注一下身边的变化。

嗯,以上呢,都是我作为一个文科生对这个插件的适用范围的一个YY,这个插件还可以有很多其他的用途,只要是想比对图片的变化,均可以用到这个插件,大家就尽情的发挥自己的想象啦!

相关链接:演示页面 | WordPress.org主页