如何快速在WordPress中生成网站缩略图?Browser Shots插件与代码法

这几天在部落问吧中添加了快速生成任意网址缩略图的功能,主要是为了方便在分享资源中不用再截图了,直接添加网址,然后发布文章时就可以看到该网址的截图,方便快捷。我们平时在Wordpress调用的一般都是日志的缩略图,但是对于生成网址缩略图我以前在Wordpress官网中看到。

WordPress官网中在展示优秀WP博客中就是自动生成该网站的截图的,本来想用Nginx来生成网址缩略图的,但是上网一搜索果然Wordpress很强大,早就已经有了Browser Shots这个自动生成网站缩略图的插件,安装后直接在编辑文章时点击插入缩略图,输入网址即可生成,而且还是动态的。

如果你的Wordpress也有这么一个需要,可以参考本文来安装Browser Shots体验一番,另外对于担心安装Wordpress过多的插件影响WP执行效率的朋友,也可以直接使用代码法。更多的有关于Wordpress一些优化技巧可以看看:

  • 1、WP问答插件:优秀的WordPress在线问答插件AnsPress安装与使用
  • 2、WordPress手机主题移动版优化方案-WPtouch安装使用及百度移动适配设置
  • 3、优化:用Varnish和Memcached缓存给WordPress网站提速-内存级加速

如何快速在Wordpress中生成网站缩略图?Browser Shots插件与代码法

一、Browser Shots插件安装与使用

1、Browser Shots官网:

  • 1、官方首页:https://wordpress.org/plugins/browser-shots/

2、Browser Shots插件安装完成后,在Wordpress编辑器就有一个按钮,点击这个按钮就可以添加网站缩略图了。

如何快速在WordPress中生成网站缩略图?Browser Shots插件与代码法

3、输入你想要生成缩略图的网站地址,可以设置好图片的高与宽,也可以设置好标题与描述。

如何快速在WordPress中生成网站缩略图?Browser Shots插件与代码法

4、点击发布后,你就可以看到Wordpress已经生成了网站的截图了。

如何快速在WordPress中生成网站缩略图?Browser Shots插件与代码法

二、手动添加Browser Shots短代码

1 、如果你使用的是Wordpress文本编辑器,你可以直接添加以下代码来生成网站缩略图。

1
[browser-shot url="http://www.freehao123.com"]

2、上面的代码默认的会生成600*600的图片,当然我们也可以自己指定高宽。

1
[browser-shot url="http://www.freehao123.com" width="400" height="400"]

3、Browser Shots默认的会指向缩略图网址超链接,你也可以指定某一个链接,代码如下:

1
[browser-shot url="http://www.freehao123.com" width="400" height="400" link="http://xxx.com"]

4、如果你想指定缩略图的标题,可以使用以下代码:

1
[browser-shot url="http://www.freehao123.com" width="400" height="400" link="http://xxx.com"]免费资源部落[/browser-shot]

三、Wordpress中生成网站缩略图代码法

1、如果你不想使用插件,那么可以将下列代码插入到functions.php文件中:

1
2
3
4
5
6
7
8
9
10
11
12
function wpb_screenshots($atts, $content = NULL) {
extract(shortcode_atts(array(
"snap" => 'https://s0.wordpress.com/mshots/v1/',
"url" => 'https://www.freehao123.com',
"alt" => 'screenshot',
"w" => '500', // width
"h" => '450' // height
), $atts));
$img = '<img alt="' . $alt . '" src="' . $snap . '' . urlencode($url) . '?w=' . $w . '&h=' . $h . '"/>';
return $img;
}
add_shortcode("screen", "wpb_screenshots");

2、使用方法如下:

1
[screen url=”http://www.freehao123.com” alt=”网站截图”]

3、默认的以上代码会生成一个500宽450高的图片,你也可以直接自己指定高宽。

1
[screen url=”http://www.freehao123.com” alt=”网站截图” w=”400″ h=”400″]

四、Wordpress网站缩略图问题

1、图片没有存储在本地。Browser Shots plugin用的是WordPress.com’s mshots API生成的缩略图,所以图片并没有存储在本地,而是在WordPress.com服务器上,一旦取消代码那么图片也就会消失了。

如何快速在WordPress中生成网站缩略图?Browser Shots插件与代码法

2、网站截图加载速度慢。这个主要还是因为要从Wordpress.com的服务器上加载图片,国内的话图片比较大的话,有时网页完全打开了才慢慢地加载出来网站截图,可能会影响网站的用户体验。

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: