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

你有没有想过如何设计WordPress主题的不同元素？它从主题到主题各不相同，但有一些由WordPress生成的CSS类和ID。如果您是试图为主题设置样式或想要为公开发布创建主题的人，那么这些是您可能要考虑在主题中添加的样式元素。

这个备忘单的目的是帮助那些希望进入WordPress主题样式的初学者。如果你是一个不想处理代码的初学者，那么我们建议你得到一个像Headway这样的主题框架，通过拖放操作为你完成整个过程。对于其他人，我们将逐一介绍一些最重要的默认WordPress样式。

视频教程

订阅WPBeginner

如果您不喜欢该视频或需要更多说明，请继续阅读。

默认的Body Class样式

WordPress的一大优点是它的可定制性。它允许您使用CSS定位站点的非常具体的方面。其中一种方法是将自定义类添加到博客的各个元素中。其中最重要的是＆lt; body＆gt;标签。以下是WordPress可能添加到此元素的常见类的一些示例：

  .rtl {}  .home {}  .blog {}  .archive {}  .date {}  .search {}  .paged {}  .attachment {}  .error404 {}  .single postid-(id) {}  .attachmentid-(id) {}  .attachment-(mime-type) {}  .author {}  .author-(user_nicename) {}  .category {}  .category-(slug) {}  .tag {}  .tag-(slug) {}  .page-parent {}  .page-child parent-pageid-(id) {}  .page-template page-template-(template file name) {}  .search-results {}  .search-no-results {}  .logged-in {}  .paged-(page number) {}  .single-paged-(page number) {}  .page-paged-(page number) {}  .category-paged-(page number) {}  .tag-paged-(page number) {}  .date-paged-(page number) {}  .author-paged-(page number) {}  .search-paged-(page number) {}  

例如，如果您希望以特定方式设置搜索结果页面的样式，则可以使用“搜索结果”类添加样式。当搜索结果页面处于活动状态时，WordPress仅将此类添加到body标签，因此它不会影响任何其他页面。

默认发布样式

就像body元素一样，WordPress也会为post元素添加动态类。以下是一些最受欢迎的列表：

  .post-id {}  .post {}  .page {}  .attachment {}  .sticky {}  .hentry {}  .category-misc {}  .category-example {}  .tag-news {}  .tag-wordpress {}  .tag-markup {}  

如果你在WordPress 3.1中阅读了我们的文章What，Whys和How to of of Post格式，那么你就发布格式以及如何根据你选择的格式不同地显示你的帖子。再一次，WordPress使用post_class（）函数为您的帖子添加动态类，这将允许您为每种格式创建自己的样式。 post_class（）函数将以“.format-foo”的形式添加一个类，其中foo是您选择的任何帖子格式，即。画廊，图像等

  .format-image {}  .format-gallery {}  .format-chat {}  .format-link {}  .format-quote {}  .format-status {}  .format-video {}  

默认菜单样式

在我们的文章中，我们讨论了如何设置WordPress导航菜单的样式，我们将讨论如何将自己的类添加到菜单中。我们假设您已经阅读过它，并且您为导航菜单指定了自己的“主菜单”类名。

  #header .main-menu{} // container class  #header .main-menu ul {} // container class first unordered list  #header .main-menu ul ul {} //unordered list within an unordered list  #header .main-menu li {} // each navigation item  #header .main-menu li a {} // each navigation item anchor  #header .main-menu li ul {} // unordered list if there is drop down items  #header .main-menu li li {} // each drop down navigation item  #header .main-menu li li a {} // each drap down navigation item anchor    .current_page_item{} // Class for Current Page  .current-cat{} // Class for Current Category  .current-menu-item{} // Class for any other current Menu Item  .menu-item-type-taxonomy{} // Class for a Category  .menu-item-type-post_type{} // Class for Pages  .menu-item-type-custom{} // Class for any custom item that you added  .menu-item-home{} // Class for the Home Link  

请注意，无论何时在WordPress中创建菜单，它都会自动包装在div中。如果你指定它，这个div只有一个类名（我们选择“主菜单”）。从那里你只是设计各种列表元素。

默认的WYSIWYG编辑器样式

WISWYG编辑器是WordPress最受欢迎和最常用的方面之一。因此，为用户可能添加到博客中的任何内容（如图像或块引用）准备好样式是个好主意。以下CSS显示了WordPress自动添加到这些元素的类：

  .entry-content img {}  .alignleft, img.alignleft {}  .alignright, img.alignright {}  .aligncenter, img.aligncenter {}  .alignnone, img.alignnone {}    .wp-caption {}  .wp-caption img {}  .wp-caption p.wp-caption-text {}    .wp-smiley {}    blockquote.left {}  blockquote.right {}    .gallery dl {}  .gallery dt {}  .gallery dd {}  .gallery dl a {}  .gallery dl img {}  .gallery-caption {}    .size-full {}  .size-large {}  .size-medium {}  .size-thumbnail {}    

您可以看到有几个类只与图像有关。例如，如果用户决定包含左对齐图像，则WordPress将添加“alignleft”类。

默认的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 {}    

样式小部件时，您可能会一遍又一遍地使用相同的样式。因此，最好使用逗号在样式表上组合类。例如，您可以通过执行以下操作来组合.widget_pages ul和.widget_archive ul：

    .widget_pages ul, .widget_archive ul {}    

默认注释表单样式

