从钟MM的博客评论下，无意间进入到了三十里海河的一篇文章《使用 WordPress mShots 截图 API》，感觉非常的炫酷，用了一个小时，基于PIX主题的友链，更新了代码，实现了快照抓取。

原理的话参考上面的文章即可，小站实现鼠标移到网站名称或者图标上时，自动生成对应网站的首页快照，移开则消失。

注意：抓取空白或者403错误的，是对方网站做了限制抓取；显示404错误的，是对方网站已经打不开了。

三十里海河参考的是大大的小蜗牛的友链展示，本站的演示是左侧导航“互链社”。

废话不多说，开整。

备份pix/inc/pix-fn.php后打开，如果以前没有修改过，找到大概340行或者直接搜索“友链”。

//友链
function link_item(){
    $arr = get_op('linkscat_show');
    $linkcats = get_terms( array(
        'taxonomy'     => 'link_category',
        'include'      => $arr,
        'count'        => true,
        'hide_empty'   => 1,
        'orderby'      => 'include',
    ) );
    $output = '';
	foreach($linkcats as $linkcat){
		$id = $linkcat->term_id;
		$output .= '<div class="link_group_content"><div class="link_cat_name"><i class="ri-bookmark-line"></i>'.$linkcat->name.'</div><div id="link_'.$id.'" class="link_group">';
			$bookmarks = get_bookmarks( 'orderby=date&category='.$id);
			if ( !empty($bookmarks) ) {
				foreach ( $bookmarks as $bookmark ) {
					$img_type = $bookmark->link_image ? $bookmark->link_image : '';
					$preg = "/^http(s)?:\\/\\/.+/";
                    $avatar = '<img src="'.THEME_URL.'/img/avatar.png">';
                    if(!empty($img_type)){
                        if ( preg_match($preg,@$img_type) ) {
                            $avatar = '<img alt="avatar" src="'. $bookmark->link_image .'" srcset="'. $bookmark->link_image .'" class="avatar avatar-80" height="80" width="80">';
                        }
                        else {
                            $avatar = get_avatar( $bookmark->link_image, 80 );
                        }
                    }
					
					$output .= '<div class="item" title="'. $bookmark->link_description .'">';
					$output .= '<div class="link-avatar"><a href="'. $bookmark->link_url .'" target="_blank">'. $avatar .'</a></div>';
					$output .= '<div class="info">';
					$output .= '<h3 class="name"><a href="'. $bookmark->link_url .'" target="_blank">'. $bookmark->link_name .'</a></h3>';
					$output .= '<div class="meta button"><a href="'. $bookmark->link_url .'" target="_blank"><i class="iconfont icon-zhuanfa_3"></i></a></div>';
					$output .= '<div class="description">'. $bookmark->link_description .'</div></div>';
					$output .= '</div>';
				}
			}
			$output .= '</div></div>';
	}

    return $output;
   
}

一、如果全站未启用PJAX，把这段修改成如下代码：

二、如果全站启用了PJAX，把这段修改成如下代码：

其中以上代码，width: 400px和height: 320px是生成快照的长和宽，根据自己需要修改。

搞定收工！