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

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

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

[neilian ids=1046]

一、PHP 代码部分

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

// 内链图片src
 function liao_the_thumbnail_src() {
 global $post;
 if ( get_post_meta($post->ID, 'thumbnail', true) ) { //如果有缩略图,则显示缩略图
 $image = get_post_meta($post->ID, 'thumbnail', true);
 return $image;
 } else {
 if ( has_post_thumbnail() ) { //如果有缩略图,则显示缩略图
 $img_src = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), "Full");
 return $img_src[0];
 } else {
 $content = $post->post_content;
 preg_match_all('/<img.*?(?: |\\t|\\r|\\n)?src=[\'"]?(.+?)[\'"]?(?:(?: |\\t|\\r|\\n)+.*?)?>/sim', $content, $strResult, PREG_PATTERN_ORDER);
 $n = count($strResult[1]);
 if($n > 0){
 return $strResult[1][0]; //没有缩略图就取文章中第一张图片作为缩略图
 }else {
 $random = mt_rand(1, 76);
 return get_template_directory_uri().'/img/random/'. $random .'.jpg'; //文章中没有图片就在 random 文件夹下随机读取图片作为缩略图
 }
 }
 }
 }


//给文章加内链
 function liao_insert_posts( $atts, $content = null ){
 extract( shortcode_atts( array(
 'ids' => ''
 ),
 $atts ) );
 global $post;
 $content = '';
 $postids = explode(',', $ids);
 $inset_posts = get_posts(array('post__in'=>$postids));
 foreach ($inset_posts as $key => $post) {
 setup_postdata( $post );
 $content .= '<div class="neilian"><div class="fl"><a target="_blank" href="' . get_permalink() . '" class="fl"><i class="fa fa-link fa-fw"></i>';
 $content .= get_the_title();
 $content .= '</a><p class="note">';
 $content .= get_the_excerpt();
 $content .= '</p></div><div class="fr"><a target="_blank" href="' . get_permalink() . '"><img src=';
 $content .= liao_the_thumbnail_src();
 $content .= ' class="neilian-thumb"></a></div></div>';
 }
 wp_reset_postdata();
 return $content;
 }
 add_shortcode('neilian', 'liao_insert_posts');

二、CSS样式

.fl{float:left}
.fr{float:right}
.neilian{margin-bottom:25px;padding:10px;width:100%;height:170px;border:1px solid #e8e8e8;background:#fff;box-shadow:0 1px 0 rgba(0,0,0,.1);cursor:pointer;-webkit-transition:box-shadow 218ms;-moz-transition:box-shadow 218ms;-o-transition:box-shadow 218ms;transition:box-shadow 218ms}
.neilian:hover{box-shadow:0 1px 8px 1px rgba(0,0,0,.1)}
.neilian .fl{width:72%}
.neilian .fr{padding:10px 5px;width:24%}
.neilian .fl a{display:block;margin-right:15px;padding:8px 5px;width:100%;color:#35a56b!important;text-decoration:none;font-size:16px;border:none}
.neilian .fl .note{margin:0 0 5px;padding-left:10px;color:#888;font-size:14px}
.neilian .neilian-thumb{width:170px;height:120px}

三、短代码调用方法

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

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

效果如下:

[neilian ids=1064,868,878]

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

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

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

add_action('after_wp_tiny_mce', 'add_button_mce');
function add_button_mce($mce_settings) {
?>
<script type="text/javascript">
 QTags.addButton( 'nl', '文章内链', '[neilian ids=]', '');
 </script>
<?php
}

效果如图:

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

未经允许不得转载:去看你博客 » 利用短代码给WordPress文章内创建图文内链
分享到:
赞(0)

评论15

评论前必须登录!

  1. #6
    非常感谢,正需要呢
    自然2019-06-16 19:42:15
    • 手机浏览好像会变形,需要自己调整下样式
      vijay2019-06-16 19:43:06
      • 我发现“发表评论并刷新,才能查看”功能异常,评论刷新后依然无法看见内容 我的博客也是这个情况,我不清楚是否为我的电脑问题
        自然2019-06-16 23:34:04
  2. #5
    图都炸了!
    猫叔2019-06-16 19:57:27
  3. #4
    实际使用测试中
    自然2019-06-16 23:32:33
  4. #3
    $content .= get_the_title(); $content .= ''; $content .= get_the_excerpt(); $content .= ' 上述代码中标签移动到 $content .= '后面会更好,修正点击文字不会跳转的问题
    自然2019-06-17 20:47:44
    • 你说的是点击文章内容摘要吗?
      vijay2019-06-17 20:49:25
      • 对,修改一下a标签结束位置,评论被转译了 后台你应该可以看见
        自然2019-06-17 20:50:27
  5. #2
    非常感谢,正需要呢
    min2019-08-01 23:40:36
  6. #1
    这个功能我以前也折腾过好久,只弄个半成品,哈哈~
    99八十一2019-08-24 15:35:31
    • 我感觉你那个内链比我这个要好很多啊!还带访问量和浏览量
      vijay2019-08-24 15:36:53

网站改版中

去看你博客