如何为WordPress分类和标签页面添加H1名称和描述?

投稿   懿古今  2019-04-22 07:26:50  167 人阅读  17 条评论

今天有站长问到如何在分类页面和标签页面添加一个 H1 名称和描述,然后大概看了一下其他博客,发现他们的分类页面和标签页面在内容顶部都有一个 H1 名称和描述,而自己博客的分类和标签页面却没有 H1 标签,所以决定折腾一下(PS:下面教程以Nana 主题为例,其他主题请参考折腾)。

如何为WordPress分类和标签页面添加H1名称和描述? WordPress 第1张

分类页面添加 H1名称和描述步骤

1、将以下 CSS 代码添加到当前主题的 style.css 文件的最后。

.fenlei-head{padding: 20px 15px;border: 1px solid #eaeaea;border-bottom: none;background: #fff;margin: 0 0 10px;}
.fenlei-title{font-size: 22px;font-weight: 600;padding-bottom: 10px;}
.fenlei-meta{padding-top: 15px;border-top: 1px solid #eaeaea;font-size: 16px;}

其中 margin: 0 0 10px;就是这个名称和描述与内容的距离,去掉就是没有距离,其他距离高度请修改 10px 为其他。

2、将 Nana 主题中的 archive.php 文件复制保存为 category-list.php 文件,并将 category.php 文件中的 archive 修改为 category-list。

3、编辑 category-list.php 文件,找到以下代码:

<main id="main" class="site-main" role="main">

在该代码下方添加以下代码:

<div class="fenlei-head">
<h1 class="fenlei-title"><?php echo single_cat_title( '', false ) ; ?></h1> 
<div class="fenlei-meta">
<p><?php $category_description = category_description();if ( !empty( $category_description ) ) echo $category_description ;?></p>
</div>
</div>

保存即可。

温馨提示:

1、以上代码调用了分类的名称和图像描述,所以在编辑分类目录的时候,一定要记得填写名称和图像描述哦。

2、这个只是修改了 Nana 主题分类页面以列表形式显示的文件,也就是说在主题设置选项中分类列表布局选择了“列表布局”时,分类页面就会显示分类名称和描述,而选择“图片布局”则没有,如想有该功能请自行修改 category-grid.php 文件。

如何为WordPress分类和标签页面添加H1名称和描述? WordPress 第2张

标签页面添加 H1 名称和描述步骤

1、将以下 CSS 代码添加到当前主题的 style.css 文件的最后(如果在分类页面添加 H1 名称和描述中已经添加了以下代码,请忽略本步骤跳到步骤 2)。

.fenlei-head{padding: 20px 15px;border: 1px solid #eaeaea;border-bottom: none;background: #fff;margin: 0 0 10px;}
.fenlei-title{font-size: 22px;font-weight: 600;padding-bottom: 10px;}
.fenlei-meta{padding-top: 15px;border-top: 1px solid #eaeaea;font-size: 16px;}

其中 margin: 0 0 10px;就是这个名称和描述与内容的距离,去掉就是没有距离,其他距离高度请修改 10px 为其他。

2、将 Nana 主题中的 archive.php 文件复制保存为 tag.php 文件,找到以下代码:

<main id="main" class="site-main" role="main">

在该代码下方添加以下代码:

<div class="fenlei-head">
<h1 class="fenlei-title"><?php echo single_tag_title("", true); ?></h1> 
<div class="fenlei-meta">
<p><?php $tag_description = tag_description();if ( !empty( $tag_description ) ) echo $tag_description ;?></p>
</div>
</div>

保存即可。

以上代码调用了标签的名称和图像描述,所以在编辑标签的时候,一定要记得填写名称和图像描述哦。不过我相信很多人估计都不会去重新编辑标签,为其添加图像描述。所以要么删除标签描述要么直接固定一个描述模式。具体如下:

1、删除标签描述,请直接删除以下代码即可

<div class="fenlei-meta">
<p><?php $tag_description = tag_description();if ( !empty( $tag_description ) ) echo $tag_description ;?></p>
</div>

2、固定一个描述,将以下代码

<div class="fenlei-meta">
<p><?php $tag_description = tag_description();if ( !empty( $tag_description ) ) echo $tag_description ;?></p>
</div>

修改为

<div class="fenlei-meta">
<p>本标签主要是聚合关于标签<?php echo single_tag_title(); ?>的文章,以便用户快速查找和方便阅读。</p>
</div>

小结

其实不管是分类页面还是标签页面,或者是其他页面,又或者是其他主题,添加 H1 名称和描述方法都是一样的,关键是要灵活应用。

您可能感兴趣的文章

文章标签: ,  
原文地址:https://www.yigujin.cn/1944.html
温馨提示:文章内容仅代表作者个人观点,不代表boke112导航赞同其观点和对其真实性负责!
版权声明:本文为投稿文章,感谢 懿古今 的投稿,版权归原作者所有,欢迎分享本文,转载请保留出处!
©boke112导航,本站推荐使用:阿里云 ECS服务器等云产品服务,国外免备案主机建议使用:老薛主机
懿古今

 发表评论

中国赞表情摊手表情吃瓜表情笑哭表情偷笑表情衰表情汗表情思考表情费解表情抓狂表情晕表情流泪表情疑问表情嘻嘻表情吃惊表情鼓掌表情

  1. 靠谱学生兼职网
    靠谱学生兼职网 @回复

    厉害,我就没有这技术折腾这些

  2. 镜缘轩
    镜缘轩 @回复

    群主的主题用起来还是很舒服的

  3. 佐语先森
    佐语先森 @回复

    这个可以有,我看默认的主题有带这个的。

  4. 值品
    值品 @回复

    标题h1,在用css控制一下大小样式就可以啦

  5. 优站资源网
    优站资源网 @回复

    大部分主题应该都自带了

  6. 明月登楼
    明月登楼 @回复

    这个一般正规的主题都会使用的!不过,据百度白皮书的要求,H标签不能滥用,特别是H1、H2这类!

  7. MAY的SEO博客
    MAY的SEO博客 @回复

    这个之前确实没有意识到,刚检查了一下我的主题,已经自带了。

  8. 菊
     @回复

    这个好 有些主题没有这个 可以参考下

    • 懿古今
      懿古今2019-04-22 15:58  回复

      @菊是的,毕竟不是所有主题都有这个,而且有比较喜欢分类目录和标签页有H1标签的,可以试试

  9. nice
    nice @回复

    看了下我博客的分类页 是《h1>分类汇总:《span>分类名《/span>《/h1> 这个和 《h1>分类名《/h1> 区别大嘛!! [嘻嘻] [嘻嘻]