最近在网上看到一个很有意思的功能,卡片式内链,样式如下:
[jsk_embed_post ids=762]
注意:源代码来源于 灵阳星空 ,感谢分享如此有意思的代码!
博主也是在此基础上进行一些小小的修改:
1. 修复卡片分类问题:
博主检查了一下代码,发现获取的分类是属于文章的分类,而不是给出内链 id 文章的分类,这里博主小小的改动了一下,完成任务!
2. 修改卡片默认图片
卡片式默认的图片是文章的特色图,但当文章没有图片时,源代码是获取默认的一张图片,这里博主将其设置为获取随机一张自己设置的图片,直接图片位置下文会详细讲!
将下面代码复制到 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');
将下面代码复制到 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' );
注意:将代码中的 “【
” 改成 “[
” !
.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;} }
样式博主也是直接用的 “灵阳” 大佬的!
如下面代码所示:
$random = mt_rand(1, 9); return get_stylesheet_directory_uri().'/img/random/'.$random.'.jpg';
博主这里给图片起名为 1.jpg、2.jpg ~~~ 9.jpg
,把这些图片放在 DUX 主题文件夹的 img/random
,没有的话就自己创建一个这样的文件夹名即可,图片的话在网上找就行了,自己喜欢就行!
直接点击文本编辑框中的 “卡片内链按钮” ,在 ids
后改成自己博客文章的 id 即可!
【jsk_embed_post ids=123]
注意:ids 必须是自己博客的内链!可以在一个 ids
后面写多个 id ,中间用英文逗号隔开。如
【jsk_embed_post ids=123,234]
但必须保证,这两个 id 对应的文章的分类是同一个!
交易流程
发货方式
1、自动:在上方保障服务中标有自动发货的商品,拍下后,将会自动收到来自卖家的商品获取(下载)链接;
2、手动:未标有自动发货的的商品,拍下后,卖家会收到邮件、短信提醒,也可通过QQ或订单中的电话联系对方。
交易周期
1、源码默认交易周期:自动发货商品为1天,手动发货商品为3天,买家有1次额外延长3天交易周期的权利;
2、若上述交易周期双方依然无法完成交易,任意一方可发起追加周期(1~60天)的请求,对方同意即可延长。
退款说明
1、描述:源码描述(含标题)与实际源码不一致的(例:描述PHP实际为ASP、描述的功能实际缺少、版本不符等);
2、演示:有演示站时,与实际源码小于95%一致的(但描述中有"不保证完全一样、有变化的可能性"类似显著声明的除外);
3、发货:手动发货源码,在卖家未发货前,已申请退款的;
4、安装:免费提供安装服务的源码但卖家不履行的;
5、收费:额外收取其他费用的(但描述中有显著声明或双方交易前有商定的除外);
6、其他:如质量方面的硬性常规问题等。
注:经核实符合上述任一,均支持退款,但卖家予以积极解决问题则除外。
注意事项
1、站保站会对双方交易的过程及交易商品的快照进行永久存档,以确保交易的真实、有效、安全!
2、站保站无法对如“永久包更新”、“永久技术支持”等类似交易之后的商家承诺做担保,请买家自行鉴别;
3、在源码同时有网站演示与图片演示,且站演与图演不一致时,默认按图演作为纠纷评判依据(特别声明或有商定除外);
4、在没有"无任何正当退款依据"的前提下,商品写有"一旦售出,概不支持退款"等类似的声明,视为无效声明;
5、在未拍下前,双方在QQ上所商定的交易内容,亦可成为纠纷评判依据(商定与描述冲突时,商定为准);
6、因聊天记录可作为纠纷评判依据,故双方联系时,只与对方在站保站上所留的QQ、手机号沟通,以防对方不承认自我承诺。
7、虽然交易产生纠纷的几率很小,但一定要保留如聊天记录、手机短信等这样的重要信息,以防产生纠纷时便于站保站介入快速处理。
站保站声明
1、站保站作为第三方中介平台,依据交易合同(商品描述、交易前商定的内容)来保障交易的安全及买卖双方的权益;
2、非平台线上交易的项目,出现任何后果均与站保站无关;无论卖家以何理由要求线下交易的,请联系管理举报。
信息加载中,请等待
微信客服(速回)
微信客服(慢回)