WordPress 默认使用 CSS 类名列表整理，帮助大家自定义样式

2022-08-1214:12:35WEB前端开发Comments1,171 views字数 7113阅读模式

WordPress 会自动为大多数主题中的不同元素添加一些 CSS 类。这些默认的 CSS 类可用于为 WordPress 主题中的这些元素设置样式。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/27083.html

在本文中，我们将向您展示默认的 WordPress 生成的 CSS 类名列表。我们还将讨论如何轻松找到 CSS 类以及如何在需要时添加自定义 CSS 类。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/27083.html

WordPress 默认使用 CSS 类名列表整理，帮助大家自定义样式

为什么要了解默认的 WordPress 生成的 CSS？

WordPress 会自动生成默认 CSS 类并将其添加到WordPress 网站上的不同元素。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/27083.html

然后，WordPress 主题开发人员可以使用这些 CSS 类来设置所有 WordPress 网站的公共区域的样式。这可以包括内容区域、侧边栏、小工具、导航菜单等。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/27083.html

如果您正在学习WordPress 主题开发或只是尝试为自己的网站创建子主题，那么了解这些 CSS 类会派上用场。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/27083.html

它还可以通过添加自定义 CSS来帮助您快速设置 WordPress 主题中的某些元素，而无需创建自己的主题。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/27083.html

好了，让我们看一下默认的 WordPress 生成的 CSS 类。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/27083.html

默认正文类样式

HTML 中的 body 标签<body>包含任何网页的整个布局结构，这使得它在任何 WordPress 主题设计中都非常重要。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/27083.html

WordPress 向正文区域添加了几个 CSS 类，主题设计者可以使用这些类来设置正文容器的样式。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/27083.html

  1. // 当网站使用从右到左的语言时添加，例如 阿拉伯语、希伯来语
  2. .rtl {}
  4. // 显示主页时添加
  5. .home {}
  7. // 显示博客页面时添加
  8. .blog {}
  10. // 在显示存档页面时添加
  11. .archive {}
  13. // 在显示基于日期的存档时添加
  14. .date {}
  16. // 添加到搜索页面
  17. .search {}
  19. // 启用分页时添加
  20. .paged {}
  22. // 显示附件页面时添加
  23. .attachment {}
  25. // 显示 404 错误页面时添加
  26. .error404 {}
  28. // 显示单个帖子时添加，包括帖子ID
  29. .single postid-(id) {}
  31. // 显示单个附件时添加。 包括附件 ID
  32. .attachmentid-(id) {}
  34. // 显示单个附件时添加。 包括附件 mime 类型
  35. .attachment-(mime-type) {}
  37. // 在显示作者页面时添加
  38. .author {}
  40. // 在显示作者页面时添加。 包括作者姓名。
  41. .author-(user_nicename) {}
  43. // 显示分类页面时添加
  44. .category {}
  46. // 显示分类页面时添加。 包括分类别名。
  47. .category-(slug) {}
  49. // 显示标签页时添加。
  50. .tag {}
  52. // 显示标签页时添加。 包括标签别名。
  53. .tag-(slug) {}
  55. // 在显示父页面时添加。
  56. .page-parent {}
  58. // 显示子页面时添加。 包括父页面 ID。
  59. .page-child parent-pageid-(id) {}
  61. // 使用页面模板显示页面时添加。 包括页面模板文件名。
  62. .page-template page-template-(template file name) {}
  64. // 显示搜索结果时添加。
  65. .search-results {}
  67. // 当搜索没有返回结果时添加。
  68. .search-no-results {}
  70. // 在检测到登录用户时添加。
  71. .logged-in {}
  73. // 在显示分页页面时添加。 包括页码。
  74. .paged-(page number) {}
  76. // 显示分页单项时添加。 包括页码。
  77. .single-paged-(page number) {}
  79. // 显示分页页面类型时添加。 包括页码。
  80. .page-paged-(page number) {}
  82. // 在显示分页类别页面时添加。 包括页码。
  83. .category-paged-(page number) {}
  85. // 显示分页标签页时添加。 包括页码。
  86. .tag-paged-(page number) {}
  88. // 在显示基于分页日期的存档页面时添加。 包括页码。
  89. .date-paged-(page number) {}
  91. // 在显示分页作者页面时添加。 包括页码。
  92. .author-paged-(page number) {}
  94. // 在显示分页搜索页面时添加。 包括页码。
  95. .search-paged-(page number) {}

