WordPress se bazează foarte mult pe stilurile de prezentare din cadrul CSS. Prin utilizarea de teme, ai o alegere aproape infinită de opțiuni de aspect. Temele WordPress fac mai ușoară schimbarea aspectului site-ului, și te ajută să creezi propria temă și aspect al paginii.
CSS vine de la Cascading Style Sheets. Vă permite să stocați informații despre prezentarea de stil (cum ar fi culori și aspect) separat de structura HTML. Acest lucru permite un control de precizie al aspectului site-ului și face ca paginile să se încarce mai repede și să fie mai ușor de actualizat.
(CSS3, https://en.wikipedia.org/wiki/File:CSS3_taxonomy_and_status_by_Sergey_Mavrody.svg)
WordPress și CSS
Temele WordPress folosesc o combinație de fișiere șablon, etichete șablon, și fișiere CSS, pentru a genera aspectul site-ului WordPress.
Fișiere de șabloane
Fișierele șablon sunt blocurile cu care se creează site-ul. În structura temei WordPress, antetul, bara laterală, conținutul, și subsolul, sunt toate cuprinse în fișiere individuale. Ele se unesc pentru a crea pagina. Acest lucru permite personalizarea blocurilor. De exemplu, în tema implicită WordPress, vizualizarea multi-postări din prima pagină, categorii, arhive, și paginile de căutare web de pe site, bara laterală este prezentă. Făcând clic pe orice postare, ajungeți pe vizualizarea unei singure postări și bara laterală dispare. Puteți alege ce părți și piese să apară pe pagini, și să le personalizați în mod individual, pentru a permite un antet sau o bară laterală diferite să apară pe toate paginile din cadrul unei categorii specifice. Și mai mult decât atât.
Etichete de șabloane
Etichete de șabloane sunt biți de cod care oferă instrucțiuni și solicitări de informații stocate în baza de date WordPress. Unele dintre acestea sunt extrem de configurabile, permițând personalizarea datei, orei, listelor și alte elemente afișate pe site.
Foaia de stil
Fișierul CSS este locul unde totul se conexează. În fiecare fișier șablon din site există elemente HTML care includ etichetele șablonului și conținut. În foaia de stil din fiecare temă sunt reguli pentru a controla proiectarea și aspectul fiecărui element HTML. Fără aceste instrucțiuni, pagina ar arata pur si simplu ca o pagină lungă scrisă continuu. Cu aceste instrucțiuni, puteți muta structurile blocurilor de construcție, făcând de ex. antetul foarte lung și umplut cu elemente grafice sau fotografii, sau simplu și strâns. Site-ul poate „pluti” în mijlocul ecranului privitorului cu spațiu pe stânga și pe dreapta, sau se poate întinde pe tot ecranul, umplând întreaga pagină. Bara laterală poate fi pe dreapta sau pe stânga, sau chiar poate începe la jumătatea paginii în jos. Stilul paginii rămâne la latitudinea dezvoltatorului. Instrucțiunile de stil se găsesc în fișierul style.css în fiecare director de temă.
Clase generate de WordPress
Mai multe clase pentru alinierea imaginilor și a elementelor de bloc (div, p, table, etc.) au fost introduse începând cu WordPress 2.5: aligncenter, alignleft și alignright. În plus, clasa alignnone se adaugă la imaginile care nu sunt aliniate, astfel încât să poată fi aranjate în mod diferit dacă este necesar.
Aceleași clase sunt folosite pentru a alinia imagini care au o legendă (începând cu WordPress 2.6). Sunt necesare trei clase suplimentare CSS pentru legende, și încă una pentru accesibilitate. Laolaltă, clasele sunt:
/* =WordPress de bază
––––––––––––––––––––– */
.alignnone {
margin: 5px 20px 20px 0;
}
.aligncenter,
div.aligncenter {
display: block;
margin: 5px auto 5px auto;
}
.alignright {
float:right;
margin: 5px 0 20px 20px;
}
.alignleft {
float: left;
margin: 5px 20px 20px 0;
}
a img.alignright {
float: right;
margin: 5px 0 20px 20px;
}
a img.alignnone {
margin: 5px 20px 20px 0;
}
a img.alignleft {
float: left;
margin: 5px 20px 20px 0;
}
a img.aligncenter {
display: block;
margin-left: auto;
margin-right: auto
}
.wp-caption {
background: #fff;
border: 1px solid #f0f0f0;
max-width: 96%; /* Imaginea nu suprascrie aria conținutului */
padding: 5px 3px 10px;
text-align: center;
}
.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;
height: auto;
margin: 0;
max-width: 98.5%;
padding: 0;
width: auto;
}
.wp-caption p.wp-caption-text {
font-size: 11px;
line-height: 17px;
margin: 0;
padding: 0 4px 5px;
}
/* Textul are sens doar pentru cititoarele de ecran. */
.screen-reader-text {
clip: rect(1px, 1px, 1px, 1px);
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
}
.screen-reader-text:focus {
background-color: #f1f1f1;
border-radius: 3px;
box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
clip: auto !important;
color: #21759b;
display: block;
font-size: 14px;
font-size: 0.875rem;
font-weight: bold;
height: auto;
left: 5px;
line-height: normal;
padding: 15px 23px 14px;
text-decoration: none;
top: 5px;
width: auto;
z-index: 100000; /* Above WP toolbar. */
}
Fiecare temă ar trebui să aibă aceste stiluri sau similare în fișierul său style.css pentru aputea afișa imagini și legende în mod corespunzător. Elementele HTML și valorile de clasă și de identitate exacte vor depinde de structura temei pe care o utilizați.
Lasă un răspuns