Loading [MathJax]/jax/output/CommonHTML/jax.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >WordPress 教程:the_title() 与 the_title_attribute() 的正确用法

WordPress 教程:the_title() 与 the_title_attribute() 的正确用法

作者头像
Denis
发布于 2023-04-15 06:10:45
发布于 2023-04-15 06:10:45
2.6K00
代码可运行
举报
文章被收录于专栏:WordPress果酱WordPress果酱
运行总次数:0
代码可运行

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">继续阅读 <?php the_title(); ?></a>

很多开发者在 loop,page,post 里使用这样的写法设置一个超链接到指定的文章,看起来似乎并没有什么问题,但其实正确安全的写法应该把 title="<?php the_title(); ?>" 改写成 title="<?php the_title_attribute(); ?>"

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

the_title() 源代码

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
/**
 * 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() 函数,我们再看下这个函数的相关文件.

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
/**
 * 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’, id );

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

the_title_attribute() 源代码

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
/**
 * 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 是这样的

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<span class="title">这是有span标签的标题</span>

当你使用 the_title() 函数,输出将保持不变,还是如下

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<span class="title">这是有span标签的标题</span>

但是当你使用 the_title_attribute(),你的输出是如下的

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
这是有span标签的标题

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

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
这是一个带 "双引号" 的标题

当你使用 the_title() 函数,输出如下

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
这是一个带 "双引号" 的标题

但是当你使用 the_title_attrubute() 函数,输出却如下

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
这是一个带 \"双引号\" 的标题

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

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<span title="<?php the_title(); ?>"><?php the_title(); ?></span>

输出将会如下:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<span title="这是一个带 "双引号" 的标题">这是一个带”双引号”的标题</span>

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

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

所以正确的用法应该是:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">继续阅读 <?php the_title(); ?></a>

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
wordpress面包屑导航简单实现
  前面我们学了一行代码搞定WordPress面包屑导航breadcrumb,现在wordpress文档中有一个简单实现的方法,适用于page页面,有二级分类的情况(Simple breadcrumb trail for pages, two levels deep.),随ytkah一起看看代码
ytkah
2019/08/06
7890
WordPress文章归档页面分组和分页
WordPress 归档页面是一个网站的历史内容存档,它允许用户浏览网站的过去内容。它的存在有以下几个意义:
楚客追梦
2024/08/07
3430
自定义wordpress侧边栏小工具
作者:matrix 被围观: 1,726 次 发布时间:2014-01-25 分类:Wordpress | 4 条评论 »
HHTjim 部落格
2022/09/26
3230
自定义wordpress侧边栏小工具
wordpress代码实现相关文章的几种方法
相关文章分类方法主要有根据文章标签以及文章所属分类来进行区分,以下代码分别使用wordpress自带的query_posts()函数以及直接读取数据库来获取文章的相关文章。另附上获取文章作者的其他文章方法。
子润先生
2021/06/24
5070
WordPress主题下funtions.php的一段“恶意”代码
不多说了,相信有很多WordPresser都知道这段在WordPress主题下fountions.php的“恶意”代码,之所以为“恶意”加个双引号是想说:其实也不算太“恶意”,对你的伤害只是两点:1、感染wp-content\themes\下所有主题的fountions.php文件;2、以当前被感染博客的主页URL为标题和内容,向 livethemas@gmail.com发送邮件。已经知道的就不用往下看啦,还不知道的快去你的主题fountions.php检查有木有,有的话赶快删除之。话说这段恶意代码还真够长
Jeff
2018/01/19
1.2K0
分享WordPress各种标签大全集合 以及如何调用
wordpress程序日渐成熟,开发者越来越多,各种模版层出不穷,但是想要做一个好的wordpress模版,前提不只是要掌握HTML5前端技术,还必须了解wordpress的各种标签如何调用才可以。今天全百科网就把整理的WordPress各种标签以及是如何调用分享给大家。
于飞云计算
2019/07/22
3.3K0
分享WordPress各种标签大全集合 以及如何调用
【Wordpress】ajax 实现站内搜索
最近想给自己的博客实现一个 站内搜索 功能,期望整个过程异步实现。这样用户体验度更好。
redszhao
2021/08/09
1.4K0
【Wordpress】ajax 实现站内搜索
wordpress中提取文章内第一张图片作为缩略图
作者:matrix 被围观: 1,059 次 发布时间:2013-09-04 分类:Wordpress 兼容并蓄 | 无评论 »
HHTjim 部落格
2022/09/26
4640
wordpress中提取文章内第一张图片作为缩略图
wordpress常用函数-随机文章获取和相关文章获取
1、wordpress随机获取文章10篇文章,轻松实现wordpress文章的随机调用;
wordpress建站吧
2019/12/10
9460
Wordpress中文章的特色图像Featured Image究竟存在哪里?
最近项目需要,分析了一下Wordpress的特色图像 Feature Image的上传、保存方式,这一分析觉得Wordpress的数据结构设计还真是有想法。
大江小浪
2019/02/22
1.7K0
Wordpress中文章的特色图像Featured Image究竟存在哪里?
怎样控制wordpress博客首页博文显示内容字数!
爱优博客是用wordpress程序做的,但是默认的wordpress首页博客文章的内容显示很,整个页面显示不了几篇文章,有时写的文章全部都显示在了首页了。
爱游博客
2019/08/07
1.2K0
SEO养博客神器:同步文章(或摘要)到新浪博客的WordPress插件
了解 SEO 的站长都会另外用心做几个博客,起到 SEO 辅助作用。通常说的养博客主要是养 BSP 博客。比如新浪博客,网易博客,百度空间,网易博客,新浪博客,搜狐博客,和讯博客,阿里巴巴博客,博客大巴,天涯博客,豆瓣博客等等。 至于具体做法,自行搜索吧。大致类似于外链推广,引蜘蛛,引流量的做法。我一直感觉精力有限,这样养博客实在是太累了! 一、养博神器 下面就介绍一款懒人养博客的神器:WP2Sinablog。 插件的功能很简单,就是在你发布文章的同时, 会推送一份到新浪博客,无需过多干预就能达到简单的养博
张戈
2018/03/26
1.3K0
SEO养博客神器:同步文章(或摘要)到新浪博客的WordPress插件
wordpress调用文章摘要,若无摘要则自动截取文章内容字数做为摘要
以下是调用指定分类文章列表的一个方法,作者如果有填写文章摘要则直接调用摘要;如果文章摘要忘记写了则自动截取文章内容字数做为摘要。这个方法也适用于调用description标签
ytkah
2019/09/25
1.4K0
WordPress巧用面包屑导航,SEO优化。
什么是网站面包屑导航?面包屑导航意在告知用户所处的当前网页的位置,方便用户可以通过该导航快速返回上一级网页。 面包屑导航一般都在导航的下面,形式一般为 首页 > 一级目录名称 > 二级目录名称 > 目前位置,尽量要把面包屑导航的层次控制在四层以内,这样也有利与搜索引擎蜘蛛一层层往下爬,到了四层以下就很难爬到了。
Kit
2021/08/02
9460
WordPress巧用面包屑导航,SEO优化。
禁用wordpress5.2自动裁剪图片功能
如果你用的是wordpress5.2或以上的版本,系统还会根据你上传的图片裁剪成 scaled 后缀的文件,大小为 2560。 还有其他大小如 2048,1536,768..... 严重浪费磁盘空间不说,还占用性能。
全面屏壁纸
2022/03/01
4330
禁用wordpress5.2自动裁剪图片功能
制作WordPress“带Gravatar头像评论”小工具(集成主题中、含选项)
最近在进一步折腾WordPress 主题的开发,在侧边栏小工具那里想做一个可独立于主题的、类似插件的带头像评论小工具。通过WordPress 官方文档与一些资料大概了解了小工具制作的一些知识,但对于我等PHP 菜鸟,完全自己开发是不可能的;于是在网络上找到了一段代码,分享并备忘一下。 关于WordPress 中小工具的开发,除了WordPress官方文档外,有一篇“阿叔工作室”的文章也不错,点击查看。这里不多说了。 下面的代码得到的“带Gravatar头像评论”小工具可以集成到主题中,小工具后台拥有相关选项
Jeff
2018/01/19
8830
制作WordPress“带Gravatar头像评论”小工具(集成主题中、含选项)
WordPress 插件:“即将推出” Widget
出于维护博客更新频率,或精雕细琢文章时督促自己及时完成,我们会在 WordPress 中把该篇文章设为“定时发布”(Schedule)。如果能在网站显示出这些预定发布的文章,应该会吸引读者继续关注你的博客吧?
Denis
2023/04/15
2610
WordPress发布文章自动同步到新浪微博(带特色图片)
WordPress 发博客后自动同步到新浪微博,这是我从无主题博客看到的方法,一直沿用至今。感觉对博客宣传和提升“逼格”都有显著的作用: 一、老版代码 先来看一下无主题博客分享的代码: functio
张戈
2018/03/23
1.8K0
WordPress发布文章自动同步到新浪微博(带特色图片)
wordpress调用函数大全
WordPress Header头部 PHP代码 (注: 也就是位于<head>和</head>之间的PHP代码)
纯情
2023/04/26
6620
WordPress丨常见函数及拓展模板函数大全
wordpress模板是由PHP语句组成,很多不懂代码的站长都被PHP复杂的代码难倒,难以自己开发个性化的模板。其实想开发一个wordpress模板并不是太难,大家只要了解一些wordpress中的常用函数,即可按照自己的需要进行内容调用了。更高端一点的类似于一些PHP语句的判断等等,这就需要大家自己去学习提高了。本篇文章主要讲解wordpress开发模板中经常需要用到的一些函数。
V站CEO-西顾
2018/06/08
1.9K0
推荐阅读
相关推荐
wordpress面包屑导航简单实现
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验