盛夏云-星猫爱分享
WordPress文章简码添加Link链接卡片

WordPress文章简码添加Link链接卡片

WordPress文章简码添加Link链接卡片-星猫爱分享
WordPress文章简码添加Link链接卡片
此内容为付费阅读,请付费后查看
500积分
付费阅读
已售 46

前言

逛过知乎、CSDN等网站,相信大家对卡片链接,单一的链接只是简单的标题和链接展示出来,虽然简洁,但没有模块化用户很容易忽略。而链接卡片将网站标题、网站链接、网站ICON模块化展示出来,是用户阅读起来非常的友好。

很久以前就想发HTML版本的Link链接卡片,但是当时不是很懂代码,而且HTML版本出现代码冗余非常的不好,所以今天花点时间优化了一下,本来想弄成古登堡编辑器模块化的,但是弄了好久,前台可以展示,但是编辑器却出现了一些代码问题,所以索性放弃了这个想法(其实弄了很久,O(∩_∩)O哈哈~),所以就弄成了简码的方式,经典编辑器和古登堡编辑器都可以使用。

Link链接卡片由简单的PHP+HTML+CSS代码制作而成,不仅适用于子比主题【夜/日间都适用】,还适用于很多的主题【其他主题只适应于日间模式下】,由于很多主题的夜间模式CSS样式不一样,如果你主题有夜间模式的话,只需更改一下代码中的CSS背景样式即可。

使用范围:写文章时需要跳转到本站某个页面、写文章是想分享一些网站的链接

好啦,话不多说,下面发教程,老规矩:积分阅读,不准白嫖。

食用教程

一、PHP代码

将下面的php代码放到【子比主题:func.php】【其他主题:functions.php】合适位置【最底部即可】

二、CSS代码

将下面的CSS代码放到后台主题设置-》自定义CSS样式里面,CSS有两个版本【子比主题专用版本/其他主题版本】,只是更改了一点CSS代码。

1、子比主题专用CSS代码

2、其他主题专用CSS代码

说明:其他主题只需改background属性即可实现日/夜间自适应。

三、添加简码

第一步:打开写文章页面

这里已古登堡编辑器为例子,经典编辑器自己百度搜索“如何使用简码”。

第二步:添加“简码模块”

图片[1]-WordPress文章简码添加Link链接卡片[WP教程]-星语的小木屋
添加简码

还不知道怎么添加简码模块的,就别用了,不适合玩这网络。

四、使用及参数

标准使用【注意看图】:最简单的使用方式,注意一定要闭合【alink】【/alink】,不然出错哦!

【alink href="网站链接" icon="网站图标"】网站标题【/alink】
图片[2]-WordPress文章简码添加Link链接卡片-星猫爱分享
标准使用Link链接卡片

注意注意[]符号会转义成简码,所以本文章用【】代替[],使用时请把【】符号改成[]

例子:

【alink href="http://www.baidu.com" icon="https://www.baidu.com/img/baidu_85beaf5496f291521eb75ba38eacbd87.svg"】百度【/alink】
图片[3]-WordPress文章简码添加Link链接卡片[WP教程]-星语的小木屋
Link链接卡片例子

[*]所有参数的使用:请看下面的示例

【alink href="http://www.baidu.com" align="l" blank="true"  icon="//www.baidu.com/img/baidu_85beaf5496f291521eb75ba38eacbd87.svg"】百度【/alink】

【注意重要】参数说明:

  • href:【必填】网站链接
  • 标题:【必填】在【alink】【/alink】的中间
  • icon:【非必填】网站图标
  • align:【非必填】对齐方式,默认居中方式,lL-》左对齐、rR-》右对齐、cC-》居中对齐【居中可不填参数】
  • blank:【非必填】是否新建窗口打开,true-》新建窗口打开,false-》当前窗口打开

[]符号会转义成简码,所以本文章用【】代替[],使用时请把【】符号改成[]

效果演示:

© 版权声明
THE END
喜欢就支持一下吧
点赞93 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片

    暂无评论内容