像样式注释一样丑陋可以让WordPress使用它的默认类更容易。但是，如果您不处理线程注释，则可以忽略其中的许多注释。

    /*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生成的CSS类和ID。如果您是试图为主题设置样式或想要为公开发布创建主题的人，那么这些是您可能要考虑在主题中添加的样式元素。

这个备忘单的目的是帮助那些希望进入WordPress主题样式的初学者。如果你是一个不想处理代码的初学者，那么我们建议你得到一个像Headway这样的主题框架，通过拖放操作为你完成整个过程。对于其他人，我们将逐一介绍一些最重要的默认WordPress样式。

视频教程

订阅WPBeginner

如果您不喜欢该视频或需要更多说明，请继续阅读。

默认的Body Class样式

WordPress的一大优点是它的可定制性。它允许您使用CSS定位站点的非常具体的方面。其中一种方法是将自定义类添加到博客的各个元素中。其中最重要的是＆lt; body＆gt;标签。以下是WordPress可能添加到此元素的常见类的一些示例：

  .rtl {}  .home {}  .blog {}  .archive {}  .date {}  .search {}  .paged {}  .attachment {}  .error404 {}  .single postid-(id) {}  .attachmentid-(id) {}  .attachment-(mime-type) {}  .author {}  .author-(user_nicename) {}  .category {}  .category-(slug) {}  .tag {}  .tag-(slug) {}  .page-parent {}  .page-child parent-pageid-(id) {}  .page-template page-template-(template file name) {}  .search-results {}  .search-no-results {}  .logged-in {}  .paged-(page number) {}  .single-paged-(page number) {}  .page-paged-(page number) {}  .category-paged-(page number) {}  .tag-paged-(page number) {}  .date-paged-(page number) {}  .author-paged-(page number) {}  .search-paged-(page number) {}  

例如，如果您希望以特定方式设置搜索结果页面的样式，则可以使用“搜索结果”类添加样式。当搜索结果页面处于活动状态时，WordPress仅将此类添加到body标签，因此它不会影响任何其他页面。

默认发布样式

就像body元素一样，WordPress也会为post元素添加动态类。以下是一些最受欢迎的列表：

  .post-id {}  .post {}  .page {}  .attachment {}  .sticky {}  .hentry {}  .category-misc {}  .category-example {}  .tag-news {}  .tag-wordpress {}  .tag-markup {}  

如果你在WordPress 3.1中阅读了我们的文章What，Whys和How to of of Post格式，那么你就发布格式以及如何根据你选择的格式不同地显示你的帖子。再一次，WordPress使用post_class（）函数为您的帖子添加动态类，这将允许您为每种格式创建自己的样式。 post_class（）函数将以“.format-foo”的形式添加一个类，其中foo是您选择的任何帖子格式，即。画廊，图像等

  .format-image {}  .format-gallery {}  .format-chat {}  .format-link {}  .format-quote {}  .format-status {}  .format-video {}  

默认菜单样式

在我们的文章中，我们讨论了如何设置WordPress导航菜单的样式，我们将讨论如何将自己的类添加到菜单中。我们假设您已经阅读过它，并且您为导航菜单指定了自己的“主菜单”类名。

  #header .main-menu{} // container class  #header .main-menu ul {} // container class first unordered list  #header .main-menu ul ul {} //unordered list within an unordered list  #header .main-menu li {} // each navigation item  #header .main-menu li a {} // each navigation item anchor  #header .main-menu li ul {} // unordered list if there is drop down items  #header .main-menu li li {} // each drop down navigation item  #header .main-menu li li a {} // each drap down navigation item anchor    .current_page_item{} // Class for Current Page  .current-cat{} // Class for Current Category  .current-menu-item{} // Class for any other current Menu Item  .menu-item-type-taxonomy{} // Class for a Category  .menu-item-type-post_type{} // Class for Pages  .menu-item-type-custom{} // Class for any custom item that you added  .menu-item-home{} // Class for the Home Link  

请注意，无论何时在WordPress中创建菜单，它都会自动包装在div中。如果你指定它，这个div只有一个类名（我们选择“主菜单”）。从那里你只是设计各种列表元素。

默认的WYSIWYG编辑器样式

WISWYG编辑器是WordPress最受欢迎和最常用的方面之一。因此，为用户可能添加到博客中的任何内容（如图像或块引用）准备好样式是个好主意。以下CSS显示了WordPress自动添加到这些元素的类：

  .entry-content img {}  .alignleft, img.alignleft {}  .alignright, img.alignright {}  .aligncenter, img.aligncenter {}  .alignnone, img.alignnone {}    .wp-caption {}  .wp-caption img {}  .wp-caption p.wp-caption-text {}    .wp-smiley {}    blockquote.left {}  blockquote.right {}    .gallery dl {}  .gallery dt {}  .gallery dd {}  .gallery dl a {}  .gallery dl img {}  .gallery-caption {}    .size-full {}  .size-large {}  .size-medium {}  .size-thumbnail {}    

您可以看到有几个类只与图像有关。例如，如果用户决定包含左对齐图像，则WordPress将添加“alignleft”类。

默认的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 {}    

样式小部件时，您可能会一遍又一遍地使用相同的样式。因此，最好使用逗号在样式表上组合类。例如，您可以通过执行以下操作来组合.widget_pages ul和.widget_archive ul：

    .widget_pages ul, .widget_archive ul {}    

默认注释表单样式

像样式注释一样丑陋可以让WordPress使用它的默认类更容易。但是，如果您不处理线程注释，则可以忽略其中的许多注释。

    /*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