利用短代码给WordPress文章内创建图文内链

2019-06-1619:35:22 10 155

利用短代码给WordPress文章内创建图文内链

文章的内部链在搜索引擎优化链接建设中一直非常重要,良好的内部链结构对搜索引擎优化非常有利。当您在当前文章页面的站点中调用其他文章或页面时,主动向页面添加内部链可以大大提高抓取蜘蛛的数量和深度,并增加收录的数量。

内部链接的常见形式是带有结构的文本链接。然而,为了增强用户体验,我们可以丰富内部链接页面或文章。经常在网上阅读文章时,你可能经常会发现文章中插入了缩略图和内容的摘要,如:

一、PHP 代码部分

在 wordpress主题的 functions.php 中加上以下代码:

  1. // 内链图片src
  2.  function liao_the_thumbnail_src() {
  3.  global $post;
  4.  if ( get_post_meta($post->ID, 'thumbnail', true) ) { //如果有缩略图,则显示缩略图
  5.  $image = get_post_meta($post->ID, 'thumbnail', true);
  6.  return $image;
  7.  } else {
  8.  if ( has_post_thumbnail() ) { //如果有缩略图,则显示缩略图
  9.  $img_src = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), "Full");
  10.  return $img_src[0];
  11.  } else {
  12.  $content = $post->post_content;
  13.  preg_match_all('/<img.*?(?: |\\t|\\r|\\n)?src=[\'"]?(.+?)[\'"]?(?:(?: |\\t|\\r|\\n)+.*?)?>/sim', $content$strResult, PREG_PATTERN_ORDER);
  14.  $n = count($strResult[1]);
  15.  if($n > 0){
  16.  return $strResult[1][0]; //没有缩略图就取文章中第一张图片作为缩略图
  17.  }else {
  18.  $random = mt_rand(1, 76);
  19.  return get_template_directory_uri().'/img/random/'. $random .'.jpg'; //文章中没有图片就在 random 文件夹下随机读取图片作为缩略图
  20.  }
  21.  }
  22.  }
  23.  }
  24. //给文章加内链
  25.  function liao_insert_posts( $atts$content = null ){
  26.  extract( shortcode_atts( array(
  27.  'ids' => ''
  28.  ),
  29.  $atts ) );
  30.  global $post;
  31.  $content = '';
  32.  $postids = explode(',', $ids);
  33.  $inset_posts = get_posts(array('post__in'=>$postids));
  34.  foreach ($inset_posts as $key => $post) {
  35.  setup_postdata( $post );
  36.  $content .= '<div class="neilian"><div class="fl"><a target="_blank" href="' . get_permalink() . '" class="fl"><i class="fa fa-link fa-fw"></i>';
  37.  $content .= get_the_title();
  38.  $content .= '</a><p class="note">';
  39.  $content .= get_the_excerpt();
  40.  $content .= '</p></div><div class="fr"><a target="_blank" href="' . get_permalink() . '"><img src=';
  41.  $content .= liao_the_thumbnail_src();
  42.  $content .= ' class="neilian-thumb"></a></div></div>';
  43.  }
  44.  wp_reset_postdata();
  45.  return $content;
  46.  }
  47.  add_shortcode('neilian', 'liao_insert_posts');

二、CSS样式

此处为隐藏的内容!
发表评论并刷新,才能查看

三、短代码调用方法

在 文章(post) 内容编辑器 可视化(Visual) 或 文本(text) 状态下,直接使用[neilian ids=postID1,postID2...]的格式即可调用。

比如,我要显示3个内链文章,就直接写短代码:[neilian ids=1064,1045,1021]

效果如下:

如果你不是在文章内容中,而是在其他地方调用,则可使用do_shortcode('[neilian ids ids=postID1,postID2]')来调用。

四、后台文本状态下添加快捷按钮

WordPress 默认内置的是 TinyMCE 编辑器。如果是在文本状态下增加按钮是很简单的,直接在 functions.php 文件里添加代码:

  1. add_action('after_wp_tiny_mce', 'add_button_mce');
  2. function add_button_mce($mce_settings) {
  3. ?>
  4. <script type="text/javascript">
  5.  QTags.addButton( 'nl', '文章内链', '', '');
  6.  </script>
  7. <?php
  8. }

效果如图:

利用短代码给WordPress文章内创建图文内链

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:10   其中:访客  6   博主  4

    • avatar 自然 谷歌浏览器 Windows 10 2

      非常感谢,正需要呢

        • avatar vijay 博主 QQ浏览器 Windows 10

          @自然 手机浏览好像会变形,需要自己调整下样式

            • avatar 自然 谷歌浏览器 Windows 10 2

              @vijay 我发现“发表评论并刷新,才能查看”功能异常,评论刷新后依然无法看见内容
              我的博客也是这个情况,我不清楚是否为我的电脑问题

                • avatar vijay 博主 谷歌浏览器 Windows 10

                  @自然 可能是缓存的原因

            • avatar 猫叔 谷歌浏览器 Windows 7 3

              图都炸了!

                • avatar vijay 博主 QQ浏览器 Windows 10

                  @猫叔 哈哈,现在在改样式。

                • avatar 自然 谷歌浏览器 Windows 10 2

                  实际使用测试中

                  • avatar 自然 谷歌浏览器 Windows 10 2

                    $content .= get_the_title();
                    $content .= ‘‘;
                    $content .= get_the_excerpt();
                    $content .= ‘

                    上述代码中标签移动到 $content .= ‘后面会更好,修正点击文字不会跳转的问题

                      • avatar vijay 博主 谷歌浏览器 Windows 10

                        @自然 你说的是点击文章内容摘要吗?

                          • avatar 自然 谷歌浏览器 Windows 10 2

                            @vijay 对,修改一下a标签结束位置,评论被转译了
                            后台你应该可以看见