![WordPress文章简码添加Link链接卡片[WP教程]](https://juzhuan-1258576199.cos.ap-nanjing.myqcloud.com/2023/05/1683219340-4f2a7faf3d9e380.jpg "WordPress文章简码添加Link链接卡片[WP教程]")
前言
逛过知乎、CSDN等网站，相信大家对卡片链接，单一的链接只是简单的标题和链接展示出来，虽然简洁，但没有模块化用户很容易忽略。而链接卡片将网站标题、网站链接、网站ICON模块化展示出来，是用户阅读起来非常的友好。
很久以前就想发HTML版本的Link链接卡片，但是当时不是很懂代码，而且HTML版本出现代码冗余非常的不好，所以今天花点时间优化了一下，本来想弄成古登堡编辑器模块化的，但是弄了好久，前台可以展示，但是编辑器却出现了一些代码问题，所以索性放弃了这个想法（其实弄了很久，O(∩_∩)O哈哈~），所以就弄成了简码的方式，经典编辑器和古登堡编辑器都可以使用。
Link链接卡片由简单的PHP+HTML+CSS代码制作而成，不仅适用于子比主题【夜/日间都适用】，还适用于很多的主题【其他主题只适应于日间模式下】，由于很多主题的夜间模式CSS样式不一样，如果你主题有夜间模式的话，只需更改一下代码中的CSS背景样式即可。
使用范围：写文章时需要跳转到本站某个页面、写文章是想分享一些网站的链接
好啦，话不多说，下面发教程，老规矩：积分阅读，不准白嫖。
食用教程
本文付费阅读内容 – 已购买
一、PHP代码
将下面的php代码放到【子比主题：func.php】【其他主题：functions.php】合适位置【最底部即可】
// 链接简码
function wiiuii_love_link($atts, $content = null) {
extract(shortcode_atts(array(
‘href’ => ‘https://’.$_SERVER[‘HTTP_HOST’],
‘icon’ => null,
‘blank’ => true,
‘align’ => null
), $atts));
if(strcasecmp($align,‘l’)==0){
$style_align = ‘left’;
}else if(strcasecmp($align,‘r’)==0){
$style_align = ‘right’;
}else{
$style_align = ‘center’;
}
$content = $content ? $content : ‘未知链接’;
$icon_html = $icon ? ‘<div class=”link_card-image_cell”><img class=”link_card-image” alt=”‘.$content.‘” src=”‘.$icon.‘”></div>’ : ”;
$is_blank = eval(“return $blank;”) ? ‘_blank’ : ‘_self’;
return ‘<div class=”wiiuii-link_main” style=”text-align:’.$style_align.‘”><div class=”wiiuii-link_container”>
<a class=”wiiuii-link_card” href=”‘.$href.‘” title=”‘.$content.‘” target=”‘.$is_blank.‘”>
<div class=”link_card-content”>
<div class=”link_card-text”>
<span class=”link_card-title” title=”‘.$content.‘”>’.$content .‘</span>
<div class=”link_card-meta”>
<svg class=”link_card-svg” fill=”currentColor” viewBox=”0 0 24 24″ width=”14″ height=”14″><path d=”M13.414 4.222a4.5 4.5 0 1 1 6.364 6.364l-3.005 3.005a.5.5 0 0 1-.707 0l-.707-.707a.5.5 0 0 1 0-.707l3.005-3.005a2.5 2.5 0 1 0-3.536-3.536l-3.005 3.005a.5.5 0 0 1-.707 0l-.707-.707a.5.5 0 0 1 0-.707l3.005-3.005zm-6.187 6.187a.5.5 0 0 1 .638-.058l.07.058.706.707a.5.5 0 0 1 .058.638l-.058.07-3.005 3.004a2.5 2.5 0 0 0 3.405 3.658l.13-.122 3.006-3.005a.5.5 0 0 1 .638-.058l.069.058.707.707a.5.5 0 0 1 .058.638l-.058.069-3.005 3.005a4.5 4.5 0 0 1-6.524-6.196l.16-.168 3.005-3.005zm8.132-3.182a.25.25 0 0 1 .353 0l1.061 1.06a.25.25 0 0 1 0 .354l-8.132 8.132a.25.25 0 0 1-.353 0l-1.061-1.06a.25.25 0 0 1 0-.354l8.132-8.132z”></path></svg>
<span class=”link_card-link”>’.$href.‘</span>
</div>
</div>
‘.$icon_html.‘
</div>
</a>
</div></div>’;
}
add_shortcode(“alink”, “wiiuii_love_link”);
二、CSS代码
将下面的CSS代码放到后台主题设置-》自定义CSS样式里面，CSS有两个版本【子比主题专用版本/其他主题版本】，只是更改了一点CSS代码。
1、子比主题专用CSS代码
/*链接卡片**/
.wiiuii-link_main{margin: 15px auto;text-align: center;}
.wiiuii-link_container{position:relative!important;display: inline-block;width:22em;height:100%;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:var(–main-radius);overflow:hidden;background:var(–muted-bg-color);transition: background 0.5s;}
.wiiuii-link_card .link_card-content{position:relative;display:flex;padding:8px;border-radius:inherit;align-items:center;justify-content:space-between}
.wiiuii-link_card .link_card-text{text-align:left}
.wiiuii-link_card .link_card-title{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;line-height:1.25;color:var(–key-color)}
.wiiuii-link_card .link_card-meta{display:flex;margin-top:4px;font-size:14px;color:#999;align-items:center}
.wiiuii-link_card .link_card-svg{margin-right:4px;flex-shrink:0}
.wiiuii-link_card .link_card-link{display:-webkit-box;word-break:break-all;text-overflow:ellipsis;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:1}
.wiiuii-link_card .link_card-image{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}
.wiiuii-link_card .link_card-image_cell{width:60px;height:60px;margin-left:10px;border-radius:var(–main-radius);flex-shrink:0;overflow:hidden}
.wiiuii-link_container:hover{background:var(–body-bg-color)}
2、其他主题专用CSS代码
/*链接卡片**/
.wiiuii-link_main{margin: 15px auto;text-align: center;}
.wiiuii-link_container{position:relative!important;display: inline-block;width:22em;height:100%;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:8px;overflow:hidden;background:rgba(0, 0, 0, 0.03);transition: background 0.5s;}
.wiiuii-link_card .link_card-content{position:relative;display:flex;padding:8px;border-radius:inherit;align-items:center;justify-content:space-between}
.wiiuii-link_card .link_card-text{text-align:left}
.wiiuii-link_card .link_card-title{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;line-height:1.25;color:#333}
.wiiuii-link_card .link_card-meta{display:flex;margin-top:4px;font-size:14px;color:#999;align-items:center}
.wiiuii-link_card .link_card-svg{margin-right:4px;flex-shrink:0}
.wiiuii-link_card .link_card-link{display:-webkit-box;word-break:break-all;text-overflow:ellipsis;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:1}
.wiiuii-link_card .link_card-image{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}
.wiiuii-link_card .link_card-image_cell{width:60px;height:60px;margin-left:10px;border-radius:5px;flex-shrink:0;overflow:hidden}
.wiiuii-link_container:hover{background:rgba(0, 0, 0, 0.05)}
说明：其他主题只需改background属性即可实现日/夜间自适应。
三、添加简码
第一步：打开写文章页面
这里已古登堡编辑器为例子，经典编辑器自己百度搜索“如何使用简码”。
第二步：添加“简码模块”
![WordPress文章简码添加Link链接卡片[WP教程]](https://juzhuan-1258576199.cos.ap-nanjing.myqcloud.com/2023/05/1683219298-6fbc42e400c2127.png "WordPress文章简码添加Link链接卡片[WP教程]")
还不知道怎么添加简码模块的，就别用了，不适合玩这网络。
四、使用及参数
标准使用【注意看图】：最简单的使用方式，注意一定要闭合【alink】【/alink】,不然出错哦！
【alink href=”网站链接” icon=”网站图标”】网站标题【/alink】
![WordPress文章简码添加Link链接卡片[WP教程]](https://juzhuan-1258576199.cos.ap-nanjing.myqcloud.com/2023/05/1683219298-9882424c14bc976.png "WordPress文章简码添加Link链接卡片[WP教程]")
注意注意：[]符号会转义成简码，所以本文章用【】代替[]，使用时请把【】符号改成[]
例子：
【alink href=”http://www.baidu.com” icon=”https://www.baidu.com/img/baidu_85beaf5496f291521eb75ba38eacbd87.svg”】百度【/alink】
![WordPress文章简码添加Link链接卡片[WP教程]](https://juzhuan-1258576199.cos.ap-nanjing.myqcloud.com/2023/05/1683219298-2651f877a84e344.png "WordPress文章简码添加Link链接卡片[WP教程]")
[*]所有参数的使用：请看下面的示例
【alink href=“http://www.baidu.com” align=“l” blank=“true” icon=“//www.baidu.com/img/baidu_85beaf5496f291521eb75ba38eacbd87.svg”】百度【/alink】
【注意重要】参数说明：
- href：【必填】网站链接
- 标题：【必填】在【alink】【/alink】的中间
- icon：【非必填】网站图标
- align：【非必填】对齐方式，默认居中方式，l或L-》左对齐、r或R-》右对齐、c或C-》居中对齐【居中可不填参数】
- blank：【非必填】是否新建窗口打开，true-》新建窗口打开，false-》当前窗口打开
[]符号会转义成简码，所以本文章用【】代替[]，使用时请把【】符号改成[]
效果
星语的小木屋 – 网络IT科技魅力的小木屋
https://www.wiiuii.cn
![WordPress文章简码添加Link链接卡片[WP教程]](https://juzhuan-1258576199.cos.ap-nanjing.myqcloud.com/2023/05/1683219298-06ad3b7539047bb.png "WordPress文章简码添加Link链接卡片[WP教程]")
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
![炫酷的网站小工具-倒计时[代码分享]](https://juzhuan-1258576199.cos.ap-nanjing.myqcloud.com/2023/05/1683217858-32a14d4a617cb91_thumbnail_thumbnail.png)