您好！欢迎来到模板下载吧！本站资源24小时自动发货，请放心选购，一次付费，终身下载，售后请提交工单！
提交工单 快速入门 在线PS 发布资源赚 站长工具箱 领取优惠券荐

模板下载吧

模板下载吧 五周年

利用短代码给WordPress文章添加卡片式内链教程美化版

开拓者 2018-06-25 Wordpress教程 2669 已收录 本文共4499个字，预计阅读需要12分钟。
  • 文章介绍
  • 快速入门
  • 增值服务

wordpress更新到4.4 版本后增加了 Post Embed 功能，可以把要引用的文章以嵌入式卡片展现出来，不过样式比较单一，并且只能直接输入网址调用，这里给wordpress添加一个短代码调用功能，直接使用短代码就可以添加卡片式内链并且美化原始的效果。

WordPress文章添加卡片式内链

首先我们来看看默认的效果和美化之后的效果：

默认效果：利用短代码给WordPress文章添加卡片式内链教程美化版

美化后效果：
利用短代码给WordPress文章添加卡片式内链教程美化版利用短代码给WordPress文章添加卡片式内链教程美化版wordpress更新到4.4 版本后增加了 Post Embed 功能，可以把要引用的文章以嵌入式卡片展现出来，不过样式比较单一，并且只能直接输入网址调用，这 […] 时间:2018/6/25 评论:0阅读全文

在折腾之前希望大家保存源文件，新手请耐心看教程。

首先需要将如下代码放入你主题的函数模板里（functions.php）

  1. /**
  2. * 卡片式文章内链功能
  3. * https://www.mbxzb.cn
  4. */
  5. function yx_embed_posts( $atts, $content = null ){
  6. extract( shortcode_atts( array(
  7. 'ids' => ''
  8. ),
  9. $atts ) );
  10. global $post;
  11. $content = '';
  12. $postids = explode(',', $ids);
  13. $inset_posts = get_posts(array('post__in'=>$postids));
  14. $category = get_the_category();
  15. foreach ($inset_posts as $key => $post) {
  16. setup_postdata( $post );
  17. $content .= '<span class="embed-card">
  18. <a target="_blank" href="'.get_category_link($category[0]->term_id ).'"><span class="embed-card-category">'. $category[0]->cat_name .'</span></a>
  19. <span class="embed-card-img">
  20. <a target="_blank" href="' . get_permalink() . '"><img alt="'. get_the_title() . '" src="'. post_thumbnail_src() .'"></a>
  21. </span>
  22. <span class="embed-card-info">
  23. <a target="_blank" href="' . get_permalink() . '">
  24. <span class="card-name">'. get_the_title() . '</span>
  25. </a>
  26. <span class="card-abstract">'.wp_trim_words( get_the_excerpt(), 100, '...' ).'</span>
  27. <span class="card-controls">
  28. <span class="group-data"> <i>时间:</i>'. get_the_time('Y/n/j') .'</span>
  29. <span class="group-data"> <i>人气:</i>'. post_views(false, '', '', false) .'</span>
  30. <span class="group-data"> <i>评论:</i>'. get_comments_number() .'</span>
  31. <a target="_blank" href="' . get_permalink() . '"><span class="card-btn-deep">阅读全文</span></a>
  32. </span>
  33. </span>
  34. </span>
  35. <link rel="stylesheet" href="'. get_template_directory_uri() .'/css/embed-card.css"/>';
  36. }
  37. wp_reset_postdata();
  38. return $content;
  39. }
  40. add_shortcode('yx_embed_post', 'yx_embed_posts');

