微慕小程序基础教程:WordPress文章中的链接如何设置才能实现小程序内跳转?

 懿古今   2022-10-01 13:07:43 发布  技术文档

微慕小程序开源版 + WordPress构建的小程序非常给力,唯一缺点就是WordPress站点文章内容添加的内链,到了小程序页面点击之后只能是复制,不能跳转到小程序内相应的页面,也不能跳转到我们的站点(PS:企业主体小程序据说可以跳转都站点页面)。

那么有没有办法对WordPress文章页的链接进行优化,让其既实现在网站内部的链接跳转又实现在小程序内部的链接跳转呢?其实,对于这个问题开微慕小程序开源版已经考虑到,而且将相应的按钮(Link+)添加到WordPress经典编辑器文本模式中,需要我们手动添加相应的链接才行。

微慕小程序基础教程:WordPress文章中的链接如何设置才能实现小程序内跳转? - 第1张 - 懿古今(www.yigujin.cn)

如上图所示,在“懿古今”前面在文本模式中点击一下【Link+】按钮即可出现相应的A标签格式,其中:

  • href:填写的站内文章链接;
  • appid:填写小程序的appid(跳转本小程序或业务域名的链接可留空);path:填写小程序页面路径(包括参数);
  • redirectype:填写跳转的类型,apppage是自己的小程序,miniapp是其他小程序,webpage是业务域名文章链接(含关联公众号文章链接);
  • jumptype:填写跳转的方式,redirect是切换跳转,embedded是半屏跳转。

填写好A标签的相关内容,在“懿古今”后面点击一下【/Link+】按钮即可。

说实话,这样的操作非常复杂,相信没有多少个站长会手动添加这种链接。其实,我们WordPress站点的很多链接都是内部文章链接,而在小程序中点击该链接也是希望打开小程序内相应的文章页面而已。所以我们可以将小程序所需要的A标签格式写好,届时点击一下【Link+】按钮即可自动添加相应的格式,然后输入对应文章链接的ID即可。

懿古今平时都喜欢在“可视化”模式添加链接,选择想要添加链接的文字如懿古今并复制,点击编辑器的“链接”图标按钮并粘贴所复制的内容到搜索框中,然后点击搜索到的站内文章,点击回车键即可自动为该文字添加上链接。具体如下图所示:

微慕小程序基础教程:WordPress文章中的链接如何设置才能实现小程序内跳转? - 第2张 - 懿古今(www.yigujin.cn)

等编辑完文章后,点击切换到“文本”模式,找到有添加内部链接的地方,如下图所示,将光标定位到A标签中,点击一下【Link+】按钮即可出现小程序所需要的A标签格式,然后直接在id=后面输入前面那个内容链接的ID即可。

微慕小程序基础教程:WordPress文章中的链接如何设置才能实现小程序内跳转? - 第3张 - 懿古今(www.yigujin.cn)

实现以上功能的方法很简单,在/wp-content/plugins/rest-api-to-miniprogram/includes/settings/文件夹中找到并打开wp-tinymce-add-button.php文件,将第9行代码:

QTags.addButton( 'linkPlusCode', 'Link+', '<a href=""  appid=""  path=""  redirectype="" jumptype="">','</a>' );

修改为

QTags.addButton( 'linkPlusCode', 'Link+', ' appid="" path="/pages/detail/detail?id=" redirectype="apppage" jumptype="redirect" target="_blank" rel="noopener"' );

即可(代码中的A标签属性也可自行修改)。

根据修改后的【Link+】按钮,我们只需要事先根据以前的写作习惯添加好链接,最后再切换到文本模式中点击一下该按钮,接着将内部链接对应的ID填写一下即可。

本文地址:https://www.yigujin.cn/4981.html

您可能感兴趣的文章

文章标签: ,  
版权声明:本文为原创文章,版权归 懿古今 所有,欢迎分享本文,转载请保留出处!发布此文是出于传递更多信息之目的,若有来源标注错误或侵犯了您的合法权益,请发邮件至[email protected],确认后马上更正、删除,谢谢!
淘宝和京东热销产品和VIP会员的优惠券推荐

发表评论