默认WordPress为初学者生成的CSS备忘单

发表于： 2022年8月2日 2023年5月18日
分类： PHP, WordPress, WordPress入门教程
标签： categories, children, commentlist, css, CSS备忘单

您是否正在寻找默认的WordPress生成的CSS备忘单？

WordPress会自动将一些CSS类添加到大多数主题的不同元素中。这些默认的CSS类可用于在WordPress主题中设置这些元素的样式。

在本文中，我们将向您展示默认的WordPress生成的CSS备忘单。我们还将讨论如何轻松找到CSS类，以及如何在需要时添加自定义CSS类。

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

WordPress会自动生成并添加默认CSS类到WordPress网站上的不同元素。

然后，WordPress主题开发人员可以使用这些CSS类来设置所有WordPress网站的公共区域。这可以包括内容区域、侧边栏、小部件、导航菜单等。

如果您正在学习WordPress主题开发或只是尝试为自己的网站创建子主题，了解这些CSS类会派上用场。

它还可以通过添加自定义CSS来帮助您快速设置WordPress主题中某些元素的样式，而无需创建自己的主题。

注意：您不必学习CSS来更改主题样式或创建自定义主题。如果您不想学习代码，那么您可以使用像SeedProd这样的拖放生成器。我们将在文章后面讨论更多内容。

话虽如此，让我们来看看WordPress生成的默认CSS类。

默认身体类样式

HTML中的正文标签<body>包含任何网页的整个布局结构，这使得它在任何WordPress主题设计中都非常重要。

WordPress在主体区域添加了几个CSS类，主题设计师可以使用这些类来为主体容器设置样式。

// Added when a website is using a right-to-left language e.g. Arabic, Hebrew  
.rtl {}

// Added when home page is being displayed
.home {}

// Added when blog page is being displayed
.blog {}

// Added when an Archive page is being displayed
.archive {}

// Added when a date based archive is displayed
.date {}

// Added on search pages
.search {}

// Added when pagination is enabled
.paged {}

// Added when an attachment page is displayed
.attachment {}

// Added when a 404 error page is displayed
.error404 {}

// Added when a single post is dispayed includes post ID
.single postid-(id) {}

// Added when a single attachment is displayed. Includes attachment ID
.attachmentid-(id) {}

// Added when a single attachment is displayed. Includes attachment mime-type
.attachment-(mime-type) {}

// Added when an author page is displayed
.author {}

// Added when an author page is displayed. Includes author name.
.author-(user_nicename) {}

// Added when a category page is displayed
.category {}

//Added when a category page is displayed. Includes category slug.
.category-(slug) {}

// Added when a tag page is displayed.
.tag {}

// Added when a tag page is displayed. Includes tag slug.
.tag-(slug) {}

// Added when a parent page is displayed.
.page-parent {}

// Added when a child page is displayed. Includes parent page ID.
.page-child parent-pageid-(id) {}

// Added when a page is displayed using page template. Includes page template file name.
.page-template page-template-(template file name) {}

// Added when search results are displayed.
.search-results {}

// Added when search returns no results.
.search-no-results {}

// Added when a logged in user is detected.
.logged-in {}

// Added when a paginated page is displayed. Includes page number.
.paged-(page number) {}

// Added when a paginated single item is displayed. Includes page number.
.single-paged-(page number) {}

// Added when a paged page type is displayed. Includes page number.
.page-paged-(page number) {}

// Added when a paged category page is displayed. Includes page number.
.category-paged-(page number) {}

// Added when a paged tag page is displayed. Includes page number.
.tag-paged-(page number) {}

//Added when a paged date based archive page is displayed. Includes page number.
.date-paged-(page number) {}

// Added when a paged author page is displayed. Includes page number.
.author-paged-(page number) {}

// Added when a paaged search page is displayed. Includes page number.
.search-paged-(page number) {}

如您所见，这些类包括您可以在CSS样式中定位的各种条件。

例如，如果您希望“新闻”类别页面具有不同的背景颜色，那么您可以添加以下自定义CSS。

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

需要一种在WordPress中添加CSS和代码片段的简单方法吗？尝试免费的WPCode插件，以保证您的代码片段的未来。

默认后样式类

就像body元素一样，WordPress也向帖子元素添加了动态类。

此元素通常是主题模板中的<article>标签。然而，根据您的主题，它可能是任何其他标签。通过添加post_class()模板标签，将post CSS类显示在您的主题中。

以下是post_class()函数生成的一些最常见的CSS类的列表：

// Adds a class with ID for single items
.post-(ID) {}

// Generic post claass added for single blog posts.
.post {}

// Generic page class added when a single page is displayed.
.page {}

// Generic attachment class added to attachment pages.
.attachment {}

// Adds a post type class e.g. type-post
.type(post-type){}

