文章的内部链接，在搜索引擎优化链接建设中一直非常重要，良好的内部链结构对搜索引擎优化非常有利。今天王小优给小伙伴们分享一下利用短代码在文章中添加卡片式文章内链的方法。
网上的效果对比
百度上的方法大多是利用iframe引入文章简介，或者改进后的方法，样式虽然漂亮，但是对于小白站长而言使用上有一定的困难，且iframe引入并不例如搜索引擎优化，还容易被运营商植入广告。
内部链接的常见形式是带有结构的文本链接。然而，为了增强用户体验，我们可以丰富内部链接页面或文章。经常在网上阅读文章时，你可能经常会发现文章中插入了缩略图和内容的摘要，例如：
- [yx_embed_post ids=1076]
修改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样式
使用知更鸟Begin主题的小伙伴可以在WordPress后台→外观→主题选项→风格定制→自定义样式中添加以下CSS代码。
使用其他WordPress主题的站长可以将下面的CSS代码添加到主题的style.css文件中，这个方法同样适用于知更鸟Begin主题。
- .fl{float:left}
- .fr{float:rightright}
- .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}
短代码调用方法
在文章内容编辑器切换为文本模式下，直接使用下面的格式即可调用。
例如：我要在文章中调用其他文章ID为1076、1053、1049的三篇文章，将编辑器切换为文本模式，在需要调用的地方直接写短代码：
- [neilian ids=1076,1053,1049]
在实际调用是，将以上的数字改为你的文章ID，还可以想调用多少篇就调用多少篇，注意：每个ID之间要用英文状态的逗号,隔开。
后台文本状态下添加快捷按钮
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( 'natural_nl', '文章内链', "【neilian ids=文章id】", '');
- </script>
- <?php
- }
效果图
小结
当你在当前文章页面的站点中调用其他文章或页面时，主动向页面添加内部链可以大大提高抓取蜘蛛的数量和深度，并增加收录的数量。这是一个既美观，又有搜索引擎优化作用的操作，还没上手的小伙伴赶紧试试吧。
- 我的微信
- 微信扫一扫
-
- 我的微博
- 微博扫一扫
-
评论