建站教程 2023-07-17

纯代码实现WordPress自动生成网站截图

我们看到很多分享类网站或者模板类网站上，会有很多网站的截图，如果数量很大的情况下，会比较麻烦。对于我们自己做网站时，完全可以使用代码生成的方法，自动生成网站缩略图，这样可以节省很多时间和精力。

下面我们分享 wordpress 文章中自动获取网站截图的两种纯代码方法：

文章目录

1 方法一、短代码实现的方法
2 方法二、直接添加链接的方法

方法一、短代码实现的方法

将下面的代码添加到当前主题模板函数 functions.php 中：

<div class="codecolorer-container php geshi" style="overflow:auto;white-space:nowrap;width:100%;"><div class="php codecolorer" style="white-space:nowrap"><span style="color: #000000; font-weight: bold;">function</span> wp_screenshot<span style="color: #009900;">(</span><span style="color: #000088;">$atts</span><span style="color: #339933;">,</span> <span style="color: #000088;">$content</span><span style="color: #339933;">=</span><span style="color: #009900; font-weight: bold;">null</span><span style="color: #009900;">)</span><span style="color: #009900;">{</span><br><span style="color: #990000;">extract</span><span style="color: #009900;">(</span><br>
shortcode_atts<span style="color: #009900;">(</span><br><span style="color: #990000;">array</span><span style="color: #009900;">(</span><br><span style="color: #0000ff;">"shots"</span> <span style="color: #339933;">=&gt;</span> <span style="color: #0000ff;">"https://s0.wordpress.com/mshots/v1/"</span><span style="color: #339933;">,</span><br><span style="color: #0000ff;">"url"</span> <span style="color: #339933;">=&gt;</span> <span style="color: #0000ff;">"https://www.wpbeginner.com"</span><span style="color: #339933;">,</span><br><span style="color: #0000ff;">"width"</span> <span style="color: #339933;">=&gt;</span> <span style="color: #0000ff;">"600"</span><span style="color: #339933;">,</span><br><span style="color: #0000ff;">"height"</span> <span style="color: #339933;">=&gt;</span> <span style="color: #0000ff;">"450"</span><span style="color: #339933;">,</span><br><span style="color: #0000ff;">"alt"</span> <span style="color: #339933;">=&gt;</span> <span style="color: #0000ff;">"screenshot"</span><br><span style="color: #009900;">)</span><span style="color: #339933;">,</span><br><span style="color: #000088;">$atts</span><br><span style="color: #009900;">)</span><br><span style="color: #009900;">)</span><span style="color: #339933;">;</span><br><br><span style="color: #000088;">$img</span> <span style="color: #339933;">=</span> <span style="color: #0000ff;">'&lt;div class="wp-shot"&gt;&lt;a href="'</span> <span style=" rel="external nofollow" color: #339933;">.</span> <span style="color: #000088;">$url</span> <span style="color: #339933;">.</span> <span style="color: #0000ff;">'" rel="external nofollow noopener noreferrer" target="_blank"&gt;&lt;img src="'</span> <span style="color: #339933;">.</span> <span style="color: #000088;">$shots</span> <span style="color: #339933;">.</span> <span style="color: #0000ff;">''</span> <span style="color: #339933;">.</span> <span style="color: #990000;">urlencode</span><span style="color: #009900;">(</span><span style="color: #000088;">$url</span><span style="color: #009900;">)</span> <span style="color: #339933;">.</span> <span style="color: #0000ff;">'?w='</span> <span style="color: #339933;">.</span> <span style="color: #000088;">$width</span> <span style="color: #339933;">.</span> <span style="color: #0000ff;">'&amp;h="</span> <span style="color: #339933;">.</span> <span style="color: #000088;">$height</span> <span style="color: #339933;">.</span> <span style="color: #0000ff;">"" alt="'</span> <span style="color: #339933;">.</span> <span style="color: #000088;">$alt</span> <span style="color: #339933;">.</span> <span style="color: #0000ff;">'" /&gt;&lt;/a&gt;&lt;/div&gt;'</span><span style="color: #339933;">;</span><br><span style="color: #b1b100;">return</span> <span style="color: #000088;">$img</span><span style="color: #339933;">;</span><br><span style="color: #009900;">}</span><br>
add_shortcode<span style="color: #009900;">(</span><span style="color: #0000ff;">"shot"</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">"wp_screenshot"</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span></div></div>

<div class="codecolorer-container php geshi" style="overflow:auto;white-space:nowrap;width:100%;"><div class="php codecolorer" style="white-space:nowrap">function wp_screenshot($atts, $content=null){ extract(

shortcode_atts( array( "shots" => "https://s0.wordpress.com/mshots/v1/", "url" => "https://www.wpbeginner.com", "width" => "600", "height" => "450", "alt" => "screenshot" ), $atts ) ); $img = '<div class="wp-shot"><a href="' . $url . '" rel="external nofollow noopener noreferrer" target="_blank"><img src="' . $shots . '' . urlencode($url) . '?w=' . $width . '&h=" . $height . "" alt="' . $alt . '" /></a></div>'; return $img; }

add_shortcode("shot", "wp_screenshot");</div></div>

发表文章时，添加短代码:

或者自定义截图大小

修改其中的网址链接链接即可。

方法二、直接添加链接的方法

这个方法使用更加方便，获取截图的基本格式：

也可以直接将上述地址链接格式像正常插入图片（从 URL 插入）一样添加到文章中，上面的截图就是这么加的，并没有用短代码。

温馨提示：因需要即时生成截图，第一次打开可能看不到图片，刷新一下就可以了，不行就多刷新几次。生成的截图存储在 WordPress.com 服务器上，不会占用自己的网站空间，不过加载可能有些慢。

WordPress 教程

由于网站搬家，部分链接失效，如无法下载，请联系站长！谢谢支持！
1. 带 [亲测] 说明源码已经被站长亲测过!
2. 下载后的源码请在24小时内删除,仅供学习用途！
3. 分享目的仅供大家学习和交流，请不要用于商业用途！
4. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！
5. 本站所有资源来源于站长上传和网络，如有侵权请邮件联系站长！
6. 没带 [亲测] 代表站长时间紧促,站长会保持每天更新 [亲测] 源码 !
7. 盗版ripro用户购买ripro美化无担保,若设置不成功/不生效我们不支持退款!
8. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
9. 如果你也有好源码或者教程，可以到审核区发布，分享有金币奖励和额外收入!
10.如果您购买了某个产品，而我们还没来得及更新，请联系站长或留言催更，谢谢理解 !
GG资源网 » 纯代码实现WordPress自动生成网站截图

分享到：