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

ssr

撰写于 2022年 02月 26 日

今天老蒋周末帮助一个朋友改造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;}
}

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