WordPress实现QQ卡片链接

效果预览

原理分析

QQ发出去一个网址后,在展示的时候,他会快速抓取网站的内容(标题,缩略图,描述)进行展示,抓取有特殊标记的内容,快速展示出来。我们可以通过在head部分加标签的方式让这个过程更快,更准确的展示我们需要的内容。

mate标签

<!--必填-->
<meta itemprop="name" content="网站标题"/>
<meta itemprop="image" content="网站要显示的图片链接" />
<meta name="description" itemprop="description" content="网站内容" />

将以上标签加至文章head即可。

实现思路

文章页

name = 文章标题

image = 特色图(未设置特色图自动抓取文章第一张图片)

meta = 文章描述

分类页

name = 分类名称

image = 自定义

meta = 分类描述

主页

name = 站点名称

image = 站点logo

meta = 站点描述

具体代码

由于主题不一样,我这里只给出我主题的部分代码,至于缩略图获取,文章描述获取等这类函数就不一一贴出。

<meta name="description" itemprop="description" content="<?php description(); ?>"><meta itemprop="image" content="<?php echo ravenclaw_share_post_image(); ?>" />

加入header.php

function ravenclaw_share_post_image(){
    global $post;
    if (has_post_thumbnail($post->ID)) /*有特色图就直接返回特色图*/
{
        $post_thumbnail_id = get_post_thumbnail_id( $post );
        $img = wp_get_attachment_image_src( $post_thumbnail_id, 'full' );
        $img = $img[0];
}
    else/*否则抓取第一张图片*/
{
        $content = $post->post_content;
        preg_match_all('/<img.*?(?: |\\t|\\r|\\n)?src=[\'"]?(.+?)[\'"]?(?:(?: |\\t|\\r|\\n)+.*?)?>/sim', $content, $strResult, PREG_PATTERN_ORDER);
        if (!empty($strResult[1])) {
            $img = $strResult[1][0];
        }else{
            $img = ravenclaw_option('tool_single_image');
        }
};
    if (is_home())/*首页图片返回站点logo*/
{
        $img = ravenclaw_option('tool_share_image');
}
    return $img;
}

思路说了,完整代码可以根据自己主题函数进行完善

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏游戏杂谈

libjpeg的问题

游戏项目是基于cocos2d-x开发的,但线上发现一个bug就是玩家在设置完自定义头像后直接闪退。凡是在设置该玩家头像的地方,游戏就直接闪退。最终定位到的问题是...

1374
来自专栏落影的专栏

一个BUG的发现、定位和解决

前言 在iOS 11发布之后,出现了一系列适配相关的问题,UIScrollView在pagingEnabled=YES时滑动手势不灵敏,UITableView的...

4217
来自专栏DeveWork

WordPress 会自动压缩JPEG 格式的图像?

在老外的一篇文章那里看到一个Jeff 之前不知道的信息:当jpeg 格式的图像被上传到WordPress,它会自动压缩图片为原来的90% 。不过那个谁说得好:“...

2107
来自专栏DevOps时代的专栏

GitLab 是如何用 Headless Chrome 测试的

下面的例子介绍了GitLab如何切换到Headless Chrome GitLab最近从PhantomJS转变为Headless Chrome,用于前端测试和R...

4668
来自专栏進无尽的文章

实践-做一个会性能调优的好猿

对于每位 iOS 开发者来说,代码性能是个避不开的话题。随着项目的扩大和功能的增多,没经过认真调试和优化的代码,要么任性地卡顿运行,要么低调地崩溃。一般性能测试...

742
来自专栏Albert陈凯

如何复制 Intellij idea 的错误提示信息

IDEA的错误提示问题,鼠标移动上去后会有黄色/红色框提示,如何固定这个框,像Eclipse那样可以复制错误提示? 很明显,这是非常不容易做到的,因为鼠标一移动...

4323
来自专栏全栈数据化营销

不用代码,2分钟抓取胡歌全部微博内容

在之前的文章和课程中,对web scraper的安装和使用方法都做了非常详细说明,相信大家都明白了web scraper的用处和采集流程,那么今天就以采集影视明...

60812
来自专栏BestSDK

实用干货|简单9步,教你在PPT中演示动态图表

要在 PPT 里实现可以交互演示的动态图表(不是动画图表哦),可以有以下几种方法来实现: 1. PPT VBA 编程 2. Xcelsius 水晶易表 3. P...

5675
来自专栏数据之美

Web 自动化测试与智能爬虫利器:PhantomJS 简介与实战

估计部分同学没听过这个工具,那先简单介绍下它的背景与作用。 1、PhantomJS 是什么? PhantomJS是一个基于WebKit的服务器端JavaScri...

5209
来自专栏Web 开发

Deploy WordPress On SAE

也没怎么刻意去选择,从各种cPanel主机,到VPS,再到AppFog等Pass,基本上都玩了一遍了。

920

扫码关注云+社区

领取腾讯云代金券