WordPress教程

代码添加 WordPress 的 Post Embed 文章嵌入功能

阿里云

我们知道 WordPress 的 Post Embed 文章嵌入功能,是 4.4 版本新增的,可以在任意 WordPress 站点用嵌入的方式插入 WordPress 博客内的文章。当然了,前提是嵌入和被嵌入的 WordPress 博客都支持 Post Embed 功能并且没有禁用掉。

极简方法:

简单来说就是使用 get_posts 调用文章信息(包括浏览量,缩略图之类的,甚至文章摘要),然后通过短代码的方式添加文章 ID 来直接调用需要嵌入的文章插入到当前文章中。下面的代码加入到 functions.php 中:

也想出现在这里?联系我们
创客主机
  1. function fa_insert_posts( $atts, $content = null ){
  2.     extract( shortcode_atts( array(
  3.  
  4.         'ids' => ''
  5.  
  6.     ),
  7.         $atts ) );
  8.     global $post;
  9.     $content = '';
  10.     $postids =  explode(',', $ids);
  11.     $inset_posts = get_posts(array('post__in'=>$postids));
  12.     foreach ($inset_posts as $key => $post) {
  13.         setup_postdata( $post );
  14.         $content .=  '<div class="card-today-history"><div class="card-thContents"><div class="card-thLine"></div><div class="card-thHeroTitle"><a target="_blank" class="label--thTitle" href="' . get_permalink() . '" rel="noopener noreferrer">' . get_the_title() . '</a><div class="v-floatRight card-thMeta">' . get_comments_number(). '<i class="iconfont icon-comment"></i></div></div></div></div>';
  15.     }
  16.     wp_reset_postdata();
  17.     return $content;
  18. }
  19. add_shortcode('fa_insert_post', 'fa_insert_posts');

使用方法:直接在文章中(html 代码模式下)使用短代码 [fa_insert_post ids=123,245] 即可。如果不是在文章内容中,而是在其他地方比如 PHP 代码中调用,则可使用 do_shortcode('[fa_insert_post ids=123,245]') 来调用。

扩展样式:

下面的代码加入到 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() . '" rel="noopener noreferrer">'. 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-reads">阅读 
  21. 							'.the_views(false, '', '', false).'
  22. 						</div>
  23. 						<div class="wp-embed-post-comments">
  24. 							<a target="_blank" class="wp-embed-post-title" href="' . get_permalink() . '#comments" rel="noopener noreferrer"> 评论 ' . get_comments_number(). '</a>
  25. 						</div>
  26. 					</div>
  27. 				</div>
  28. 			</div>';
  29.     }
  30.     wp_reset_postdata();
  31.     return $content;
  32. }
  33. 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: right;
  69.     vertical-align: middle;
  70.     white-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. }

使用方法

直接在文章中(html 代码模式下)使用短代码 [xx_insert_post ids=111,222] 即可。如果不是在文章内容中,而是在其他地方比如 PHP 代码中调用,则可使用 do_shortcode('[xx_insert_post ids=111,222]') 来调用。

代码添加 WordPress 的 Post Embed 文章嵌入功能

已有 530 人购买
查看演示升级 VIP立刻购买

收藏
(0)

发表回复

热销模板

Ashade - 作品展示摄影相册WordPress汉化主题
LensNews

本站承接 WordPress / PbootCMS / DedeCMS 等
系统建站、仿站、开发、定制等业务!