分类
WordPress教程

WordPress首页截断和缩略图的解决办法

实现的效果是(我想很多人也是想实现这样的效果):

1.首页每篇文章可设定字数,整齐的截断

2.首页每篇文章显示一张图片,而文章页不显示该图片

为此有如下几个方案(只想看结果的就可以忽略这部分了):

1.纯用more标签

也就是我以前的做法,这种最简单,但是很难保证首页每篇文章的字数完全一样。而且内容页中也会出现首页的图片。

2.使用mb_strimwidth()函数

这个函数的作用是将一段文字截取一定的物理长度显示,且它最大的优点是会根据”宽度”来截取文字,全角字符宽度为2,半角字符为1,只要我们将截断的宽度设置为偶数,那最后截断输出的内容一定不会有乱码。有些所谓自动截断的插件也是这个原理。

但是,有个问题就是如果截断的位置正好是html标签,那么就会出现问题,比如侧边拦掉到下面去。所以侧边拦的问题有时并不是因为css,而是因为这个。

综上,解决方法是:mb_strimwidth()函数+自定义域

首先,写文章的时候,插入自定义域如下

名称:imgs(自己起的),值:首页显示的图片地址

然后在主题的index.php中放置图片的地方写代码:

<?php if ( get_post_meta($post->ID, 'image', true) ) : ?>
  <?php $image = get_post_meta($post->ID, 'image', true); ?>
  <a href="<?php echo $image; ?>"><img src="<?php echo $image; ?>" /></a>
<?php else: ?>
  <img src="<?php bloginfo('template_directory'); ?>/imgs/title.jpg" />
<?php endif; ?>

其中,title.jpg是放置在主题文件夹下的默认图片,如没有定义图片,就会显示这张。此外,为图片加链接是为了lightbox效果。

然后,把内容部分代码,也就是th_content()或者the_expert()换成如下:

<?php echo mb_strimwidth(strip_tags(apply_filters('the_content', $post->post_content)), 0, 140,"......"); ?>

其中140是截断的字符数,strip_tags()是去掉html标签。我也想过用strip_tags()的同时排除img标签的做法,但如果内容中有图片,且刚好截断到该图片的时候同样会出现问题。

当然,为了美观,还要为图片定制样式,比如float和边框。