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

最新推荐文章于 2024-07-31 15:55:27 发布

cumohuo9136

最新推荐文章于 2024-07-31 15:55:27 发布

阅读量141

点赞数

文章标签： python java javascript css html ViewUI

原文链接：https://www.wpbeginner.com/wp-themes/default-wordpress-generated-css-cheat-sheet-for-beginners/

版权

Have you ever wondered how you could style different elements of the WordPress theme? Well it varies from theme to theme, but there are certain CSS classes and IDs that are generated by WordPress. If you are someone who is trying to style a theme, or looking to create a theme for public release, then these are some style elements that you might want to consider adding in your theme.

您是否曾经想过如何设置WordPress主题的不同元素的样式？好吧，因主题而异，但是WordPress会生成某些CSS类和ID。如果您正在尝试为主题设置样式，或希望创建一个主题以供公众发布，则可能需要考虑将这些样式元素添加到主题中。

The goal of this cheat sheet is to assist beginners who are looking to get into WordPress theme styling. If you are a beginner who does not want to deal with the codes, then we recommend that you get a theme framework like Headway which does the whole thing for you with drag and drop. For the rest of you, we are going to go through some of the most important default WordPress styles one by one.

本备忘单的目的是为希望入门WordPress主题样式的初学者提供帮助。如果您是不想使用代码的初学者，那么我们建议您使用像Headway这样的主题框架，它可以通过拖放为您完成全部工作。对于其余的人，我们将一一介绍一些最重要的默认WordPress样式。

影片教学 (Video Tutorial)

演示地址

If you don’t like the video or need more instructions, then continue reading.

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

默认身体类别样式 (Default Body Class Styles)

One of the great things about WordPress is its customizability. It allows you to target very specific aspects of your site with CSS. One of the ways it does this is by adding custom classes to various elements of your blog. The most important of these is the <body> tag. Here are some examples of common classes that WordPress might add to this element:

WordPress的一大优点是其可定制性。它允许您使用CSS定位网站的非常特定的方面。实现此目的的方法之一是通过向博客的各种元素中添加自定义类。其中最重要的是<body>标签。以下是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) {}

If, for example, you would like to style your search results page in a specific way you can use the “search-results” class to add your styling. WordPress only adds this class to the body tag when the search results page is active so it doesn’t affect any other pages.

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

默认帖子样式 (Default Post Styles)

Just like with the body element WordPress adds dynamic classes to the post elements as well. Here is a list of some of the most popular ones:

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


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

If you have read our article What, Whys, and How to’s of Post Formats in WordPress 3.1 then you about post formats and how you can display your posts differently according to the format you choose. Once again, WordPress adds dynamic classes to your post using the post_class () function that will allow you to create your own styles for each format. The post_class () function will add a class in the form of “.format-foo” where foo is whatever post format you have chosen ie. gallery, image, etc.

如果您已经阅读了WordPress 3.1中的文章格式的内容，原因和方法，那么您将了解文章格式以及如何根据您选择的格式不同地显示文章。 WordPress再次使用post_class()函数将动态类添加到您的帖子中，该函数将允许您为每种格式创建自己的样式。 post_class()函数将以“ .format-foo”的形式添加一个类，其中foo是您选择的任何发布格式，即。画廊，图像等


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

默认菜单样式 (Default Menu Styles)

In our article called how to style WordPress navigation menus we discuss how you can go about adding your own class to your menu. We are going to assume you have read it and that you gave your nav menu its own class name of “main-menu”.

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


#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

Notice that whenever you create a menu in WordPress it is automatically wrapped in a div. This div only has a class name if you specify it (we chose “main-menu”). From there you are just styling the various list elements.

请注意，每当您在WordPress中创建菜单时，它都会自动包装在div中。如果您指定该div，则只有一个类名(我们选择“ main-menu”)。在这里，您只是在设计各种列表元素的样式。

默认的WISIWYG编辑器样式 (Default WISIWYG Editor Styles)

The WISWYG editor is one of the most popular and most used aspects of WordPress. For this reason it is a good idea to have styles ready for anything that the user might add to their blog, like images or blockquotes. The following CSS shows you what classes WordPress automatically adds to these elements:

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 {}

You can see that there are several class pertaining just to images. If, for example, the user decides to include a left-aligned image then WordPress will add the “alignleft” class.

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

默认WordPress小部件样式 (Default WordPress Widget Styles)

Widgets are another popular aspect of WordPress. As the developer you have control over which widgets are going to be displayed so you will usually know exactly which styles to add. WordPress comes with a handful of default widgets, however, and unless you remove them it is wise to add styling to their classes.

小部件是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 {}

When styling widgets you will probably end up using the same styles over and over again. For this reason it is a good idea to combine classes on your style sheet using commas. For example, you could combine .widget_pages ul and .widget_archive ul by doing something like this:

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



.widget_pages ul, .widget_archive ul {}

默认评论表单样式 (Default Comment Form Styles)

As ugly as styling comments can get WordPress makes it a lot easier with its default classes. If you are not dealing with threaded comments, however, it is possible to ignore many of them.

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

Since this is only a cheatsheet there are still many other classes and id’s we may not have covered. If you feel as though something else is important and it belongs on this list please feel free to leave a comment below.

由于这只是一个备忘单，因此还有许多其他类和id可能没有涵盖。如果您觉得还有其他重要的事情，并且它属于此列表，请随时在下面发表评论。

翻译自: https://www.wpbeginner.com/wp-themes/default-wordpress-generated-css-cheat-sheet-for-beginners/

cumohuo9136

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
默认WordPress为初学者生成CSS备忘单

Have you ever wondered how you could style different elements of the WordPress theme? Well it varies from theme to theme, but there are certain CSS classes and IDs that are generated by WordPress. If ...
复制链接

扫一扫