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

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

WordPress文章添加卡片式内链

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

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

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

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

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

  1. /**
  2. * 卡片式文章内链功能
  3. * https://www.mbxzb.com
  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 有积极的作用,也让文章更加的丰满,何乐而不为呢?

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
7. 如果您也有好的资源或教程,您可以投稿发布,成功分享后有M币奖励和额外收入!

模板下载吧 WP技术 利用短代码给WordPress文章添加卡片式内链教程美化版 https://www.mbxzb.com/blog/file/wordpress/10672.html

常见问题
  • 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。
查看详情
  • 最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用
查看详情

相关文章

评论
暂无评论
点击按钮快速添加回复内容: 支持 高兴 激动 给力 加油 苦寻 生气 回帖 路过 威武 友军 顶贴
官方客服团队

为您解决烦忧 - 24小时在线 专业服务

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

分享本文封面