[mcj]DUX5.3主题纯代码添加卡片内链详细教程-马春杰杰

文章目录

[隐藏]

本来dux主题自带了一个内链功能，后来进行全站ssl之后就失效了。。一直找不到原因，正好看到另一个网站也有这个功能，赶紧试了试，真香~~

效果类似下面：

[mcj]DUX5.4破解版主题版本更新：兼容PHP 7.3和WP新版编辑器，图标库更新等各种优化 DUX-Plus主题下载

文章目录[隐藏] DUX主题增强版 DUX-Plus 功能介绍功能展示 H3标签H4标签更新日志DUX主题5.4版本更新内容： DUX主题增强版是基于WordPress大前端DUX主题原版进行二次开发...

时间:2019/6/13 分类:源码下载 人气:793 评论:0

添加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');

// 获取特色图片地址

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>';

}

wp_reset_postdata();

return $content;

}

add_shortcode('jsk_embed_post', 'embed_posts');

这里获取图片的时候是调取的第一张图片，如果没有图片会随机添加，只需要在DUX主题目录下新建img/random文件夹，然后放入1.jpg~9.jpg即可。

添加快捷按钮

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

//添加卡片内链按钮

function appthemes_add_embed_posts() {

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' );

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

.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;}

}

使用方法

可以直接点击按钮，也可以是输入代码：

[jsk_embed_post ids=123,345,456]

1	[jsk_embed_post ids=123,345,456]

可以输入多个，但是要保证这几个ID的分类都是一个才行！

本文参考灵阳星空。

本文最后更新于2019年6月18日，已超过 1 年没有更新，如果文章内容或图片资源失效，请留言反馈，我们会及时处理，谢谢！

赞一个 (0)收藏 (0)

[mcj]DUX5.3主题纯代码添加卡片内链详细教程

添加functions.php代码

添加快捷按钮

添加 css 样式

使用方法

马春杰杰

相关推荐

留个评论吧~ 抢沙发评论前登陆可免验证码！

文章推荐

最新修改文章

最新评论文章

最新评论

精彩直达

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

支付宝扫一扫打赏

微信扫一扫打赏

TG群

微信群

注册

订单信息（价格单位：马杜币）

收货信息商店（虚拟商品除邮箱外可不填）

添加functions.php代码

添加快捷按钮

添加 css 样式

使用方法

马春杰杰

相关推荐

留个评论吧~ 抢沙发 评论前登陆可免验证码！

文章推荐

最新修改文章

最新评论文章

最新评论

精彩直达

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

支付宝扫一扫打赏

微信扫一扫打赏

TG群

微信群

登录

注册

订单信息（价格单位：马杜币）

收货信息商店（虚拟商品除邮箱外可不填）

留个评论吧~ 抢沙发评论前登陆可免验证码！