Bună ziua, azi încercați să modifice tema implicită WordPress - Douăzeci Doisprezece: definim dimensiunea unei pictograme și a pus o miniatură sub titlul, ștergeți meta tag-uri care nu sunt necesare pe pagina principală, modificați butonul „Citește mai mult“, eliminați link-ul în pivniță.
Puteți descărca sursa pentru articolul de mai jos
Teme standard WordPress: Douăzeci Unsprezece, Douăzeci Doisprezece, Douăzeci zece, douăzeci Treisprezece, douăzeci și Paisprezece - sunt un excelent cadru (structură-cadru, cadrul.), pe baza cărora fiecare zi creează temă nouă, multifuncțional WordPress.
Inițial, tema standard wordpress - Twenty Twelve (versiunea 1.3) arată astfel:
Să începem să o corectăm:
1. Setați dimensiunea miniaturilor (miniatură).
Din anumite motive, dimensiunea miniaturii nu este limitată - ceea ce este foarte incomod, deoarece atunci când încărcați imagini de dimensiuni diferite - miniaturile vor fi, de asemenea, diferite.
Pentru a face acest lucru, du-te la site-ul pentru a ne panoul de control WordPress, în meniul din stânga selectați elementul „Aspect“ și sub-element „Redakor“, chiar în lista de șabloane, selectați fișierul functions.php (subiecte funcții) și căutați pentru următorul rând în codul său:
Este acest lucru și setează dimensiunea miniaturilor în tema Douăzeci Doisprezece (621 - lățimea, și 9999 - înălțimea de miniaturi în pixeli), de exemplu, să-l fixeze pe linia următoare:
Și ar trebui să obținem următoarele:
2. Deplasați miniatura la titlu.
Pentru a face acest lucru, du-te la site-ul pentru a ne panoul de control WordPress, în meniul din stânga selectați elementul „Aspect“ și sub-element „Redakor“, chiar în lista de șabloane, selectați fișierul content.php și căutați următoarea linie în codul său:
Acesta este responsabil pentru afișarea miniaturii.
Vom transfera ceva mai puțin pentru punctul:
De asemenea, înfășurați codul de ieșire în miniatură într-un bloc separat și atribuiți stiluri acestuia - pentru a linia antetul din partea de sus, ar trebui să încheiați cu următoarele:
Adică, am înfășurat codul de ieșire în miniatură într-un bloc cu id "tumba".
Pentru Tumba bloc prescrie următorul cod în fișierele de stil - style.css - deschide-l: du-te la site-ul pentru a ne panoul de control WordPress, în meniul din stânga selectați elementul „Aspect“ și sub-element „Redakor“, chiar în lista de șabloane, selectați style.css fișier iar în partea de jos a acestuia se introduce următorul cod:
Aceasta este, am creat o indentare de 30 de pixeli din partea de sus.
În cele din urmă, obținem următoarele:
3. Eliminați metaetichetele inutile.
Din nou ne întoarcem la content.php fișierul - deci du-te la site-ul pentru a ne panoul de control WordPress, în meniul din stânga selectați elementul „Aspect“ și sub-element „Redakor“, chiar în lista de șabloane, selectați fișierul content.php și eliminați următoarele linii în ea:
Ca rezultat, fișierul content.php ar trebui să arate astfel:
După aceea, site-ul va arăta astfel:
După cum puteți vedea nimic inutil.
4. Editați butonul "Citiți mai mult".
Pentru a face acest lucru, este suficient să reveniți la fișierul styles - style.css și să adăugați următoarele linii în partea de jos a codului:
La butonul "Citiți mai mult", puteți înregistra o imagine de fundal cu următorul punct:
Și pentru ca butonul "Citiți mai mult" să fie afișat spre dreapta și nu spre stânga, puteți introduce următorul cod:
Ca rezultat, am obținut următoarele:
5. Ștergeți link-ul din subsol.
Ca rezultat, fișierul footer.php va arăta astfel:
Și după ștergerea acestei linii ca aceasta:
și în loc să inserăm următorul cod:
7. Adăugați navigare de la o pagină la alta.
Instalați plug-in-ul WP-PageNavi - este în repozitoriul oficial wordpress, deci instalarea este standard - prin panoul de control (panoul de administrare) wordpress:
Numărul de descărcări: 4.938.430 - cantitate imensă
Pagina Plugin în depozit: "wordpress.org/plugins/wp-pagenavi/"
Și înlocuiți-le cu următoarele:
După aceea, navigarea noastră va funcționa!
8. Deplasați bara laterală de la dreapta la stânga.
Pentru a face acest lucru, trebuie doar să adăugați următorul cod în fișierul de stil - style.css:
Aici aveți nevoie de un mic amendament ...
Luați, de exemplu, cuvântul standard wordpress - Twenty Twelve (puteți descărca aici), iar versiunea wordpress a exemplului va fi 4.1.
9.1. Am instalat și de a activa plugin-ul WP-CommentNavi prin panoul de control WordPress: Admin - element "Plugins" - elementul "Adăugați o nouă" - în linia de "plugin-urile de căutare", introduceți WP-CommentNavi.
Eliminați liniile de mai sus de cod, închise în etichetele "nav" și introduceți în schimb următorul cod:
Iată codul după modificare:
După aceea, mergem la site și privim - ce sa întâmplat:
Aici vedem că codul răspunde pentru link-ul:
În final, veți obține următoarele:
11. Transferați meniul principal sub imaginea antetului (imaginea din antet).
Tăiați-o și transferați-o în codul de ieșire al imaginii antetului.
Următorul cod corespunde ieșirii imaginii antetului:
În cele din urmă, ar trebui să arate astfel:
12. Editați liniuțele din tema Twenty Twelve:
Întrebare: cum să gestionați indentările între anunțurile postărilor din pagină? După ștergerea meta-ului, există un loc suplimentar rămas ...
Pentru a edita indentarea - puteți utiliza instrumentele pentru dezvoltatori, integrate în toate browserele moderne. Deci, de exemplu, Yandex Browser și Google Chrome, pentru a declanșa aceste instrumente trebuie să faceți clic pe butonul din dreapta al mouse-ului de pe pagina de web, și selectați lista drop-down, selectați „Vizualizați elementul de cod“:
Ai o fereastra «Developer Tools» ( «Instrumente pentru dezvoltatori"), aici vom alege instrumentul «Magnifier» (stânga sus), apoi conduce la noi dorit elementul și a vedea codul său - o puteți modifica și vedea ce schimbare (imaginea de mai jos, puteți click pentru a mari):
Ca rezultat, vedem că clasa ".site-content article" este responsabilă de indentare.
În cazul nostru, următoarele coduri răspund pentru indentare:
Suntem interesați de proprietățile margini de fund și de fundație - aici sunt date în două unități de măsură - în "px" și în "rem", cum diferă acestea?
"Px" este o unitate de măsură absolută și "em" este o unitate relativă.
"Rem" este dimensiunea relativă față de bază (definită în .html<>) dimensiunea fontului. Ideea ar trebui să fie mai prietenoasă cu dispozitivele mobile și să fie redimensionată.
Pe unități de măsură, puteți citi articolul aici:
«Web-standards.ru/articles/boring-bits-of-css/»
În mod implicit, dacă nu se face nimic, 1rem = 16px.
După corectarea indentării, mi-a plăcut această versiune:
PS: Descărcați tema convertită Twenty Twelve (versiunea 1.3) - poate de pe site-ul meu - descărcați Twenty Twelve (fix mnogoblog.ru).
Înregistrări similare:
- Cum se creează un nou fișier wordpress (fără acces FTP)
- Cum se utilizează PHP pentru a crea, redenumi, șterge un fișier
- Douăzeci și cincizeci: adăugați un meniu în subsolul site-ului
- Buton plutitor pe site-ul din lateral
- Decorați site-ul - adăugați blocuri cu imagini ...
- Aranjează pălăria în Twenty Ten, Twenty Eleven
Navigare după înregistrări
Bună ziua! Și nu-mi spune cum să optimizați tag-uri H1 inutil numărul acestora crește cu fiecare nouă destinație de plasare a articolului precum și ssdelat, care ar fi pe prima pagină nu a fost în întregime anoys articol?
Mulțumesc pentru post, am învățat multe lucruri utile.
Și cum să facă, care afișează numele categoriei pentru pagina de înregistrare, doar când elimin pe datele de recomandare meta, nu există nici un nume de coloane nu sunt pe „coloana“ pagina nu este pe pagina de post.
Alo Lucru foarte util. Dar am o întrebare: cum să eliminați link-ul "citește mai departe" în acest subiect în titlurile cu totul? Ca să puteți merge la intrare numai prin linkul din titlul anunțului?
Sergey, pentru a elimina linkul "citiți mai mult", adăugați următorul cod în fișierul stil (stil.css):
Vladimir, mulțumesc pentru sfatul utile - a adăugat punctul 8 - despre cum să mutați bara laterală de la stânga la dreapta.
Pentru a crea două bare laterale pe laturi - trebuie să scrieți un articol nou ...
Cum de a reduce lățimea șablonului Twenty Twelve
Vă mulțumim pentru descrierea cum să eliminați link-ul de la subsol la WordPress org.
Vă mulțumim pentru informații utile. Și cum să faceți textul înfășurat în jurul miniaturii din partea dreaptă?
În comparație cu restul întrebărilor, este destul de proastă)
Dar, cum să rezolvați tema revizuită? Se generează o eroare din cauza subiectului deja existent. a schimbat numele, produce încă o eroare.
Bine ai venit! Spuneți-mi, vă rog, și cum pot să mut fereastra și butonul "căutare" din bara web la linia "meniu" din subiectul actual (așa cum o faci)?
Vă mulțumim anticipat.
Bine ai venit!
Ajutați-vă să ștergeți linkul "modificați" în partea de jos a paginii în subiectul Twenty Thirteen și să ridicați, de asemenea, conținutul mai mare cu imaginea fotografiei din pagină în același subiect. Vă mulțumim anticipat.
Alexandru, a răspuns la întrebarea de la punctul 10.
Buna ziua!
Prompt ca meniu - principal, toate articolele, pentru a face sub un capac (imagine).
Tema Douăzeci și șaptesprezece 1.6
Pavel, răspunsul la întrebarea dvs. este la paragraful 11 al acestui articol, mulțumesc că ați întrebat!
Xenia, mulțumesc pentru întrebare, a răspuns la noul paragraf 12 al acestui articol!
Alo Constantin!
Informatii foarte utile pentru mine. S-a oprit cu succes de către.
Nu-mi spuneți cum să faceți meniul o pagină completă (în lungime)?
Și pot să-mi spun cum să mișcăm, titlul site-ului (text), în partea dreaptă. Cum să spunem bine și unde?
Vă mulțumim anticipat. Mikhail.
Articole similare
-
Douăsprezece doisprezece am stabilit o temă standard wordpress, setări soft
-
Forumul Trinity - vizionarea subiectului - o întrebare standard, dar dacă treceți din sumă
Trimiteți-le prietenilor: