当前位置:
首页 > 网站建设 > 主题开发 > WordPress仿Post Embed功能

WordPress仿Post Embed功能

               

在WordPress4.4版本的时候你会发现,你在写一篇文章的时候,输入自己博客的一篇文章链接后,会自动转化成一个卡片的形式文章,虽然说是给读者可以更好的体验,但是...这Css,功能什么的都不是很给力,最重要的是还会拖累WordPress的加载速度。

那么本文就教大家创建一个类似Post Embed的功能。

首先在functions.php加入:

  1. function xx_insert_posts( $atts$content = null ){  
  2.     extract( shortcode_atts( array('ids' => ''), $atts ) );  
  3.     global $post;  
  4.     $content = '';  
  5.     $postids =  explode(',', $ids);  
  6.     $inset_posts = get_posts(array('post__in'=>$postids));  
  7.     foreach ($inset_posts as $key => $post) {  
  8.         setup_postdata( $post );  
  9.         $content .=  '  
  10.             <div class="wp-embed-post">  
  11.                 <p class="wp-embed-post-heading"><a target="_blank" class="wp-embed-post-title" href="' . get_permalink() . '">'. get_the_title() . '</a></p>  
  12.                 <div class="wp-embed-post-excerpt">'.wp_trim_words( get_the_content(), 100, '...' ).'</div>  
  13.                 <div class="wp-embed-post-footer">  
  14.                     <div class="wp-embed-post-site-title">  
  15.                         <a href="'.get_author_posts_url( get_the_author_meta( 'ID' ) ) .'" title="查看作者 '.get_the_author().' 发布的所有文章" rel="author">'  
  16.                             .get_avatar( get_the_author_meta('email'), '16' ).'<span>'.get_the_author().'</span>  
  17.                         </a>  
  18.                     </div>  
  19.                     <div class="wp-embed-post-meta">  
  20.                         <div class="wp-embed-post-comments">  
  21.                             <a target="_blank" class="wp-embed-post-title" href="' . get_permalink() . '#comments"> 评论 ' . get_comments_number(). '</a>  
  22.                         </div>  
  23.                     </div>  
  24.                 </div>  
  25.             </div>';  
  26.     }  
  27.     wp_reset_postdata();  
  28.     return $content;  
  29. }  
  30. add_shortcode('xx_insert_post', 'xx_insert_posts');  

加入之后,我们在加上一点Css:

  1. .wp-embed-post {  
  2.     background#fff;  
  3.     border1px solid #e5e5e5;  
  4.     box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);  
  5.     color#82878c;  
  6.     font-size14px;  
  7.     overflowauto;  
  8.     padding16px;  
  9.     margin-bottom16px;  
  10. }  
  11. .wp-embed-post a {  
  12.     color#666;  
  13.     text-decorationnone;  
  14. }  
  15.   
  16. .wp-embed-post-featured-image {  
  17.     margin-bottom20px;  
  18. }  
  19. .wp-embed-post-featured-image img {  
  20.     bordermedium none;  
  21.     heightauto;  
  22.     width: 100%;  
  23. }  
  24. .wp-embed-post-featured-image.square {  
  25.     floatleft;  
  26.     margin-right20px;  
  27.     max-width160px;  
  28. }  
  29. .wp-embed-post p {  
  30.     margin: 0;  
  31. }  
  32. p.wp-embed-post-heading {  
  33.     font-size20px;  
  34.     margin: 0 0 4px!important;  
  35. }  
  36. .wp-embed-post-heading a {  
  37.     color#32373c;  
  38. }  
  39. .wp-embed-post .wp-embed-post-more {  
  40.     color#b4b9be;  
  41. }  
  42. .wp-embed-post-footer {  
  43.     display: table;  
  44.     margin-top16px;  
  45.     width: 100%;  
  46. }  
  47. .wp-embed-post-site-title .avatar {  
  48.     border: 0 none;  
  49.     height25px;  
  50.     left: 0;  
  51.     positionabsolute;  
  52.     -ms-transform: translateY(-50%);  
  53.     -webkit-transform: translateY(-50%);  
  54.     -moz-transform: translateY(-50%);  
  55.     -o-transform: translateY(-50%);  
  56.     transform: translateY(-50%);  
  57.     width25px;  
  58. }  
  59. .wp-embed-post-site-title a {  
  60.     displayinline-block;  
  61.     padding-left32px;  
  62.     positionrelative;  
  63. }  
  64. .wp-embed-post-meta, .wp-embed-post-site-title {  
  65.     displaytable-cell;  
  66. }  
  67. .wp-embed-post-meta {  
  68.     text-alignrightright;  
  69.     vertical-alignmiddle;  
  70.     whitewhite-spacenowrap;  
  71. }  
  72. .wp-embed-post-comments, .wp-embed-post-reads {  
  73.     color#666;  
  74.     displayinline;  
  75. }  
  76. .wp-embed-post-comments a, .wp-embed-post-share-tab-button {  
  77.     displayinline-block;  
  78. }  
  79. .wp-embed-post-comments + .wp-embed-post-share {  
  80.     margin-left10px;  
  81. }  

那我们在使用的试试如何使用呢?

直接输入:

  1. [xx_insert_post ids=XXX]   

注意:XXX是你要引用文章的ID。

WordPress仿Post Embed功能:等您坐沙发呢!

发表评论

表情
还能输入210个字