记录DUX主题添加卡片式调用其他文章和创建快捷短代码

今天老蒋周末帮助一个朋友改造DUX主题需要添加比默认WP程序自带的卡片式调用其他文章。于是参考网上已有的办法去创建样式 后利用短代码调用，这里简单的记录如下。

第一、添加Functions.php

这里，在他的DUX主题添加代码，这个我们样式可以调整。

// 获取特色图片地址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');

第二、添加快捷短代码按钮

//添加卡片内链按钮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' );

加上这个后，我们就无需手工添加短代码，只要我们修改对应的文章ID即可。

第三、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;
}
}
    

样式我们可以根据需要再微调。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！