欢迎进入广州凡科互联网科技有限公司网站
全国服务热线
4000-399-000
WordPress 短标识完成文章内容內容中显示信息特定
时间: 2021-02-19 08:50 浏览次数:
在网页页面內容网页页面中,大家经常以便便捷內容的结合,设计方案出有关文章内容栏目!可是,有点缺陷的是,常常不可以很便捷的特定某篇文章内容內容!

在网页页面內容网页页面中,大家经常以便便捷內容的结合,设计方案出有关文章内容栏目!可是,有点缺陷的是,常常不可以很便捷的特定某篇文章内容內容!

恰好博主,以前用过清醒的Grace中心思想!里边恰好用这类作用,因而,很便捷,我就把这作用依葫芦画瓢扣下来了!后来才了解,用到的原先是WordPress 的 Post Embed 作用,实际能够参照文章内容结尾的参照材料!

完成实际效果

加上涵数

涵数来源于,清醒主题!因此我保存了涵数中有关的的suxing标志!

function suxing_insert_posts( $atts, $content = null ){ extract( shortcode_atts( array('ids' => ''), $atts ) ); global $post; $content = ''; $postids = explode(',', $ids); $inset_posts = get_posts(array('post__in'=>$postids)); foreach ($inset_posts as $key => $post) { setup_postdata( $post ); $content .= '<div class="warp-post-embed"><a href="' . get_permalink() . '" target="_blank" class="post-embed-bg" style="background-image:url(' . catch_that_image() . ')"></a><a href="' . get_permalink() . '" target="_blank"><span class="embed-title">'.get_the_title().'</span><em class="embed-content">'. wp_trim_words(get_the_excerpt(), 100 ) .'</em><div class="embed-mata"><i class="be be-eye"></i>'.the_views(false, '', '', false).' </div></a></div>'; } wp_reset_postdata(); return $content;}add_shortcode('suxing_insert_post', 'suxing_insert_posts');在上段涵数中,大家用到了. catch_that_image(),这段涵数大家必须用到下面的涵数!关键是用来获得对应文章内容的照片!

function catch_that_image() {global $post, $posts;$first_img = '';ob_start();ob_end_clean();$output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches); //获得文章内容中第1张照片的相对路径并輸出$first_img = $matches [1] [0]; //假如文章内容无照片,获得自定照片 return $first_img;}编码来源于参照:http://blog.csdn.net/gigijingjing/article/details/54091981

上面这段编码关键是用来获得文章内容中的照片的,由于博主能确保每篇文章内容都有照片,因此去掉了获得自定照片,这里很少加论述!立即在上述涵数中加上下列编码便可!

if(empty($first_img)){ //Defines a default image$first_img = "/img/default_thumb.png"; //请自主设定1张default.jpg照片}详细编码(此编码是用来获得最上面涵数中的照片的,下面编码要和涵数1起放到主题的涵数文档中!)

function catch_that_image() {global $post, $posts;$first_img = '';ob_start();ob_end_clean();$output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches); //获得文章内容中第1张照片的相对路径并輸出$first_img = $matches [1] [0]; //假如文章内容无照片,获得自定照片 if(empty($first_img)){ //Defines a default image$first_img = "/img/default_thumb.png"; //请自主设定1张default.jpg照片} return $first_img;}CSS编码

@media screen and (max-width:767px){.warp-post-embed{padding:14px}.warp-post-embed .post-embed-bg{width:130px;height:100px;margin-left:6px}.warp-post-embed .embed-title{font-size:16px;font-weight:300}.warp-post-embed .post-embed-bg{display:none!important}}.warp-post-embed{position:relative;overflow:hidden;max-height:280px;padding:20px;box-sizing:border-box;color:rgba(0,0,0,.6);margin:20px 0;border:1px solid #F1F1F1;-webkit-box-shadow:0 5px 10px 0 rgba(146,146,146,.1);-moz-box-shadow:0 5px 10px 0 rgba(146,146,146,.1);box-shadow:0 2px 5px 0 rgba(146,146,146,.1)}.warp-post-embed .embed-content{display:block;font-size:13px;font-style:normal!important;color:#8E8E8E;line-height:1.5;margin-bottom:5px}.warp-post-embed .embed-mata{font-size:12px;color:rgba(0,0,0,.8)}.warp-post-embed .embed-title{color:rgba(0,0,0,.8);display:block;margin-bottom:8px;font-size:18px;line-height:1.4}.warp-post-embed .post-embed-bg{float:right;width:180px;height:120px;background-size:cover;background-repeat:no-repeat;background-position:50%;margin-left:12px}.warp-post-embed .embed-content:hover{color:#273746}.warp-post-embed a:hover{color:#273746}回应式较为不光滑,大伙儿能够自身折腾下!

启用编码

有关如何加上主题编写文章内容便捷栏,大伙儿自身依据自身的主题折腾,这里很少赘述!

参照阅读文章:

龙笑天地大发贱志常阳岁月实际效果实操

自定wordpress的登陆网页页面念头 阿里巴巴云办理备案好了,申请注册了自身姓名的网站域名,提前准备构建个简易的blog,便是随意写写,沒有实例教程,沒有免费下载,便是简简易

WordPress 技能:屏蔽头顶部载入 s.w.orgWordPress 4.7 版本号载入了1个 DNS-Prefetch(DNS 预分析)作用,根据 DNS 预解

下一篇:没有了


Copyright © 广州凡科互联网科技有限公司 版权所有 粤ICP备10235580号
全国服务电话:4000-399-000   传真:021-45545458
公司地址:广州市海珠区工业大道北67号凤凰创意园