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

WordPress   2017年04月26日 21:53  

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

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

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

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

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

一、Browser Shots插件安装与使用

1、Browser Shots官网:

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

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

Browser Shots快速添加缩略图

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

Browser Shots设置好标题描述

4、点击发布后,你就可以看到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=”400h=”400]

四、Wordpress网站缩略图问题

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

Browser Shots图片截图没有保存

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

文章出自:免费资源部落 https://www.freehao123.com/ 版权所有。本站文章除注明出处外,皆为作者原创文章,可自由引用,但请注明来源。

域名注册
购买VPS主机

您或许对下面这些文章有兴趣:                    本月吐槽辛苦排行榜

在这个部落村庄里,已经有8 位神马家族成员冒出泡来在农场开始干活了
  • RR233CY 18

    有点意思

    这是农场的第 1 块农田,部落批准 [RR233CY] 在[2017-4-26 22:30]开垦完成.
  • WordPress.com在国内可能被*

    qi 回复:

    @梧小铭, 是的,但是Https还是可以正常访问的。

    这是农场的第 2 块农田,部落批准 [梧小铭] 在[2017-4-26 23:14]开垦完成.
  • 对海外站点挺方便的

    这是农场的第 3 块农田,部落批准 [李毅哲] 在[2017-4-26 23:20]开垦完成.
  • 比以前那个什么THUMBHOT好多了,那家伙好像还收费了现在,以前很多查询站都用那个

    qi 回复:

    @黎叔, 这个插件貌似就是在这个插件基础上开发出来的。

    这是农场的第 4 块农田,部落批准 [黎叔] 在[2017-4-28 17:40]开垦完成.
  • 刚测试有个BUG,中文站截图出来中文字符显示不了

    qi 回复:

    @黎叔, 是的,英文的正常。

    这是农场的第 5 块农田,部落批准 [黎叔] 在[2017-4-28 18:06]开垦完成.
看贴要回贴有N种理由!看帖不回贴的后果你懂得的!


评论内容 (*必填):
(Ctrl + Enter提交)   

部落快速搜索栏

各类专题梳理

网站导航栏

X
返回顶部