{"id":9811,"date":"2013-04-27T07:16:56","date_gmt":"2013-04-27T07:16:56","guid":{"rendered":"http:\/\/musilda.cz\/?p=222"},"modified":"2013-04-27T07:16:56","modified_gmt":"2013-04-27T07:16:56","slug":"zakladni-css-styly-generovane-wordpressem","status":"publish","type":"post","link":"https:\/\/affinite.io\/cs\/zakladni-css-styly-generovane-wordpressem\/","title":{"rendered":"Z\u00e1kladn\u00ed css styly generovan\u00e9 WordPressem"},"content":{"rendered":"<p>S t\u00edm jak p\u0159ipravuji \u0159adu \u010dl\u00e1nk\u016f s n\u00e1vodem pro vytvo\u0159en\u00ed responsivn\u00ed \u0161ablony pro WordPress, objevila se ot\u00e1zka, kter\u00e9 css t\u0159\u00eddy budou nutn\u00e9 pro jednoduchou \u0161ablonu a jen\u017e WordPress generuje. Hledal jsem tedy seznam v\u0161ech t\u0159\u00edd, kter\u00e9 by v souboru se styly m\u011bli b\u00fdt a nakonec jsem spojil podklady z \u010dl\u00e1nku na wpbeginner a z codexu.<\/p>\n<p>T\u00e9m\u011b\u0159 v\u0161echny prvky ve WordPressu si m\u016f\u017eete upravit a p\u0159idat jim vlastn\u00ed t\u0159\u00eddy, kter\u00e9 v\u00e1m umo\u017en\u00ed nastylovat vlastn\u00ed vzhled, tak jak pot\u0159ebujete. Syst\u00e9m tak\u00e9 generuje t\u0159\u00eddy ji\u017e v z\u00e1kladn\u00edm nastaven\u00ed a jejich znalost v\u00e1m vytv\u00e1\u0159en\u00ed \u0161ablon uleh\u010d\u00ed.<\/p>\n<h2>Css t\u0159\u00eddy pro tag body<\/h2>\n<p>Body je p\u0159\u00edtomen na ka\u017ed\u00e9 str\u00e1nce, kterou zobraz\u00edte a dle toho, kde se nach\u00e1z\u00edte, zobrazuj\u00ed se v n\u011bm r\u016fzn\u00e9 t\u0159\u00eddy. Aby se v tagu zobrazovaly generovan\u00e9 t\u0159\u00eddy, m\u011blo by body obsahovat funkci body_class();.<\/p>\n<p>Seznam css t\u0159\u00edd:<\/p>\n<pre lang=\"html\">.rtl {}\n.home {}\n.blog {}\n.archive {}\n.date {}\n.search {}\n.paged {}\n.attachment {}\n.error404 {}\n.single postid-(id) {}\n.attachmentid-(id) {}\n.attachment-(mime-type) {}\n.author {}\n.author-(user_nicename) {}\n.category {}\n.category-(slug) {}\n.tag {}\n.tag-(slug) {}\n.page-parent {}\n.page-child parent-pageid-(id) {}\n.page-template page-template-(template file name) {}\n.search-results {}\n.search-no-results {}\n.logged-in {}\n.paged-(page number) {}\n.single-paged-(page number) {}\n.page-paged-(page number) {}\n.category-paged-(page number) {}\n.tag-paged-(page number) {}\n.date-paged-(page number) {}\n.author-paged-(page number) {}\n.search-paged-(page number) {}<\/pre>\n<p>Pokud v\u00e1m m\u011bn\u00edc\u00ed se t\u0159\u00eddy nevyhovuj\u00ed, sta\u010d\u00ed p\u0159idat do body_class(&#8218;moje-trida&#8216;).<\/p>\n<h2>T\u0159\u00eddy pro post<\/h2>\n<p>Stejn\u011b jako body i post m\u00e1 t\u0159\u00eddy p\u0159i pou\u017eit\u00ed post_class(). Pou\u017eit\u00ed stejn\u00e9 jako u body_class.<\/p>\n<p>Seznam t\u0159\u00edd:<\/p>\n<pre lang=\"html\">.post-id {}\n.post {}\n.page {}\n.attachment {}\n.sticky {}\n.hentry {}\n.category-misc {}\n.category-example {}\n.tag-news {}\n.tag-wordpress {}\n.tag-markup {}\n.format-image {}\n.format-gallery {}\n.format-chat {}\n.format-link {}\n.format-quote {}\n.format-status {}\n.format-video {}\n<\/pre>\n<p>.hentry je t\u0159\u00edda, kterou WordPress pou\u017e\u00edv\u00e1 p\u0159i vytv\u00e1\u0159en\u00ed Atom Feed.<\/p>\n<h2>Z\u00e1kladn\u00ed styly pro horizont\u00e1ln\u00ed menu:<\/h2>\n<p>Proto\u017ee menu je pom\u011brn\u011b snadno upraviteln\u00e9 pomoc\u00ed argument\u016f ve funkci wp_nav_menu(), nebudu zde rozepisovat v\u0161echny t\u0159\u00eddy, kter\u00e9 se mohou objevit, ale proto\u017ee m\u00e1 toto b\u00fdt seznam styl\u016f, kter\u00e9 pot\u0159ebujete p\u0159i vytvo\u0159en\u00ed \u0161ablony, uvedu konkr\u00e9tn\u00ed p\u0159\u00edklad:<\/p>\n<pre lang=\"php\">wp_nav_menu(\n      array(\n             'theme_location' =&gt; 'primary-menu',\n             'menu_class =&gt; 'm-menu',\n             'container' =&gt; 'div',\n             'container_class =&gt; 'moje-menu'\n      )\n);<\/pre>\n<p>T\u00edm jsme vytvo\u0159ili menu pro Primary menu, kter\u00e9 by m\u011blo vypadat n\u00e1sledovn\u011b:<\/p>\n<pre lang=\"html\">\n<div class=\"moje-menu\">\n<ul class=\"m-menu\">\npolo\u017eky menu\n<\/ul>\n<\/div>\n<\/pre>\n<h2>Styly, kter\u00e9 budeme pot\u0159ebovat pro nastylov\u00e1n\u00ed menu:<\/h2>\n<pre lang=\"html\"> .moje-menu{} \/\/ t\u0159\u00edda kontejneru (div)\n.moje-menu ul.m-menu {} \/\/ kontejner a t\u0159\u00edda seznamu (samotn\u00e9 menu)\n.moje-menu ul.m-menu li {} \/\/ jednotliv\u00e1 polo\u017eka navigace\n.moje-menu ul.m-menu li a {} \/\/ odkaz z ka\u017ed\u00e9 polo\u017eky navigace\n.moje-menu ul.m-menu li ul {} \/\/ submenu, ve v\u011bt\u0161in\u011b p\u0159\u00edpad\u016f je to dropdown menu\n.moje-menu ul.m-menu li ul li {} \/\/ polo\u017eka submenu\n.moje-menu ul.m-menu li ul li a {} \/\/ odkaz z polo\u017eky submenu\n<\/pre>\n<p>Z\u00e1pis by mohl b\u00fdt jednodu\u0161\u0161\u00ed, ale d\u00e1v\u00e1m p\u0159ednost p\u0159esn\u011bj\u0161\u00ed definici, co\u017e se v\u00e1m vyplat\u00ed, pokud na \u0161ablon\u011b pracuje v\u00edce lid\u00ed.<\/p>\n<p>Dal\u0161\u00ed dv\u011b d\u016fle\u017eit\u00e9 t\u0159\u00eddy jsou:<\/p>\n<pre lang=\"html\">\n.menu-item-home {} \/\/ ozna\u010duje polo\u017eku menu, nastavenou jako homepage\n.current-menu-item {} \/\/ aktu\u00e1ln\u00ed polo\u017eka menu\n<\/pre>\n<h2>Styly generovan\u00e9 pro Wisiwyg editor<\/h2>\n<p>WordPress automaticky p\u0159id\u00e1v\u00e1 prvk\u016f vytvo\u0159en\u00fdm v editoru vlastn\u00ed t\u0159\u00eddy, zde je seznam t\u011bch, kter\u00e9 by ve va\u0161em style.css nem\u011bli chyb\u011bt:<\/p>\n<pre lang=\"html\">.entry-content img {}\n.alignleft, a img.alignleft, img.alignleft {}\n.alignright, a img.alignright, img.alignright {}\n.aligncenter, a img.aligncenter, img.aligncenter {}\n.alignnone, a img.alignnone, img.alignnone {}\n.wp-caption {}\n.wp-caption img {}\n.wp-caption p.wp-caption-text {}\n.wp-smiley {}\nblockquote.left {}\nblockquote.right {}\n.gallery dl {}\n.gallery dt {}\n.gallery dd {}\n.gallery dl a {}\n.gallery dl img {}\n.gallery-caption {}\n.size-full {}\n.size-large {}\n.size-medium {}\n.size-thumbnail {}\n<\/pre>\n<h2>Styly pro z\u00e1kladn\u00ed widgety<\/h2>\n<p>Po instalaci jsou dostupn\u00e9 z\u00e1kladn\u00ed widgety a ani ty by jste p\u0159i p\u0159\u00edprav\u011b \u0161ablony nem\u011bli vynechat, nebo se v\u00e1m m\u016f\u017ee st\u00e1t, \u017ee klient um\u00edst\u00ed do sidebaru kalend\u00e1\u0159 a hned se ozve.<\/p>\n<pre lang=\"html\">.widget {}\n#searchform {}\n.widget_search {}\n.screen-reader-text {}\n.widget_meta {}\n.widget_meta ul {}\n.widget_meta ul li {}\n.widget_meta ul li a {}\n.widget_links {}\n.widget_links ul {}\n.widget_links ul li {}\n.widget_links ul li a {}\n.widget_archive {}\n.widget_archive ul {}\n.widget_archive ul li {}\n.widget_archive ul li a {}\n.widget_archive select {}\n.widget_archive option {}\n.widget_pages {}\n.widget_pages ul {}\n.widget_pages ul li {}\n.widget_pages ul li a {}&gt;\n.widget_links {}\n.widget_links li:after {}\n.widget_links li:before {}\n.widget_tag_cloud {}\n.widget_tag_cloud a {}\n.widget_tag_cloud a:after {}\n.widget_tag_cloud a:before {}\n.widget_calendar {}\n#calendar_wrap {}\n#calendar_wrap th {}\n#calendar_wrap td {}\n#wp-calendar tr td {}\n#wp-calendar caption {}\n#wp-calendar a {}\n#wp-calendar #today {}\n#wp-calendar #prev {}\n#wp-calendar #next {}\n#wp-calendar #next a {}\n#wp-calendar #prev a {}\n.widget_categories {}\n.widget_categories ul {}\n.widget_categories ul li {}\n.widget_categories ul ul.children {}\n.widget_categories a {}\n.widget_categories select{}\n.widget_categories select#cat {}\n.widget_categories select.postform {}\n.widget_categories option {}\n.widget_categories .level-0 {}\n.widget_categories .level-1 {}\n.widget_categories .level-2 {}\n.widget_categories .level-3 {}\n.recentcomments {}\n#recentcomments {}\n#recentcomments li {}\n#recentcomments li a {}\n.widget_recent_comments {}\n.widget_recent_entries {}\n.widget_recent_entries ul {}\n.widget_recent_entries ul li {}\n.widget_recent_entries ul li a {}\n.textwidget {}\n.widget_text {}\n.textwidget p {}\n<\/pre>\n<h2>Styly pro koment\u00e1\u0159e<\/h2>\n<p>Nejprve zobrazen\u00ed ji\u017e odeslan\u00fdch koment\u00e1\u0159\u016f:<\/p>\n<pre lang=\"html\">\n.commentlist .reply {}\n.commentlist .reply a {}\n.commentlist .alt {}\n.commentlist .odd {}\n.commentlist .even {}\n.commentlist .thread-alt {}\n.commentlist .thread-odd {}\n.commentlist .thread-even {}\n.commentlist li ul.children .alt {}\n.commentlist li ul.children .odd {}\n.commentlist li ul.children .even {}\n.commentlist .vcard {}\n.commentlist .vcard cite.fn {}\n.commentlist .vcard span.says {}\n.commentlist .vcard img.photo {}\n.commentlist .vcard img.avatar {}\n.commentlist .vcard cite.fn a.url {}\n.commentlist .comment-meta {}\n.commentlist .comment-meta a {}\n.commentlist .commentmetadata {}\n.commentlist .commentmetadata a {}\n.commentlist .parent {}\n.commentlist .comment {}\n.commentlist .children {}\n.commentlist .pingback {}\n.commentlist .bypostauthor {}\n.commentlist .comment-author {}\n.commentlist .comment-author-admin {}\n.commentlist {}\n.commentlist li {}\n.commentlist li p {}\n.commentlist li ul {}\n.commentlist li ul.children li {}\n.commentlist li ul.children li.alt {}\n.commentlist li ul.children li.byuser {}\n.commentlist li ul.children li.comment {}\n.commentlist li ul.children li.depth-{id} {}\n.commentlist li ul.children li.bypostauthor {}\n.commentlist li ul.children li.comment-author-admin {}\n#cancel-comment-reply {}\n#cancel-comment-reply a {}\n<\/pre>\n<p>Proto\u017ee defaultn\u00ed formul\u00e1\u0159 pro odesl\u00e1n\u00ed koment\u00e1\u0159e nevypad\u00e1 hezky, velmi \u010dasto je to prvek, na kter\u00fd se web design\u00e9r zam\u011b\u0159\u00ed. Zde jsou styly pro n\u011bj:<\/p>\n<pre lang=\"html\">\n#respond { }\n#reply-title { }\n#cancel-comment-reply-link { }\n#commentform { }\n#author { }\n#email { }\n#url { }\n#comment\n#submit\n.comment-notes { }\n.required { }\n.comment-form-author { }\n.comment-form-email { }\n.comment-form-url { }\n.comment-form-comment { }\n.form-allowed-tags { }\n.form-submit { }\n<\/pre>\n<p>Tento seznam je jen doporu\u010den\u00ed, styl\u016f ve va\u0161em z\u00e1kladn\u00edm stylopisu m\u016f\u017ee b\u00e1t daleko v\u00edc, ale tyto by nem\u011bly chyb\u011bt, pokud chcete, aby byla va\u0161e \u0161ablona v\u017edy funk\u010dn\u00ed.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>S t\u00edm jak p\u0159ipravuji \u0159adu \u010dl\u00e1nk\u016f s n\u00e1vodem pro vytvo\u0159en\u00ed responsivn\u00ed \u0161ablony pro WordPress, objevila se ot\u00e1zka, kter\u00e9 css t\u0159\u00eddy budou nutn\u00e9 pro jednoduchou \u0161ablonu a jen\u017e WordPress generuje. Hledal jsem tedy seznam v\u0161ech t\u0159\u00edd, kter\u00e9 by v souboru se styly m\u011bli b\u00fdt a nakonec jsem spojil podklady z \u010dl\u00e1nku na wpbeginner a z codexu.<\/p>\n","protected":false},"author":1,"featured_media":8624,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"rank_math_lock_modified_date":false,"footnotes":""},"categories":[12,32],"tags":[509,522],"class_list":["post-9811","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-navody","category-wordpress-sablony","tag-wordpress-sablona","tag-wordpress-styly"],"_links":{"self":[{"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/posts\/9811"}],"collection":[{"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/comments?post=9811"}],"version-history":[{"count":0,"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/posts\/9811\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/media\/8624"}],"wp:attachment":[{"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/media?parent=9811"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/categories?post=9811"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/tags?post=9811"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}