WordPress如何摘要限制标题字数

在我们设计主题或是二次开发主题的时候,为了外观的美观,我们玩玩要考虑长标题对元素带来的影响,比如长标题能导致宽度或是高度溢出。特别是在当下流行的网格设计和瀑布流设计时。这时候我们就需要对标题进行修饰或是摘断。下面我们看看几种常见的摘断方法。

elements-envato Wordpress如何摘要限制标题字数

1、不用修改代码的hook方法。

本代码是通过hook自定义the_title() or get_the_title(),通过本代码你无需修改你主题各个调用文章标题的具体代码,您只需要把下面的代码放置在您的主题的funtions.php里面即可。

function ietheme_shorten_title( $title ) {
    $newTitle = substr( $title, 0, 20 ); // Only take the first 20 characters 
    return $newTitle . " …"; // Append the elipsis to the text (...) 
}
add_filter( 'the_title', 'ietheme_shorten_title', 10, 1 );

2、直接修改标题调用,这里就是把下面的代码替换原来的获取标题代码。使用的是wordpress官方提供的函数,简单方便。

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

3、css摘断,这是本方法最好的摘断方式,这样既不影响标题完整性,还一样的做到美观。重要的是完整的标题更有利于SEO

/*one line*/
.card-title {
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
}
/*two or n line*/
.card-title {
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-line-clamp: 2;/*line number*/
   -webkit-box-orient: vertical;
}

综上,为了SEO,我们推荐第三种方法,它既有前面两种的效果,而不会强制摘断标题。具体可以看本站的首页网格元素和本文末尾的相关文章章节。

elementor Wordpress如何摘要限制标题字数

本文已在Ie主题99839发布

文章来源:https://ietheme.com/excerpt-length-for-title.html


发表评论

撰写评论

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

加入我们

注册完成!

密码重置

请输入您的邮箱地址。 您将收到一个链接来创建新密码。

检查你的邮件中的确认链接。