您好!欢迎来到模板下载吧!本站资源24小时自动发货,请放心选购,一次付费,终身下载,售后请提交工单!

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

开拓者 2018-06-25 WP技术 2261 已收录 本文共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. displayblock;
  3. positionrelative;
  4. width620px;
  5. padding9px;
  6. margin30px auto;
  7. border1px dashed #d4d4d4;
  8. overflowhidden;
  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-decorationnone;
  17. color#313131;
  18. }
  19. .embed-card span,span.embed-card span {
  20. displayblock;
  21. padding-right: 0;
  22. }
  23. .embed-card-category {
  24. displayinline-block;
  25. height20px;
  26. line-height20px;
  27. padding: 0 5px;
  28. font-size12px;
  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. positionabsolute;
  41. top9px;
  42. left: 0;
  43. padding-right5px;
  44. }
  45. .embed-card-img {
  46. floatleft;
  47. margin-right14px;
  48. }
  49. .embed-card-img img {
  50. width180px;
  51. height150px;
  52. }
  53. .embed-card-info {
  54. padding-right4px;
  55. overflowhidden;
  56. }
  57. .embed-card-info .card-name {
  58. font-size16px;
  59. height44px;
  60. line-height22px;
  61. margin-bottom10px;
  62. margin-top7px;
  63. overflowhidden;
  64. text-overflow: ellipsis;
  65. whitewhite-space: normal;
  66. font-weightbold;
  67. }
  68. .embed-card-info .card-tags {
  69. height20px;
  70. overflowhidden;
  71. }
  72. .embed-card-info .card-tags>span {
  73. displayinline-block;
  74. padding: 0 7px;
  75. margin-right8px;
  76. height16px;
  77. border1px solid #eee;
  78. line-height16px;
  79. color#999;
  80. font-size12px;
  81. }
  82. .embed-card-info .card-tags span.tag-noborder {
  83. border: 0;
  84. }
  85. .embed-card-info .card-abstract {
  86. height36px;
  87. line-height18px;
  88. margin5px 0;
  89. font-size12px;
  90. color#666;
  91. overflowhidden;
  92. margin-bottom20px;
  93. }
  94. .embed-card-info .card-controls {
  95. overflowhidden;
  96. line-height28px;
  97. }
  98. .embed-card-info .card-controls .group-data {
  99. floatleft;
  100. margin-right10px;
  101. color#999;
  102. font-size12px;
  103. }
  104. .embed-card-info .card-controls .group-data i {
  105. margin-right5px;
  106. font-stylenormal!important;
  107. }
  108. .embed-card-info .card-btn-deep {
  109. float: rightright;
  110. width68px;
  111. height28px;
  112. margin-left10px;
  113. line-height28px;
  114. text-aligncenter;
  115. font-size12px;
  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-left9px;
  131. }
  132. .embed-card .embed-card-img img {
  133. width: 100%;
  134. heightauto;
  135. }
  136. .embed-card .embed-card-info {
  137. overflowvisible;
  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+用户成功建站,为草根创业提供助力!

立刻开启你的建站之旅
现在加入模板下载吧,注册一个账号
  • 模板下载吧拥有海量网站模板及源码,站长亲测干净无后门。

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

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

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

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