WordPress文章添加卡片式内链教程

WordPress文章中引用其他文章链接,是为了让用户方便浏览,也增加文章关联度;更重要的是适当的引用文章,也可以让内容更加丰满,对用户体验上也是有提高;那么NAZ.CN教大家制作简约美观的卡片内链样式:

一、卡片内链核心代码:

将以下代码复制到主题的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 {
			  $random = mt_rand(1, 9);
			  return get_stylesheet_directory_uri().'/img/random/'.$random.'.jpg';
            //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));
        $category = get_the_category($ids);
        foreach ($inset_posts as $key => $post) {
          setup_postdata( $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() . '<span style="color:#FF5E52;">' . get_the_subtitle() . '<span></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');

二、卡片内链按钮代码:

后台编辑器按钮添加方法:将下面代码复制到functions.php中,编辑器中的文本编辑框会多出一个卡片式内链按钮。

//添加卡片内链按钮
function appthemes_add_embed_posts() {
?>
    <script type="text/javascript">
        if ( typeof QTags != 'undefined' ) {
            QTags.addButton( 'jsk_embed_post', '卡片内链按钮', '[jsk_embed_post ids=1]','' );
        } 
    </script>
<?php 
}
add_action('admin_print_footer_scripts', 'appthemes_add_embed_posts' );

也可以不添加这段代码,也可以直接使用代码添加卡片内链,代码如下:

在后台编辑器选择“卡片内链按钮”更改文章ID即可直接使用。
直接点击文本编辑框中的 “卡片内链按钮” ,在 ids 后改成自己博客文章的 id 即可!

[jsk_embed_post ids=1]

ids 必须是自己博客的内链!可以在一个 ids 后面写多个 id ,中间用英文逗号隔开。

[jsk_embed_post ids=1,2]

必须保证这两个 id 对应的文章的分类是同一个。

三、卡片内链CSS样式代码:

将下面代码直接复制添加到主题的style.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;}
}

四、文章没有缩略图,显示默认随机图片:

实现方法:将下面代码直接复制添加到主题functions.php中。

//略缩图显示/
$random = mt_rand(1, 9);
return get_stylesheet_directory_uri().'/img/random/'.$random.'.jpg';

注意事项:

综合上述教程,大家可以自己设计任意的卡片式内链样式。

相关文章

WordPress添加分类筛选功能教程

阅读 7

第一步:将以下代码复制到你的主题functions.php文件中: //获取当前分类ID function get_category_root_id($cat) { $this_category = get_category($cat...博文来自:技术博客

WordPress添加自定义QQ分享、微博分享功能教程

阅读 29

使用到的接口: 1.分享到QQ空间接口:https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=你的网址&sharesource=qzone&title=你的...博文来自:技术博客

WordPress邀请码功能开发教程

阅读 30

开发网站过程中需要对用户注册增加一个邀请码功能,以下是邀请码功能开发详细教程 第一步:需要新建一个数据表来保存邀请码 code:邀请码、max:邀请码使用次数...博文来自:技术博客

WordPress登录后才能查看网站内容,未登录跳转登录页面教程

阅读 34

实现代码很简单,找全站执行的钩子,这里选了template_redirect钩子,这个动作钩子在加载模板时执行,当然其它很多都可以用。 <?php //template_redire...博文来自:技术博客

网信办要求网站4月3日起设置黑白主页教程,代码兼容ie、firefox、chrome、opera、safari

阅读 1,857

根据国务院文件,4月3日起为为全国哀悼日期间,全国和各驻外机构下半旗志哀,停止公共娱乐活动,外交部和我国驻外使领馆设立吊唁簿。NAZ.CN将整站换成素装。...博文来自:技术博客

我约微博上传文件存放绝对路径设置

阅读 21

后台–系统设置–网站信息–上传文件存放绝对路径 例如: 末尾不带 / 或 \,目前网站根目录绝对路径:D:\phpstudy_pro\WWW\www.woyue.cn/ 我们填写的时候...博文来自:技术博客

源码下载

NAZ.CN官方主题旗舰版V1.0.0,正版完全开源,带整站源码,带数据

阅读 354

NAZ.CN官方主题旗舰版V1.0.0已经上线,现在官网已经升级至旗舰版 购买后我们有专门的售后一对一服务,小白也能轻松驾驭! 为什么要卖这个主题? 疫情期间,待...博文来自:WordPress

微商城包含小程序商城,公众号商城,H5商城,基于Thinkphp开发的商城系统

阅读 318

微信公众号商城和小程序商城数据同步,带积分、优惠券、秒杀、砍价、分销等功能,更是一套方便二次开发的框架 2020.03.03独家更新: 1.接入支付宝支付接口(...博文来自:Thinkphp

NAZ.CN官方主题运营版V1.0.0限量发售-正版完全开源,带整站源码,不带数据,无需授权,支持模板扩展,可二次开发!

阅读 651

NAZ.CN官方主题运营版V1.0.0限量发售啦,一套真正运营起来就能赚钱的系统,不需要授权!完全开源!我们是真正的为站长和用户着想,买回去搭建就能正常使用,也...博文来自:WordPress

我约任务悬赏系统完全开源版不断更新,抖音/快手关注点赞任务平台源码

阅读 298

这款源码会不断更新,适合做抖音/快手关注点赞任务平台,也可以二次开发适合各行各业,具体大家可以看演示站 测试会员账号:test 密码:test 更新记录 2020-...博文来自:Thinkphp

赶快加入我们吧~注册一个账号

NAZ.CN 从零开始学建站,学习技能、解决问题!

每个月,我们帮助开发者解决各种各样的技术问题。并助力他们在技术能力上获得提升。
没有账号? 忘记密码?

社交账号快速登录