// Adds a class for post format if theme supports posts formats. E.g. format-standard
.format-(post-format){}

// Added when an item has a featured image
.has-post-thumbnail{}

// Added when a sticky post is displayed
.sticky {}

// Generic class to display an entry
.hentry {}

// Classes with categories assigned to a post. E.g. category-news category-movies
.category-(slug) {}

// Classes with tags assigned to a post. e.g. tag-photofriday tag-tgif
.tag-(slug) {}

帖子类允许您设置符合不同条件的博客文章和页面的样式。例如，您可以使用以下自定义CSS以不同的方式设置在特定类别中归档的博客文章的样式：

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

如果您在WordPress仪表板中没有看到CSS编辑器，请按照我们的教程了解如何修复缺失的WordPress主题定制器。

默认导航菜单类

WordPress还将CSS类添加到您的导航菜单中。以下是默认添加到导航菜单的默认类。

// Class for Current Page
.current_page_item{}

// Class for Current Category
.current-cat{}

// Class for any other current Menu Item
.current-menu-item{}

 // Class for a taxonomies
.menu-item-type-(taxonomy){}

// class to distinguish post types.
.menu-item-type-(post_type){}

// Class for any custom item that you added
.menu-item-type-custom{}

// Class for the Home Link
.menu-item-home{}

您的WordPress主题还将在每个导航菜单位置添加一个CSS类。

假设您的主题将主菜单类分配给标题区域内的菜单位置，那么您可以使用以下CSS类在CSS中定位它。

// container class
#header .primary-menu{}
   
// container class first unordered list
#header .primary-menu ul {}
   
//unordered list within an unordered list
#header .primary-menu ul ul {}
   
 // each navigation item
#header .primary-menu li {}
   
// each navigation item anchor
#header .primary-menu li a {}
   
// unordered list if there is drop down items
#header .primary-menu li ul {}
   
// each drop down navigation item
#header .primary-menu li li {}
   
// each drap down navigation item anchor
#header .primary-menu li li a {}

有关更多详细信息，请参阅我们关于如何在WordPress中设置导航菜单样式的指南。

默认WordPress小部件类

小部件是在WordPress主题中显示非内容块的简单方法。它们通常显示在WordPress主题的专用小部件就绪区域或侧边栏中。

WordPress将以下类添加到遗留小部件中。

.widget {}
  
#searchform {}
.widget_search {}
.screen-reader-text {}
  
.widget_meta {}
.widget_meta ul {}
.widget_meta ul li {}
.widget_meta ul li a {}
  
.widget_links {}
.widget_links ul {}
.widget_links ul li {}
.widget_links ul li a {}
  
.widget_archive {}
.widget_archive ul {}
.widget_archive ul li {}
.widget_archive ul li a {}
.widget_archive select {}
.widget_archive option {}
  
.widget_pages {}
.widget_pages ul {}
.widget_pages ul li {}
.widget_pages ul li a {}
  
.widget_links {}
.widget_links li:after {}
.widget_links li:before {}
.widget_tag_cloud {}
.widget_tag_cloud a {}
.widget_tag_cloud a:after {}
.widget_tag_cloud a:before {}
  
.widget_calendar {}
#calendar_wrap {}
#calendar_wrap th {}
#calendar_wrap td {}
#wp-calendar tr td {}
#wp-calendar caption {}
#wp-calendar a {}
#wp-calendar #today {}
#wp-calendar #prev {}
#wp-calendar #next {}
#wp-calendar #next a {}
#wp-calendar #prev a {}
  
.widget_categories {}
.widget_categories ul {}
.widget_categories ul li {}
.widget_categories ul ul.children {}
.widget_categories a {}
.widget_categories select{}
.widget_categories select#cat {}
.widget_categories select.postform {}
.widget_categories option {}
.widget_categories .level-0 {}
.widget_categories .level-1 {}
.widget_categories .level-2 {}
.widget_categories .level-3 {}
  
.recentcomments {}
#recentcomments {}
#recentcomments li {}
#recentcomments li a {}
.widget_recent_comments {}
  
.widget_recent_entries {}
.widget_recent_entries ul {}
.widget_recent_entries ul li {}
.widget_recent_entries ul li a {}
  
.textwidget {}
.widget_text {}
.textwidget p {}

然而，随着WordPress移动到基于块的小部件区域，您现在可以向小部件区域添加不同的块，并且每个块都会动态生成CSS类。

在本文的后面部分，我们将向您展示如何找到这些CSS类。

默认注释表单类

评论是许多WordPress网站的参与中心。它们的造型有助于您为用户提供更清洁、更吸引人的体验。

WordPress添加了以下默认CSS类，以帮助主题开发人员风格评论区域。

/*Comment Output*/
  
.commentlist .reply {}
.commentlist .reply a {}
  
