Puo's 菜园子 学习园地 http://puo.cn
易记网址: http://wordpress.cn.com

wordpress添加副标题代码

#wordpress

在 WordPress 里“副标题”并不是官方术语,通常大家想要的是下面两种情况之一:
A. 给文章/页面加一个副标题(subtitle),让它显示在正式标题下方;
B. 给站点本身加一个副标题(tagline),和站点标题并列或放在显眼位置。

下面分别给出“纯代码、不装插件”的最简做法,直接扔进主题(或子主题)的 functions.php 就能生效。
所有代码均去掉 <?php 开头,如果你的 functions.php 里已经有 <?php 就接在后面即可。

--------------------------------------------------
一、给“文章/页面”加副标题(Subtitle)
--------------------------------------------------
1. 先在数据库里把副标题存下来
用 WordPress 自带的“自定义字段”机制,字段名固定为 subtitle ,后台每篇文章填一次即可。

2. 让后台输入框更人性化(可选)
把下面代码扔进 functions.php ,会在文章/页面编辑界面的标题下方多一个“副标题”输入框,保存时自动写进自定义字段 subtitle 。

```
/* 后台副标题输入框 */
add_action('edit_form_after_title', 'my_subtitle_input');
function my_subtitle_input($post){
$value = get_post_meta($post->ID, 'subtitle', true);
wp_nonce_field('subtitle_nonce', 'subtitle_nonce');
echo '<h4 style="margin-bottom:4px;">副标题</h4>';
echo '<input type="text" name="subtitle" style="width:100%;font-size:1.2em;" value="'.esc_attr($value).'">';
}

/* 保存时写库 */
add_action('save_post', 'my_save_subtitle');
function my_save_subtitle($post_id){
if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) return;
if (!isset($_POST['subtitle_nonce']) || !wp_verify_nonce($_POST['subtitle_nonce'], 'subtitle_nonce')) return;
if (current_user_can('edit_post', $post_id)){
update_post_meta($post_id, 'subtitle', sanitize_text_field($_POST['subtitle']));
}
}
```

3. 在前端把副标题吐出来
打开主题里负责输出标题的模板文件(single.php 或 content-single.php 之类),在 the_title() 下方加一行:

```
if($sub = get_post_meta(get_the_ID(), 'subtitle', true))
echo '<h2 class="subtitle">'.esc_html($sub).'</h2>';
```

想用 CSS 调字号、颜色,给 .subtitle 写样式即可。

--------------------------------------------------
二、给“整个站点”加副标题(Tagline)
--------------------------------------------------
WordPress 后台“设置→常规”里本来就有“副标题(Tagline)”字段,只是很多主题没把它摆出来。
下面两行代码直接把它显示在站点标题后面,扔进主题适当位置(如 header.php 里 <h1> 下方):

```
<h1 class="site-title"><?php bloginfo('name'); ?></h1>
<?php if(get_bloginfo('description','display')): ?>
<p class="site-tagline"><?php bloginfo('description'); ?></p>
<?php endif; ?>
```

--------------------------------------------------
三、总结
--------------------------------------------------
1. 文章级副标题:用自定义字段 subtitle 存,模板里 get_post_meta 读。
2. 站点级副标题:用系统自带的 bloginfo('description') 读。
全程无需插件,代码量不到 30 行,升级 WordPress 也不会丢。

打赏
谢谢谅解上文的粗糙,允许转载,请注明转载地址:Puo's 菜园子 » wordpress添加副标题代码
分享到

评论 抢沙发

做一个好的个人学习园地

主要网建,域名、集装箱物流、生活方法论的学习及研究,整理等内容

我的原创博客-忆秋年Puo's菜园子-我的学习园地

觉得文章有用就打赏一下文章作者

非常感谢你的打赏,我们将继续提供更多优质内容,让我们一起创建更加美好的网络世界!

支付宝扫一扫

微信扫一扫

登录

找回密码

注册