×

the_title() 与 the_title_attribute() 的正确用法

优畅主题 Wordpress技术 2013-08-02 16:52 3,662 0 条评论

WordPress提供了一个非常简单方便的函数来显示当前文章的标题,那就是:the_title()。这个函数经常被开发者在 header,post,page,loop,footer 里使用,这几乎是开发主题里最常用的函数之一,然而许多开发者并没有意识到这里有个地方并不应该使用此函数,那就是在 attributes 里,如:

title="<?php the_title(); ?>" 改写成 title="<?php the_title_attribute(); ?>"

为什么要这样写,大家看看 WordPress 源文件中的相关函数核心文件便知了: the_title() 源代码:

/**
 * Display or retrieve the current post title with optional content.
 *
 * @since 0.71
 *
 * @param string $before Optional. Content to prepend to the title.
 * @param string $after Optional. Content to append to the title.
 * @param bool $echo Optional, default to true.Whether to display or return.
 * @return null|string Null on no title. String if $echo parameter is false.
 */
function the_title($before = '', $after = '', $echo = true) {
 $title = get_the_title();
 if ( strlen($title) == 0 )
 return;
 $title = $before . $title . $after;
 if ( $echo )
 echo $title;
 else
 return $title;
}

这个函数并没有提供给我们有效的信息,只是执行了 get_the_title() 函数,我们再看下这个函数的相关文件.

/**
 * Retrieve post title.
 *
 * If the post is protected and the visitor is not an admin, then "Protected"
 * will be displayed before the post title. If the post is private, then
 * "Private" will be located before the post title.
 *
 * @since 0.71
 *
 * @param mixed $post Optional. Post ID or object.
 * @return string
 */
function get_the_title( $post = 0 ) {
 $post = get_post( $post );
 $title = isset( $post->post_title ) ? $post->post_title : '';
 $id = isset( $post->ID ) ? $post->ID : 0;
 if ( ! is_admin() ) {
 if ( ! empty( $post->post_password ) ) {
 $protected_title_format = apply_filters( 'protected_title_format', __( 'Protected: %s' ) );
 $title = sprintf( $protected_title_format, $title );
 } else if ( isset( $post->post_status ) && 'private' == $post->post_status ) {
 $private_title_format = apply_filters( 'private_title_format', __( 'Private: %s' ) );
 $title = sprintf( $private_title_format, $title );
 }
 }
 return apply_filters( 'the_title', $title, $id );
}

这个函数非常简单,它用 get_post() 取回了post object,然后把它传递给一个叫做 the_title的filter,返回 $post->post_title

这个函数最重要的地方就是

 apply_filters( ‘the_title’, $title, $id );

这个 filter 可以提供给开发者自定义标题的输出形式,比如添加额外的 html 标签。

the_title_attribute() 源代码:

/**
 * Sanitize the current title when retrieving or displaying.
 *
 * Works like {@link the_title()}, except the parameters can be in a string or
 * an array. See the function for what can be override in the $args parameter.
 *
 * The title before it is displayed will have the tags stripped and {@link
 * esc_attr()} before it is passed to the user or displayed. The default
 * as with {@link the_title()}, is to display the title.
 *
 * @since 2.3.0
 *
 * @param string|array $args Optional. Override the defaults.
 * @return string|null Null on failure or display. String when echo is false.
 */
function the_title_attribute( $args = '' ) {
 $title = get_the_title();
 if ( strlen($title) == 0 )
 return;
 $defaults = array('before' => '', 'after' => '', 'echo' => true);
 $r = wp_parse_args($args, $defaults);
 extract( $r, EXTR_SKIP );
 $title = $before . $title . $after;
 $title = esc_attr(strip_tags($title));
 if ( $echo )
 echo $title;
 else
 return $title;
}

这个函数也使用了 get_the_title() 函数来取回文章的标题,但是最后返回的数据却与the_title() 函数不同。这里过滤掉了许多转义字符与html标签,能够更加安全的在元素属性里进行使用。

详细例子:

假设你的

$post->post_title

是这样的

<span class="title">

这是有span标签的标题</span>
当你使用 the_title() 函数,输出将保持不变,还是如下

<span class="title">

这是有span标签的标题</span>
但是当你使用 the_title_attribute(),你的输出是如下的

这是有span标签的标题
注意这里的span标签已经被移除掉了.

又假如如果你的标题里有双引号,如下

这是一个带 "双引号" 的标题
当你使用 the_title() 函数,输出如下

这是一个带 "双引号" 的标题
但是当你使用 the_title_attrubute() 函数,输出却如下

这是一个带 \"双引号\" 的标题
注意到这里自动把双引号替换成转义字符了,这样就保证了html标签属性的安全使用。

如果我们在html标签属性里使用 the_title() 函数,则会破坏掉属性原有的形式

<span title="<?php the_title(); ?>"><?php the_title(); ?></span>

输出将会如下:

<span title="这是一个带 "双引号" 的标题">这是一个带”双引号”的标题</span>
注意到了这里的title属性的引号,html标签对引号的使用是非常严格的,禁止这样的形式出现,一旦出现将导致页面严重的显示问题.

经过以上的分析,希望开发者们在以后的开发过程中能注意到这些小细节,在html标签属性里一定要使用 the_title_attribute() 函数而不是 the_title() 函数!


如果本文对你有帮助,你可以扫描右边的二维码打赏,谢谢支持
联系优畅:uctheme#qq.com (#改为@)
微信订阅号:优畅主题(uctheme)
官网淘宝店:http://uctheme.taobao.com
版权声明:版权归 优畅主题 所有,转载请注明出处!
转载请保留链接: https://www.uctheme.com/technical/438.html
谢谢支付宝打赏
谢谢微信打赏

品牌创立:2012-11-18优畅主题

优畅主题成立于2012年11月18日,专业Wordpress导购主题开发商,拥有多年Wordpress主题设计经验,专门为淘宝客和导购客站长量身打造高端赚钱模板,我们注重细节,有着严谨的开发态度,一切从客户角度出发,如果你也喜欢 WordPress导购主题,欢迎和我们一起交流!


你必须 登录 后才能发表评论。

目前还没有评。

切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

切换登录

注册