如您所见，这些类包括您可以在 CSS 样式中定位的各种条件。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/27083.html

例如，如果您希望“新闻”类别页面具有不同的背景颜色，则可以添加以下自定义 CSS。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/27083.html

  1. .category-news {
  2. background-color:#f7f7f7;
  3. }

需要一种在 WordPress 中添加 CSS 和代码片段的简单方法？试用免费的 WPCode 插件。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/27083.html

默认帖子样式类

就像 body 元素一样，WordPress 也为 post 元素添加了动态类。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/27083.html

该元素通常是<article>主题模板中的标签。但是，它可以是任何其他标签，具体取决于您的主题。通过添加post_class()模板标签，帖子 CSS 类将显示在您的主题中。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/27083.html

  1. <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

以下是 post_class() 函数生成的一些最常见的 CSS 类的列表：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/27083.html

  1. // 为单个项目添加具有 ID 的类
  2. .post-(ID) {}
  4. // 为单个博客帖子添加了通用帖子类。
  5. .post {}
  7. // 显示单个页面时添加的通用页面类。
  8. .page {}
  10. // 添加到附件页面的通用附件类。
  11. .attachment {}
  13. // 添加一个文章类型类，例如type-post
  14. .type(post-type){}
  16. // 如果主题支持帖子格式，则为帖子格式添加一个类。 例如 format-standard
  17. .format-(post-format){}
  19. // 当项目具有特色图像时添加
  20. .has-post-thumbnail{}
  22. // 显示置顶帖时添加
  23. .sticky {}
  25. // 显示文章项目的通用类
  26. .hentry {}
  28. // 具有分配给帖子的类别的类。 例如 category-news category-movies
  29. .category-(slug) {}
  31. // 带有分配给帖子的标签的类。 例如 tag-photofriday tag-tgif
  32. .tag-(slug) {}

Post 类允许您设置符合不同条件的博客文章和页面的样式。例如，您可以使用以下自定义 CSS 以不同的方式为特定类别中归档的博客文章设置样式：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/27083.html

  1. .category-news {
  2. background-color:#EFEFEF;
  3. }

可以在外观 – 自定义，然后在下面的自定义css进入添加：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/27083.html

WordPress 默认使用 CSS 类名列表整理，帮助大家自定义样式

默认导航菜单类

WordPress 还将 CSS 类添加到您的导航菜单中。以下是默认添加到导航菜单的默认类。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/27083.html

  1. // 当前页面的类
  2. .current_page_item{}
  4. // 当前类别的类
  5. .current-cat{}
  7. // 任何其他当前菜单项的类
  8. .current-menu-item{}
  10. // 分类法的类
  11. .menu-item-type-(taxonomy){}
  13. // 区分文章类型的类。
  14. .menu-item-type-(post_type){}
  16. // 您添加的任何自定义项目的类
  17. .menu-item-type-custom{}
  19. // 主页链接的类
  20. .menu-item-home{}

您的 WordPress 主题还将向每个导航菜单位置添加一个 CSS 类。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/27083.html

假设您的主题将主菜单类分配给标题区域内的菜单位置，然后您可以使用以下 CSS 类在您的 CSS 中定位它。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/27083.html

  1. // 容器类
  2. #header .primary-menu{}
  4. // 容器类第一个无序列表
  5. #header .primary-menu ul {}
  7. //无序列表中的无序列表
  8. #header .primary-menu ul ul {}
  10. // 每个导航项
  11. #header .primary-menu li {}
  13. // 每个导航项锚点
  14. #header .primary-menu li a {}
  16. // 无序列表（如果有下拉项目）
  17. #header .primary-menu li ul {}
  19. // 每个下拉导航项
  20. #header .primary-menu li li {}
  22. // 每个下拉导航项锚点
  23. #header .primary-menu li li a {}

有关更多详细信息，请参阅我们关于如何在 WordPress 中设置导航菜单样式的指南。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/27083.html

默认的 WordPress 小工具类

小工具是在 WordPress 主题中显示非内容块的简单方法。它们通常显示在 WordPress 主题的专用小工具就绪区域或侧边栏中。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/27083.html

