• 注册
  • 美の子 管理员
    达人认证:无所不能,又无所不用其极的神人
    关注 3 粉丝 3 喜欢 12 内容 348
    河南省·郑州市
    聊天 送礼

    分享精彩给好友

    • 查看作者
    • WordPress优化:怎么使用短代码给WordPress插入卡片式文章内链

      之前貌似见过文章内引用文章,而且还是卡片式的,觉得挺好看,至少来说比直接添加链接要更加的人性化。

      自己也一直想添加一个文章内引用卡片式文章,浏览了一遍百度前10页,发现有现成的案例,直接扒走,哈哈。自己又做了CSS的调整,显示更加细致,不占用太多空间。在此先感谢写出代码的大佬们。

      网上搜的代码如下:原始效果如下:

      添加到主题函数模板(functions.php)

      /**
      * 卡片式文章内链功能
      */
      function yx_embed_posts( $atts, $content = null ){
      extract( shortcode_atts( array(
      'ids' => ''
      ),
      $atts ) );
      global $post;
      $content = '';
      $postids = explode(',', $ids);
      $inset_posts = get_posts(array('post__in'=>$postids));
      $category = get_the_category();
      foreach ($inset_posts as $key => $post) {
      setup_postdata( $post );
      $content .= '<span class="embed-card">
      <a target="_blank" href="'.get_category_link($category[0]->term_id ).'"><span class="embed-card-category">'. $category[0]->cat_name .'</span></a>
      <span class="embed-card-img">
      <a target="_blank" href="' . get_permalink() . '"><img alt="'. get_the_title() . '" src="'. post_thumbnail_src() .'"></a>
      </span>
      <span class="embed-card-info">
      <a target="_blank" href="' . get_permalink() . '">
      <span class="card-name">'. get_the_title() . '</span>
      </a>
      <span class="card-abstract">'.wp_trim_words( get_the_excerpt(), 100, '...' ).'</span>
      <span class="card-controls">
      <span class="group-data"> <i>时间:</i>'. get_the_time('Y/n/j') .'</span>
      <span class="group-data"> <i>人气:</i>'. post_views(false, '', '', false) .'</span>
      <span class="group-data"> <i>评论:</i>'. get_comments_number() .'</span>
      <a target="_blank" href="' . get_permalink() . '"><span class="card-btn-deep">阅读全文</span></a>
      </span>
      </span>
      </span>
      <link rel="stylesheet" href="'. get_template_directory_uri() .'/css/embed-card.css"/>';
      }
      wp_reset_postdata();
      return $content;
      }
      add_shortcode('yx_embed_post', 'yx_embed_posts');

      并给出 CSS 代码,建议另存为 embed-card.css 并放入主题根目录的 css 文件夹中(其中两处代码错误以更改)

      .embed-card,span.embed-card {
      display: block;
      position: relative;
      width: 620px;
      padding: 9px;
      margin: 30px auto;
      border: 1px dashed #d4d4d4;
      overflow: hidden;
      max-width: 90%;
      }
      .embed-card:hover,span.embed-card:hover {
      box-shadow: 1px 1px 8px #eee;
      }
      .embed-card a,span.embed-card a {
      padding-right: 0;
      text-decoration: none;
      color: #313131;
      }
      .embed-card span,span.embed-card span {
      display: block;
      padding-right: 0;
      }
      .embed-card-category {
      display: inline-block;
      height: 20px;
      line-height: 20px;
      padding: 0 5px;
      font-size: 12px;
      }
      .embed-card-category {
      background-color: #6a99d8;
      background-color: rgba(43,110,200,0.8);
      color: #fff;
      }
      .embed-card-category:hover {
      background-color: #d5e2f4;
      background-color: rgba(43,110,200,1);
      }
      .embed-card .embed-card-category {
      position: absolute;
      top: 9px;
      left: 0;
      padding-right: 5px;
      }
      .embed-card-img {
      float: left;
      margin-right: 14px;
      }
      .embed-card-img img {
      width: 180px;
      height: 150px;
      }
      .embed-card-info {
      padding-right: 4px;
      overflow: hidden;
      }
      .embed-card-info .card-name {
      font-size: 16px;
      height: 44px;
      line-height: 22px;
      margin-bottom: 10px;
      margin-top: 7px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: normal;
      font-weight: bold;
      }
      .embed-card-info .card-tags {
      height: 20px;
      overflow: hidden;
      }
      .embed-card-info .card-tags>span {
      display: inline-block;
      padding: 0 7px;
      margin-right: 8px;
      height: 16px;
      border: 1px solid #eee;
      line-height: 16px;
      color: #999;
      font-size: 12px;
      }
      .embed-card-info .card-tags span.tag-noborder {
      border: 0;
      }
      .embed-card-info .card-abstract {
      height: 36px;
      line-height: 18px;
      margin: 5px 0;
      font-size: 12px;
      color: #666;
      overflow: hidden;
      margin-bottom: 20px;
      }
      .embed-card-info .card-controls {
      overflow: hidden;
      line-height: 28px;
      }
      .embed-card-info .card-controls .group-data {
      float: left;
      margin-right: 10px;
      color: #999;
      font-size: 12px;
      }
      .embed-card-info .card-controls .group-data i {
      margin-right: 5px;
      font-style: normal!important;
      }
      .embed-card-info .card-btn-deep {
      float: right;
      width: 68px;
      height: 28px;
      margin-left: 10px;
      line-height: 28px;
      text-align: center;
      font-size: 12px;
      background-color: #ff5e5c;
      color: #fff;
      }
      .embed-card-info .card-btn-deep:hover {
      opacity: .9;
      }
      @media only screen and (max-width:700px) {
      span.embed-card {
      width: 95%;
      padding-left: 0;
      padding-right: 0;
      }
      .embed-card .embed-card-img {
      width: 24.27184%;
      margin-left: 9px;
      }
      .embed-card .embed-card-img img {
      width: 100%;
      height: auto;
      }
      .embed-card .embed-card-info {
      overflow: visible;
      padding: 0 9px;
      }
      .embed-card .embed-card-info .card-name {
      margin-top: 1%;
      margin-bottom: 1.5%;
      }
      }

      使用的时候只需要在文章里添加短代码

      1. [yx_embed_post ids=123,245]

      (WordPress 文章 id 查看方法不赘述,多篇文章用,(英文逗号)隔开)

      如果你不是在文章内容中,而是在其他地方想调用,则可使用下面代码来调用。

      1. do_shortcode('[yx_embed_post ids=123,245]')

      修改如下:

      效果图:

      实际使用效果:

      怎么使用FusionApp把一个网页封装成手机APP 怎么使用FusionApp把一个网页封装成手机APP FusionApp介绍 FusionApp是一个使用现成的webApp网站做为嵌入内容,组合成一个完整应用的工 […] 时间:2019/5/12 评论:1 阅读全文

      支付188元/年送216元话费券+视频会员一年+3G流量包+携程会员等。 话费分月返还,前6个月每月一张10元 […] 时间:2019/5/12 评论:0 阅读全文   了解漫威电影宇宙的正确观影顺序 了解漫威电影宇宙的正确观影顺序 了解漫威电影宇宙的正确观影顺序:《钢铁侠1》→《无敌浩克》→《钢铁侠2》→《雷神1》→《美国队长1》→《复仇者 […] 时间:2019/5/11 评论:0 阅读全文  

       PHP代码修改如下,为了使用方便短代码修改(“文章”首字母)

       ]wz ids=*****[        (方括号反过来)

      /**
      * 卡片式文章内链功能
      */
      function z_embed_posts( $atts, $content = null ){
      extract( shortcode_atts( array(
      'ids' => ''
      ),
      $atts ) );
      global $post;
      $content = '';
      $postids = explode(',', $ids);
      $inset_posts = get_posts(array('post__in'=>$postids));
      $category = get_the_category();
      foreach ($inset_posts as $key => $post) {
      setup_postdata( $post );
      $content .= '<span class="embed-card">
      <a target="_blank" href="'.get_category_link($category[0]->term_id ).'"><span class="embed-card-category">'. $category[0]->cat_name .'</span></a>
      <span class="embed-card-img">
      <a target="_blank" href="' . get_permalink() . '"><img alt="'. get_the_title() . '" src="'.jinsom_single_cover(get_the_content()).'"></a>
      </span>
      <span class="embed-card-info">
      <a target="_blank" href="' . get_permalink() . '">
      <span class="card-name">'. get_the_title() . '</span>
      </a>
      <span class="card-abstract">'.wp_trim_words( get_the_excerpt(), 100, '...' ).'</span>
      <span class="card-controls">
      <span class="group-data"> <i>时间:</i>'. get_the_time('Y/n/j') .'</span>
      <span class="group-data"> <i>评论:</i>'. get_comments_number() .'</span>
      <a target="_blank" href="' . get_permalink() . '"><span class="card-btn-deep">阅读全文</span></a>
      </span>
      </span>
      </span>
      <link rel="stylesheet" href="'. get_template_directory_uri() .'embed-card.css"/>';
      }
      wp_reset_postdata();
      return $content;
      }
      add_shortcode('wz', 'z_embed_posts');

      CSS调整如下:

      .embed-card, span.embed-card {
          display: block;
          position: relative;
          /* width: 85%; */
          padding: 10px;
          margin: 30px auto;
          border: 1px dashed #d4d4d4;
          overflow: hidden;
          max-width: 85%;
      }
      .embed-card:hover,span.embed-card:hover {
      box-shadow: 1px 1px 8px #eee;
      }
      .embed-card a,span.embed-card a {
      padding-right: 0;
      text-decoration: none;
      color: #313131;
      }
      .embed-card span,span.embed-card span {
      display: block;
      padding-right: 0;
      }
      .embed-card-category {
      display: inline-block;
      height: 20px;
      line-height: 20px;
      padding: 0 5px;
      font-size: 12px;
      }
      .embed-card-category {
      background-color: #6a99d8;
      background-color: rgba(43,110,200,0.8);
      color: #fff;
      }
      .embed-card-category:hover {
      background-color: #d5e2f4;
      background-color: rgba(43,110,200,1);
      }
      .embed-card .embed-card-category {
      position: absolute;
      top: 9px;
      left: 0;
      padding-right: 5px;
      }
      .embed-card-img {
          float: left;
          margin-right: 14px;
          height: 110px;
          width: 160px;
          overflow: hidden;
      }
      .embed-card-img img {
          width: 100%;
          height: auto;
          max-width: 100%;
      }
      .embed-card-info {
      padding-right: 4px;
      overflow: hidden;
      }
      .embed-card-info .card-name {
          font-size: 16px;
          height: 25px;
          width: 430px;
          line-height: 22px;
          /* margin-bottom: 10px; */
          margin-top: 7px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: normal;
          font-weight: bold;
      }
      .embed-card-info .card-tags {
      height: 20px;
      overflow: hidden;
      }
      .embed-card-info .card-tags>span {
      display: inline-block;
      padding: 0 7px;
      margin-right: 8px;
      height: 16px;
      border: 1px solid #eee;
      line-height: 16px;
      color: #999;
      font-size: 12px;
      }
      .embed-card-info .card-tags span.tag-noborder {
      border: 0;
      }
      .embed-card-info .card-abstract {
      height: 36px;
      line-height: 18px;
      margin: 5px 0;
      font-size: 12px;
      color: #666;
      overflow: hidden;
      margin-bottom: 20px;
      }
      .embed-card-info .card-controls {
          overflow: hidden;
          line-height: 28px;
          margin-top: -10px;
      }
      .embed-card-info .card-controls .group-data {
          float: left;
          margin-right: 10px;
          color: #999;
          font-size: 12px;
          float: left;
          padding-left: 5px;
      }
      .embed-card-info .card-controls .group-data i {
      margin-right: 5px;
      font-style: normal!important;
      }
      .embed-card-info .card-btn-deep {
      float: right;
      width: 68px;
      height: 28px;
      margin-left: 10px;
      line-height: 28px;
      text-align: center;
      font-size: 12px;
      background-color: #ff5e5c;
      color: #fff;
      }
      .embed-card-info .card-btn-deep:hover {
      opacity: .9;
      }
      @media only screen and (max-width:700px) {
      span.embed-card {
      width: 95%;
      padding-left: 0;
      padding-right: 0;
      }
      .embed-card .embed-card-img {
      width: 24.27184%;
      margin-left: 9px;
      }
      .embed-card .embed-card-img img {
      width: 100%;
      height: auto;
      }
      .embed-card .embed-card-info {
      overflow: visible;
      padding: 0 9px;
      }
      .embed-card .embed-card-info .card-name {
      margin-top: 1%;
      margin-bottom: 1.5%;
      }
      }

      2019年5月12日以上折腾完毕。

      对了,还偷来了一个统计字数的小功能。 [s-3] 

      针对LightNS的优化如下

      由于每个主题结构都不一样,根据之前代码做了优化,显示更加简洁。

      这个是截图效果

      以下为实际显示效果(移动端方可看上面截图的效果)

      了解漫威电影宇宙的正确观影顺序 了解漫威电影宇宙的正确观影顺序 了解漫威电影宇宙的正确观影顺序:《钢铁侠1》→《无敌浩克》→《钢铁侠2》→《雷神1》→《美国队长1》→《复仇者 […] 时间:2019/5/11 评论:0 阅读全文  

      1. 其中删除了分类的获取,因为主题特殊性,并不能很好的判断。能力有限,先删除了。

      2. CSS屏蔽了标题的显示,移动端显示区域有限,尽可能的减少视觉干扰。果断隐藏了标题。

      3. 优化了不同分辨率下的显示

      php代码如下:

      /**
      * 卡片式文章内链功能
      */
      function z_embed_posts( $atts, $content = null ){
      extract( shortcode_atts( array(
      'ids' => ''
      ),
      $atts ) );
      global $post;
      $content = '';
      $postids = explode(',', $ids);
      $inset_posts = get_posts(array('post__in'=>$postids));
      $category = get_the_category();
      foreach ($inset_posts as $key => $post) {
      setup_postdata( $post );
      $content .= '<span class="embed-card">
      
      <span class="embed-card-img">
      <a target="_blank" href="' . get_permalink() . '"><img alt="'. get_the_title() . '" src="'.jinsom_single_cover(get_the_content()).'"></a>
      </span>
      <span class="embed-card-info">
      <a target="_blank" href="' . get_permalink() . '">
      <span class="card-name">'. get_the_title() . '</span>
      </a>
      <span class="card-abstract">'.wp_trim_words( get_the_excerpt(), 100, '...' ).'</span>
      <span class="card-controls">
      <span class="group-data"> <i>时间:</i>'. get_the_time('Y/n/j') .'</span>
      <span class="group-data"> <i>评论:</i>'. get_comments_number() .'</span>
      <a target="_blank" href="' . get_permalink() . '"><span class="card-btn-deep">阅读全文</span></a>
      </span>
      </span>
      </span>';
      }
      wp_reset_postdata();
      return $content;
      }
      add_shortcode('wz', 'z_embed_posts');

      移动端CSS如下

      .embed-card, span.embed-card {
          display: block;
          position: relative;
          padding: 2vw;
          border: 1px dashed #d4d4d4;
          overflow: hidden;
      }
      .embed-card a,span.embed-card a {
      text-decoration: none;
      color: #313131;
      }
      .embed-card span, span.embed-card span {
          display: block;
          /* position: absolute; */
          position: relative;
      }
      .embed-card-category {
      display: inline-block;
      height: 20px;
      line-height: 20px;
      padding: 0 5px;
      font-size: 12px;
      }
      .embed-card-category {
      background-color: #4db9f3;
      color: #fff;
      }
      .embed-card-category:hover {
      background-color: #4db9f3;
      }
      .embed-card .embed-card-category {
      position: absolute;
      top: 9px;
      left: 0;
      padding-right: 5px;
      }
      .embed-card-img {
          float: left;
          margin-right: 2vw;
          height: 18vw;
          width: 24vw;
          overflow: hidden;
      }
      .embed-card-img img {
          width: 100%;
          height: auto;
          max-width: 100%;
      }
      .embed-card-info {
      overflow: hidden;
      }
      .embed-card-info .card-name {
          width: 99999vw;
          height: 5vw;
          overflow: hidden;
          margin-top: -5vw;
      }
      
      .embed-card-info .card-abstract {
          font-size: 3.3vw;
          color: #666;
          overflow: hidden;
          letter-spacing: 0.2vw;
      	height: 14vw;
      }
      .embed-card-info .card-controls {
          overflow: hidden;
          line-height: 5vw;
          right: 0;
          bottom: 0;
          position: relative;
      }
      .embed-card-info .card-controls .group-data {
          float: left;
          margin-right: 3vw;
          color: #999;
          font-size: 2vw;
      }
      .embed-card-info .card-controls .group-data i {
      margin-right: 1vw;
      font-style: normal!important;
      }
      .embed-card-info .card-btn-deep {
          float: right;
          width: 14vw;
          text-align: center;
          font-size: 2vw;
          background-color: #ff5e5c;
          color: #fff;
      }

      PC端优化稍后更新

      未完。。。

      中国·钓鱼岛
    • 2
    • 2
    • 0
    • 377
    • 0
      美の子本站元老至尊会员管理员
      该评论内容已被删除。
    • 0
      美の子本站元老至尊会员管理员
      该评论内容已被删除。