代码添加 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]’) 来调用。

原创文章,作者:DavidWu,如若转载,请注明出处:https://www.davidwu.net/archives/84473

WordPress安全防护插件
服务项目 服务内容 收费标准(元)
主题/插件汉化 汉化团队WordPress主题/插件,翻译率95% (以标的主题/插件的句子数量为准)
服务器环境配置 基于您现有服务器,搭建配置网站运行环境,结合我们多年来实战经验,可完美支持WordPress等PHP程序运行,并配置伪静态规则、优化目录权限等问题。服务器我们强烈推荐使用Linux系统。 100元/次
网站托管 若贵站目前尚无技术人员,无法完成服务器环境配置,可选择我们的网站托管服务,直接交付正常运行的WordPress站点,并且无需担心服务器的后续维护工作,一切都由我们来帮您完成。 标配套餐:1000元/年/站点 高配套餐:联系客服获取
网站加速优化 从服务器后端配置优化到WordPress数据库缓存、前端页面缓存、JS和CSS压缩合并,全方位优化网站加载速度,实现秒开。(此服务仅针对(云)服务器/VPS) 500元/次(仅站内优化200元/次)
主题配置 本站所有主题均支持,可快速实现,若有任何问题可以咨询客服解决,若您希望我们提供配置服务,可选购此服务。 英文主题安装 60元/次 汉化主题安装 30元/次
HTTPS配置 HTTPS已经不断普及,并且有着更高的安全性以及SEO上的优待。该服务收取的为服务费,SSL证书产生的费用请自行承担。 100元/次
网站搬家 迁移网站所有文件和数据库信息、网站相关配置的调整、以及迁移中的疑难问题故障排除。 标准收费:500元/次 若网站数据量大,需协商
网站运维 提供整站的运维服务,保证网站正常运行。包含:网站故障定位及排除、网站数据备份和恢复、网站攻击及木马等问题的处理等 标准收费:2000元/年 IP 5000以上需协商

发表评论

电子邮件地址不会被公开。 必填项已用*标注