WordPress 将以下类添加到旧版小工具中。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/27083.html

  1. .widget {}
  3. #searchform {}
  4. .widget_search {}
  5. .screen-reader-text {}
  7. .widget_meta {}
  8. .widget_meta ul {}
  9. .widget_meta ul li {}
  10. .widget_meta ul li a {}
  12. .widget_links {}
  13. .widget_links ul {}
  14. .widget_links ul li {}
  15. .widget_links ul li a {}
  17. .widget_archive {}
  18. .widget_archive ul {}
  19. .widget_archive ul li {}
  20. .widget_archive ul li a {}
  21. .widget_archive select {}
  22. .widget_archive option {}
  24. .widget_pages {}
  25. .widget_pages ul {}
  26. .widget_pages ul li {}
  27. .widget_pages ul li a {}
  29. .widget_links {}
  30. .widget_links li:after {}
  31. .widget_links li:before {}
  32. .widget_tag_cloud {}
  33. .widget_tag_cloud a {}
  34. .widget_tag_cloud a:after {}
  35. .widget_tag_cloud a:before {}
  37. .widget_calendar {}
  38. #calendar_wrap {}
  39. #calendar_wrap th {}
  40. #calendar_wrap td {}
  41. #wp-calendar tr td {}
  42. #wp-calendar caption {}
  43. #wp-calendar a {}
  44. #wp-calendar #today {}
  45. #wp-calendar #prev {}
  46. #wp-calendar #next {}
  47. #wp-calendar #next a {}
  48. #wp-calendar #prev a {}
  50. .widget_categories {}
  51. .widget_categories ul {}
  52. .widget_categories ul li {}
  53. .widget_categories ul ul.children {}
  54. .widget_categories a {}
  55. .widget_categories select{}
  56. .widget_categories select#cat {}
  57. .widget_categories select.postform {}
  58. .widget_categories option {}
  59. .widget_categories .level-0 {}
  60. .widget_categories .level-1 {}
  61. .widget_categories .level-2 {}
  62. .widget_categories .level-3 {}
  64. .recentcomments {}
  65. #recentcomments {}
  66. #recentcomments li {}
  67. #recentcomments li a {}
  68. .widget_recent_comments {}
  70. .widget_recent_entries {}
  71. .widget_recent_entries ul {}
  72. .widget_recent_entries ul li {}
  73. .widget_recent_entries ul li a {}
  75. .textwidget {}
  76. .widget_text {}
  77. .textwidget p {}

然而，随着 WordPress 转向基于块的小部件区域，您现在可以向小工具区域添加不同的块，并且每个块都动态生成 CSS 类。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/27083.html

我们将在本文后面向您展示如何找到这些 CSS 类。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/27083.html

默认评论表单类

评论是许多 WordPress 网站的参与中心。对它们进行样式设置可以帮助您为用户提供更简洁、更具吸引力的体验。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/27083.html

WordPress 添加了以下默认 CSS 类来帮助主题开发人员设置评论区域的样式。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/27083.html

  1. /*Comment Output*/
  3. .commentlist .reply {}
  4. .commentlist .reply a {}
  6. .commentlist .alt {}
  7. .commentlist .odd {}
  8. .commentlist .even {}
  9. .commentlist .thread-alt {}
  10. .commentlist .thread-odd {}
  11. .commentlist .thread-even {}
  12. .commentlist li ul.children .alt {}
  13. .commentlist li ul.children .odd {}
  14. .commentlist li ul.children .even {}
  16. .commentlist .vcard {}
  17. .commentlist .vcard cite.fn {}
  18. .commentlist .vcard span.says {}
  19. .commentlist .vcard img.photo {}
  20. .commentlist .vcard img.avatar {}
  21. .commentlist .vcard cite.fn a.url {}
  23. .commentlist .comment-meta {}
  24. .commentlist .comment-meta a {}
  25. .commentlist .commentmetadata {}
  26. .commentlist .commentmetadata a {}
  28. .commentlist .parent {}
  29. .commentlist .comment {}
  30. .commentlist .children {}
  31. .commentlist .pingback {}
  32. .commentlist .bypostauthor {}
  33. .commentlist .comment-author {}
  34. .commentlist .comment-author-admin {}
  36. .commentlist {}
  37. .commentlist li {}
  38. .commentlist li p {}
  39. .commentlist li ul {}
  40. .commentlist li ul.children li {}
  41. .commentlist li ul.children li.alt {}
  42. .commentlist li ul.children li.byuser {}
  43. .commentlist li ul.children li.comment {}
  44. .commentlist li ul.children li.depth-{id} {}
  45. .commentlist li ul.children li.bypostauthor {}
  46. .commentlist li ul.children li.comment-author-admin {}
  48. #cancel-comment-reply {}
  49. #cancel-comment-reply a {}
  51. /*Comment Form */
  53. #respond { }
  54. #reply-title { }
  55. #cancel-comment-reply-link { }
  56. #commentform { }
  57. #author { }
  58. #email { }
  59. #url { }
  60. #comment
  61. #submit
  62. .comment-notes { }
  63. .required { }
  64. .comment-form-author { }
  65. .comment-form-email { }
  66. .comment-form-url { }
  67. .comment-form-comment { }
  68. .form-allowed-tags { }
  69. .form-submit

查找 WordPress 块类

WordPress 块编辑器为块动态生成 CSS 类。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/27083.html

要找到这些 CSS 类，您需要将该特定块添加到帖子或页面。之后，您需要单击“预览”按钮以查看正在运行的块。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/27083.html

在预览选项卡中，将鼠标移至刚刚添加的块，然后右键单击选择检查工具。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/27083.html

WordPress 默认使用 CSS 类名列表整理，帮助大家自定义样式

在开发者控制台中，您将看到该块生成的 HTML。从这里，您可以看到块添加的 CSS 类。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/27083.html

在上面的屏幕截图中，我们正在查看 画廊Gallery 块的 CSS 类。然后，您可以使用这些 CSS 类为您的 WordPress 主题中的图库块设置样式。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/27083.html

在 WordPress 中添加您自己的自定义 CSS 类

现在，默认的 WordPress CSS 类非常全面。但是，它们的目的主要是为主题开发人员提供一个标准化的框架来构建。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/27083.html

对于您的个人网站，您可能需要为可能无法找到要定位的默认 CSS 类的区域添加自定义 CSS。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/27083.html

同样，有时您可能只想对特定帖子或页面进行小幅更改，而不将其应用于整个主题。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/27083.html

幸运的是，WordPress 为您提供了几种在不同区域添加 CSS 类的简单方法。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/27083.html

将自定义 CSS 类添加到块编辑器中的块

如果您想快速将自定义 CSS 类添加到特定帖子或页面，那么最简单的方法是使用块编辑器。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/27083.html

只需编辑帖子或页面，然后选择要添加自定义 CSS 类的块。在块设置下，单击高级面板并添加 CSS 类的名称。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/27083.html

WordPress 默认使用 CSS 类名列表整理，帮助大家自定义样式

不要忘记通过单击更新按钮来保存您的更改。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/27083.html

您现在可以使用此类添加自定义 CSS 代码，这些代码只会影响此特定帖子或页面中的此特定块。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/27083.html

在 WordPress 导航菜单中

您还可以将自定义 CSS 添加到您的 WordPress 导航菜单项。假设你想将一个菜单项转换成按钮，那么这个方法就派上用场了。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/27083.html

只需转到外观»菜单页面，然后单击屏幕右上角的屏幕选项按钮。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/27083.html

从这里，您需要选中 CSS 类 选项旁边的框。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/27083.html

WordPress 默认使用 CSS 类名列表整理，帮助大家自定义样式

接下来，您需要向下滚动并单击以展开要添加自定义 CSS 类的菜单项。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/27083.html

您会注意到一个标记为 CSS 类的字段。继续在此处添加您的自定义 CSS 类。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/27083.html

WordPress 默认使用 CSS 类名列表整理，帮助大家自定义样式

不要忘记单击“保存菜单”按钮来存储您的更改。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/27083.html

您现在可以使用这个自定义 CSS 类来为特定的菜单项设置不同的样式。
翻译：wordpress大学。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/27083.html

  • 本站内容整理自互联网，仅提供信息存储空间服务，以方便学习之用。如对文章、图片、字体等版权有疑问，请在下方留言，管理员看到后，将第一时间进行处理。
  • 转载请务必保留本文链接：https://www.cainiaoxueyuan.com/gcs/27083.html

Comment

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定