WordPress MIP 改造之 a 标签替换为 mip-link 跳转链接
发布于
by
在泪雪博客改造和引入百度 MIP的时候子凡就曾吐槽过了 MIP 规范中对 a 标签的定义，其中必须使用 tar…
在泪雪博客改造和引入百度 MIP的时候子凡就曾吐槽过了 MIP 规范中对 a 标签的定义，其中必须使用 target=”_blank”属性，就此子凡还曾在泪雪博客针对WordPress 整站 a 链接标签添加 target=”_blank”属性分享过一个解决方法。
正是因为 a 标签有了 target 这个属性，可能在一些浏览器打开 MIP 页面的时候就会不断的打开新标签，从而大大的降低了用户体验，所以这里我们就可以使用百度 MIP 官方提供的 mip-link 跳转链接这个组件来实现替换原有的 a 链接标签。
那么问题就来了，如果一套 WordPress 主题需要手动一个一个的去把 a 标签替换成 mip-link，那可能就是一个极其浩大而头痛的事情了，所以子凡稍微的研究了一下，结合之前开过过的一些功能和 WordPress 动作，就可以非常简单的处理这个问题了。
同样的方法，把以下代码加入你当前使用主题的 functions.php 文件中（代码中提供完整可能的拓展可能性，可根据需要修改）：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
//WordPress 整站 a 链接替换为 mip-link add_action('get_header', 'Fanly_mip_link'); function Fanly_mip_link(){ function Fanly_mip_link_main ($content){ preg_match_all('/<a (.*?)>(.*?)</a>/', $content, $links); if(!is_null($links)) { foreach($links[1] as $index => $value){ $mip_link = str_replace('<a', '<mip-link', $links[0][$index]); //以下代码可根据需要修改/删除 $mip_link = preg_replace('/ target=".*?"/', '',$mip_link);//移除 target //$mip_link = preg_replace('/ style=".*?"/', '',$mip_link);//移除 style //$mip_link = preg_replace('/ class=".*?"/', '',$mip_link);//移除 class //以上代码可根据需要修改/删除 $mip_link = str_replace('</a>', '</mip-link>', $mip_link); $content = str_replace($links[0][$index], $mip_link, $content); } } return $content; } ob_start("Fanly_mip_link_main"); } |
通过以上的代码就可以实现 WordPress 整站将 a 标签链接替换为百度 MIP 规范的 mip-link 跳转链接，效果如下：
1 |
<mip-link href="http://m.baidu.com">链接文字</mip-link> |
但是根据官方对 mip-link 组件的规定，还需要一个 mip-link.js 的脚本，脚本链接如下，请直接放置在 WordPress 主题 footer.php 文件中的 body 前即可。
1 |
<script src="https://mipcache.bdstatic.com/static/v1/mip-link/mip-link.js"></script> |
好了，到这里子凡要分享的 WordPress 整站 a 链接替换为 mip-link 跳转链接就已经结束了，而对你你真正替换后则可能还有其它的操作，例如对原有 a 标签做过 css 样式的，那么现在你可能还需要替换和修改一些 css 样式，这样才能保证你原来页面的一个完整效果。
类别：WordPress优化、
本文收集自互联网，转载请注明来源。
如有侵权，请联系 wper_net@163.com 删除。
猜你喜欢GUESS YOU LIKE
还没有任何评论，赶紧来占个楼吧！