之前文字咖在 @灵阳星空 大佬的基础上,写过一篇卡片内链的文章,详情点击:
DUX主题添加卡片式内链 纯代码实现
最近在网上看到一个很有意思的功能,卡片式内链,样式如下: 注意:源代码来源于 灵阳星空 ,感谢分享如此有意思的代码! 1. 改进地方 博主也是在此基础上进行一些小小的修改: 1. 修复卡片分类问题: ...
时间:2019-05-21 分类:建站笔记 阅读:3181 评论:6
后来看到 @飞鸟 大佬的样式,感觉还可以,具体样式如下:
废话不多说,直接上代码!
文字咖这里只贴出样式的内容代码,使用的话可以结合上一篇卡片内链的函数即可!
添加 content 代码
将下面的 content 内容替换成上面卡片链接里的 content 内容:
$content .= '<span class="embed-card"> <a target="_blank" href="'.get_category_link($category[0]->term_id ).'"><span class="embed-card-category">'. $category[0]->cat_name .'</span></a> <span class="embed-card-img"> <a target="_blank" href="' . get_permalink() . '">'. _get_post_thumbnail() .'</a> </span> <span class="embed-card-info"> <a target="_blank" href="' . get_permalink() . '"> <span class="card-name">'. get_the_title() . '</span> </a> <span class="card-abstract">'.wp_trim_words( get_the_excerpt(), 100, '...' ).'</span> <span class="card-controls"> <span class="group-data"> <i>时间:</i>'. get_the_time('Y/n/j') .'</span> <span class="group-data"> <i>阅读:</i>'. _get_post_views(false, '', '', false) .'</span> <span class="group-data"> <i>评论:</i>'. get_comments_number() .'</span> <a target="_blank" href="' . get_permalink() . '"><span class="card-btn-deep">阅读全文</span></a> </span> </span> </span>
添加 css 代码
将下面 css 代码放到 main.css 中:
.embed-card,span.embed-card { display: block; position: relative; width: 100%; padding: 9px; margin: 30px auto; border: 1px dashed #d4d4d4; overflow: hidden; } .embed-card:hover,span.embed-card:hover { box-shadow: 1px 1px 8px #eee; } .embed-card a,span.embed-card a { padding-right: 0; text-decoration: none; color: #313131; } .embed-card span,span.embed-card span { display: block; padding-right: 0; } .embed-card-category { display: inline-block; height: 20px; line-height: 20px; padding: 0 5px; font-size: 12px; } .embed-card-category { background-color: #6a99d8; background-color: rgba(43,110,200,0.8); color: #fff; } .embed-card-category:hover { background-color: #d5e2f4; background-color: rgba(43,110,200,1); } .embed-card .embed-card-category { position: absolute; top: 9px; left: 0; padding-right: 5px; } .embed-card-img { float: left; margin-right: 14px; } .embed-card-img img { width: 180px; height: 150px; } .embed-card-info { padding-right: 4px; overflow: hidden; } .embed-card-info .card-name { font-size: 16px; height: 44px; line-height: 22px; margin-bottom: 10px; margin-top: 7px; overflow: hidden; text-overflow: ellipsis; white-space: normal; font-weight: bold; } .embed-card-info .card-tags { height: 20px; overflow: hidden; } .embed-card-info .card-tags>span { display: inline-block; padding: 0 7px; margin-right: 8px; height: 16px; border: 1px solid #eee; line-height: 16px; color: #999; font-size: 12px; } .embed-card-info .card-tags span.tag-noborder { border: 0; } .embed-card-info .card-abstract { height: 36px; line-height: 18px; margin: 5px 0; font-size: 12px; color: #666; overflow: hidden; margin-bottom: 20px; } .embed-card-info .card-controls { overflow: hidden; line-height: 28px; } .embed-card-info .card-controls .group-data { float: left; margin-right: 10px; color: #999; font-size: 12px; } .embed-card-info .card-controls .group-data i { margin-right: 5px; font-style: normal!important; } .embed-card-info .card-btn-deep { float: right; width: 68px; height: 28px; margin-left: 10px; line-height: 28px; text-align: center; font-size: 12px; background-color: #ff5e5c; color: #fff; } .embed-card-info .card-btn-deep:hover { opacity: .9; } @media only screen and (max-width:700px) { span.embed-card { width: 95%; padding-left: 0; padding-right: 0; } .embed-card .embed-card-img { width: 24.27184%; margin-left: 9px; } .embed-card .embed-card-img img { width: 100%; height: auto; } .embed-card .embed-card-info { overflow: visible; padding: 0 9px; } .embed-card .embed-card-info .card-name { margin-top: 1%; margin-bottom: 1.5%; } }
教程结束!
阅读量出不来,有阅读两个字,而且也无法显示副标题。
还不错
怎么验证注册邮箱的格式啊,总是有临时邮箱
content 代码怎么添加啊
@佛系软件 结合上一篇文章的函数,直接替换 content 内容即可!
@Wonder Zhou 里面有好多content啊,不知道放在哪个地方啊大神