WordPress MIP改造之a标签替换为mip-link跳转链接

张子凡 WordPress/百度MIP 6个月前 (11-28) 阅读(2632) 评论(2)

泪雪博客改造和引入百度MIP的时候子凡就曾吐槽过了MIP规范中对a标签的定义,其中必须使用target=”_blank”属性,就此子凡还曾在泪雪博客针对WordPress整站a链接标签添加target=”_blank”属性分享过一个解决方法。

正是因为a标签有了target这个属性,可能在一些浏览器打开MIP页面的时候就会不断的打开新标签,从而大大的降低了用户体验,所以这里我们就可以使用百度MIP官方提供的mip-link跳转链接这个组件来实现替换原有的a链接标签。

WordPress MIP改造之a标签替换为mip-link跳转链接

那么问题就来了,如果一套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样式,这样才能保证你原来页面的一个完整效果。

除非注明,否则均为泪雪博客原创文章,转载请以链接形式标明本文地址

本文链接:https://zhangzifan.com/wordpress-a-to-mip-link.html

发表评论

  1. 春熙路
    1楼
    春熙路 6个月前 (11-30)

    感谢分享

    • 张子凡
      回复
      张子凡 6个月前 (11-30)
      回复 @春熙路 :这个网名好,这可是我们成都的