代码添加 WordPress 的 Post Embed 文章嵌入功能
我们知道 wordpress 的 Post Embed 文章嵌入功能,是 4.4 版本新增的,可以在任意 WordPress 站点用嵌入的方式插入 WordPress 博客内的文章。当然了,前提是嵌入和被嵌入的 WordPress 博客都支持 Post Embed 功能并且没有禁用掉。
极简方法:
简单来说就是使用 get_posts 调用文章信息(包括浏览量,缩略图之类的,甚至文章摘要),然后通过短代码的方式添加文章 ID 来直接调用需要嵌入的文章插入到当前文章中。下面的代码加入到 functions.php 中:
function fa_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="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>'; } wp_reset_postdata(); return $content; } 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 中:
function xx_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="wp-embed-post"> <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> <div class="wp-embed-post-excerpt">'.wp_trim_words( get_the_content(), 100, '...' ).'</div> <div class="wp-embed-post-footer"> <div class="wp-embed-post-site-title"> <a href="'.get_author_posts_url( get_the_author_meta( 'ID' ) ) .'" title="查看作者 '.get_the_author().' 发布的所有文章" rel="author">' .get_avatar( get_the_author_meta('email'), '16' ).'<span>'.get_the_author().'</span> </a> </div> <div class="wp-embed-post-meta"> <div class="wp-embed-post-reads">阅读 '.the_views(false, '', '', false).' </div> <div class="wp-embed-post-comments"> <a target="_blank" class="wp-embed-post-title" href="' . get_permalink() . '#comments" rel="noopener noreferrer"> 评论 ' . get_comments_number(). '</a> </div> </div> </div> </div>'; } wp_reset_postdata(); return $content; } add_shortcode('xx_insert_post', 'xx_insert_posts');
CSS 参考
.wp-embed-post { background: #fff; border: 1px solid #e5e5e5; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05); color: #82878c; font-size: 14px; overflow: auto; padding: 16px; margin-bottom: 16px; } .wp-embed-post a { color: #666; text-decoration: none; } .wp-embed-post-featured-image { margin-bottom: 20px; } .wp-embed-post-featured-image img { border: medium none; height: auto; width: 100%; } .wp-embed-post-featured-image.square { float: left; margin-right: 20px; max-width: 160px; } .wp-embed-post p { margin: 0; } p.wp-embed-post-heading { font-size: 20px; margin: 0 0 4px!important; } .wp-embed-post-heading a { color: #32373c; } .wp-embed-post .wp-embed-post-more { color: #b4b9be; } .wp-embed-post-footer { display: table; margin-top: 16px; width: 100%; } .wp-embed-post-site-title .avatar { border: 0 none; height: 25px; left: 0; position: absolute; -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); width: 25px; } .wp-embed-post-site-title a { display: inline-block; padding-left: 32px; position: relative; } .wp-embed-post-meta, .wp-embed-post-site-title { display: table-cell; } .wp-embed-post-meta { text-align: right; vertical-align: middle; white-space: nowrap; } .wp-embed-post-comments, .wp-embed-post-reads { color: #666; display: inline; } .wp-embed-post-comments a, .wp-embed-post-share-tab-button { display: inline-block; } .wp-embed-post-comments + .wp-embed-post-share { margin-left: 10px; }
使用方法
直接在文章中(html 代码模式下)使用短代码 [xx_insert_post ids=111,222] 即可。如果不是在文章内容中,而是在其他地方比如 PHP 代码中调用,则可使用 do_shortcode(‘[xx_insert_post ids=111,222]’) 来调用。
提示:
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!邮箱:(332547532@qq.com)
2. 分享目的仅供大家学习和交流,请不要用于商业用途!
3. 如果你也有好源码或者教程,可以到审核区发布,分享有金币奖励和额外收入!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务 请大家谅解!
5. 如有链接无法下载、失效或广告,请点击右下方联系站长,可领回失去的金币,并额外有奖!
6. 如遇到加密压缩包,默认解压密码请在"下载框架提示方寻找",如遇到无法解压的请联系管理员!
黑域吧资源网 » 代码添加 WordPress 的 Post Embed 文章嵌入功能
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!邮箱:(332547532@qq.com)
2. 分享目的仅供大家学习和交流,请不要用于商业用途!
3. 如果你也有好源码或者教程,可以到审核区发布,分享有金币奖励和额外收入!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务 请大家谅解!
5. 如有链接无法下载、失效或广告,请点击右下方联系站长,可领回失去的金币,并额外有奖!
6. 如遇到加密压缩包,默认解压密码请在"下载框架提示方寻找",如遇到无法解压的请联系管理员!
黑域吧资源网 » 代码添加 WordPress 的 Post Embed 文章嵌入功能