# 为你的 WordPress 站点配置 Telegram Instant View

- Link: https://www.ixiqin.com/2022/06/17/for-your-wordpress-site-configuration-telegram-instant-view/
- Published: 2022-06-17T06:00:43+08:00
- Author: 白宦成

文章目录

 [Toggle](https://www.ixiqin.com/2022/06/17/for-your-wordpress-site-configuration-telegram-instant-view/#)

 * [为 WordPress 添加 Instant View 适配](https://www.ixiqin.com/2022/06/17/for-your-wordpress-site-configuration-telegram-instant-view/#%e4%b8%ba_wordpress_%e6%b7%bb%e5%8a%a0_instant_view_%e9%80%82%e9%85%8d)
 * [预览效果](https://www.ixiqin.com/2022/06/17/for-your-wordpress-site-configuration-telegram-instant-view/#%e9%a2%84%e8%a7%88%e6%95%88%e6%9e%9c)
 * [总结](https://www.ixiqin.com/2022/06/17/for-your-wordpress-site-configuration-telegram-instant-view/#%e6%80%bb%e7%bb%93)

Telegram 内置了一个非常好用的阅读功能 —— Instant View。Instant View 可以实现在 Telegram
内部重新对网站内容进行排版，从而为读者提供更好的阅读体验。

作为一个网站主，如果你希望对你的网站提供相应的支持，则可以自行在 Instant View 的
网站添加你自己的网站进行适配。

## 为 WordPress 添加 Instant View 适配

访问 [**Instant View**](https://instantview.telegram.org/) 官网，并使用你自己的 
Telegram 账号登录

![](https://files.ixiqin.com/2022/06/23065308/d2b5ca33bd970f64a6301fa75ae2eb22-8-
1024x877.png)

 Instant View 官网

登录成功后，点击右侧的 **My Templates**，进入到 Templates 管理页面。

![](https://files.ixiqin.com/2022/06/23065308/d2b5ca33bd970f64a6301fa75ae2eb22-9-
1024x478.png)

并在 Templates 管理页面中间的输入框中输入你网站任一文章的地址，并回车，你会自动进入
到规则的适配页面。

![](https://files.ixiqin.com/2022/06/23065308/d2b5ca33bd970f64a6301fa75ae2eb22-10-
1024x561.png)

规则适配页面

随后，在页面中输入你的站点的规则，这里我们可以使用[其他开发者写好的规则](https://github.com/olkitu/Telegram-Instant-View-Template-for-Wordpress/blob/master/template.txt)。
将规则粘贴在页面中

    ```php
    # Use Instant View version 2.0
    ~version: "2.0"

    # Use this template only blog article pages
    ?exists: /html/head/meta[@property="article:published_time"]

    # Get article text in <article> 
    body:     //article

    # Get title from <h1>

    title:    $body//h1[1]
    subtitle: $title/next-sibling::h2
    author_url: //span[has-class("author")]//@href

    # Get article cover image
    cover: //img[has-class("wp-post-image")]

    # Convert all iframe elements to inline element
    @inline: $body//iframe[starts-with(@src, "/media/")]

    # Remote header and footer
    @remove: //article/header
    @remove: //article/footer

    # Replace p to figure
    @replace_tag(<figure>): $body//p[.//img]

    # Youtube Embedded Fix
    @replace_tag(<figure>): $body//p[.//iframe]
    Code language: PHP (php)
    ```

粘贴并保存后，会自动在最右侧页面生成预览的效果。

![](https://files.ixiqin.com/2022/06/23065308/d2b5ca33bd970f64a6301fa75ae2eb22-11-
1024x560.png)

加入规则适配后的效果

当你的规则适配效果无误后，接下来只需要点击右上叫的 **Mark as Checked **，来标记该
页面已经检查完车。

![](https://files.ixiqin.com/2022/06/23065308/d2b5ca33bd970f64a6301fa75ae2eb22-12-
1024x148.png)

标记为检查成功

测试完成第一个后， 接下来你只需要在你的博客当中挑选出 10 篇文章，进行文章的验证即可。

![](https://files.ixiqin.com/2022/06/23065308/d2b5ca33bd970f64a6301fa75ae2eb22-4-
1024x478.png)

验证至少 10 个页面才行

根据 Telegram Instant View 的规则，你需要验证满 10 篇文章，才能提交你的模板给官方
人员审核。

![](https://files.ixiqin.com/2022/06/23065308/d2b5ca33bd970f64a6301fa75ae2eb22-5-
1024x837.png)

提交后，你会见到这样的提示，接下来只需要等待你的模板通过测试即可。

![](https://files.ixiqin.com/2022/06/23065308/d2b5ca33bd970f64a6301fa75ae2eb22-6-
1024x732.png)

提交成功

## 预览效果

在审核期间，你可以在编辑器页面右上角点击「View in Telegram」来查看预览的效果。包括
你也可以复制里面的 `rhash` 的值，使用这个值来生成 Instant View 的链接分享给别人。
不过，最方便的当然还是等官方审核通过以后再用。

![](https://files.ixiqin.com/2022/06/23065308/d2b5ca33bd970f64a6301fa75ae2eb22-13-
1024x934.png)

预览效果。

## 总结

Telegram Instant View 的开发不困难，掌握了一定的 HTML 、XPath 的基础，就可以开发
完成，简单的几步，就可以让你的网站在 Telegram 当中拥有一个不错的预览效果，这个时间
值得去花。