欢迎您光临自学哈网,只为分享网络知识教程,供大家学习参考!

「自学哈网」WordPress MIP 改造之 a 标签替换为 mip-link 跳转链接

作者 : 自学哈 本文共1590个字,预计阅读时间需要4分钟 2022-11-26 共85人阅读
也想出现在这里? 联系我们

在泪雪博客改造和引入百度 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 样式,这样才能保证你原来页面的一个完整效果。

本站声明:
本站所有资源来源于网络,分享目的仅供大家学习和交流!如若本站内容侵犯了原著者的合法权益,可联系邮箱976157886@qq.com进行删除。
自学哈专注于免费提供最新的分享知识、网络教程、网络技术的资源分享平台,好资源不私藏,大家一起分享!

自学哈网 » 「自学哈网」WordPress MIP 改造之 a 标签替换为 mip-link 跳转链接
也想出现在这里? 联系我们
© 2022 Theme by - 自学哈网 & WordPress Theme. All rights reserved 浙ICP备2022016594号