CSS «WordPress Codex

Limbi: engleza • Espanol • 日本語 ไทย • 中文 (简体) • Russkij • (Adaugati limba dvs.)

WordPress se bazeaza foarte mult pe stilurile de prezentare din CSS. Cu ajutorul temelor, aveti o alegere aproape infinita de optiuni de aspect. Temele WordPress faciliteaza schimbarea aspectului site-ului dvs. web si deschid campul pentru a va ajuta sa creati propria tema si aspectul paginii.

CSS inseamna Cascading Style Sheets . Va permite sa stocati informatii despre prezentarea stilului (cum ar fi culorile si aspectul) separate de structura HTML. Acest lucru permite controlul precis al aspectului site-ului dvs. web si face paginile dvs. mai rapide si mai usor de actualizat.

Acest articol descrie pe scurt utilizarea CSS in WordPress si listeaza cateva referinte pentru informatii suplimentare. Pentru informatii despre CSS in sine, consultati Know Your Sources # CSS.

WordPress si CSS

Temele WordPress utilizeaza o combinatie de fisiere sablon, etichete sablon si fisiere CSS pentru a genera aspectul site-ului dvs. WordPress.

Fisiere sablon 

Fisierele sablon sunt elementele care se reunesc pentru a va crea site-ul. In structura temei WordPress, antetul, bara laterala, continutul si subsolul sunt toate continute in fisiere individuale. Se unesc impreuna pentru a va crea pagina. Acest lucru va permite sa personalizati blocurile. De exemplu, in Tema WordPress implicita, vizualizarea cu mai multe postari gasita pe prima pagina, categorie, arhive si pagini web de cautare pe site-ul dvs., bara laterala este prezenta. Faceti clic pe orice postare, veti fi directionat catre vizualizarea postarii unice si bara laterala va disparea acum. Puteti alege partile si piesele care apar pe pagina dvs. si le puteti personaliza individual, permitand sa apara un alt antet sau o bara laterala pe toate paginile dintr-o anumita categorie. Si altele. Pentru o introducere mai extinsa a sabloanelor, consultati Pasul in sabloane.

Etichete sablon 

Etichetele sablon sunt biti de cod care ofera instructiuni si solicitari de informatii stocate in baza de date WordPress. Unele dintre acestea sunt extrem de configurabile, permitandu-va sa personalizati data, ora, listele si alte elemente afisate pe site-ul dvs. web. Puteti afla mai multe despre etichetele sablonului in Pasul in etichetele sablonului.

Foaie de stil 

Fisierul CSS este locul in care se reuneste totul. Pe fiecare fisier sablon de pe site-ul dvs. exista elemente HTML infasurate in jurul etichetelor si continutului dvs. sablon. In foaia de stil din cadrul fiecarei Teme sunt reguli pentru a controla proiectarea si aspectul fiecarui element HTML. Fara aceste instructiuni, pagina dvs. ar arata pur si simplu ca o pagina lunga tastata. Cu aceste instructiuni, puteti muta structurile blocului de constructie, facand antetul foarte lung si plin de grafica sau fotografii, sau simplu si ingust. Site-ul dvs. poate „pluti” in mijlocul ecranului vizualizatorului cu spatiu in stanga si in dreapta sau se poate intinde pe ecran, umpland intreaga pagina. Bara laterala poate fi in dreapta sau in stanga sau chiar incepe la jumatatea paginii. Modul in care va stilizati pagina depinde de dvs. Dar instructiunile pentru coafare se gasesc in stil.

CSS personalizat in WordPress

Incepand cu WordPress 4.7, puteti adauga acum CSS personalizat la propria tema din ecranul de personalizare a aspectului, fara a fi nevoie de pluginuri suplimentare sau de editare directa a temelor si temelor copil. Doar alegeti fila CSS suplimentara atunci cand va personalizati tema curenta pentru a incepe!

Orice modificare CSS pe care o faceti va aparea in previzualizare, la fel ca alte modificari facute in personalizator, ceea ce inseamna ca aveti timp sa modificati si sa perfectionati aspectul site-ului dvs., fara a modifica de fapt nimic pana cand nu sunteti multumit de toate!

Retineti ca modificarile CSS sunt legate de tema dvs. Aceasta inseamna ca, daca treceti la o tema noua, stilurile CSS personalizate nu vor mai fi active (desigur, daca reveniti la tema anterioara, vor fi din nou acolo).

De ce sa folositi CSS personalizat?

Exista cateva motive pentru care:

• Daca modificati o tema direct si aceasta este actualizata, atunci modificarile dvs. se pot pierde. Prin utilizarea CSS personalizat, va veti asigura ca modificarile dvs. sunt pastrate.
• Utilizarea CSS personalizat poate accelera timpul de dezvoltare.
• CSS personalizat este incarcat dupa CSS-ul original al temei si astfel permite suprascrierea instructiunilor CSS specifice, fara a fi nevoie sa scrieti un intreg CSS setat de la zero.

Clase generate de WordPress

In WordPress 2.5 au fost introduse mai multe clase pentru alinierea imaginilor si a elementelor de bloc (div, p, tabel etc.): aligncenter, alignleft si alignright. In plus, clasa alignnone este adaugata la imaginile care nu sunt aliniate, astfel incat sa poata fi stilizate diferit daca este necesar.

Aceleasi clase sunt folosite pentru a alinia imaginile care au o legenda (incepand cu WordPress 2.6). Sunt necesare trei clase CSS suplimentare pentru subtitrari si inca una pentru accesibilitate. Impreuna, clasele sunt:

/ * = WordPress Core ——————————————— —————– * / .alignnone {margin: 5px 20px 20px 0; } .aligncenter, div.aligncenter {display: block; margine: 5px auto 5px auto; } .alignright {float: right; margine: 5px 0 20px 20px; } .alignleft {float: left; marja: 5px 20px 20px 0; } a img.alignright {float: right; margine: 5px 0 20px 20px; } a img.alignnone {margin: 5px 20px 20px 0; } a img.alignleft {float: left; margine: 5px 20px 20px 0; } un img.aligncenter {display: block; margine-stanga: auto; marginea-dreapta: auto; } .wp-caption {background: #fff; chenar: 1px solid # f0f0f0; latime maxima: 96%; / * Imaginea nu depaseste zona de continut * / padding: 5px 3px 10px; text-align: centru; } .wp-caption.alignnone {margin: 5px 20px 20px 0; } .wp-caption.alignleft {margin: 5px 20px 20px 0; } .wp-caption.alignright {margin: 5px 0 20px 20px; } .wp-caption img {border: 0 none; inaltime: auto; marja: 0; latime maxima: 98,5%; umplutura: 0; latime: auto; } .wp-caption p.wp-caption-text {font-size: 11px; inaltimea liniei: 17 px; marja: 0; umplutura: 0 4px 5px; } / * Text destinat numai cititorilor de ecran. * / .screen-reader-text {border: 0; clip: rect (1px, 1px, 1px, 1px); clip-path: inserare (50%); inaltime: 1px; margine: -1px; overflow: ascuns; umplutura: 0; pozitie: absoluta! importanta; latime: 1 px; word-wrap: normal! important; / * Multe combinatii de cititoare de ecran si browser anunta cuvinte stricate asa cum ar aparea vizual. * /} .screen-reader-text: focus {background-color: #eee; clip: auto! important; clip-path: none; culoare: # 444; display: bloc; font-size: 1em; inaltime: auto; stanga: 5px; inaltimea liniei: normala; umplutura: 15px 23px 14px; decor-text: nici unul; partea de sus: 5 px; latime: auto; indice z: 100000; / * Deasupra barei de instrumente WP. * /}

Fiecare tema ar trebui sa aiba aceste stiluri sau stiluri similare in fisierul sau style.css pentru a putea afisa corect imagini si subtitrari. Elementele HTML exacte si valorile clasei si ID-urilor vor depinde de structura temei pe care o utilizati.

Sabloane si CSS

Pentru a va ajuta sa intelegeti mai multe despre modul in care functioneaza CSS in legatura cu pagina dvs. web, va recomandam sa cititi cateva dintre articolele citate in aceste liste:

• Utilizarea temelor – Exista, de asemenea, multe articole avansate in aceasta lista.
• Sabloane – Lista cuprinzatoare de articole cu teme si sabloane WordPress.
• Dezvoltarea temelor – Ghidul de dezvoltare a temei WordPress si standardele de cod

Ajutor pentru aspectul WordPress

Daca aveti unele probleme sau intrebari cu privire la tema sau aspectul dvs. WordPress, incepeti prin a verifica site-ul web al autorului temei pentru a vedea daca exista o actualizare sau daca exista raspunsuri la intrebarile dvs. Iata cateva alte resurse:

• Lectii despre proiectarea site-ului dvs. WordPress
• Proiectarea si aspectul site-ului – Lista cuprinzatoare de resurse legate de proiectarea site-ului in WordPress.
• Intrebari frecvente Aspect si proiectare

Resurse CSS

• Gasirea stilurilor dvs. CSS
• Depanare CSS
• CSS Remedierea erorilor din browser
• Standarde de codificare CSS
• Stenografie CSS
• Cunoaste-ti sursele # CSS
• Comentariu conditionat CSS
• Validarea unui site web