陌小雨自用 xiu 主题首页的 cms 布局是自适应的,不过存在一个问题,如下图:
即当上一个文章标题太长时,cms 布局会出现错位,今天陌小雨就分享陌小雨是如何修复该 BUG 的,解决思路就是截取文章标题,从 wordpress 大学找到相关教程,功能代码:
//标题截断 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,40); ?>
根据你的主题修改截取字数,陌小雨用的是 40。请按需修改。
很惭愧的说,最开始我怎么试怎么试,首页都被我刷新了无数次,都不行,后来才发现原来是我调用位置放错了,放在了title=""
这个里面,⊙﹏⊙b 汗
2016 年 4 月 20 日更新:
还有另外两种办法,一是只需要用 css 就可以实现:
.post-title{ width:250px; /* 限制宽度(可选) */ white-space:nowrap; /* 禁止自动换行 */ overflow:hidden; /* 隐藏溢出的内容 */ text-overflow:ellipsis; /* 溢出文本使用...代替 */ }
其中 post-title 为你的 id 或 class 标题容器
另外一个就是用 WordPress 自带的函数
function customTitle($limit) { $title = get_the_title($post->ID); if(strlen($title) > $limit) { $title = substr($title, 0, $limit) . '...'; } echo $title; }
在需要输出标题的地方用下面函数调用即可:
<?php customTitle(30); ?>
以上 3 种办法可以根据你的代码结构来选取,有的用 css 方便点,有的感觉用函数方便点。
你可能对这些文章感兴趣:
- WordPress网站利用body_class()实现多种布局
- 博客文章底部的随机语言是怎么实现的?
- WordPress插件推荐:xiu主题开启ajax和全站无刷新音乐的办法
- xiu主题手机端显示侧边栏
- xiu主题的手机端和非手机端广告位后台设置是如何实现的?
- 给xiu主题添加一个浮动小人
- 分享适合xiu主题的多说评论样式
- xiu主题修改社交字符
- xiu主题给评论添加签到按钮
- xiu主题添加vip等级评论样式
- xiu主题文章版权申明优化
- 分享陌小雨博客导航外链跳转样式及xiu主题评论用户名外链修改办法
- xiu主题仿dux主题搜索弹出框,让百度站内搜索和wordpress自带搜索共存。
- 美化xiu主题Blockquote样式