2019.05.22更新:修复卡片分类不准确的问题,感谢文字咖发现这个问题。
WordPress更新到4.4 版本后增加了 Post Embed 功能,可以把要引用的文章以嵌入式卡片展现出来,样式比较单一,并且只能直接输入网址调用,效果如下图:
本篇文章讲介绍利用短代码添加卡片式内链并且美化原始效果,使之看起来更舒适,先看下美化后的效果图:
教程开始:
- 需要将如下代码放入你主题的函数模板里(
functions.php
)/*-----------------------------------------------------------------------------------*/ /* 卡片式文章内链功能 /*-----------------------------------------------------------------------------------*/ // 获取特色图片地址 function jsk_the_thumbnail_src() { global $post; if ( get_post_meta($post->ID, 'thumbnail', true) ) { //如果有缩略图,则显示缩略图 $image = get_post_meta($post->ID, 'thumbnail', true); return $image; } else { if ( has_post_thumbnail() ) { //如果有缩略图,则显示缩略图 $img_src = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), "Full"); return $img_src[0]; } else { $content = $post->post_content; preg_match_all('/<img.*?(?: |\\t|\\r|\\n)?src=[\'"]?(.+?)[\'"]?(?:(?: |\\t|\\r|\\n)+.*?)?>/sim', $content, $strResult, PREG_PATTERN_ORDER); $n = count($strResult[1]); if($n > 0){ return $strResult[1][0]; //没有缩略图就取文章中第一张图片作为缩略图 }else { return get_template_directory_uri().'/img/thumbnail.png'; //文章中没有图片就设置默认图片 } } } } // 文章内链短代码 if(!function_exists('embed_posts')){ function embed_posts( $atts, $content = null ){ extract( shortcode_atts( array( 'ids' => '' ),$atts ) ); global $post; $content = ''; $postids = explode(',', $ids); $inset_posts = get_posts(array('post__in'=>$postids)); foreach ($inset_posts as $key => $post) { setup_postdata( $post ); $category = get_the_category($post); $content .= '<div class="neilian">'; $content .= '<div class="fl">'; $content .= '<a target="_blank" href="'. get_permalink() .'" class="fl"><i class="fa fa-link fa-fw"></i>' . get_the_title() . '</a>'; $content .= '<p class="note"><span class="card-abstract">'. wp_trim_words( get_the_excerpt(), 100, '...' ) .'</span></p>'; $content .= '<p class="card-controls"><span class="group-data"> <i>修改时间:</i>'. get_the_modified_date('Y/n/j') .'</span><span class="group-data"> <i>分类:</i><a target="_blank" href="'.get_category_link($category[0]->term_id ).'">'. $category[0]->cat_name .'</a></span><span class="group-data"> <i>人气:</i>'. _get_post_views(false, '', '', false) .'</span><span class="group-data"> <i>评论:</i>'. get_comments_number() .'</span></p>'; $content .= '</div>'; $content .= '<div class="fr">'; $content .= '<a target="_blank" href="'. get_permalink() .'"><img src='. jsk_the_thumbnail_src() .' class="neilian-thumb"></a>'; $content .= '</div>'; $content .= '</div>'; } wp_reset_postdata(); return $content; } } add_shortcode('jsk_embed_post', 'embed_posts');
注意:上述代码中有调用自定义的函数(如阅读量等),如果使用DUX主题不需要修改,其它主题的话需要根据实际情况进行修改,由于大家的主题不统一。
- 添加以下 CSS 代码到
main.css
文件中即可。.fl{float:left} .fr{float:right} .neilian { margin-bottom:25px; padding:10px; width:100%; overflow: hidden; border:1px dashed #d4d4d4; background:#fff; box-shadow:0 1px 0 rgba(0,0,0,.1); cursor:pointer; -webkit-transition:box-shadow 218ms; -moz-transition:box-shadow 218ms; -o-transition:box-shadow 218ms; transition:box-shadow 218ms; } .neilian:hover { box-shadow:0 1px 8px 1px rgba(0,0,0,.1); } .neilian .fl { width:72%; } .neilian .fr { padding:10px 5px; width:24%; } .neilian .fl a { display:block; margin-right:15px; padding:8px 5px; width:100%; color:#35a56b!important; text-decoration:none; font-size:16px; border:none; } .neilian .fl .note { margin:0 0 5px; padding-left:10px; font-size:14px; } .neilian .fl .card-controls { padding-left:10px; font-size:12px; } .neilian .fl .card-controls .group-data { float: left; margin-right: 10px; color: #999; } .neilian .card-controls .group-data i { margin-right: 5px; font-style: normal!important; } .neilian .card-controls .group-data a { font-size:12px; display:inline; margin-right:auto; padding:inherit; } .neilian .neilian-thumb{ width:170px; height:120px; } @media only screen and (max-width:700px) { .neilian .fl {width:100%;} .neilian .fr {display: none;} }
- 使用的时候只需要在文章里添加短代码
【jsk_embed_post ids=123,245】
WordPress 文章 id 查看方法不赘述,多篇文章用,隔开,把上面和下面的【】换成[]。
如果你不是在文章内容中,而是在其他地方想调用,则可使用下面代码来调用。
do_shortcode('【jsk_embed_post ids=123,245】')
适当增加文章内链对 SEO 有积极的作用,也让文章更加的丰满,何乐而不为呢?
© 版权声明
这些信息可能会帮助到你: 下载帮助 | 免责说明 | 进站必看 | 广告投放
版权声明:本文采用知识共享 署名4.0国际许可协议 BY-NC-SA 4.0 进行授权文章名称:《WordPress给文章添加卡片式内链教程美化版》
文章链接:https://www.jsksky.com/beautifying-the-inner-chain-of-wordpress-articles.html
免责声明:根据《计算机软件保护条例》第十七条规定“为了学习和研究软件内含的设计思想和原理,通过安装、显示、传输或者存储软件等方式使用软件的,可以不经软件著作权人许可,不向其支付报酬。”您需知晓本站所有内容资源均来源于网络,仅供用户交流学习与研究使用,版权归属原版权方所有,版权争议与本站无关,用户本人下载后不能用作商业或非法用途,需在24个小时之内从您的电脑中彻底删除上述内容,否则后果均由用户承担责任;如果您访问和下载此文件,表示您同意只将此文件用于参考、学习而非其他用途,否则一切后果请您自行承担,如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。
本站为个人博客非盈利性站点,所有软件信息均来自网络,所有资源仅供学习参考研究目的,并不贩卖软件,不存在任何商业目的及用途,部分软件收费或网站会员捐赠是您喜欢本站而产生的赞助支持行为,仅为维持服务器的开支与维护,全凭自愿无任何强求。
THE END
请登录后发表评论
注册
社交帐号登录