.commentlist .alt {}
.commentlist .odd {}
.commentlist .even {}
.commentlist .thread-alt {}
.commentlist .thread-odd {}
.commentlist .thread-even {}
.commentlist li ul.children .alt {}
.commentlist li ul.children .odd {}
.commentlist li ul.children .even {}
  
.commentlist .vcard {}
.commentlist .vcard cite.fn {}
.commentlist .vcard span.says {}
.commentlist .vcard img.photo {}
.commentlist .vcard img.avatar {}
.commentlist .vcard cite.fn a.url {}
  
.commentlist .comment-meta {}
.commentlist .comment-meta a {}
.commentlist .commentmetadata {}
.commentlist .commentmetadata a {}
  
.commentlist .parent {}
.commentlist .comment {}
.commentlist .children {}
.commentlist .pingback {}
.commentlist .bypostauthor {}
.commentlist .comment-author {}
.commentlist .comment-author-admin {}
  
.commentlist {}
.commentlist li {}
.commentlist li p {}
.commentlist li ul {}
.commentlist li ul.children li {}
.commentlist li ul.children li.alt {}
.commentlist li ul.children li.byuser {}
.commentlist li ul.children li.comment {}
.commentlist li ul.children li.depth-{id} {}
.commentlist li ul.children li.bypostauthor {}
.commentlist li ul.children li.comment-author-admin {}
  
#cancel-comment-reply {}
#cancel-comment-reply a {}
  
/*Comment Form */
  
#respond { }
#reply-title { }
#cancel-comment-reply-link { }
#commentform { }
#author { }
#email { }
#url { }
#comment
#submit
.comment-notes { }
.required { }
.comment-form-author { }
.comment-form-email { }
.comment-form-url { }
.comment-form-comment { }
.form-allowed-tags { }
.form-submit

有关更多详细信息，请参阅我们关于如何在WordPress中设置评论样式的指南。

查找WordPress块类

WordPress块编辑器为块动态生成CSS类。

要找到这些CSS类，您需要将该特定块添加到帖子或页面中。之后，您需要单击预览按钮以查看正在运行的块。

在预览选项卡中，将鼠标带到您刚刚添加的块，然后右键单击选择检查工具。

在开发人员控制台中，您将看到块生成的HTML。从这里，您可以看到块添加的CSS类。

在上面的屏幕截图中，我们正在查看画廊块的CSS类。然后，您可以使用这些CSS类在WordPress主题中设置画廊块的样式。

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

现在，默认的WordPress CSS类相当全面。然而，他们的目的是主要为主题开发人员提供一个标准化的框架来构建。

对于您的个人网站，您可能需要为可能无法找到默认CSS类为目标的区域添加自定义CSS。

同样，有时您可能只想对特定的帖子或页面进行小幅更改，而不将其应用于整个主题。

幸运的是，WordPress为您提供了几种在不同领域添加CSS类的简单方法。

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

如果您想快速将自定义CSS类添加到特定帖子或页面，那么最简单的方法是使用块编辑器。

只需编辑帖子或页面，然后选择要添加自定义CSS类的块。在块设置下，单击高级面板并添加CSS类的名称。

不要忘记通过单击更新按钮来保存您的更改。

您现在可以使用该类添加自定义CSS代码，该代码仅影响此特定帖子或页面中的此特定块。

在WordPress导航菜单中

您还可以将自定义CSS添加到WordPress导航菜单项中。假设您想将菜单项转换为按钮，那么这种方法就派上用场了。

只需转到外观?菜单页面，然后单击屏幕右上角的屏幕选项按钮。

从这里，您需要选中CSS类选项旁边的框。

接下来，您需要向下滚动并单击以展开要添加自定义CSS类的菜单项。

您会注意到一个标有CSS类的字段。继续在这里添加您的自定义CSS类。

不要忘记单击保存菜单按钮来存储您的更改。

您现在可以使用此自定义CSS类以不同的方式设置该特定菜单项的样式。

奖励：无需编写CSS代码即可轻松设计WordPress主题

学习使用自定义CSS设置WordPress主题的样式是一项非常有用的技能。然而，一些用户可能只是想要一个解决方案来设计他们的WordPress主题，而无需编写CSS代码。

为此，您需要SeedProd。它是市场上最好的WordPress页面构建工具，允许您轻松创建自定义主题，而无需编写任何代码。

SeedProd附带随时可以使用的主题，您可以将其用作起点。

您还可以通过手动创建模板从头开始创建主题。

然后，您可以使用直观的拖放网站构建界面编辑自定义主题。

只需将块放到您的设计中，即可创建自己的布局。

您还可以通过简单的点击和单击轻松更改任何项目。您可以使用自己的颜色、背景、字体等。

如何在WordPress中为自定义帖子类型创建高级搜索表单 2018年12月30日