hover显示位置_wordpress内链文章卡片样式显示

该博客介绍如何在WordPress中实现文章链接转化为卡片样式,提高用户体验和SEO效果。通过添加自定义短代码和CSS样式,利用get_posts获取文章信息,并在前端展示。注意事项包括根据主题调整调用函数,避免网站报错。
摘要由CSDN通过智能技术生成

d7baa455264074e9b7ae61d834b95b6a.png

背景

博客文章应用站点内的文章链接时,常规就是放一个链接地址就行,既简单又粗暴但是用户体验感不是很好。

要是能像知乎文章显示那样,链接自动转化成卡片式链接就美观多了,一方面提高了文章关联度,另一方面提高了网站SEO效果。

效果如下

a715ae1ef158859e3b64f2a87419281f.png

实现方法

采用短代码给文章添加卡片式内链,通过get_posts自定义调用文章的图片、标题、发布时间等内容,直接以html的形式在前台加载

function.php 添加代码

/**
* 卡片式文章内链功能
*/
function yx_embed_posts( atts,content = null ){
extract( shortcode_atts( array(
'ids' => ''
),
atts ) );
globalpost;
content = '';postids = explode(',', ids);inset_posts = get_posts(array('post__in'=>postids));category = get_the_category(ids);
foreach (inset_posts as key =>post) {
setup_postdata( post );content .= '<span class="embed-card">
<a target="_blank" rel="noopener noreferrer">term_id ).'"><span class="embed-card-category">'. 
可以使用伪类`:hover`来实现背景图片hover加蒙层的效果。具体步骤如下: 1. 给需要添加蒙层的元素设置`position: relative;`,以便在其内部添加绝对定位的遮罩层。 2. 在元素内部添加一个`div`元素作为遮罩层,设置其宽高与父元素相同,并设置其`position: absolute;`和`top: 0; left: 0;`,使其覆盖在父元素上方。 3. 设置遮罩层的背景色或者背景图片,并设置其不透明度`opacity`小于1,以实现透明效果。 4. 初始状态下,将遮罩层的`opacity`设为0,当鼠标移至父元素上时,使用伪类`:hover`来设置遮罩层的`opacity`为1,显示遮罩层。 5. 如果需要在遮罩层上显示文字,可以在遮罩层内部添加一个`div`元素,并设置其`position: absolute;`和`z-index: 1;`来将其置于遮罩层上方。然后在该元素内部添加需要显示的文字元素。 示例代码如下: HTML: ```html <div class="container"> <div class="image"> <div class="overlay"> <div class="text">这是一段文字</div> </div> </div> </div> ``` CSS: ```css .container { width: 300px; height: 200px; position: relative; } .image { background-image: url('your-image-url'); background-size: cover; width: 100%; height: 100%; } .overlay { width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-color: rgba(0, 0, 0, 0.5); /* 蒙层颜色,透明度为0.5 */ opacity: 0; /* 初始状态下蒙层透明度为0 */ transition: opacity 0.5s ease-in-out; /* 设置过渡效果 */ } .overlay:hover { opacity: 1; /* 鼠标移至元素上方时,蒙层透明度为1,显示蒙层 */ } .text { position: absolute; z-index: 1; top: 50%; left: 50%; transform: translate(-50%, -50%); /* 将文字居中显示 */ color: #fff; font-size: 24px; font-weight: bold; } ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值