修改模板的3个小经验

2010-08-30 16:38

一方面,项目杀青(呃,钱还没到账),另一方面,这会儿终于把新模板给整好了,撒花~  不过,也因为修改模板,界面一会儿一个样,严重影响了阅读和访问,给读者和链友说声抱歉。

话说,制作的过程也是学习的过程(也是玩的过程),现在来小分享下自己的所得。“小”在其不常见,却能在细节上提高用户体验。

id与class的优先级

缘起:为了更好地格式化网页文本,增强可读性。我特地把<h1><h2><h3>标签在单篇文章页(single.php)做了显示增强处理,比如上一行是<h1>。但是,如若把样式用到索引页(index.php),效果则不堪入目了。

index.php简化如下:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>id与class优先级测试</title>

<style>

#content .post{color:red;}

.excerpt{color:blue;}

</style>

</head>

<body>

<div id="content">

<div class="post excerpt">

<h2 class="indexH2">标题</h2>

<div class="entry">文章内容</div>

<p class="postmetadata">发布日期</p>

</div>

</div>

</body>

</html>

测试结果是,文字是红色的,而不是蓝色。这就说明了,id的优先级高于class,即便单独写一个子类。

解决这个问题的办法是:统一定义,要么用id来重写相关样式,要么用class。

使用<tabindex>标签

缘起:在填写表单时,相比一个一个鼠标单击,我更宁愿使用键盘上的tab键。本页共有5个<input>和<textarea>在页脚,2个<input>在边栏。但按下tab键时,光标聚焦的顺序并不理想。

<tabindex>可以设置按钮的tab键控制次序。

这样,就可以依次在各个表单控件里加上此属性,光荣完成任务。因为右侧边栏的搜索框几乎用不着tab聚焦,所以设置tabindex=”-1″,排除序列之外。

博客大巴“匿名评论”的此标签设置有误,所以心有余而力不足,用tab键更难访问了。

使用mb_strimwidth()函数

缘起:我的博文往往都在800字以上,所以很有必要在首页显示摘要。

这个函数就能很好地完成这个任务,不使用插件。在需要显示的地方替换成:


<?php echo mb_strimwidth(strip_tags(apply_filters('the_content', $post->post_content),'<p><h1><h2><div>'), 0, 700,"&nbsp;<span class='readMore'>更多...</span>"); ?>

apply_filters( )见文末参考资料。

strip_tags( )函数用来剔除html标签,其中保留了<p>等,这样就可以完整展现文章结构。

mb_strimwidth( )函数进行多字节语言的指定宽度拦截,我设置的是700个单位,超过了长度则追加&nbsp;<span class=’readMore’>更多…</span>。

虽然这样解决了我的问题,但是,用了该函数,很容易造成跑版,比如边栏掉到底下去了。按理,mb_substr( )函数有异曲同工之能,替换之,结果跑版也跟着“异曲同工”了。后来通过摸索,发现是apply_filters( )函数的问题,去掉后便不再跑版,缺憾是无法识别<div>标签。原因不明。

参考资料

01 查尔斯 《创建自己的过滤器》http://sexywp.com/create-your-own-filter.htm

最近更新:2010年9月6日

5 条评论 / 引用:

  1. 陈剑:

    我不太喜欢乱改模板,一般都是哪里不爽就改哪里而已

  2. 崔凯(小轰):

    @陈剑
    这不是乱改模板,同学……

  3. 古博:

    上次你说了我的h2和h3样式,看来我也要好好考虑一下这个问题了。
    另外,h1在每个页面里应该只有一个,就是这个页面的核心内容,其它的不应该作为h1出现。说到这个,我突然想到我的博客上h1标签是给了博客名称,回头我得好好改改

  4. 崔凯(小轰):

    @古博
    就是嘛,博客名称给标签就可以了,标题用。我以前的文全部都用了123,所以现在修改起来非常麻烦,索性就没用了。由于改这个新模板非常匆忙,样式表上也出现了点问题,容后再座修正吧 : )

  5. 修改模板的3个小经验:

    […] View full post on 时光立方 […]

评论

《对话守则》第一条:对话的目的是寻求真理。

以下选填: