You are here:  Home » PHP » 默认WordPress为初学者生成的CSS备忘单

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

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

视频教程

订阅WPBeginner

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

默认的Body Class样式

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

例如,如果您希望以特定方式设置搜索结果页面的样式,则可以使用“搜索结果”类添加样式。当搜索结果页面处于活动状态时,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


评论被关闭。