Fișă CSS implicită generată de WordPress pentru începători
Publicat: 2022-08-05Căutați o foaie CSS implicită generată de WordPress?
WordPress adaugă automat câteva clase CSS la diferite elemente în majoritatea temelor. Aceste clase CSS implicite pot fi folosite pentru a stila aceste elemente în tema dvs. WordPress.
În acest articol, vă vom arăta foaia CSS implicită generată de WordPress. De asemenea, vom vorbi despre cum să găsiți cu ușurință clase CSS și despre cum să adăugați clase CSS personalizate ori de câte ori aveți nevoie de ele.
De ce să aflați despre CSS implicit generat de WordPress?
WordPress generează și adaugă automat clase CSS implicite la diferite elemente de pe site-ul dvs. WordPress.
Dezvoltatorii de teme WordPress pot folosi apoi aceste clase CSS pentru a stila zonele comune ale tuturor site-urilor WordPress. Aceasta poate include zona de conținut, bare laterale, widget-uri, meniuri de navigare și multe altele.
Cunoașterea acelor clase de CSS este utilă dacă învățați dezvoltarea temei WordPress sau pur și simplu încercați să creați o temă copil pentru propriul site web.
De asemenea, vă ajută să stilați rapid anumite elemente din tema dvs. WordPress adăugând CSS personalizat fără a vă 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 să codificați, atunci puteți utiliza un generator de glisare și plasare precum SeedProd. Vom vorbi mai multe despre asta mai târziu în articol.
Acestea fiind spuse, să aruncăm o privire la clasele CSS implicite generate de WordPress.
Stiluri implicite de clasă corporală
Eticheta body <body> în HTML conține întreaga structură de aspect a oricărei pagini web, ceea ce o face foarte semnificativă în designul oricărei teme WordPress.
WordPress adaugă mai multe clase CSS în zona corpului pe care designerii de teme le pot folosi pentru a modela containerul de corp.
// 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 dvs. CSS.
De exemplu, dacă doriți 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;
}
Aveți nevoie de o modalitate ușoară de a adăuga CSS și fragmente de cod în WordPress? Încercați pluginul gratuit WPCode pentru a vă proteja în viitor fragmentele de cod.
Clasele de stil de postare implicite
La fel ca și în cazul elementului body, WordPress adaugă clase dinamice și elementelor de postare.
Acest element este de obicei eticheta <article> din șablonul de temă. Cu toate acestea, ar putea fi orice altă etichetă, în funcție de tema dvs. Clasele post CSS sunt afișate în tema dvs. prin adăugarea etichetei ș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) {}
Cursurile de postare vă permit să stilați postările de blog și paginile care corespund diferitelor condiții. De exemplu, puteți stila postările de blog înregistrate într-o anumită categorie în mod diferit utilizând 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 personalizarea temei WordPress lipsă.
Clasele implicite din meniul de navigare
WordPress adaugă, de asemenea, clase CSS la meniurile dvs. de navigare. Următoarele sunt clasele implicite adăugate la meniurile de navigare în mod implicit.
// 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 la fiecare locație a meniului de navigare.
Să presupunem că tema dvs. atribuie o clasă de meniu principal unei locații de meniu în interiorul zonei antet, apoi o puteți viza în CSS 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, consultați ghidul nostru despre cum să stilați meniurile de navigare în WordPress.
Clasele implicite de widgeturi WordPress
Widgeturile sunt o modalitate ușoară de a afișa blocuri non-conținut în tema dvs. WordPress. Acestea sunt de obicei afișate în zone dedicate pregătite pentru widget-uri sau bare laterale din tema dvs. WordPress.
WordPress adaugă următoarele clase la widget-urile 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 zonele de widget-uri bazate pe blocuri, acum puteți adăuga diferite blocuri în zonele dvs. de widget și fiecare dintre ele generează clase CSS în mod dinamic.
Vă vom arăta cum să găsiți aceste clase CSS mai târziu în acest articol.
Clase de formulare de comentarii implicite
Comentariile sunt centrul de implicare pentru multe site-uri web WordPress. Stilizarea acestora 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ă stileze zona 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ă stilați comentariile în WordPress.
Găsirea claselor bloc WordPress
Editorul de blocuri WordPress generează în mod dinamic clase CSS pentru blocuri.
Pentru a găsi aceste clase CSS, va trebui să adăugați acel bloc la o postare sau o pagină. După aceea, trebuie să faceți clic pe butonul Previzualizare pentru a vedea blocul în acțiune.
În fila de previzualizare, duceți mouse-ul la blocul pe care tocmai l-ați adăugat și selectați instrumentul Inspectare făcând clic dreapta.
În consola pentru dezvoltatori, veți vedea codul HTML generat de bloc. De aici, puteți vedea clasele CSS adăugate de bloc.
În captura de ecran de mai sus, ne uităm la clasele CSS ale blocului Galerie. Apoi puteți utiliza aceste clase CSS pentru a stila blocul galeriei din tema dvs. WordPress.
Adăugarea propriilor clase CSS personalizate în WordPress
Acum, clasele CSS implicite WordPress sunt destul de cuprinzătoare. Cu toate acestea, scopul lor este de a oferi dezvoltatorilor de teme un cadru standardizat cu care să se construiască.
Pentru site-ul dvs. web individual, poate fi necesar să adăugați CSS personalizat pentru zonele în care este posibil să nu puteți găsi o clasă CSS prestabilită pe care să o vizați.
În mod similar, uneori este posibil să doriți doar să faceți o mică modificare într-o anumită postare sau pagină, fără a o aplica întregii teme.
Din fericire, WordPress vă oferă mai multe modalități simple de a adăuga clase CSS în diferite zone.
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ă la o anumită postare sau pagină, atunci cel mai simplu mod de a face acest lucru este să utilizați editorul de blocuri.
Pur și simplu editați postarea sau pagina și apoi selectați blocul în care doriți să adăugați o clasă CSS personalizată. Sub setări de blocare, faceți clic pe panoul avansat și adăugați numele pentru clasa dvs. CSS.
Nu uitați să salvați modificările făcând clic pe butonul Actualizare.
Acum puteți folosi această clasă pentru a adăuga cod CSS personalizat care va afecta numai acest bloc în această postare sau pagină anume.
În meniurile de navigare WordPress
De asemenea, puteți adăuga CSS personalizat la elementele din meniul de navigare WordPress. Să presupunem că doriți să convertiți un element de meniu în 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, trebuie să bifați caseta de lângă opțiunea clase CSS.
Apoi, trebuie să derulați în jos și să faceți clic pentru a extinde elementul de meniu în care doriți să adăugați clasa CSS personalizată.
Veți observa un câmp etichetat clase CSS. Continuați și adăugați aici clasa dvs. CSS personalizată.
Nu uitați să faceți clic pe butonul Salvare meniu pentru a stoca modificările.
Acum puteți utiliza această clasă CSS personalizată pentru a stila diferit acel element de meniu.
Bonus: Proiectați cu ușurință o temă WordPress fără a scrie cod CSS
A învăța să stilați tema WordPress cu CSS personalizat este o abilitate extrem de utilă. Cu toate acestea, unii utilizatori pot dori pur și simplu o soluție pentru a-și proiecta tema WordPress fără să scrie vreodată cod CSS.
Pentru aceasta, veți avea nevoie de SeedProd. Este cel mai bun instrument de creare a paginilor WordPress de pe piață, care vă permite să creați cu ușurință teme personalizate fără a scrie niciun cod.
SeedProd vine cu teme gata de utilizare pe care le puteți folosi ca punct de plecare.
De asemenea, puteți crea o temă de la zero, creând manual șabloane.
Puteți apoi să editați tema personalizată folosind o interfață intuitivă de creare a site-ului de tip drag and drop.
Pur și simplu plasați blocuri în designul dvs. pentru a vă crea propriile machete.
De asemenea, puteți schimba cu ușurință orice element cu simplu punct și clic. 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 cu ușurință o temă WordPress personalizată fără a scrie niciun cod.
Sperăm că acest articol v-a ajutat să găsiți foaia CSS implicită generată de WordPress. De asemenea, vă recomandăm să consultați ghidul nostru pentru remedierea celor mai frecvente erori WordPress sau să vedeți comparația experților noștri cu cel mai bun software de chat live pentru afaceri mici.
Dacă ți-a plăcut acest articol, atunci te rugăm să te abonezi la canalul nostru YouTube pentru tutoriale video WordPress. Ne puteți găsi și pe Twitter și Facebook.