Creați o temă "cauciuc" în wordpress folosind reverie 4

Creați o temă

Wordpress este acum una dintre platformele web universale și ușor de utilizat. Există multe plug-in-uri, permițând chiar un designer web neexperimentat să înceapă să creeze și să obțină rezultate acceptabile în ceea ce privește construirea site-urilor.







Pentru cei care nu doresc să instaleze șabloanele implicite, sunt așa-numitele „goale“, temă de editare pe care le puteți obține ceva mai personalizate. Odată cu creșterea numărului de „cauciuc“ la tendințele de pe web devine din ce în ce full-screen, pe întreaga lățime a ecranului sau „pliere“, într-un mod special, conform rezoluției, nu exclude tema implicită Douăzeci Twelwe.

Unul dintre cele mai bune subiecte "goale" este Reverie, care, la rândul său, se bazează pe cadrul Zurb. Vom vorbi acum despre cea de-a patra, cea mai recentă problemă a lui Revera, care a primit schimbări semnificative în sintaxă și structură. Revere face destul de simplu dezvoltarea propriei sale teme de "întindere".

Instrucțiunile de mai jos sugerează că aveți cunoștințe de bază despre HTML și că aveți experiență în WordPress. În plus, deoarece Reverie 4 este construit perfect pentru utilizarea cu SASS, ne vom concentra pe acest proiect pe CSS Vanilla.

Combinați tema "dragging" WordPress utilizând cadrul HTML5 numit Reverie 4.

După ce instalați Wordpress, determinați structura, configurați meniul, setați numele, setați tema Twenty Twelve. Cu siguranță nu este rău, dar vrem să folosim Reverie 4 de primă clasă.

Instalați Reverie, așa cum faceți de obicei cu toate temele: consolă -> aspect -> teme -> instala teme. Selectați fișierul zip, instalați, activați.

  • Structura fișierului Reverie






    Structura Reverie 4 diferă de versiunile anterioare, care au urmat structura standard a WordPress. Toate foile de stil sunt acum în dosarul CSS.

  • Setarea fundalului
    Puteți seta un fundal sau folosind CSS, sau folosind built-in functii WordPress (Aspect -> Teme -> Configurare -> Imagine de fundal). Alegeți o imagine sau o culoare, salvați.

  • Hood zone
    Pentru a schimba fundalul în antetul site-ului, găsiți linia 4554 în stil.css. Eliminați header.row din grupul de rânduri și plasați-l separat într-o secțiune nouă cu o culoare neagră opacă. Ștergeți sublinierea din antet eliminând eticheta
    sub sigla din fișierul header.php.

  • navigare
    Navigarea trebuie evidențiată. Există mai multe locuri în care trebuie să modificați culoarea fundalului, inclusiv numele, elementele listă și formularul de căutare (pentru lățimea totală). Modificați culoarea substratului în liniile 2736, 2859, 2953, 3008, 3071 de la gri închis la roșu.

  • Pagina de pornire
    Pentru a controla aspectul primei pagini, trebuie să vă creați propria pagină. În dosarul cu tema, găsiți fișierul page.php, copiați-l în home.php. WordPress va căuta automat acest fișier la pornire. E timpul să o editați.

  • Instalarea cursorului "Orbit"
    Revere 4 vine cu un script "Orbit" preinstalat, astfel încât glisorul să funcționeze, trebuie doar să instalați pluginul cu același nume. După instalare și activare, mergeți la home.php, adăugați divs cu codurile culisante imediat sub div cu conținutul principal. Apoi, în panoul de control al Wordpress puteți regla imaginile pentru afișare.

  • Styling articole cu cadre
    Permiteți înregistrarea să aibă un fundal negru cu o margine roșie, rame de 10 pixeli și o liniuță de 10 pixeli din partea de jos. Schimbați antetul de la H1 la fontul Amatic din fonturile Google și schimbați culoarea. Schimbați dimensiunea etichetelor meta, textul fragmentului va fi alb. Imaginea va fi în partea stângă.

  • bara laterală
    Deja totul este împachetat într-un cadru, de ce nu o bară laterală? Deschideți fișierul sidebar.php din dosarul cu tema. Bara laterală este o etichetă
  • subsol
    Deschideți fișierul footer.php în dosarul cu tema. Orice modificări făcute aici necesită mai întâi o etichetă
    cu ID-ul corespunzător. Puteți renunța la menționarea lui Reverie aici. Această parte inferioară a site-ului este deja pregătită să pună widget-uri aici sau puteți adăuga direct codul HTML aici. Dacă nu aveți un meniu inferior, puteți să eliminați complet subsolul.

  • Designul paginilor
    Acum faceți clic pe titlul oricărei intrări și vedeți ce poate fi îmbunătățit pe pagina interioară. De fapt, arată bine, este necesar să adăugați doar câteva lovituri. Antetul trebuie să schimbe culoarea, dar observați eticheta "intrare-titlu" cu care am lucrat mai devreme.

    E interesant







    Articole similare

    Trimiteți-le prietenilor: