Bloc aspect Wordpress
Pentru a începe pentru a discuta despre formarea principiului general al HTML-cod pentru WordPress. Este numit „aspect de bloc.“ Și, după cum s-ar putea ghici, acest lucru înseamnă că modelul este alcătuit din niște blocuri. Am văzut deja acest lucru în exemplul de pagină sau șablonul de înregistrare.
De fapt, nu toate atât de evident. Aici, de exemplu, make-up de masă:
Vedem că elementele individuale (celule) precizate unul deasupra celuilalt. Și ei vor fi situate pe aceeași linie. Aici este rezultatul unei astfel de înregistrări simplu:
Rețineți că, dacă tabela nu are limite - atunci conținutul celulelor sale arata ca înregistrarea normală. Imaginați-vă ce putem (și noi!) Pentru a seta orice configurație pentru celulele pentru a adăuga nu numai text, dar, de asemenea, fotografii ... Acum încearcă să ne imaginăm cum un astfel de cod ar fi îngrămădit pagini!
Acesta este principiul layout-ul utilizat înainte (de exemplu, pentru site-urile Narod) și este uneori folosit până acum! Acesta se numește „aspectul tabelar.“ Deci, în mod natural bloc aspect - un norocos găsi dezvoltatori, și nu un accident.
Elementele aspectul blocului
Dar, așa cum blocurile sunt formate în structura blocului? Deoarece browser-ul este diferit, ca un element este încheiat, iar următorul a început? Aceasta stabilește că acest element al acestor proprietăți și stiluri, iar celălalt - cealaltă? - Acestea sunt principalele întrebări care ne conduc de la teorie la practică.
Astfel, blocurile - ca bucăți de conținut, care sunt incluse în tag-ul blocului sau elementele blocului (recipiente). De fapt, multe dintre ele, dar ne vom întâlni astăzi cu cele mai importante si frecvente - etichete div, p, h.
Toate elementele bloc au o reguli comune de formatare:
- Lățimea acestui element va fi egală cu lățimea părinte. Aceasta este, de exemplu, lățimea postului textului va fi egal cu întreaga lățime a coloanei;
- Înălțimea este determinată de cantitatea de conținut. Adică, un paragraf va fi mai mare dacă are mai mult text;
- Blocul nou începe într-o nouă linie.
container div
Aceasta este baza pentru fiecare șablon etichetă Wordpress. A se vedea codul tema - există apeluri de funcții php:
Și unele fragmente incluse în tag-uri - de fapt, containerul:
Mai mult decât atât, într-un astfel de container și poate fi php-funcție și de alte tag-uri (de exemplu, link-uri active și tag-uri limitate, antete etc h)
Atunci de ce avem nevoie de un container? - Să-i dea stilul său propriu, care va fi înregistrată separat (în foaia de stil). Deci, putem scrie un cod destul de concis, care este format din blocuri individuale care vor fi atribuite unui nume sau id stil. Dar, de design CSS-cod în sine va fi încărcat de un alt fișier. Proprietățile Style sunt adăugate după cum urmează:
Uită-te la codul pentru oricare dintre secțiunile de șablonul blogului dvs. și a vedea imediat ce vreau să spun. Pentru exercitarea, încercați să izoleze blocurile individuale și afișarea clară a oricăror elemente de pagină care sunt responsabile. Apoi, localizați numele stylesheet sau id stiluri care aparțin unor blocuri diferite.
container p
- text-align: left; - aliniere la stânga;
- text-align: dreapta; - aliniat la dreapta;
- text-align: justifica; - justificarea completă;
înregistrare completă arată astfel:
Toate celelalte proprietăți stil pentru această etichetă este definit în foaia de stil. Sunt înregistrate, precum și fonturile și dimensiunile acestora, precum și culoarea textului (deoarece nu poate fi numai negru!)
container h
Această etichetă cunoscută în care anteturile sunt - H1, H2, H3, și așa mai departe. Stiluri pentru fiecare tip de antet este deja înregistrat în subiect pe blog. Ei participă la șablonul de pagină și formatarea de posturi individuale.
Cu privire la utilizarea titlurilor de diferite niveluri în textul deja de toate dungi SEO vorbit-a vorbit. Dar putem aplica tag-ul în șablonul WordPress. De exemplu, pentru a adăuga motto-ul blogului său pe pagina principală - sub titlul, pe o listă de posturi. De exemplu, ca aceasta:
Și data viitoare ne vom uita la elemente inline, fără de care structura și formatarea blog-ul dvs., de asemenea, este imposibil.