Acest tutorial vă va arăta cum să creați un nou șablon de pagină pentru șabloanele WordPress Cherry Cadru.
Conectați-vă la panoul de administrare WordPress.
Deschide meniul Pagini -> Adăugați nou (Pagini -> Adăugați nou)și creați o pagină nouă cu un șablon de pagină nou.
Introduceți un titlu pentru pagină și salvați modificările. În coloana din dreapta a panoului, puteți selecta unul dintre șabloanele de pagină utilizate în tema dvs. Trebuie să adăugați un nou șablon de pagină la această listă. Toate aceste șabloane se află într-un folder de pe serverul dvs. Dar trebuie să adăugați un nou șablon de pagină în dosar wp-content/themes/theme#####.
Creați un fișier .php nou în orice editor precum Dreamweaver sau Notepad++ și denumiți-l așa cum ar fi: nou.php . Adăugați următorul cod la acest fișier:
Salvați fișierul și încărcați-l în folder wp-content/themes/theme##### la serverul dvs.
Acum reveniți la pagina pe care ați creat-o în panoul de administrare WordPress. În panou Atributele paginii Puteți alege un șablon de pagină nou numit „Personalizat”.
Deschideți din nou fișierul new.php și începeți să adăugați conținutul dvs. Fișierul poate conține orice doriți, inclusiv conținut imuabil sau elemente de aspect al paginii care vor afișa conținutul paginii.
Puteți utiliza elemente de cod ale altor șabloane de pagină din folder wp-content/themes/CherryFramework pentru a crea o anumită pagină.
Să adăugăm mai întâi un antet și un subsol la noul șablon de pagină:
Dacă salvați modificările, le veți putea vedea pe pagină:
Acum trebuie să selectați tipul de conținut pe care doriți să îl utilizați pe această pagină. Să presupunem că nu aveți un șablon de pagină separat pentru postările personalizate „Echipa noastră”. Și vă place designul șablonului de pagină Mărturii și doriți să utilizați acest design pentru postările „Echipa noastră”. Pentru a face acest lucru în meniu Design -> Editor (Aspect -> Editor) puteți găsi cu ușurință fișierul care conține codul pentru șablonul de pagină Mărturii. Numele lui pagina-testi.php.
Deschideți acest fișier pentru editare. Copiați doar codul de conținut, deoarece ați adăugat deja antetul și subsolul (mai jos este un exemplu al acestui cod, codul dvs. poate arăta diferit):
Lipiți codul copiat în fișierul new.php. A inlocui Nume șablon: Personalizat pe Nume șablon: Echipa
Și înlocuiți pagina-testi.php pe nou.php în acest cod.
Acest cod conține și un link către fișier loop/loop-testi.php. Acesta este un alt fișier pe care trebuie să îl copiați și să îl editați. Copiați fișierul loop-testi.php din folder wp-content/themes/CherryFramework/loopși inserați-l în folder wp-content/themes/theme#####/loop(dacă folderul cu tema nu are un folder buclă, ar trebui să-l creați). Redenumiți acest fișier, de exemplu, în loop-new.php și deschideți-l pentru editare. Înlocuiește cuvântul „testi” pe cuvant "echipă"în toate rândurile fișierului și salvați modificările. (Puteți folosi comanda rapidă de la tastatură Control (Comandă) + F pentru a înlocui cuvinte.)
Când dosarul loop-new.php creat și editat, deschideți din nou fișierul nou.phpși înlocuiți loop/loop-testi.php pe loop/loop-new.phpîn codul lui. Drept urmare, codul dvs. va arăta astfel:
Salvați modificările și testați noua pagină. Acum ar trebui să conțină postări personalizate „Echipa noastră” cu designul paginii Mărturii.
În acest articol vă voi spune cum să faceți un șablon WordPress fără cunoștințe de programare. Va dura câteva minute pentru a vă crea tema. Vom lucra folosind un serviciu gratuit și simplu.
Cum să faci singur un șablon WordPress
Înainte de a crea un șablon WordPress folosind acest instrument, ar trebui să vă familiarizați cu ceea ce face fiecare opțiune. Iată funcțiile lor:
- Numele site-ului.În această secțiune, puteți selecta culoarea titlului site-ului, puteți seta titlul în sine și, de asemenea, puteți specifica adresa URL a siglei. Logo-ul poate fi lăsat necompletat.
- Marimea corpului. Selectați lățimea site-ului. Pentru afișarea corectă, este mai bine să o lăsați la valoarea implicită – 100%.
- Locația barei laterale. Această opțiune vă permite să selectați dimensiunea și locația barei laterale. Există trei opțiuni de dimensiune pentru bara laterală din stânga și din dreapta, precum și opțiunea de a face tema fără bare laterale.
- A treia coloană. Această opțiune activează o a treia coloană. Există diferite opțiuni.
- Aspect meniu. Aici selectați aspectul meniului - există 4 opțiuni diferite.
- Schema generală. Schema de culori este configurată - fundaluri ale diferitelor elemente, margini.
- TextScheme. Schema de design text: culorile, stilurile și fonturile tuturor părților site-ului – anteturi, meniuri, textul principal și altele – sunt personalizate.
- Nor de etichete. Puteți activa și dezactiva norul de etichete din bara laterală.
- Arhive și căutare. Afișarea arhivelor și căutarea pot fi configurate - afișați versiunile complete ale testului sau numai anunțurile.
- Selectarea dreptului de autor.
Deci acum știi cum să faci un șablon WordPress. Tot ce mai rămâne este să-l obții. Pentru a face acest lucru, faceți clic pe butonul „Salvare” din partea de jos, apoi, unde era previzualizarea, faceți clic pe linkul „Fișiere împachetate: descărcați fișierul ZIP de temă” pentru a descărca arhiva temei pe computer. După aceea, îl puteți instala pe site-ul dvs. web.
Salutări, prieteni.
Astăzi vom atinge un subiect foarte interesant pentru mulți. Poate ați observat că am actualizat recent designul blogului meu, nu știu despre voi, dar îmi place foarte mult. Am creat acest șablon literalmente în câteva zeci de minute și nu am avut nevoie de cunoștințe de HTML, CSS și PHP sau de informații despre crearea șabloanelor.
Deci, cum să faci singur un șablon WordPress, fără nicio cunoștință?
Înainte de a începe, nu pot să nu menționez diferitele modalități de a crea șabloane, astfel încât imaginea să fie cât mai completă posibil.
Metoda nr. 1– studiezi HTML, studiezi structura șabloanelor. Desigur, această abordare are avantajele ei, dacă ai timp și dorință, începe cu ea. Cunoașterea HTML nu a rănit niciodată nimănui.
Metoda nr. 2– comandați un șablon de la un freelancer. Dacă aveți bani gratuiti, atunci asigurați-vă că alegeți această metodă. Costul creării unui șablon de înaltă calitate este de la 15.000 la 70.000 de ruble.
Metoda nr. 3– utilizați software special pentru a crea șabloane. Permiteți-mi să clarific imediat că aceasta nu este crearea de șabloane de același tip, este foarte posibil să creați un șablon unic și frumos în program. Un exemplu este acest blog. Totul depinde de imaginația ta.
După cum probabil ați înțeles deja, acest articol se va concentra pe metoda nr. 3.
Ne întâlnim, un program pentru crearea de șabloane - (versiunea nu contează, îl folosesc pe al doilea, după părerea mea, al patrulea a fost deja lansat). Programul este plătit, dar noi suntem ruși (înțelegeți ce vreau să spun). Știu că există o mulțime de lecții despre acest program pe internet, dar deja m-am săturat să răspund la aceeași întrebare de la abonații mei.
Descărcați programul și rulați-l.
1. În fereastra principală a programului, selectați „WordPress”.
2. În fereastra de previzualizare apare un șablon de șablon, desigur, întreaga curbă, dar în timpul lucrului nu va fi nicio urmă a acestuia.
3. Accesați fila „Culori și fonturi”, selectați o schemă de culori (mai târziu o vom ajusta puțin), îmi place schema de culori gri deschis. Faceți clic pe butonul „Seturi de fonturi”, selectați fonturi (folosesc Verdana peste tot).
4. Accesați fila „Layout”, aici ni se cere să selectăm numărul și locația coloanelor, precum și locația antetului (un antet simplu). Aleg întotdeauna „Două coloane->Partea din mijloc dreapta”.
5. În fila următoare ni se cere să selectăm fundalul viitorului șablon. Folosind această filă, vă puteți crea propriul fundal sau puteți selecta un fundal existent.
6. Următoarea filă ne oferă să personalizăm foaia șablon.
Setați lățimea foii (de preferință cel puțin 1000 px), umbra și chenarul acesteia.
7. În fila următoare ni se cere să configuram antetul (header sau header). Personalizați antetul și subsolul folosind Setări.
1. Setarea lățimii și înălțimii antetului.
2. Folosind acest meniu, puteți încărca un antet pregătit anterior în program, precum și să adăugați efecte la acesta.
3. Folosind acest meniu puteți adăuga o imagine terță parte la antet.
4. Numele site-ului dvs. și sloganul acestuia.
5. Poziția numelui și a sloganului.
8. În fila următoare ni se cere să configuram meniul (de obicei se află sub antet). Selectați stilul meniului și completați.
9. În fila următoare - „Articole”, ni se cere să personalizăm aspectul zonei de conținut (text, video, imagini, tabele). Configurați-l folosind setările furnizate.
1. Imaginea articolului (acest parametru nu afectează nimic, îl puteți lăsa așa cum este).
2. Folosind acest meniu puteți seta stilul zonei de conținut (cu sau fără contur).
3. Configurarea afișării textului în interiorul articolului.
4. Editarea diferiților parametri ai zonei de conținut.
5. Personalizare antet.
6. Personalizare subsol.
10. Folosind următoarea filă - „Blocuri”, puteți personaliza aspectul blocurilor laterale (bara laterală).
SETĂRI ȘI EXPORTAREA UN ȘABLON
1. Faceți clic pe butonul „Fișier” (situat în colțul din stânga sus al ferestrei programului).
2. Selectați „Export->Export Settings”. Accesați fila „Proprietăți” și furnizați informațiile necesare. Accesați fila „Notă de subsol” și debifați toate casetele.
3. Repetați pasul numărul unu. Selectați „Export->Temă WordPress”.
4. Exportați șablonul ca folder ZIP.
Toate. Acum știi cum să faci un șablon WordPress cu propriile mâini. Mult succes cu creatia ta.
Nu uitați să comentați articolul. Autorul celui mai bun comentariu, în opinia mea (pe baza rezultatelor săptămânii), va primi cartea mea plătită „Cum să vând produse afiliate pe Internet și să faci profit de 200%” complet gratuit.
LECȚIA VIDEO „Cum să faci un șablon pentru WordPress fără cunoștințe de HTML?
Rețineți doar că WordPress generează niște clase care trebuie să fie prezente în foaia de stil. De exemplu, clasele aligncenter, alignleft și alignright servesc pentru a alinia imaginile și elementele de bloc și acestea trebuie incluse în foaia de stil (pot fi copiate din foaia de stil a temei implicite):
.Aliniere la centru,
div.aligncenter(
afisare: bloc;
margine-stânga: auto;
margine-dreapta: auto;
}
.alinia la stânga(
plutește la stânga;
}
.alignright (
plutire: dreapta;
}
Următoarele clase sunt folosite pentru a alinia imaginile care au subtitrări (pot fi copiate din tema implicită, corectate ulterior dacă este necesar):
.wp-caption (
chenar: 1px solid #ddd;
text-align: centru;
culoare de fundal: #f3f3f3;
padding-top: 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;
chenar-rază: 3px;
}
.wp-caption img (
marja: 0;
umplutură: 0;
chenar: 0 niciunul;
}
.wp-caption p.wp-caption-text (
dimensiunea fontului: 11px;
înălțimea liniei: 17px;
umplutură: 0 4px 5px;
marja: 0;
}
În plus, există câteva alte clase WordPress care nu trebuie descrise în foaia de stil, ci pentru că... WordPress generează pagini folosindu-le și le puteți stila:
.categorii(...)
.cat-item /* Această clasă este atribuită tuturor categoriilor */)
.current-cat (/* stilul categoriei curente */)
.current-cat-parent (/* stil pentru strămoșii categoriei curente */)
.copii (/* clasa pentru copil */)
.pagenav (/* navigare în pagină */)
.page_item (/* orice element de listă */)
.current_page_item (/* această clasă este atribuită în lista de pagini paginii active curente */)
.current_page_parent (/*clasa pentru pagina părinte în raport cu cea actuală */)
.current_page_ancestor (/* orice pagină a nivelurilor superioare relativ la aceasta */)
.widget (/* toate widget-urile sunt incluse în această clasă */)
În timpul procesului de aspect, utilizați blocuri și stiluri pentru acestea, așa cum este definit în capturile de ecran de la începutul articolului. Acest lucru nu este necesar, dar este foarte de dorit.
De exemplu, în viitor vom conecta un formular de căutare la site printr-un special. eticheta wordpress , în urma căruia WordPress va afișa următorul formular:
Prin urmare, luăm în considerare acest lucru atunci când proiectăm tema.
Iar ultimul lucru pe care trebuie să-l adaugi la style.css este informații despre tine și despre tema creată. Informațiile sunt plasate la începutul fișierului în comentarii:
/*Numele temei: creați un nume unic pentru tema
URI temei: http://link-to-theme-homepage
Descriere: Descrierea subiectului
Autor: autor al subiectului
URI autor: http://link-to-author-page
Șablon: nume-temă strămoș
Etichete: tag-uri tematice - doar din lista oferita de wordpress.org
Versiune: versiune
Ei bine, aici este textul licenței
*/
De asemenea, nu uitați să faceți screenshot.pngși puneți-l în folderul cu șablonul (la rădăcină). Informațiile plasate astfel în foaia de stil vor fi afișate în panoul de administrare din secțiune Managementul „temei”.. Testăm șablonul proiectat în browsere, dacă totul este bine, poți continua.
Nu voi furniza codul pentru paginile șablonului proiectat, deoarece... este suficient de mare, descărcați-l și apoi vom lucra cu el.
Cum funcționează o temă wp:
Dacă deschideți folderul tema implicit (wp-content/themes/default), veți vedea multe fișiere PHP (fișiere cu temă) și un fișier style.css. Când vedem un blog, WP include fișierele teme (index.php< În acest moment, pregătirea preliminară este finalizată și putem trece la crearea unei teme din materialul sursă disponibil. Pasul 1: Acum fișierele noastre șablon trebuie să fie „tăiate”, adică. extrageți subsolul, bara laterală și antetul în fișiere separate. Diagrama prezintă o vedere simplificată a fișierului index.php cu semne după care o vom tăia: Pasul 2 - Header.php Acum accesați folderul cu tema implicită, deschideți header.phpși copiați etichetele de acolo Pasul 3 - Sidebar.php
Mai întâi, în directorul de teme WordPress (wp-content/themes), creați un folder cu numele temei noastre. Lăsați-l să fie ruseller_lessons. Apoi din folderul temei implicit (wp-content/themes/default) copiați fișierele comments.php, search.phpȘi 404.phpîn folderul nostru cu teme. Aceste fișiere sunt responsabile pentru comentarii și căutare pe blog. Apoi în ruseller_lessons copiați foaia de stil stil.cssșablonul nostru, screenshot.png (300x225)și folder imagini.
Deschidere index.htmlși tăiați totul î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:
Blogul meu
" type="text/css" media="screen" />
" />
/">
Să revenim la fișierul index.htm. În primul rând, ștergeți întregul formular de căutare, apoi tăiați totul din el