东风不来
三月的柳絮不飞

DUX主题添加卡片式内链 纯代码实现

最近在网上看到一个很有意思的功能,卡片式内链,样式如下:

建站之路

其实博主很早就开始有自己的服务器(VPS:虚拟专用服务器),当时买纯属是为了科*学*上*网,当时也关注了很多 VPS 的博客,像主机测评、赵蓉部落等,也买了很多自己也不知道为什么要剁手的 VPS ,其...

时间:2018-04-13 分类:谈天说地 阅读:2710 评论:3

建站之路-文字咖

注意:源代码来源于 灵阳星空 ,感谢分享如此有意思的代码!

1. 改进地方

博主也是在此基础上进行一些小小的修改:
1. 修复卡片分类问题:
博主检查了一下代码,发现获取的分类是属于文章的分类,而不是给出内链 id 文章的分类,这里博主小小的改动了一下,完成任务!
2. 修改卡片默认图片
卡片式默认的图片是文章的特色图,但当文章没有图片时,源代码是获取默认的一张图片,这里博主将其设置为获取随机一张自己设置的图片,直接图片位置下文会详细讲!

2. 添加 functions.php 代码

将下面代码复制到 DUX 主题的 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');

3. 添加快捷按钮

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

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

注意:将代码中的 “” 改成 “[” !

4. 添加 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;}
}

样式博主也是直接用的 “灵阳” 大佬的!

5. 添加随机图片

如下面代码所示:

$random = mt_rand(1, 9);
return get_stylesheet_directory_uri().'/img/random/'.$random.'.jpg';

博主这里给图片起名为 1.jpg、2.jpg ~~~ 9.jpg,把这些图片放在 DUX 主题文件夹的 img/random ,没有的话就自己创建一个这样的文件夹名即可,图片的话在网上找就行了,自己喜欢就行!

6. 使用方法

直接点击文本编辑框中的 “卡片内链按钮” ,在 ids 后改成自己博客文章的 id 即可!

【jsk_embed_post ids=123] 

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

【jsk_embed_post ids=123,234] 

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

赞(3) 打赏
版权声明:本文采用知识共享 署名4.0国际许可协议 [BY-NC-SA] 进行授权
文章名称:《DUX主题添加卡片式内链》
文章链接:https://www.wenzika.com/1857.html
本站资源仅供个人学习交流,请于下载后24小时内删除,不允许用于商业用途,否则法律问题自行承担。

评论 6

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #0

    能不能控制显示的字数,我这个把文章所有的字都显示出来了

    佛系软件 5年前 (2020-02-05) 来自天朝的朋友 谷歌浏览器 Mac OS X 10_15_3 回复
  2. #0

    请问博主,这个css是放在main.css中就行了吗?我加了之后好像没什么用呢
    http://filessl.machunjie.com/lzxmtblog/file/20190618092905.png/machunjie.png

    马春杰 5年前 (2019-06-18) 来自天朝的朋友 谷歌浏览器 Windows 10 回复
  3. #0

    这个功能原先自己博客用了,也发现获取的分类是属于文章的分类,而不是给出内链 id 文章的分类,但折腾半天没搞定就把分类去了,现在加上看看效果

    天策无双 6年前 (2019-05-24) 来自天朝的朋友 谷歌浏览器 Windows 10 回复
    • Wonder Zhou

      @天策无双 嗯嗯,这个应该算是修复了吧!

      Wonder Zhou 6年前 (2019-05-24) 来自天朝的朋友 谷歌浏览器 Windows 10 回复
      • @Wonder Zhou 因为不是用的这位大佬的代码,样式不一样,硬是看了半天才发现是加了id的参数,难受

        天策无双 6年前 (2019-05-24) 来自天朝的朋友 谷歌浏览器 Windows 10 回复
  4. #0

    下次代码如果有问题了,可以给我留个言,也好叫我快速修复下,我一直都没发现这个问题,谢谢了

    网络臭虫 6年前 (2019-05-22) 来自天朝的朋友 谷歌浏览器 Windows 7 回复

觉得文章有用就打赏一下文章作者

非常感谢你的打赏,我们将继续给力更多优质内容,让我们一起创建更加美好的网络世界!

支付宝扫一扫打赏

微信扫一扫打赏