在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.     border: 1px solid #e5e5e5;  
  4.     box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);  
  5.     color: #82878c;  
  6.     font-size: 14px;  
  7.     overflow: auto;  
  8.     padding: 16px;  
  9.     margin-bottom: 16px;  
  10. }  
  11. .wp-embed-post a {  
  12.     color: #666;  
  13.     text-decoration: none;  
  14. }  
  15.   
  16. .wp-embed-post-featured-image {  
  17.     margin-bottom: 20px;  
  18. }  
  19. .wp-embed-post-featured-image img {  
  20.     border: medium none;  
  21.     height: auto;  
  22.     width: 100%;  
  23. }  
  24. .wp-embed-post-featured-image.square {  
  25.     float: left;  
  26.     margin-right: 20px;  
  27.     max-width: 160px;  
  28. }  
  29. .wp-embed-post p {  
  30.     margin: 0;  
  31. }  
  32. p.wp-embed-post-heading {  
  33.     font-size: 20px;  
  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-top: 16px;  
  45.     width: 100%;  
  46. }  
  47. .wp-embed-post-site-title .avatar {  
  48.     border: 0 none;  
  49.     height: 25px;  
  50.     left: 0;  
  51.     position: absolute;  
  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.     width: 25px;  
  58. }  
  59. .wp-embed-post-site-title a {  
  60.     display: inline-block;  
  61.     padding-left: 32px;  
  62.     position: relative;  
  63. }  
  64. .wp-embed-post-meta, .wp-embed-post-site-title {  
  65.     display: table-cell;  
  66. }  
  67. .wp-embed-post-meta {  
  68.     text-align: rightright;  
  69.     vertical-align: middle;  
  70.     whitewhite-space: nowrap;  
  71. }  
  72. .wp-embed-post-comments, .wp-embed-post-reads {  
  73.     color: #666;  
  74.     display: inline;  
  75. }  
  76. .wp-embed-post-comments a, .wp-embed-post-share-tab-button {  
  77.     display: inline-block;  
  78. }  
  79. .wp-embed-post-comments + .wp-embed-post-share {  
  80.     margin-left: 10px;  
  81. }  

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

直接输入：

  1. [xx_insert_post ids=XXX]   

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

除特别注明外，本站所有文章均为WordPress主题之家原创，转载请注明出处来自https://www.zhutihome.net/8205.html

收藏
  • 0 个人已赞
上一篇

下一篇

相关文章

参与评论