O caracteristică utilă a WordPress este modul în care generează clase și ID-uri. Unele dintre acestea sunt generate de sistemul în sine, în timp ce în alte cazuri introduceți câteva PHP în tema dvs. și WordPress utilizează acest lucru pentru a adăuga clase și ID-uri la marcajul paginii.
În acest tutorial, voi demonstra trei moduri în care WordPress face acest lucru și oferă aplicații practice și exemple pentru fiecare. Cele trei domenii pe care le voi aborda sunt următoarele:
Clasele și ID-urile generate pentru imaginile pe care le încărcați în WordPress prin intermediul dispozitivului de încărcare media
Etichete de șablon utilizate în fișierele de șabloane ale unei teme pentru a genera clase și ID-uri pe baza conținutului și paginii pe care le vizualizați
Parametrii pe care îi puteți seta când înregistrați widget-uri și meniuri (sau care vor fi deja setați într-o temă bine scrisă), care va genera clase și ID-uri relevante pentru anumite tipuri de widget, widget-uri individuale și elemente de meniu
Pentru fiecare dintre acestea, voi explica cum funcționează și apoi demonstrează fiecare cu câteva exemple.
Ce veți avea nevoie pentru a completa acest tutorial
Pentru a urma exemplele practice din acest tutorial, veți avea nevoie de:
O instalare de dezvoltare a WordPress
O temă pe care o puteți edita
Voi lucra cu o temă a celor Douăzeci Doisprezece - puteți accesa fișierele tematice din pachetul de coduri.
Clase și IDS generate pentru imagini de către dispozitivul de încărcare media
Când încărcați imagini prin intermediul aplicației Media Uploader, vi se oferă opțiunea de a specifica modul în care ar trebui aliniată imaginea, așa cum se arată în captura de ecran. De asemenea, vi se solicită să alegeți dimensiunea imaginii pe care doriți să o afișați: miniatură, dimensiune medie, mare sau dimensiune completă.
Pe baza selecției dvs., WordPress alocă eticheta pentru imaginile încărcate de un anumit număr de clase. Clasele de aliniere sunt următoarele:
.alignnone
.Aliniere la centru
.alignright
.alinia la stânga
În plus, WordPress atribuie .wpcaption clasă la orice titlu pe care îl adăugați la o imagine. Titlurile vor avea această clasă, precum și una dintre clasele de aliniere de mai sus, pe baza modului în care alegeți să aliniați imaginea.
WordPress adaugă, de asemenea, clase pentru fiecare dimensiune a imaginii:
.mărimea completă
.dimensiuni mari-
.Dimensiune medie
.size-miniatură
Puteți să le utilizați pentru a modela imaginile fiecărei dimensiuni a fișierului.
Majoritatea temelor vor include CSS pentru a modela fiecare dintre aceste clase în mod corespunzător, de exemplu, tema Twenty Twelve include următoarele:
CSS de mai sus aliniază orice element (nu doar imaginile) cu .alinia la stânga, .alignright sau .Aliniere la centru clasa, ceea ce înseamnă că puteți folosi aceste clase și pentru a alcătui alt conținut decât imaginile, dacă doriți.
De asemenea, se adaugă margini la imaginile care au aceste clase și asigură că imaginile de dimensiuni mari și de dimensiuni mari nu se răsfrâng în afara elementelor care le conțin, utilizând max-lățime: 100%.
Puteți vedea efectul acestei situații în imaginea de mai jos. Prima imagine este aliniată corect, iar cea de-a doua este centrată și are dimensiunea completă.
Adăugați propriul dvs. stil folosind aceste clase și ID-uri
Pe lângă setarea alinierii și a marjelor pentru fiecare dintre aceste clase, le puteți folosi pentru a adăuga un stil suplimentar.
Prima imagine din captura de ecran de mai sus este aliniată la dreapta. Dacă ecranul este redimensionat, acesta rămâne aceeași dimensiune și textul se învârte în jurul lui:
Puteți adăuga stilul pentru a vă asigura că orice imagine aliniată la dreapta nu depășește 50% din lățimea ecranului, astfel încât textul să se înfășoare mai bine prin adăugarea următorului CSS în foaia dvs. de stil:
img.alignright max-lățime: 50%;
Acum când pagina este vizualizată pe un ecran îngust, imaginea este mai puțin dominantă:
Pe lângă adăugarea de CSS pentru aspect sau dimensionare, puteți adăuga un stil decorativ imaginilor care sunt aliniate într-un anumit mod. Pentru a adăuga stilul decorativ la imaginile de dimensiune completă centrate, adăugați următoarele elemente în foaia de stil:
Aceasta adaugă o margine pentru imagine și reduce dimensiunea acesteia:
Etichete șablon pentru adăugarea de clase și coduri de identificare
Clasele și ID-urile pe care le-am analizat pentru imagini sunt generate de WordPress în sine. Alte clase și ID-uri pot fi generate de tag-uri șablon în tema dvs..
Notă: Dacă nu sunteți familiarizați cu etichetele de șabloane, consultați articolul Codul etichetelor de șablon.
Există două seturi de etichete șablon: una care se aplică la Etichetă HTML și două care se aplică pentru postări individuale.
body_class () Șablon de șablon
O temă bine scrisă va avea următoarea etichetă header.php fişier:
>
Acest lucru înlocuiește normal etichetă. body_class () șablon tag spune WordPress pentru a atribui clase la etichetă bazată pe pagina pe care o vizualizați și pe fișierul șablon pe care îl folosește din tema activă.
Lista de clase care pot fi generate este lungă și o puteți găsi în Codul WordPress.
Câteva exemple includ:
.Acasă pentru pagina de pornire
.single-postid- ID când se vede o singură postare, unde ID-ul este ID-ul numeric al postării
.Arhiva pentru orice pagină de arhivă
.page-templat- filename -PHP când se utilizează un șablon de pagină personalizat
Dacă doriți să adăugați clase suplimentare la etichetă care nu este generată de WordPress, puteți. De exemplu, pentru a adăuga clasa "salut", codul este:
>
Puteți adăuga cât mai multe clase pe care le doriți în acest fel, separându-le cu spații.
Puteți utiliza clasele generate de body_class () pentru a adăuga un stil care este specific pentru o anumită locație în site sau pentru un fișier de șablon sau pentru elemente din cadrul fișierului șablon.
De exemplu, în tema copilului meu am creat un șablon de pagină numit pagină full-lățime-cu-sidebar.php, care este proiectat să afișeze pagini cu lățimea totală a conținutului și bara laterală de sub conținut în loc de dreapta. Puteți găsi acest șablon de pagină în pachetul de coduri.
Utilizarea body_class () tag, WordPress generează o .Pagina-șablon de pagină-full-lățime-cu-Sidebar-php clasa pentru etichetă (printre alte clase).
Prin urmare, pentru a personaliza elemente de pe o pagină utilizând acest șablon, adăugați următoarele elemente în foaia dvs. de stil:
/ * stilul de aspect pentru șablonul de pagină completă cu bara laterală * / .page-șablon-pagină-full-width-with-sidebar-php. site-ul conținut ,. pagină-șablon-pagină-full-width-with-sidebar-php. widget-area lățime: 100%; clar: ambele; .page-template-page-full-width-with-sidebar-php # secundar.widget-area .widget lățime: 48%; marja: 0 1%; plutește la stânga;
Aceasta stabilește lățimea conținutului principal și a barei laterale (#secundar) la 100%, și, de asemenea, aliniază widget-urile din bara laterală unul lângă celălalt. Puteți vedea efectul în captura de ecran:
Notă: Dacă tema dvs. este receptivă, asigurați-vă că efectuați modificări ale lățimii widget-urilor pe ecrane înguste în interogările media.
post_class () și POST_ID () Etichete de șablon
Aceste etichete funcționează în mod similar cu body_class () , dar le folosiți cu postări individuale în buclă în loc de element.
De exemplu, în tema Twenty Twelve, fiecare post din buclă este înfășurat într-o a element cu aceste etichete aplicate:
> // conținut aici
Aceasta generează un număr de clase pe baza categoriei și tipului postului și a unui ID bazat pe codul numeric al postării. De exemplu, o postare de pe site-ul meu demo cu categoria "roșu" va avea următoarele clase și ID generate:
// conținut
Puteți folosi aceste clase pentru a personaliza mesajele din categoriile individuale în mod diferit. În site-ul demo există trei categorii stabilite: "roșu", "albastru" și "important".
Pentru a le stiliza, adăugați următoarea CSS în foaia de stil a temei:
/ * posturi de stil din categoria 'roșu' * / .category-red border-top: 2px solid # cc0000; / * postări de stil în categoria 'albastru' * / .category-blue border-top: 2px solid # 3366ff; / * posturi de stil în categoria 'important' * / .blog .category-important padding-top: 2em; margin-stânga: 2em; .category-important: înainte de content: 'READ THIS POST! ESTE IMPORTANT';
Aceasta adaugă stilul pentru fiecare categorie: o margine colorată pentru fiecare categorie de culori și o marjă suplimentară pentru categoria "importantă". De asemenea, utilizează un pseudo-element pentru a insera conținut suplimentar înaintea fiecărui post din categoria "importantă".
Rezultatul este afișat în captura de ecran.
Utilizarea clasei și a numelor de identificare cu ajutorul widgeturilor și meniurilor
Când widgeturile sunt înregistrate într-o temă (sau uneori un plugin), funcțiile folosite pot include codul care îi spune WordPress să genereze clase și ID-uri bazate pe numele, tipul și ID-ul widget-ului.
Când meniurile sunt înregistrate, WordPress poate genera clase bazate pe numele meniului, poziția elementelor din meniu și locația din site. Puteți utiliza toate acestea pentru a personaliza widget-urile și meniurile.
Clase și ID-uri pentru widget-uri
Pentru a înregistra o zonă widget, utilizați register_sidebar () funcția în tema ta functions.php fişier. Aceasta are următorii parametri:
Există doi parametri care generează clase și / sau ID-uri:
'clasă' => "
'before_widget' => '
'
'clasă' parametru vă permite să specificați manual o clasă pentru zona widget. Setările pentru 'Before_widget' parametru spune WordPress pentru a genera un ID unic pentru fiecare widget în zona widget și un număr de clase pentru ea, de asemenea, care se va baza pe tipul de widget este.
De exemplu, în site-ul demo am adăugat două widgeturi - o listă de postări și o listă de pagini. Pentru lista de postări este afișat următorul cod HTML:
Pentru lista de pagini este afișat următorul cod HTML:
Puteți folosi acest lucru pentru a schița widgeturile care afișează postările, adăugând următorul CSS în foaia de stil a temei:
Aceasta adaugă o margine pentru paginile cu înregistrări widget-uri, așa cum se arată în captura de ecran:
Notă: Acest lucru funcționează în site-ul demo, deoarece folosește o temă copilărească a douăzeci și doisprezecelea temă, care are barele laterale înregistrate corect. Dacă construiți propria temă, va trebui să adăugați tag-ul register_sidebar () cu parametrii de mai sus. Aflați cum să faceți acest lucru în articolul Codex asociat.
Clase și ID-uri pentru meniuri
Meniurile de navigare sunt afișate utilizând tasta wp_nav_menu () etichetă în tema ta header.php fişier. Acest lucru necesită un număr de parametri, așa cum este detaliat în wp_nav_menu articol.
Unul dintre acestea adaugă clase și ID-uri pentru fiecare element din meniu:
'items_wrap' => '
% 3 $ s
'
Aceasta adaugă un ID și un număr de clase pentru fiecare element. Clasele se bazează pe clasa pentru meniul însuși și pentru locația din site. De exemplu, atunci când utilizatorul se află pe o pagină din site, intrarea sa în meniul de navigare va avea .current_page_item clasă.
Puteți folosi acest lucru pentru a adăuga stilul la intrarea paginii curente din meniu. De exemplu, pentru a adăuga o subliniere la pagina curentă, adăugați următoarele în foaia de stil:
/ * stil link-ul paginii active în navigație * / .main-navigation .current_page_item a text-decoration: underline;
Sublinierea rezultată poate fi văzută în captura de ecran (precum și schimbarea culorii care se află deja în foaia de stil a temei părinte):
Notă: Pe măsură ce folosesc o temă copilărească a celor douăsprezece teme, nu trebuie să adaug wp_nav_menu () , deoarece aceasta este deja prezentă în tema părinte.
rezumat
După cum am analizat mai sus, există o serie de moduri în care WordPress va genera clase și ID-uri pe elemente dintr-un site. Unele dintre acestea sunt generate de WordPress în sine și alții folosesc etichete șablon sau parametri de funcții pentru a le spune WordPress să scoată clasele și ID-urile. Puteți să le folosiți pentru a crea pagini, meniuri, widget-uri, postări și alte elemente în design.
Există multe alte modalități prin care puteți utiliza aceste clase și ID-uri pentru a vă stiliza proiectele. De exemplu:
Ați putea crea un site cu mai multe secțiuni distincte, utilizând clasele generate de body_class () pentru a face conținutul fiecărei secțiuni foarte diferit
Puteți să personalizați diferite înregistrări post într-o pagină arhivă, direcționând ID-ul generat de the_ID () etichetă
Puteți evidenția elemente de meniu curente din navigația dvs., creând un efect similar butoanelor și utilizând imagini, fundaluri, înclinări și multe altele
Ați putea folosi o combinație a celor de mai sus, de exemplu, styling anumite widget-uri diferite în diferite zone ale site-ului
Posibilitățile sunt limitate numai de imaginația ta!
Resurse
Unele pagini Codex utile despre subiectele abordate în acest tutorial:
Clasele generate pentru imagini: http://codex.wordpress.org/CSS#WordPress_Generated_Classes
Share
Accentsconagua
