WordPress 文章中使用短代码显示指定文章

  • A+
所属分类:WordPress
粉象生活,创业首选,第一波!抢占先机,赚钱必看!

有时候写文章的时候可能会需要引用到之前的文章,在这之前基本都是一个超链接搞定。

但是随着新版本 WordPress 的发布,新增 Post Embed 功能,这样就可以用嵌入的方式插入需要引用的文章,这样看起来更加的友好。

WordPress 文章中使用短代码显示指定文章

效果如下:

WordPress 闹闹返利常用命令汇总使用方法以及使用教程 闹闹返利常用命令汇总使用方法以及使用教程 一、搜索宝贝指令 二、订单编号 三、绑定身份 四、个人信息查询(可查询个人信息) 五、申请提现(通知管理员处理 […] 时间:2017/3/2 阅读全文

我这个效果去掉了作者信息、评论数等,大家有需要的可以根据需要自己修改。

废话不多说了,完整代码如下(下面的代码加入到 functions.php 中):

展开

  1. // WordPress 文章内链短代码
  2. function xx_insert_posts( $atts$content = null ){
  3.     extract( shortcode_atts( array('ids' => ''), $atts ) );
  4.     global $post;
  5.     $content = '';
  6.     $postids =  explode(',', $ids);
  7.     $inset_posts = get_posts(array('post__in'=>$postids));
  8.     foreach ($inset_posts as $key => $post) {
  9.         setup_postdata( $post );
  10.         $content .=  '
  11.             <div class="wp-embed-post">
  12.                 <p class="wp-embed-post-heading"><a target="_blank" class="wp-embed-post-title" href="' . get_permalink() . '">'. get_the_title() . '</a></p>
  13.                 <div class="wp-embed-post-excerpt">'.wp_trim_words( get_the_content(), 100, '...' ).'</div>
  14.                 <div class="wp-embed-post-footer">
  15.                     <div class="wp-embed-post-site-title">
  16.                         <a href="'.get_author_posts_url( get_the_author_meta( 'ID' ) ) .'" title="查看作者 '.get_the_author().' 发布的所有文章" rel="author">'
  17.                             .get_avatar( get_the_author_meta('email'), '16' ).'<span>'.get_the_author().'</span>
  18.                         </a>
  19.                     </div>
  20.                     <div class="wp-embed-post-meta">
  21.                         <div class="wp-embed-post-reads">阅读
  22.                             '.the_views(false, '''', false).'
  23.                         </div>
  24.                         <div class="wp-embed-post-comments">
  25.                             <a target="_blank" class="wp-embed-post-title" href="' . get_permalink() . '#comments"> 评论 ' . get_comments_number(). '</a>
  26.                         </div>
  27.                     </div>
  28.                 </div>
  29.             </div>';
  30.     }
  31.     wp_reset_postdata();
  32.     return $content;
  33. }
  34. add_shortcode('xx_insert_post', 'xx_insert_posts');

CSS 参考:

展开

  1. /** WordPress 文章内链短代码 New Embed**/
  2. .wp-embed-post {
  3.     background#fff;
  4.     border1px solid #e5e5e5;
  5.     box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
  6.     color#82878c;
  7.     font-size14px;
  8.     overflowauto;
  9.     padding16px;
  10.     margin-bottom16px;
  11. }
  12. .wp-embed-post a {
  13.     color#666;
  14.     text-decorationnone;
  15. }
  16. .wp-embed-post-featured-image {
  17.     margin-bottom20px;
  18. }
  19. .wp-embed-post-featured-image img {
  20.     bordermedium none;
  21.     heightauto;
  22.     width: 100%;
  23. }
  24. .wp-embed-post-featured-image.square {
  25.     floatleft;
  26.     margin-right20px;
  27.     max-width160px;
  28. }
  29. .wp-embed-post p {
  30.     margin: 0;
  31. }
  32. p.wp-embed-post-heading {
  33.     font-size20px;
  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-top16px;
  45.     width: 100%;
  46. }
  47. .wp-embed-post-site-title .avatar {
  48.     border: 0 none;
  49.     height25px;
  50.     left: 0;
  51.     positionabsolute;
  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.     width25px;
  58. }
  59. .wp-embed-post-site-title a {
  60.     displayinline-block;
  61.     padding-left32px;
  62.     positionrelative;
  63. }
  64. .wp-embed-post-meta, .wp-embed-post-site-title {
  65.     displaytable-cell;
  66. }
  67. .wp-embed-post-meta {
  68.     text-alignrightright;
  69.     vertical-alignmiddle;
  70.     whitewhite-spacenowrap;
  71. }
  72. .wp-embed-post-comments, .wp-embed-post-reads {
  73.     color#666;
  74.     displayinline;
  75. }
  76. .wp-embed-post-comments a, .wp-embed-post-share-tab-button {
  77.     displayinline-block;
  78. }
  79. .wp-embed-post-comments + .wp-embed-post-share {
  80.     margin-left10px;
  81. }
  82. /** WordPress 文章内链短代码 New Embed - END **/


以上代码来自:常阳时光

使用方法:

直接在文章中进入 文本(html) 模式,插入短代码:xx_insert_post ids=123,245 即可。

假如不是在文章中嵌入,而是其它的地方嵌入,插入 do_shortcode('xx_insert_post ids=123,245') 即可。

需要把上面标红的()括号,改为[]中括号。

weinxin
粉象生活-邀请码:959165 ,创业首选
第一波!火热招募中!抢占先机,赚钱必看!!超高购物返佣,秒杀同类平台。高达91%的利润分配给会员、VIP、合伙人。
粉象生活,创业首选,第一波!抢占先机,赚钱必看!
粉象生活,创业首选,第一波!抢占先机,赚钱必看!

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:3   其中:访客  1   博主  2

    • avatar Y 来自天朝的朋友 谷歌浏览器 Windows 10 河南省南阳市 电信 4

      这样看起来确实比超链接好看。

        • avatar 付禹龙 管理员 来自天朝的朋友 QQ浏览器 Windows 10 河南省南阳市 电信

          @Y 是的,这样看起来比较友好。

          • avatar 付禹龙 管理员 来自天朝的朋友 QQ浏览器 Windows 10 河南省南阳市 电信

            @Y 测试下评论回复。