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

投稿   雅兮网  2018-03-30 07:37:32  424 人阅读  37 条评论

写博客的时候经常需要在文章中添加内链,一方面是为了增加文章关联度,提高 SEO 效果;更重要的是适当的引用文章,也可以让内容更加丰满,对用户体验上也是有提高;但是常规的文章内链一般就是直接放一个链接进去,简单粗暴但是用户体验不是很好。

利用WordPress短代码给文章添加卡片式内链教程 WordPress 第1张

WordPress 在 4.4 版本后增加了 Post Embed 功能,可以把要引用的文章以嵌入式卡片展现出来,如下图所示:

利用WordPress短代码给文章添加卡片式内链教程 WordPress 第2张

但是在实际使用中,飞鸟认为这个功能不太实用。除了样式上单一外,我们查看源码发现它会以 js 的形式来输出一个 iframe 框架,这对 SEO 非常不好;其次从实际的加载效果上看,这个“卡片”加载的非常不流畅,体验很差!所以飞鸟直接在主题里禁用了 Post Embed 功能,详见《禁用 WordPress 的 Embed 功能 移除加载 wp-embed.min.js 文件》。

在参考了@龙笑天下@大发等博主的文章后,飞鸟采用短代码给文章添加卡片式内链,通过 get_posts 自定义调用文章的图片、标题、发布时间等内容,直接以 html 的形式在前台加载,在一定程度上提高了用户体验,实际效果如下:

利用WordPress短代码给文章添加卡片式内链教程 WordPress 第3张

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

  1. /**
  2. * 卡片式文章内链功能
  3. * https://www.yaxi.net/2018-03-20/1741.html
  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-spacenormal;
  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. floatrightright;
  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. }

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

  1. [yx_embed_post ids=123,245]

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

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

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

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

历史上的今天:

如果文章对你有帮助,请赞赏支持作者继续创作!

文章标签: ,   ,   ,  
原文地址:https://www.yaxi.net/2018-03-20/1741.html
温馨提示:文章内容仅代表作者个人观点,不代表boke112导航赞同其观点和对其真实性负责!
版权声明:本文为投稿文章,感谢 雅兮网 的投稿,版权归原作者所有,欢迎分享本文,转载请保留出处!
雅兮网

相关文章 分类热门分类热评最新问答

 发表评论(本站有缓存,一般1个小时后可看到您的评论)

中国赞表情摊手表情吃瓜表情笑哭表情偷笑表情衰表情汗表情思考表情费解表情抓狂表情晕表情流泪表情疑问表情嘻嘻表情吃惊表情鼓掌表情

  1. 煮酒慰风尘
    煮酒慰风尘 @回复

    试了一次,好像失败了,不知道啥原因,回头再试试!

  2. 陈鑫威博客
    陈鑫威博客 @回复

    学习了 [嘻嘻]

  3. 宋子宪博客
    宋子宪博客 @回复

    不错的帖子

  4. 小白蜀黍网赚
    小白蜀黍网赚 @回复

    技术贴,学习了

  5. 西枫里博客
    西枫里博客 @回复

    车长光样式就写了144行,厉害~

  6. GDP数据网
    GDP数据网 @回复

    现在我选择用Zblog玩玩,,

  7. 王商博客
    王商博客 @回复

    从来没折腾这些,看来没事还得折腾下。

  8. 清风小墨
    清风小墨 @回复

    一直在找,终于找到了,谢谢!

  9. 微商软件大神
    微商软件大神 @回复

    学习了啊 好教程

  10. NICE分享网
    NICE分享网 @回复

    WP更受欢迎啊,ZB感觉用的人挺多,但是写相关东西的感觉很少

  11. 橘子书
    橘子书 @回复

    哇哦,恭喜雅兮车长加入文章内链大本营!

  12. 朱曙明SEO博客
    朱曙明SEO博客 @回复

    使用了下 没有成功,不知道怎么回事

  13. 码农BTS
    码农BTS @回复

    这个挺好的

  14. 悦色
    悦色 @回复

    好像不错哦

  15. 励志语录
    励志语录 @回复

    不错的教程 [赞] [赞]

  16. 米粒博客
    米粒博客 @回复

    我的博客什么优化SEO都没,随便折腾,要学习学习才行,不然老是整不出点东西 [悲伤]

  17. 明月登楼
    明月登楼 @回复

    嘿嘿,我的主题好像都禁用 WordPress 的这个引用了!

  18. 学习笔记Blog
    学习笔记Blog @回复

    不错,很好看的卡片!

  19. 阿友
    阿友 @回复

    wordpress还是好,教程多,插件多

  20. 银色月航
    银色月航 @回复

    可以用插件啊

  21. 沈唁志
    沈唁志 @回复

    看着不错 可以试试

  22. 云南松花粉官网
    云南松花粉官网 @回复

    这个功能不错,去试试。

  23. 薅羊毛
    薅羊毛 @回复

    不错的样子 不过WP我是玩不赚

  24. 钟水洲博客
    钟水洲博客 @回复

    收藏了,过几天玩玩wordpress

  25. 靠谱学生兼职网
    靠谱学生兼职网 @回复

    这个卡片式看起来很高大尚

  26. 煮只鸡
    煮只鸡 @回复

    支持过了,再支持一下! [嘻嘻]

  27. 趣知识
    趣知识 @回复

    这属于最新的小技巧吧

  28. 烤德香
    烤德香 @回复

    我原来看蜘蛛爬行记录,有爬行过,

  29. 清秋暖冬
    清秋暖冬 @回复

    昨天刚在你博客学习过,今天就在博客112看到了 [嘻嘻]

  30. 里维斯社
    里维斯社 @回复

    这个功能蛮实用的

  31. 笛声
    笛声 @回复

    不会适配CSS,所以没弄

  32. 梁兴健
    梁兴健 @回复

    扒一下首页文章列表就行了 [阴险]