仿 WordPress 的 Post Embed 功能

WordPress 的 Post Embed 功能,是 4.4 版本新增的,可以在任意 WordPress 站点用嵌入的方式插入 WordPress 博客内的文章。当然了,前提是嵌入和被嵌入的 WordPress 博客都支持 Post Embed 功能并且没有禁用掉。这功能我是禁用掉了,因为我用得上的也只是站内引用。于是,用 大发 的方法仿了一个四不像。

前情回顾

WordPress 4.4 & TwentySixteen

昨天看了一下 WordPress 4.4 官方项目进度表,WordPress 4.4 正式版连同新的默认主题 TwentySixteen 将会在 2015-12-08 发布。其实并不在意它什么时候更新...


大发的方法

地址:WordPress 文章内链短代码 - fatesinger.com/76585

简单来说就是使用 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() . '">' . 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] 即可。

如果不是在文章内容中,而是在其他地方想调用,则可使用 do_shortcode('[fa_insert_post ids=123,245]') 来调用。


目前在用的代码

改自大发,仅供参考,需要启用 WP-PostViews 插件,或者替换掉相关函数。

下面的代码加入到functions.php

// WordPress 文章内链短代码 - https://fatesinger.com/76585
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() . '">'. 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"> 评论 ' . get_comments_number(). '</a>
</div>
</div>
</div>
</div>';
}
wp_reset_postdata();
return $content;
}
add_shortcode('xx_insert_post', 'xx_insert_posts');

CSS 参考

/** WordPress 文章内链短代码 New Embed**/
.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;
}
/** WordPress 文章内链短代码 New Embed - END **/

使用方法

直接在文章中(html 代码模式下)使用短代码 [xx_insert_post ids=111,222] 即可。

如果不是在文章内容中,而是在其他地方想调用,则可使用 do_shortcode('[xx_insert_post ids=111,222]') 来调用。


参考文档

WordPress 官方:Shortcode API

除非注明,垃圾站文章均为网络收集,本文地址 https://cyhour.com/435/,转载时烦请以链接形式注明原始出处。
声明:我们不销售主机,任何VPS主机均有跑路风险且需定期备份,防止数据丢失。信息以实际为准,评测仅供参考不代表权威!
🍄:Netflix 奈飞 YouTube 合租

使用 WordPress 内置 XML Sitemaps 替换 Google XML Sitemaps

内容是王道,但是有时候酒香也怕巷子深,向搜索引擎提交 sitemap 是快速提高网站收录的最好方法之一。老头一直使用 Google XML Sitemaps 插件自动生成 sitemap.xml 站点地图。 WordPress 5.5 版本起 内置 sitemap 功能 WordPress 5.5 版本之后,核心代码已经内置 XML Sitemaps 功能,只要访问:…

WordPress 5.0+ 禁用 Gutenberg & WordPress 5.8+ 禁用 Widget 块编辑器

2018.12.06,WordPress 5.0 发布,代号 Bebo。最大的亮(黑)点就是正式引入新的基于块(block-based)的编辑器 —— Gutenberg 编辑器,以及新的默认主题 —— Twenty Nineteen。 WordPress 5.0+ 禁用 Gutenberg 编辑器 第一时间升级,打开文章编辑,一股说不出的杯具感在心头……变化太大,心累…
浏览: 33 标签:  ,  ,  , 

Adobe Flash Player 去helper(Win10 完美恢复)

Adobe 在2020年12月31日后将不再支持 Adobe Flash Player,从2021年1月12日开始,阻止 Flash 内容在 Flash Player 中运行。截图 虽然不喜欢 Adobe Flash Player,但是有些网站目前仍然离不开 Adobe Flash Player,过渡解决方法是:安装中国特供版 Adobe Flash Player 或者安装网友修改 Adobe Flash…

升级新版 Google AdSense 代码提升广告效果

2021年7月19日,Google AdSense 最近发布了新版 AdSense 代码。通过新版 AdSense 代码,AdSense 可以更早触发优化功能,从而提升网站上广告效果。新广告代码适用于自动广告和广告单元。 如何获取 Google AdSense 新版代码? 无需采取任何措施。在下次登录 AdSense 后,您将拥有对新广告代码的访…
浏览: 52

Comments:40

  1. 非常感谢

    2016.10.17 12:30 # 回复
    1楼
  2. 刚刚转载了你一篇技术类的文章放在草稿箱里了,还没来得及汇报,就又想把你这篇干货转载了。

    2016.10.17 12:33 # 回复
    2楼
  3. WordPress 真是方便。静态博客连个评论功能都得头疼。

    2016.10.17 13:29 # 回复
    3楼
  4. 111应该是文章id,后面的222是什么鬼?

    2016.10.17 13:39 # 回复
    4楼
  5. 很方便的一个功能。

    2016.10.17 13:52 # 回复
    5楼
  6. 我还在用自带的embed……

    2016.10.17 15:11 # 回复
    6楼
    • @老虎 自带的好像会加载更多东西……自定义的自由点。不过,条条大道通罗马……

      2016.10.17 15:31 # 回复
      • @老杨 自带的通过iframe加载,看源代码会觉得头疼。

        2016.10.18 16:57 # 回复
        • @不亦乐乎 我不用主要是觉得自带的改起来没那么方便,还有就是启用了这个功能,别的博客也可以这样引用……

          2016.10.18 17:33 # 回复
  7. 挺不错的,期待EM也有这个功能,当然,可能仅仅是期待。

    2016.10.17 20:06 # 回复
    7楼
    • @姜辰 应该可以移植。或者直接换到 WordPress 就好了,哈哈。

      2016.10.17 20:51 # 回复
    • @姜辰 通过文章id列出文章信息和程序无关,最多用sql语句,em应该也可以自己搞,就是wp的函数要替换。

      2016.10.18 16:56 # 回复
  8. good,收了,感谢~

    2016.10.17 21:09 # 回复
    8楼
  9. 为啥大家不喜欢wp默认的呢,wp默认直接贴地址就自动转换,我觉得挺方便的,都不用找文章id。

    2016.10.18 16:55 # 回复
    9楼
    • @不亦乐乎 我也不用找文章 id,我的固定链接就是 id。Wp 默认的自定义起来没那么方便。

      2016.10.18 17:20 # 回复
  10. 感谢分享,先备着

    2016.10.19 20:44 # 回复
    10楼
  11. 个人觉得是比较实用的东西,短代码方法好是好,但直接粘贴链接的方法更直观。Ps,能否转载文章?

    2016.10.28 09:02 # 回复
    11楼
    • @JJlin 嗯,各有各的好处吧。就看个人喜好了。文章随便转。另,你的博客好像打不开?

      2016.10.28 12:19 # 回复
  12. 菜鸟求救:http://www.ithmz.com/nternal-chain-short-code.html
    最后,我的头像为什么和名字不在同一行啊?

    2016.11.03 10:50 # 回复
    12楼
  13. 这又是什么鬼啊?
    阅读
    199,700 人次 评论 42
    不应该显示成你这样的吗?阅读 199,700 人次 评论 42
    我的阅读和数字之间为什么会换行啊

    2016.11.24 08:50 # 回复
    13楼
  14. 这功能找了两天了,终于在你博客里找到了,百度和某歌都搜不到中文教程,明天给我新主题加上去。感谢。

    2016.12.07 00:36 # 回复
    14楼
  15. 已经使用了,你这改的也很棒啊~ 赞

    2017.01.17 16:59 # 回复
    15楼

发表留言

Vultr 送$100,搬瓦工年付最低$49,优惠码 BWH3HYATVBJW,更多推荐VPS信息