仿 WordPress 的 Post Embed 功能

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

前情回顾

仿 WordPress 的 Post Embed 功能

WordPress 的 Post Embed 功能,是 4.4 版本新增的,可以在任意 WordPress 站点用嵌入的方式插入 WordPress 博客内的文章。当然了,前提是嵌入和被嵌入的 Wor...


大发的方法

地址: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/,转载时必须以链接形式注明原始出处。
声明:我们不销售主机,选主机需合法使用。任何主机需定期备份,防止数据丢失。信息以实际为准,评测仅供参考不代表权威!
🔞:Netflix 奈飞 YouTube 合租免费节点Telegram 频道

使用 rclone 将 Google Drive 文件同步至 OneDrive

前几天上了博友「灵尘居」的 Office 365 车,1T OneDrive 到手,手机照片一直喂 Google AI,挺方便的,以前还会同步一份到家里的垃圾西数 NAS,不过并不太自动,后来就懒得弄了。 Google 虽然是大厂,但是数据只有一份,还是怕怕,多一个备份不是坏事。苹果 iCloud 不错,但是贼贵,况且我只有一个…
浏览: 138

尼康 D7100 中文使用说明书 高清 PDF 电子版免费下载

尼康 D7100 说明书是一份介绍详细尼康 D7100 单反官方教程,推荐购买了 D7100 单反博友下载保存参考,以便随时查看一些常用按键操作和使用技巧。 尼康 D7100 简介 尼康 D7100 搭载先进的对象捕捉性能和成像性能,能够忠实还原拍摄细节。高密度的 51 点自动对焦系统准确捕捉目标对象并进行跟踪,…

全网热门公共 BitTorrent Tracker 列表合集 加速BT下载

BT 下载速度取决于其他下载同一资源的用户上传速度。做种「指上传文件数据给其他 BT 用户的行为」用户越多,你的下载速度越快!如果资源没人提供上传,就会完全没有下载速度,而做种用户靠 Peer、DHT、Tracker 获得。 Tracker 是什么? BT 下载的文件都是其他用户上传给你的。 BT 下载速度…

换域名?改固定链接?

去年底注册了个短域名,虽然非主流,但是胜在够短,两字母,还没有溢价。一直寻思着把它转移到 Cloudflare,换到博客使用,无奈 Google Adsense 一直没能折腾审核通过。 WordPress 修改固定链接? 以前听说 postname 更有利于 SEO,曾经试过人工翻译。后来嫌麻烦,干脆只用 /%post_id%/,后面 .…
浏览: 138 标签:  ,  ,  , 
浏览: 90

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 # 回复
  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信息