Șablon GeneratePress Fast WordPress: ușor, receptiv, valid, gratuit. Tema de bază cea mai rapidă și mai sensibilă WordPress

Rețineți că WordPress generează câteva clase care trebuie să fie prezente în foaia de stil. De exemplu clase aligncenter, alignleft și alignright servește la alinierea imaginilor și a elementelor de blocare și acestea trebuie incluse în foaia de stil (puteți copia din foaia de stil a temei implicite):


.Aliniere la centru,
div.aligncenter (
display: bloc;
margine-stânga: auto;
marginea-dreapta: auto;
}
.alinia la stânga (
plutește la stânga;
}
.alignright (
plutitor: dreapta;
}

Următoarele clase sunt utilizate pentru alinierea imaginilor care au subtitrări (pot fi copiate din tema implicită, ulterior, dacă este necesar, corectă):


.wp-caption (
chenar: 1px solid #ddd;
text-align: centru;
culoare de fundal: # f3f3f3;
tapițerie: 4px;
marja: 10px;
/ * parametri opționali care vor face colțuri rotunjite în browserele acceptate * /
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
raza chenarului: 3px;
}
.wp-caption img (
marja: 0;
umplutură: 0;
bordura: 0 niciuna;
}
.wp-caption p.wp-caption-text (
dimensiunea fontului: 11px;
înălțimea liniei: 17 px;
umplutură: 0 4px 5px;
marja: 0;
}

În plus, mai există câteva clase WordPress care nu trebuie descrise în foaia de stil. WordPress generează pagini folosindu-le, și tu le poți stiliza:


.categorii (...)
.cat-item / * Această clasă este alocată tuturor categoriilor * /)
.current-cat (/ * stilul categoriei curente * /)
.current-cat-parent (/ * stil pentru părinții din categoria curentă * /)
.copii (/ * clasa copiilor * /)
.pagenav (/ * navigare pagină * /)
.page_item (/ * orice element din listă * /)
.current_page_item (/ * această clasă este atribuită în lista de pagini paginii active curente * /)
.current_page_parent (/ * clasă pentru pagina părinte în raport cu cea curentă * /)
.current_page_ancestor (/ * orice pagină de nivel superior în raport cu aceasta * /)
.widget (/ * toate widgeturile sunt încadrate în această clasă * /)

În procesul de aspect, utilizați blocuri și stiluri pentru acestea, așa cum sunt definite în capturile de ecran de la începutul articolului. Acest lucru nu este necesar, dar foarte de dorit.

De exemplu, în viitor vom conecta formularul de căutare la site printr-un mesaj special. etichetă wordpress , în urma căruia wordpress va afișa acest formular:

Prin urmare, luăm în considerare acest lucru atunci când proiectăm o temă.

Și ultimul lucru pe care trebuie să-l adăugați la style.css este informații despre dvs. și despre tema preferată. Informațiile sunt plasate la începutul fișierului în comentarii:

/*
Nume temă: veniți cu un nume unic de temă
URI temă: http: // link-to-theme-homepage
Descriere: Descrierea temei
Autor: Thread Starter
URI pentru autor: http: // link-to-author-page
Șablon: strămoș-temă-nume
Etichete: etichete tematice - numai din lista sugerată de wordpress.org
Versiune: version
Ei bine, iată textul licenței
*/

De asemenea, nu uitați să faceți screenshot.pngși puneți-l în folderul șablon (în rădăcină). Informațiile plasate în acest fel în foaia de stil vor fi afișate în panoul de administrare din secțiune Managementul „temelor”... Testăm șablonul încorporat în browsere, dacă toate regulile, puteți merge mai departe.

Nu voi da codul paginilor șablonului tipărit, deoarece este suficient de mare, doar îl descărcați, apoi vom lucra cu el.

Cum funcționează o temă wp:

Dacă deschideți folderul tematic implicit (wp-content / themes / default), veți vedea multe fișiere PHP (fișiere tematice) și un fișier style.css. Când navigăm pe blog, WP include fișierele temei (index.php<

Aceasta finalizează pregătirea preliminară și putem trece la crearea unei teme din materialul sursă existent.

Pasul 1:
Mai întâi, în directorul temelor WordPress (wp-content / themes), creați un folder cu numele temei noastre. Lăsați-l să fie ruseller_lessons... Apoi din folderul tematic implicit (wp-content / themes / default) copiați fișierele comments.php, search.phpși 404.phpîn folderul tematic. Aceste fișiere sunt responsabile pentru comentarii și căutări pe blog. Apoi în ruseller_lessons copiați foaia de stil stil.cssșablonul nostru, screenshot.png (300x225)și folder imagini.

Acum fișierele șablonului nostru trebuie „tăiate”, adică. trageți subsolul, bara laterală și antetul fișierelor separate. Diagrama prezintă o vedere simplificată a fișierului index.php cu semne conform cărora îl vom tăia:

Pasul 2 - Header.php
Deschidem index.htmlși tăiați tot ce este înainte de comentariu, creați un fișier nou header.phpși lipiți codul tăiat în el, salvați-l în directorul temei noastre ruseller_lessons:






index.html






Acum mergeți la folderul cu tema implicită, deschideți header.phpși copiați etichetele de acolo , <link>, <h1>, și <div class=description> </b>și înlocuiți-le cu liniile corespunzătoare din <b>header.php</b>.</p> <p>Apoi toate etichetele <li>situat <b>id = "nav"</b>(lista paginilor din partea de sus a blogului) înlocuiri pentru funcția wordpress</p> <p><b> <?php wp_list_pages("sort_column=menu_order&depth=1&title_li=");?> </b></p> <p>Drept urmare, obținem:</p><p> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br> <html xmlns="http://www.w3.org/1999/xhtml"><br> <head><br> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br> <title><?php wp_title("«", true, "right"); ?> <?php bloginfo("name"); ?>
"type =" text / css "media =" ecran "/>
" />





Pasul 3 - Sidebar.php
Revenind la fișierul index.htm. În primul rând, ștergem întregul formular de căutare, apoi eliminăm totul