WordPress中the_title()與the_title_attribute()的區(qū)別

WordPress提供了一個非常簡單方便的函數(shù)來顯示當(dāng)前文章的標(biāo)題，那就是：the_title()。這個函數(shù)經(jīng)常被開發(fā)者在 header，post，page，loop，footer 里使用，這幾乎是開發(fā)主題里最常用的函數(shù)之一，然而許多開發(fā)者并沒有意識到這里有個地方并不應(yīng)該使用此函數(shù)，那就是在 attributes 里，如：

<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">繼續(xù)閱讀 <?php the_title(); ?></a>

很多開發(fā)者在 loop，page，post 里使用這樣的寫法設(shè)置一個超鏈接到指定的文章，看起來似乎并沒有什么問題，但其實正確安全的寫法應(yīng)該把 title="<?php the_title(); ?>" 改寫成 title="<?php the_title_attribute(); ?>"

為什么要這樣寫，大家看看 WordPress 源文件中的相關(guān)函數(shù)核心文件便知了:

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;
}

這個函數(shù)并沒有提供給我們有效的信息,只是執(zhí)行了 get_the_title() 函數(shù)，我們再看下這個函數(shù)的相關(guān)文件.

/**
 * 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 );
}

這個函數(shù)非常簡單，它用 get_post() 取回了post object，然后把它傳遞給一個叫做 the_title的filter，返回 $post->post_title

這個函數(shù)最重要的地方就是 apply_filters( ‘the_title’, $title, $id );

這個 filter 可以提供給開發(fā)者自定義標(biāo)題的輸出形式，比如添加額外的 html 標(biāo)簽。

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;
}

這個函數(shù)也使用了 get_the_title() 函數(shù)來取回文章的標(biāo)題，但是最后返回的數(shù)據(jù)卻與the_title() 函數(shù)不同。這里過濾掉了許多轉(zhuǎn)義字符與html標(biāo)簽，能夠更加安全的在元素屬性里進(jìn)行使用。

詳細(xì)例子：

假設(shè)你的 $post->post_title 是這樣的

<span class="title">這是有span標(biāo)簽的標(biāo)題</span>

當(dāng)你使用 the_title() 函數(shù)，輸出將保持不變，還是如下

<span class="title">這是有span標(biāo)簽的標(biāo)題</span>

但是當(dāng)你使用 the_title_attribute()，你的輸出是如下的

這是有span標(biāo)簽的標(biāo)題

注意這里的span標(biāo)簽已經(jīng)被移除掉了.

又假如如果你的標(biāo)題里有雙引號,如下

這是一個帶 "雙引號" 的標(biāo)題

當(dāng)你使用 the_title() 函數(shù)，輸出如下

這是一個帶 "雙引號" 的標(biāo)題

但是當(dāng)你使用 the_title_attrubute() 函數(shù)，輸出卻如下

這是一個帶 \"雙引號\" 的標(biāo)題

注意到這里自動把雙引號替換成轉(zhuǎn)義字符了，這樣就保證了html標(biāo)簽屬性的安全使用。

如果我們在html標(biāo)簽屬性里使用 the_title() 函數(shù),則會破壞掉屬性原有的形式

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

輸出將會如下:

<span title="這是一個帶 "雙引號" 的標(biāo)題">這是一個帶”雙引號”的標(biāo)題</span>

注意到了這里的title屬性的引號，html標(biāo)簽對引號的使用是非常嚴(yán)格的，禁止這樣的形式出現(xiàn)，一旦出現(xiàn)將導(dǎo)致頁面嚴(yán)重的顯示問題.

經(jīng)過以上的分析，希望開發(fā)者們在以后的開發(fā)過程中能注意到這些小細(xì)節(jié)，在html標(biāo)簽屬性里一定要使用 the_title_attribute() 函數(shù)而不是 the_title() 函數(shù)!