WordPress adaugă propriile clase CSS la diferite elemente în majoritatea temelor. Aceste clase implicite ajută la stilizarea automată a diferitelor părți ale site-ului dvs.
Cunoașterea acestor clase CSS implicite poate fi foarte utilă. Ele facilitează personalizarea aspectului site-ului dvs. fără a începe de la zero.
De exemplu, odată ce am început să folosim CSS pe site-urile noastre, am constatat că este mult mai ușor să stilizăm conținutul blogului pentru a-l face să iasă în evidență.
În acest articol, veți găsi o foaie de parcurs cu aceste clase CSS generate implicit de WordPress. De asemenea, vă vom arăta cum să găsiți mai multe clase CSS și să le adăugați pe ale dvs. atunci când aveți nevoie.
De ce să învățăm despre CSS-ul generat implicit de WordPress?
WordPress generează și adaugă automat clase CSS implicite la diferite elemente de pe site-ul dvs. WordPress.
Dezvoltatorii de teme pot experimenta cu aceste clase CSS implicite pentru a stiliza zonele comune ale site-urilor WordPress, cum ar fi zonele de conținut, barele laterale, widget-urile, meniurile de navigare și multe altele.
Deci, cunoașterea acestor clase CSS este utilă dacă înveți dezvoltarea temelor WordPress sau pur și simplu încerci să creezi o temă copil pentru propriul tău site web.
De asemenea, vă ajută să stilizați rapid anumite elemente din tema dvs. WordPress prin adăugarea de CSS personalizat fără a crea propria temă.
Notă: Nu trebuie să învățați CSS pentru a vă schimba stilurile temei sau pentru a crea o temă personalizată. Dacă preferați să nu învățați codare, puteți folosi un constructor drag-and-drop precum SeedProd. Vom vorbi mai multe despre asta mai târziu în articol.
În secțiunile următoare, vom partaja clasele CSS generate implicit de WordPress. Iată o prezentare rapidă a tuturor lucrurilor pe care le vom acoperi în acest articol:
- Stiluri implicite pentru clasa corpului
- Clase implicite pentru stilul postărilor
- Clase implicite pentru meniul de navigare
- Clase implicite pentru widget-uri WordPress
- Clase implicite pentru formularul de comentarii
- Găsirea claselor de blocuri WordPress
- Adăugarea propriilor clase CSS personalizate în WordPress
- Bonus: Proiectați cu ușurință o temă WordPress fără a scrie cod CSS
Fără alte introduceri, să începem și să învățăm cum să facem ca site-ul dvs. WordPress să arate exact așa cum doriți!
Stiluri implicite pentru clasa corpului
În HTML, eticheta <body> conține structura de aspect a oricărei pagini web, făcând-o foarte importantă în designul temelor WordPress.
WordPress adaugă mai multe clase CSS la tag-ul body. Designerii de teme pot folosi aceste clase pentru a stiliza eficient containerul body.
// Added when a website is using a right-to-left language e.g. Arabic, Hebrew
.rtl {}
// Added when home page is being displayed
.home {}
// Added when blog page is being displayed
.blog {}
// Added when an Archive page is being displayed
.archive {}
// Added when a date based archive is displayed
.date {}
// Added on search pages
.search {}
// Added when pagination is enabled
.paged {}
// Added when an attachment page is displayed
.attachment {}
// Added when a 404 error page is displayed
.error404 {}
// Added when a single post is dispayed includes post ID
.single postid-(id) {}
// Added when a single attachment is displayed. Includes attachment ID
.attachmentid-(id) {}
// Added when a single attachment is displayed. Includes attachment mime-type
.attachment-(mime-type) {}
// Added when an author page is displayed
.author {}
// Added when an author page is displayed. Includes author name.
.author-(user_nicename) {}
// Added when a category page is displayed
.category {}
//Added when a category page is displayed. Includes category slug.
.category-(slug) {}
// Added when a tag page is displayed.
.tag {}
// Added when a tag page is displayed. Includes tag slug.
.tag-(slug) {}
// Added when a parent page is displayed.
.page-parent {}
// Added when a child page is displayed. Includes parent page ID.
.page-child parent-pageid-(id) {}
// Added when a page is displayed using page template. Includes page template file name.
.page-template page-template-(template file name) {}
// Added when search results are displayed.
.search-results {}
// Added when search returns no results.
.search-no-results {}
// Added when a logged in user is detected.
.logged-in {}
// Added when a paginated page is displayed. Includes page number.
.paged-(page number) {}
// Added when a paginated single item is displayed. Includes page number.
.single-paged-(page number) {}
// Added when a paged page type is displayed. Includes page number.
.page-paged-(page number) {}
// Added when a paged category page is displayed. Includes page number.
.category-paged-(page number) {}
// Added when a paged tag page is displayed. Includes page number.
.tag-paged-(page number) {}
//Added when a paged date based archive page is displayed. Includes page number.
.date-paged-(page number) {}
// Added when a paged author page is displayed. Includes page number.
.author-paged-(page number) {}
// Added when a paaged search page is displayed. Includes page number.
.search-paged-(page number) {}
După cum puteți vedea, aceste clase includ o mare varietate de condiții pe care le puteți viza în stilurile CSS.
De exemplu, dacă ați dori ca pagina categoriei 'Știri' să aibă o culoare de fundal diferită, atunci puteți adăuga următorul CSS personalizat.
.category-news {
background-color:#f7f7f7;
}
Sfat expert: Aveți nevoie de o modalitate ușoară de a adăuga fragmente de cod și CSS în WordPress? Încercați pluginul gratuit WPCode pentru a vă proteja fragmentele de cod pe viitor. fragmente de cod.
Clase implicite pentru stilul postărilor
La fel ca în cazul elementului body, WordPress adaugă clase dinamice și elementelor de postare.
Acest element este de obicei eticheta <article> din șablonul temei dvs. Cu toate acestea, poate fi orice altă etichetă, în funcție de tema dvs. WordPress. Clasele CSS pentru postări sunt afișate în tema dvs. prin adăugarea etichetei de șablon post_class().
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
Iată o listă cu unele dintre cele mai comune clase CSS generate de funcția post_class():
// Adds a class with ID for single items
.post-(ID) {}
// Generic post claass added for single blog posts.
.post {}
// Generic page class added when a single page is displayed.
.page {}
// Generic attachment class added to attachment pages.
.attachment {}
// Adds a post type class e.g. type-post
.type(post-type){}
// Adds a class for post format if theme supports posts formats. E.g. format-standard
.format-(post-format){}
// Added when an item has a featured image
.has-post-thumbnail{}
// Added when a sticky post is displayed
.sticky {}
// Generic class to display an entry
.hentry {}
// Classes with categories assigned to a post. E.g. category-news category-movies
.category-(slug) {}
// Classes with tags assigned to a post. e.g. tag-photofriday tag-tgif
.tag-(slug) {}
Clasele postărilor vă permit să stilizați postările și paginile blogului în funcție de diferite condiții. De exemplu, puteți stiliza postările blogului dintr-o anumită categorie diferit, folosind următorul CSS personalizat:
.category-news {
background-color:#EFEFEF;
}
Dacă nu vedeți editorul CSS în tabloul de bord WordPress, urmați tutorialul nostru despre cum să remediați lipsa personalizatorului de temă WordPress.
Clase implicite pentru meniul de navigare
WordPress adaugă, de asemenea, clase CSS la meniurile de navigare. Următoarele sunt clasele implicite adăugate la meniurile de navigare.
// Class for Current Page
.current_page_item{}
// Class for Current Category
.current-cat{}
// Class for any other current Menu Item
.current-menu-item{}
// Class for a taxonomies
.menu-item-type-(taxonomy){}
// class to distinguish post types.
.menu-item-type-(post_type){}
// Class for any custom item that you added
.menu-item-type-custom{}
// Class for the Home Link
.menu-item-home{}
Tema dvs. WordPress va adăuga, de asemenea, o clasă CSS fiecărei locații de meniu de navigare.
Să spunem că tema ta atribuie clasa meniului principal unei locații de meniu în interiorul zonei antetului, iar apoi o poți viza în CSS-ul tău folosind următoarele clase CSS.
// container class
#header .primary-menu{}
// container class first unordered list
#header .primary-menu ul {}
//unordered list within an unordered list
#header .primary-menu ul ul {}
// each navigation item
#header .primary-menu li {}
// each navigation item anchor
#header .primary-menu li a {}
// unordered list if there is drop down items
#header .primary-menu li ul {}
// each drop down navigation item
#header .primary-menu li li {}
// each drap down navigation item anchor
#header .primary-menu li li a {}
Pentru mai multe detalii, poți consulta ghidul nostru despre cum să stilizezi meniurile de navigare în WordPress.
Clase implicite pentru widget-uri WordPress
Widgeturile sunt o modalitate ușoară de a afișa blocuri non-conținut în tema ta WordPress. Ele sunt, de obicei, afișate în zone pregătite pentru widgeturi dedicate sau în bare laterale.
WordPress adaugă următoarele clase la widgeturile vechi.
.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 {}
Cu toate acestea, pe măsură ce WordPress trece la zone de widget bazate pe blocuri, puteți acum adăuga diferite blocuri în zonele dvs. de widget, iar fiecare dintre acestea generează clase CSS dinamic.
Vă vom arăta cum să găsiți aceste clase CSS mai târziu în acest articol.
Clase implicite pentru formularul de comentarii
Comentariile sunt centrul de interacțiune pentru multe site-uri WordPress. Stilarea lor vă ajută să oferiți utilizatorilor o experiență mai curată și mai captivantă.
WordPress adaugă următoarele clase CSS implicite pentru a ajuta dezvoltatorii de teme să stilizeze zonele de comentarii.
/*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
Pentru mai multe detalii, consultați ghidul nostru despre cum să stilizați comentariile în WordPress.
Găsirea claselor de blocuri WordPress
Editorul de blocuri WordPress generează dinamic clase CSS pentru blocuri.
Pentru a găsi aceste clase CSS, va trebui mai întâi să adăugați un anumit bloc la o postare sau pagină. Apoi, veți dori să faceți clic pe butonul „Previzualizare” pentru a vedea blocul în acțiune.
În fila de previzualizare, pur și simplu mutați mouse-ul peste blocul pe care tocmai l-ați adăugat și faceți clic dreapta pentru a selecta instrumentul Inspect.
În consola dezvoltatorului, vei vedea codul HTML generat de bloc și clasele CSS pe care le-a adăugat.
În captura de ecran de mai sus, ne uităm la clasele CSS ale blocului Galerie. Puteți apoi utiliza aceste clase CSS pentru a stiliza blocul galerie în tema WordPress.
Adăugarea propriilor clase CSS personalizate în WordPress
Acum, clasele CSS implicite WordPress sunt destul de cuprinzătoare. Cu toate acestea, scopul lor principal este de a oferi dezvoltatorilor de teme un cadru standardizat cu care să construiască.
Pentru site-ul dvs., este posibil să fie necesar să adăugați CSS personalizat în zone unde clasele CSS implicite nu sunt disponibile.
Similar, s-ar putea să doriți să faceți modificări mici la un post sau o pagină specifică, fără a afecta întreaga temă.
Din fericire, WordPress vă oferă mai multe modalități ușoare de a adăuga clase CSS în diferite zone. Iată câteva metode:
Adăugați clase CSS personalizate la un bloc în editorul de blocuri
Dacă doriți să adăugați rapid o clasă CSS personalizată unui post sau unei pagini specifice, cea mai ușoară modalitate de a face acest lucru este prin utilizarea editorului de blocuri.
Pur și simplu editați postarea sau pagina și selectați blocul unde doriți să adăugați o clasă CSS personalizată. Sub setările blocului, faceți clic pe panoul „Avansat” și adăugați numele clasei CSS.
Nu uitați să salvați modificările făcând clic pe butonul „Actualizare”.
Acum puteți utiliza această clasă pentru a adăuga cod CSS personalizat care va afecta doar acest bloc particular din acest post sau pagină particulară.
În meniurile de navigare WordPress
Poți adăuga, de asemenea, CSS personalizat la elementele meniului de navigare WordPress. Să spunem că vrei să transformi un element de meniu într-un buton, atunci această metodă este utilă.
Pur și simplu accesați pagina Aspect » Meniuri și faceți clic pe butonul „Opțiuni ecran” din colțul din dreapta sus al ecranului.
De aici, veți dori să bifați căsuța de lângă opțiunea „Clase CSS”.
Apoi, să derulăm în jos și să extindem elementul de meniu unde doriți să adăugați clasa CSS personalizată.
Veți observa apoi un câmp etichetat clase CSS. Adăugați clasa CSS personalizată aici.
Nu uitați să faceți clic pe butonul „Salvează meniul” pentru a păstra modificările.
Acum puteți folosi această clasă CSS personalizată pentru a stiliza acel element de meniu particular diferit.
Bonus: Proiectați cu ușurință o temă WordPress fără a scrie cod CSS
Învățarea stilizării temei WordPress cu CSS personalizat este o abilitate foarte utilă. Cu toate acestea, unii utilizatori ar putea dori pur și simplu o soluție pentru a-și proiecta tema WordPress fără a scrie vreodată cod CSS.
Pentru aceasta, veți avea nevoie de SeedProd. Este cel mai bun instrument de construire a paginilor WordPress de pe piață pentru a crea cu ușurință teme personalizate fără a scrie cod.
SeedProd vine cu teme gata de utilizat pe care le puteți folosi ca punct de plecare.
Dacă doriți, puteți crea o temă de la zero.
După ce ai ales un șablon, ești gata să-ți editezi tema personalizată folosind un editor intuitiv drag-and-drop.
Pur și simplu plasați blocuri în designul dvs. pentru a crea propriile dvs. layout-uri.
De asemenea, puteți schimba cu ușurință orice element cu un simplu clic. În plus, puteți folosi propriile culori, fundal, fonturi și multe altele.
Pentru mai multe detalii, consultați tutorialul nostru pas cu pas despre cum să creați ușor o temă WordPress personalizată fără a scrie niciun cod.
Sperăm că acest articol v-a ajutat să găsiți fișa de referință CSS generată implicit de WordPress. În continuare, s-ar putea să doriți să consultați ghidul nostru despre cum să minimizați fișierele CSS sau JavaScript în WordPress și cum să eliminați CSS-ul neutilizat în WordPress.
Dacă ți-a plăcut acest articol, te rugăm să te abonezi la canalul nostru de YouTube pentru tutoriale video WordPress. Ne poți găsi, de asemenea, pe Twitter și Facebook.
Gwyneth Llewelyn
O referință cu adevărat, cu adevărat utilă — mai ales atunci când doriți să adăugați un stil „suplimentar”, iar cea mai ușoară modalitate de a face acest lucru este pur și simplu să utilizați unul dintre stilurile încorporate (deoarece toate blocurile permit adăugarea de clase suplimentare — dar nu toate temele vă permit să adăugați CSS suplimentar, decât dacă vă creați propria temă copil, etc.)
Mă întreb dacă, printre clasele CSS „mai noi”, Automattic a oferit ceva pentru stilizarea separatoarelor. Îmi plac notele de subsol și le folosesc foarte mult (chiar înainte ca acestea să fie „standard” în WP, în zilele versiunii 6.3!), dar nu-mi place stilul minimalist pe care îl au. WordPress recunoaște pe deplin că acesta este un „lucru în curs de desfășurare” și că se pot schimba puține lucruri, în afară de unele atribute ale fontului: https://wordpress.org/documentation/article/footnotes-block/
Prin urmare — CSS-ul vine în ajutor! Am nevoie doar de o clasă de bază care să vă ofere o
lățime de 30%. Speram să obțin ceva de genul acesta din lista dvs. extinsă, dar mi-e teamă că nu — cel puțin nu până în toamna anului 2025.Mulțumesc oricum. Lista dvs. este totuși destul de utilă!
Moinuddin Waheed
Foarte utilă foaie de trișare pentru cei care au un pic de background de dezvoltator și au experiență practică cu CSS.
Acest lucru va fi foarte util pentru a face modificări la aspectul vizual și a-l face frumos.
Mulțumesc pentru crearea acestei foi de trișare.
Mrteesurez
Felicitări, ați creat foi de referință CSS utile. Acestea vor facilita gestionarea corectă a stilului odată stăpânite. Vă mulțumim că v-ați acordat timp pentru a combina aceste foi de referință CSS pentru noi.
Rodrigo Vieira Eufrasio da Silva
Sunteți de felicitat pentru acest conținut minunat. Aș recomanda doar actualizarea acestui articol și să ne spuneți ce clase sunt generate de Guttenberg și de cea mai recentă versiune de WordPress, deoarece această postare este depășită. Dar m-a ajutat mult.
Îmbrățișări pentru voi toți.
Suport WPBeginner
Thank you for letting us know, we’ll be sure to take a look
Admin
Alison Westall
Există o clasă CSS pentru a schimba spațierea interioară a unui element? Mulțumesc!
Suport WPBeginner
Odată ce găsești obiectul la care vrei să adaugi spațiere, vei folosi:
padding, padding-top, padding-right, padding-bottom, padding-left
în funcție de tipul de spațiere pe care vrei să-l adaugi
Admin
Matt Cauley
Mulțumesc pentru informații. Tocmai am salvat pagina în marcaje, chiar dacă are câțiva ani!
Suport WPBeginner
Thank you, while the article is older, it should still be useful
Admin
MS Shohan
Lucrare grozavă, frate. Mulțumesc pentru că ai făcut o listă cu toate clasele implicite WP
Hannah Steele
Bună, mă chinui foarte tare să formatez pagina de evenimente generată automat.
Vă rog să mă ajutați?
Arunjith RS
Foarte util.. Mulțumesc.
Shai
Poți (dacă nu este deja altundeva) să listezi clasele pentru tabloul de bord de administrare și widgeturile de administrare.
arată ca și cum administratorul folosește un loader (wp-admin/load-styles.php) pentru a include CSS-ul, dar acel CSS este comprimat și greu de citit. ar fi frumos să vedem o listă a elementelor utilizate. de exemplu, dacă vrei să creezi propriul widget cu tab-uri; am inspectat CSS-ul și pot vedea o listă mare de CSS-uri legate de clasa .nav-tab.
Ari Susanto
și „entry-content” în sine!
Ari Susanto
Vreau să adaug acesta:
"status-publish"
luroch
O întrebare: când creez o temă bootstrap din underscores, ar trebui să păstrez clasele și ID-urile care vin cu acest framework, adăugând doar cele de Bootstrap, sau pot folosi doar clase și ID-uri Bootstrap?
Ari Susanto
Cum le-ai găsit? Există o modalitate automată, cum ar fi utilizarea unei funcții php, poate?
Stephen Clark
Postare fantastică și foarte informativă. Mă întreb dacă ați putea completa această postare cu detalii similare despre footer-ul WP. M-am chinuit cu stilizarea și formatarea footer-ului cu tema pe care o folosesc și cu alte site-uri pe care le-am construit.
Ar fi de asemenea util să aveți un fișier CSS descărcabil care să conțină toate aceste stiluri. Mulțumesc!
Kevin Pryce
Când inspectez elementul doar al temei mele WordPress, nu văd aceste stiluri, în special cele aplicate clasei body. Trebuie să le pui în șablon?
Joel Bladt
O compilație frumoasă a tuturor claselor standard WordPress. Au fost acestea chiar toate clasele adăugate automat de WordPress? Dacă clasele sunt depășite și au dispărut, sau au apărut altele noi, aștept cu nerăbdare actualizarea listei.
– Blogger german și tradus cu Google Translator.
Suport WPBeginner
Este actualizat în măsura cunoștințelor noastre, dacă găsești vreo clasă învechită, te rugăm să ne anunți.
Admin
loreto
time saver! now let me mess those styles
Amba Junior
Tutorial foarte util. La fel ca ghidul despre hook-urile vizuale Genesis, acesta rezumă foarte bine Genesis
Malcolm Owen
Știți ce ar fi util? O versiune PDF imprimabilă a acestui ghid...
Pete
http://www.printfriendly.com/print/v2?url=http%3A%2F%2Fwww.wpbeginner.com%2Fwp-themes%2Fdefault-wordpress-generated-css-cheat-sheet-for-beginners%2F#
Adriane
Mulțumesc Pete!
wpbeginner
@smashingmag Thank you for retweeting our article
really appreciate the love.
favstar50
@smashingmag Felicitări pentru tweet-ul dvs. de 50★! http://t.co/r78Ao3Sm
bobHankin
@photoassassin Nu, nu am făcut-o. E grozav! La îndemână și!.
eugenebicyclist
Tocmai învăț să lucrez cu WP și acest lucru este foarte util. Mulțumesc.