关注主机资讯
一直在努力转载

DUX主题添加卡片式内链

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

DUX 主题折腾记录 折腾不止

DUX 这款主题是博主最喜欢的一款 WordPress 主题,同样也是博主特别喜欢折腾的一款主题,之前博主免费分享了第一个 DUX 5.0 优化版,当时也是无聊,做了就免费分享给网友,当然代码大部分都…

时间:2019/5/21 分类:谈天说地 人气:295 评论:9

DUX主题添加卡片式内链

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

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 对应的文章的分类是同一个!

 

特别注意:本站资源、文章多为网络收集,如涉及版权问题请及时与站长联系,我们会在第一时间内与您协商解决。请自行识别其商家的好坏,本站仅提供消息,不保证其正确性,和时效性!!!

历史上的今天
五月
21
    哇哦~~~,历史上的今天没发表过文章哦
赞(0)
未经允许不得转载:楚媛Blog » DUX主题添加卡片式内链

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  • Q Q(选填)