不使用插件让WordPress实现文章标题截断和文章截断 – WordPress 教程

2022年 10月 24日 发表评论
腾讯云正在大促:点击直达 阿里云超级红包:点击领取
免费/便宜/高性价比服务器汇总入口(已更新):点击这里了解

目前,Wordpress CMS(杂志)主题盛行,CMS主题有一个共有的特性就是,首页只显示文章部分内容,也就是俗称的文字截断,这个与真正的WP摘要功能无关,只是控制文章字数显示在首页,真正的WP摘要需要主题的支持,两者不能混为一谈。

不使用插件让WordPress实现文章标题截断和文章截断 – WordPress 教程
wordpress

目前,WordPress CMS(杂志)主题盛行,CMS主题有一个共有的特性就是,首页只显示文章部分内容,也就是俗称的文字截断,这个与真正的WP摘要功能无关,只是控制文章字数显示在首页,真正的WP摘要需要主题的支持,两者不能混为一谈。

那么显示文章部分内容有什么好处呢,那就是既可以增加首页的信息量,方便浏览者快速找到想看的内容,又不会把首页拉的很长,整齐美观,还有什么…想起来再说。

实现文字截断的方法很多

比如:在编辑文章时在适当位置加入more标签、安装启用中文工具箱等,特别是一些国外主题会加入特殊的函数实现文字截断,但中文字符与英文字符的算法不同,对中文的截断不是很理想。这里为大家推荐适合中文截断的方法,这些方法已应用在我制作的热点新闻主题中。

文章截断:

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

用上面的代码替换当前主题archive.php、index.php模板文件中类似:

<?php the_content('Read more...'); ?>

<?php the_excerpt(); ?>

其中数字200是字数,可以适当调整,但最好保持为偶数.

文章标题截断:

很多CMS主题是以分类文章列表形式展示的,但当某个文章标题太长,就会造成回行,很不美观,必须要将多余的文字去掉,比较简单也比较笨拙方法是用CSS截断,可惜当文章标题同时有汉字和英文时问题就明显了,经常是一个字只截断了一半,看上去很古怪。还是定义PHP函数实现标题截断比较合理也非常容易。下面的标题截断函数与文章截断函数同出一辙:

<?php echo mb_strimwidth(get_the_title(), 0, 24, ''); ?>

不过当中文与英文同时存在于标题中时,还是会造成截断不准确,这个问题在文章截断中并不是很明显。

最理想的标题截断方法:

首先将下面的代码添加到主题functions.php模板文件中

//文字截断function cut_str($src_str,$cut_length){$return_str='';$i=0;$n=0;$str_length=strlen($src_str);while (($n<$cut_length) && ($i<=$str_length)){$tmp_str=substr($src_str,$i,1);$ascnum=ord($tmp_str);if ($ascnum>=224){$return_str=$return_str.substr($src_str,$i,3);$i=$i+3;$n=$n+2;}elseif ($ascnum>=192){$return_str=$return_str.substr($src_str,$i,2);$i=$i+2;$n=$n+2;}elseif ($ascnum>=65 && $ascnum<=90){$return_str=$return_str.substr($src_str,$i,1);$i=$i+1;$n=$n+2;}else{$return_str=$return_str.substr($src_str,$i,1);$i=$i+1;$n=$n+1;}}if ($i<$str_length){$return_str = $return_str . '';}if (get_post_status() == 'private'){$return_str = $return_str . '(private)';}return $return_str;}

再用下面的代码

<?php echo cut_str($post->post_title,32); ?>

替换主题模板中的

<?php the_title(); ?>

其中:调整数字32可以控制标题的长度.

小咸鱼

发表评论

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