W artykule:
Czy kiedykolwiek zastanawiałeś się, jak możesz stylizować różne elementy motywu WordPress? Cóż, różni się to w zależności od motywu, ale istnieją pewne klasy CSS i identyfikatory generowane przez WordPress. Jeśli ktoś próbuje wystylizować motyw lub chce utworzyć motyw do publicznego wydania, to są to niektóre elementy stylu, które warto rozważyć dodanie do motywu.
Celem tego ściągawki jest pomoc początkującym, którzy chcą dostać się do stylizacji motywów WordPress. Jeśli jesteś początkującym, który nie chce zajmować się kodami, zalecamy, aby uzyskać ramy tematyczne, takie jak Headway, które robią wszystko za Ciebie za pomocą przeciągania i upuszczania. Dla reszty z Was, mamy zamiar przejść przez niektóre z najważniejszych domyślnych stylów WordPress jeden po drugim.
Video Tutorial
Jeśli nie podoba Ci się film lub potrzebujesz więcej instrukcji, Kontynuuj czytanie.
Domyślne Style Klasy Body
Jedną z wielkich rzeczy w WordPress jest jego możliwość dostosowania. Pozwala kierować bardzo konkretne aspekty witryny za pomocą CSS. Jednym ze sposobów jest dodanie niestandardowych klas do różnych elementów bloga. Najważniejszym z nich jest tag < body>. Oto kilka przykładów wspólnych klas, które WordPress może dodać do tego elementu:
.rtl {}
.Strona główna {}
.blog {}
.archiwum {}
.Data {}
.Szukaj {}
.paged {}
.załącznik {}
.error404 {}
.single postid - (id) {}
.attachmentid - (id) {}
.attachment - (mime-type) {}
.autor {}
.autor - (user_nicename) {}
.Kategoria {}
.Kategoria - (ślimak) {}
.tag {}
.tag - (slug) {}
.strona-rodzic {}
.page-child parent-pageid - (id) {}
.page-template page-template - (nazwa pliku szablonu) {}
.search-results {}
.search-no-results {}
.zalogowany {}
.paged - (numer strony) {}
.single-paged - (page number) {}
.page-paged - (numer strony) {}
.category-paged - (page number) {}
.tag-paged - (numer strony) {}
.date-paged - (page number) {}
.autor-paged - (numer strony) {}
.search-paged - (numer strony) {}
Jeśli na przykład chcesz stylizować stronę wyników wyszukiwania w określony sposób, możesz użyć klasy „wyniki wyszukiwania”, aby dodać stylizację. WordPress dodaje tę klasę tylko do tagu body, gdy Strona wyników wyszukiwania jest aktywna, więc nie wpływa na żadne inne strony.
Domyślne Style Postów
Podobnie jak w przypadku elementu body WordPress dodaje również dynamiczne klasy do elementów post. Oto lista najpopularniejszych:
.post-id {}
.post {}
.strona {}
.załącznik {}
.sticky {}
.hentry {}
.Kategoria-Różne {}
.Kategoria-przykład {}
.tag-news {}
.tag-wordpress {}
.tag-markup {}
Jeśli przeczytałeś nasz artykuł Co, dlaczego i jak to jest z formatów postów w WordPress 3.1 to o formatach postów i jak można wyświetlać swoje posty inaczej w zależności od wybranego formatu. Po raz kolejny WordPress dodaje dynamiczne klasy do Twojego posta za pomocą funkcji post_class (), która pozwoli Ci tworzyć własne style dla każdego formatu. Funkcja post_class () doda klasę w postaci „.format-foo ” gdzie foo jest dowolnym formatem postu, który wybrałeś ie. Galeria, obraz, itp.
.format-Obraz {}
.format-Galeria {}
.format-chat {}
.format-link {}
.format-cytat {}
.format-status {}
.format-video {}
Domyślne Style Menu
W naszym artykule zatytułowanym jak stylizować menu nawigacyjne WordPress omawiamy, w jaki sposób możesz dodać własną klasę do swojego menu. Zakładamy, że przeczytałeś i nadałeś swojemu menu nav własną nazwę klasy „main-menu”.
# header .main-menu {} / / Klasa kontenera
# header .main-menu ul {} / / Klasa kontenera pierwsza lista nieuporządkowana
# header .main-menu ul ul {} / / lista nieuporządkowana wewnątrz listy nieuporządkowanej
# header .main-menu li {} / / każdy element nawigacji
# header .main-menu li a {} / / zakotwiczenie każdego elementu nawigacji
# header .main-menu li ul {} / / lista nieuporządkowana, jeśli jest lista rozwijana
# header .main - menu li li {} / / każdy rozwijany element nawigacji
# header .main-menu li li a {} / / każdy zakotwiczony element nawigacji
.current_page_item {} / / Klasa dla bieżącej strony
.current-cat {} / / Klasa dla bieżącej kategorii
.current-menu-item {} / / Class for any other current Menu Item
.menu-item-type-taxonomy {} / / Klasa dla kategorii
.menu-item-type-post_type {} / / Klasa dla stron
.menu-item-type-custom {} / / Klasa dla dowolnego dodanego elementu
.menu-item-home {} / / Klasa Dla linku Home
Zauważ, że za każdym razem, gdy tworzysz menu w WordPress, jest ono automatycznie zawijane w div. Ten div ma tylko nazwę klasy, jeśli go podasz (wybraliśmy „main-menu”). Stamtąd po prostu stylizujesz różne elementy listy.
Domyślne style edytora WISIWYG
Edytor WISWYG jest jednym z najpopularniejszych i najczęściej używanych aspektów WordPress. Z tego powodu dobrym pomysłem jest przygotowanie stylów na wszystko, co użytkownik może dodać do swojego bloga, takie jak obrazy lub cytaty blokowe. Poniższy CSS pokazuje, jakie klasy WordPress automatycznie dodaje do tych elementów:
.entry-content img {}
.alignleft, img.alignleft {}
./ align = "left" / imgalignright {}
./ align = "center" / imgaligncenter {}
.alignnone, img.alignnone {}
.wp-caption {}
.wp-caption img {}
.wp-caption P. wp-caption-text {}
.wp-smiley {}
blockquote.left {}
blockquote.right {}
.Galeria dl {}
.Galeria dt {}
.Galeria dd {}
.Galeria dl a {}
.Galeria dl img {}
.Galeria-podpis {}
.Rozmiar-Pełny {}
.rozmiar-duży {}
.Rozmiar-Średni {}
.rozmiar-miniaturka {}
Widać, że istnieje kilka klas odnoszących się tylko do obrazów. Jeśli na przykład użytkownik zdecyduje się dołączyć obraz wyrównany do lewej, WordPress doda klasę „alignleft”.
Domyślne Style Widget WordPress
Widżety są kolejnym popularnym aspektem WordPress. Jako deweloper masz kontrolę nad widżetami, które będą wyświetlane, więc zwykle będziesz dokładnie wiedzieć, które style dodać. WordPress zawiera jednak garść domyślnych widżetów i dopóki ich nie usuniesz, mądrze jest dodać stylizację do swoich klas.
.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 {}
.opcja widget_archive {}
.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-kalendarz tr td {}
# wp - calendar caption {}
# wp-kalendarz 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.dzieci {}
.widget_categories a {}
.widget_categories select{}
.widget_categories select # cat {}
.wybierz widget_categories.postform {}
.opcja widget_categories {}
.widget_categories .poziom-0 {}
.widget_categories .poziom-1 {}
.widget_categories .poziom-2 {}
.widget_categories .poziom-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 {}
Podczas stylizacji widżetów prawdopodobnie będziesz używać tych samych stylów w kółko. Z tego powodu dobrym pomysłem jest łączenie klas w arkuszu stylów za pomocą przecinków. Na przykład, można połączyć .widget_pages ul i .widget_archive ul robiąc coś takiego:
.widget_pages ul,.widget_archive ul {}
Domyślne Style Formularza Komentarza
Tak brzydkie, jak komentarze do stylizacji, WordPress ułatwia to dzięki domyślnym klasom. Jeśli jednak nie masz do czynienia z komentarzami z wątkami, możesz zignorować wiele z nich.
/ * Komentarz*/
.commentlist .odpowiedz {}
.commentlist .odpowiedz a {}
.commentlist .alt {}
.commentlist .odd {}
.commentlist .even {}
.commentlist .thread-alt {}
.commentlist .thread-odd {}
.commentlist .thread-even {}
.commentlist li ul.dzieci .alt {}
.commentlist li ul.dzieci .odd {}
.commentlist li ul.dzieci .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 .komentarz-meta {}
.commentlist .komentarz-meta a {}
.commentlist .commentmetadata {}
.commentlist .commentmetadata a {}
.commentlist .rodzic {}
.commentlist .komentarz {}
.commentlist .dzieci {}
.commentlist .pingback {}
.commentlist .bypostauthor {}
.commentlist .komentarz-autor {}
.commentlist .komentarz-Autor-admin {}
.commentlist {}
.commentlist li {}
.commentlist li p {}
.commentlist li ul {}
.commentlist li ul.dzieci li {}
.commentlist li ul.dzieci li. alt {}
.commentlist li ul.dzieci li. byuser {}
.commentlist li ul.dzieci li. komentarz {}
.commentlist li ul.dzieci li. głębokość - {id} {}
.commentlist li ul.dzieci li. bypostauthor {}
.commentlist li ul.dzieci li. komentarz-Autor-admin {}
# cancel-comment-reply {}
# cancel-comment-reply a {}
/ * Formularz Komentarza */
# odpowiedz { }
# reply-title { }
# cancel-comment-reply-link { }
# commentform { }
~ autor { }
# email { }
# url { }
# komentarz
# submit
.komentarz-uwagi { }
.wymagane { }
.comment-form-author { }
.comment-form-email { }
.comment-form-url { }
.comment-form-comment { }
.form-allowed-tags { }
.formularz-prześlij
Ponieważ jest to tylko cheatsheet, nadal istnieje wiele innych klas i identyfikatorów, których mogliśmy Nie objąć. Jeśli uważasz, że coś innego jest ważne i należy do tej listy, Prosimy zostawić komentarz poniżej.
