仿 WordPress 的 Post Embed 功能

2016.10.17 | | 38 Comments

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

——最近更新:2016年10月19日
支付宝扫码打赏微信打赏

如果文章对您有帮助,欢迎移至上方按钮打赏老杨

声明: 除非注明,常阳时光文章均为原创,转载请以链接形式标明本文地址
本文地址:https://cyhour.com/435/

Comments:38

  1. 非常感谢

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

    2016.10.17 12:33 # 回复
    2楼
  3. fooleap116 Google Chrome 54.0.2840.59 Windows 7 x64 Edition

    WordPress 真是方便。静态博客连个评论功能都得头疼。

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

    2016.10.17 13:39 # 回复
    4楼
  5. 梯子铺1 Google Chrome 53.0.2785.143 Windows 10 x64 Edition

    很方便的一个功能。

    2016.10.17 13:52 # 回复
    5楼
  6. 老虎48 Safari 8.0 iPhone iOS 8.3

    我还在用自带的embed……

    2016.10.17 15:11 # 回复
    6楼
    • 老杨2.15k+ Firefox 49.0 Windows XP

      @老虎 自带的好像会加载更多东西……自定义的自由点。不过,条条大道通罗马……

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

        2016.10.18 16:57 # 回复
        • 老杨2.15k+ Firefox 49.0 Windows XP

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

          2016.10.18 17:33 # 回复
  7. 姜辰30 Firefox 42.0 Windows 10 x64 Edition

    挺不错的,期待EM也有这个功能,当然,可能仅仅是期待。

    2016.10.17 20:06 # 回复
    7楼
    • 老杨2.15k+ Safari 8.0 iPhone iOS 8.3

      @姜辰 应该可以移植。或者直接换到 WordPress 就好了,哈哈。

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

      2016.10.18 16:56 # 回复
      • 老杨2.15k+ Firefox 49.0 Windows XP

        @不亦乐乎 说是这么说,没折腾过未必能折腾出来呢,像我基本上是只会在别人代码基础上改,自己写出来比较难,哈哈。

        2016.10.18 17:31 # 回复
      • 姜辰30 Firefox 42.0 Windows 10 x64 Edition

        @不亦乐乎 然而我不懂程序······

        2016.10.18 20:38 # 回复
  8. good,收了,感谢~

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

    2016.10.18 16:55 # 回复
    9楼
    • 老杨2.15k+ Firefox 49.0 Windows XP

      @不亦乐乎 我也不用找文章 id,我的固定链接就是 id。Wp 默认的自定义起来没那么方便。

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

    2016.10.19 20:44 # 回复
    10楼
  11. JJlin4 Safari 10.0.1 Mac OS X  10.12.1

    个人觉得是比较实用的东西,短代码方法好是好,但直接粘贴链接的方法更直观。Ps,能否转载文章?

    2016.10.28 09:02 # 回复
    11楼
    • 老杨2.15k+ Firefox 49.0 Windows XP

      @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. 旧梦4 QQbrowser Android 6.0

    这功能找了两天了,终于在你博客里找到了,百度和某歌都搜不到中文教程,明天给我新主题加上去。感谢。

    2016.12.07 00:36 # 回复
    14楼
    • 老杨2.15k+ Firefox 50.0 Windows 10 x64 Edition

      @旧梦 可能是关键词没选对,哈哈。

      2016.12.07 22:21 # 回复
      • 旧梦4 Firefox 50.0 Windows 10 x64 Edition

        @老杨 谢谢老杨,我已经成功了,看我第一文章里。。。话说你那个评论人cookie怎么做到的?

        2016.12.07 22:23 # 回复
        • 老杨2.15k+ Firefox 50.0 Windows 10 x64 Edition

          @旧梦 评论人 cookie?说的是记住评论者信息?可以参考张戈的教程:https://zhangge.net/4538.html

          2016.12.07 22:41 # 回复
          • 旧梦-mrju.cn4 Firefox 50.0 Windows 10 x64 Edition

            @老杨 谢谢老张了,好人。

            2016.12.08 08:52 # 回复

发表留言