WordPress自带嵌入式内链的手机缩放问题替换方案

/ 0评 / 0

WordPress自带的那个卡片式内链,在手机上浏览有些问题,所以得自己手动添加内链功能。

参考:https://www.liaosam.com/wordpress-insert-internal-links.html

在后台的外观,找到主题编辑器,编辑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><span>';
 $content .= get_the_title();
 $content .= '</span><p class="note">';
 $content .= get_the_excerpt();
 $content .= '</p></a></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');

//添加经典编辑器中的按钮
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
}

然后在主题的内建编辑器中(后台-外观-自定义),编辑额外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 a span{font-weight:bold}
.neilian .fl .note{margin:0 0 5px;padding-left:10px;color:#888;font-size:14px}
/*这一行我自己添加了一个object-fit属性,让图片不改变比例同时居中裁剪*/
.neilian .neilian-thumb{width:170px;height:120px;object-fit:cover}

然后就可以通过短代码调用了,比如我需要嵌入ID为123的文章,只需在文中写:

[neilian ids=123]

嵌入多篇文章,ID用英文逗号分隔:

[neilian ids=123,456]

经典编辑器中在文本模式下也会多出一个文章内链的按钮,不过我一般用不上。

最后注意:嵌入的文章必须要有特色图片,不然会显示图片丢失。

最终效果如下:

[neilian ids=10]

发表评论

电子邮件地址不会被公开。 必填项已用*标注