注意：上述代码中有调用自定义的函数（如阅读量，缩略图等），如果读者使用的话需要根据实际情况进行修改，由于大家的主题不统一.
并给出其他网站在用的 CSS 代码，建议另存为 embed-card.css 并放入主题根目录的 css 文件夹中（与上述 PHP 代码中路径对应）

  1. .embed-card,span.embed-card {
  2. display: block;
  3. position: relative;
  4. width: 620px;
  5. padding: 9px;
  6. margin: 30px auto;
  7. border: 1px dashed #d4d4d4;
  8. overflow: hidden;
  9. max-width: 90%;
  10. }
  11. .embed-card:hover,span.embed-card:hover {
  12. box-shadow: 1px 1px 8px #eee;
  13. }
  14. .embed-card a,span.embed-card a {
  15. padding-right: 0;
  16. text-decoration: none;
  17. color: #313131;
  18. }
  19. .embed-card span,span.embed-card span {
  20. display: block;
  21. padding-right: 0;
  22. }
  23. .embed-card-category {
  24. display: inline-block;
  25. height: 20px;
  26. line-height: 20px;
  27. padding: 0 5px;
  28. font-size: 12px;
  29. }
  30. .embed-card-category {
  31. background-color: #6a99d8;
  32. background-color: rgba(43,110,200,0.8);
  33. color: #fff;
  34. }
  35. .embed-card-category:hover {
  36. background-color: #d5e2f4;
  37. background-color: rgba(43,110,200,1);
  38. }
  39. .embed-card .embed-card-category {
  40. position: absolute;
  41. top: 9px;
  42. left: 0;
  43. padding-right: 5px;
  44. }
  45. .embed-card-img {
  46. float: left;
  47. margin-right: 14px;
  48. }
  49. .embed-card-img img {
  50. width: 180px;
  51. height: 150px;
  52. }
  53. .embed-card-info {
  54. padding-right: 4px;
  55. overflow: hidden;
  56. }
  57. .embed-card-info .card-name {
  58. font-size: 16px;
  59. height: 44px;
  60. line-height: 22px;
  61. margin-bottom: 10px;
  62. margin-top: 7px;
  63. overflow: hidden;
  64. text-overflow: ellipsis;
  65. whitewhite-space: normal;
  66. font-weight: bold;
  67. }
  68. .embed-card-info .card-tags {
  69. height: 20px;
  70. overflow: hidden;
  71. }
  72. .embed-card-info .card-tags>span {
  73. display: inline-block;
  74. padding: 0 7px;
  75. margin-right: 8px;
  76. height: 16px;
  77. border: 1px solid #eee;
  78. line-height: 16px;
  79. color: #999;
  80. font-size: 12px;
  81. }
  82. .embed-card-info .card-tags span.tag-noborder {
  83. border: 0;
  84. }
  85. .embed-card-info .card-abstract {
  86. height: 36px;
  87. line-height: 18px;
  88. margin: 5px 0;
  89. font-size: 12px;
  90. color: #666;
  91. overflow: hidden;
  92. margin-bottom: 20px;
  93. }
  94. .embed-card-info .card-controls {
  95. overflow: hidden;
  96. line-height: 28px;
  97. }
  98. .embed-card-info .card-controls .group-data {
  99. float: left;
  100. margin-right: 10px;
  101. color: #999;
  102. font-size: 12px;
  103. }
  104. .embed-card-info .card-controls .group-data i {
  105. margin-right: 5px;
  106. font-style: normal!important;
  107. }
  108. .embed-card-info .card-btn-deep {
  109. float: rightright;
  110. width: 68px;
  111. height: 28px;
  112. margin-left: 10px;
  113. line-height: 28px;
  114. text-align: center;
  115. font-size: 12px;
  116. background-color: #ff5e5c;
  117. color: #fff;
  118. }
  119. .embed-card-info .card-btn-deep:hover {
  120. opacity: .9;
  121. }
  122. @media only screen and (max-width:700px) {
  123. span.embed-card {
  124. width: 95%;
  125. padding-left: 0;
  126. padding-right: 0;
  127. }
  128. .embed-card .embed-card-img {
  129. width: 24.27184%;
  130. margin-left: 9px;
  131. }
  132. .embed-card .embed-card-img img {
  133. width: 100%;
  134. height: auto;
  135. }
  136. .embed-card .embed-card-info {
  137. overflow: visible;
  138. padding: 0 9px;
  139. }
  140. .embed-card .embed-card-info .card-name {
  141. margin-top: 1%;
  142. margin-bottom: 1.5%;
  143. }
  144. }

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

[yx_embed_post ids=123,245]  

（WordPress 文章 id 查看方法不赘述，多篇文章用,隔开）

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

  1. do_shortcode('')

适当增加文章内链对 SEO 有积极的作用，也让文章更加的丰满，何乐而不为呢？

温馨提示：本文最后更新于2019年11月15日，已超过 2 年没有更新，如果文章内容或图片资源失效，请留言反馈，模板下载吧会及时处理，谢谢！

上一篇:

下一篇:

利用短代码给WordPress文章添加卡片式内链教程美化版：等您坐沙发呢！
大牛，别默默的看了，快来点评一下吧！:)。

您必须登录后才能发表评论哦！:)

站内登录 QQ登录 微博登录
wordpress自适应高级图片shejigh主题

相关推荐

Hi, 如果你对这款模板有疑问，可以跟我联系哦！

联系作者

模板下载吧，累计帮助1000+用户成功建站，为草根创业提供助力！

立刻开启你的建站之旅
  • 微信公众号
  • 模板下载吧
  • 官方QQ群
  • 模版下载吧（群1）
  • 模版下载吧（群2）
  • 模版下载吧（群3）

模板下载吧精品模板

周一至周五 9:00-23:00
（其他时间勿扰）

在线咨询
Copyright ©2014-2020 模板下载吧 阿里云 本站安全防护由创宇云安全提供。
-查询153 耗时0.388 内存 34.86MB
商务合作: vip#mbxzb.com(#换成@)
现在加入模板下载吧，注册一个账号 或
账号登录
QQ登录
';

  • 模板下载吧拥有海量网站模板及源码，站长亲测干净无后门。

  • 注册即能下载免费模板栏目资源，帮您更快的完成网站建设。

  • 每日更新模板资源，每日精品推荐，及时获取最新模板资源流行去向。

  • 完美的售后服务，帮助草根站长、企业等成功建站。

  • 将您最爱的资源收藏，建立自己的资源库，并与朋友分享。