Este puțin probabil ca dvs., ca webmaster, să fiți mulțumit de parametrii standard ai șablonului descărcat. Cu siguranță veți dori să schimbați unele elemente ale layout-ului, să îi schimbați structura, să editați stilul de design și multe altele. Personalizarea șablonului este elementul de bază pe care ar trebui să le dețină orice constructor de site. Toată lumea a început cu asta o dată și ar trebui să înveți și tu. După ce ați citit acest articol, veți ști cum să modificați un șablon Joomla, cât de ușor este de făcut și cum să editați rapid aspectul.
Cum se instalează un șablon pe un site web
Mai întâi trebuie să vă ocupați de instalarea temei pe resursă. Aceasta este o acțiune de bază pe care ar trebui să o puteți efectua chiar și cu ochii închiși. Instalarea unui șablon în Joomla este o abilitate foarte simplă care este un păcat de a nu stăpâni.
Mai întâi trebuie să descărcați fișierul șablon pe discul computerului. De obicei, fișierele de aspect arhivate sunt distribuite în directoare, iar dacă găsiți zip sau tar.gz, atunci este bine. Motorul Joomla este renumit pentru că este foarte ușor de gestionat. În doar câteva minute, puteți schimba carcasa site-ului îmbrăcându-l într-un alt șablon.
Pentru a schimba tema resursei, trebuie să accesați „Extension Manager”. Apoi, trebuie să faceți clic pe „Descărcați fișierul pachet” și să găsiți arhiva șablonului pe computer. După descărcare, faceți clic pe butonul pentru a activa instalarea aspectului - tema va începe treptat să se instaleze. Sau dacă nu ați descărcat fișierul pe computer, puteți introduce URL-ul într-un câmp special și motorul va descărca și instala șablonul pe site-ul propriu-zis.
O altă opțiune de instalare a unui șablon, care nu este folosit la fel de des ca cel precedent, este să încărcați șablonul dezambalat direct pe găzduire folosind un manager FTP. Principalul lucru în acest caz este să nu faceți o greșeală cu folderul în care trimiteți distribuții de șabloane. Dacă este plasat într-o directivă greșită, aspectul nu va apărea în managerul de șabloane și poate chiar distruge unele componente ale site-ului. Trebuie să găsiți folderul șabloane și în interiorul acestuia să creați un director pentru acest șablon. Apoi accesați panoul de administrare din „Extension Manager” și faceți clic pe „Search” - motorul va găsi șablonul pe care l-ați descărcat pe găzduire.
Cum să editați aspectul unui șablon în Joomla
După instalarea șablonului de site, puteți trece la partea cea mai interesantă - trebuie să o editați pentru a se potrivi nevoilor dvs.
Personalizarea aspectului este o activitate distractivă care cu siguranță te va captiva, vei vedea!
Dar mai întâi trebuie să vă dați seama ce este, iar acest ghid vă va ajuta în acest sens.
Faptul este că șabloanele Joomla constau într-un sistem bloc, totuși, la fel ca layout-urile multor alte motoare. Este convenabil și ușor de învățat și trebuie să-l dai seama. Uneori, personalizarea aspectului este disponibilă direct din panoul de administrare. Acest lucru se întâmplă rar și de cele mai multe ori numai dacă ați instalat un aspect plătit pe site. În alte cazuri, va trebui să vă ocupați direct de codul șablonului. Nu vă fie teamă de acest lucru, așa cum am menționat deja - layout-urile moderne au un sistem de blocuri simplu. Pentru a edita un element, trebuie doar să găsiți blocul corespunzător în codul întregului aspect.
Din fericire, nu trebuie să căutați manual elementele necesare în șablon. Personalizarea aspectului va fi mult mai ușoară dacă utilizați un browser dedicat. Cuvântul „special” înseamnă un browser cu ajutorul căruia puteți vizualiza codul paginii ca întreg și elemente individuale. Un exemplu de astfel de browser este Google Chrome. Pentru a vedea unde se află un anumit element în cod, trebuie doar să plasați cursorul peste el, să faceți clic dreapta și să selectați Vizualizare codul elementului. După aceea, browserul va deschide partea selectată a codului și veți putea vedea blocul de care aveți nevoie.
În plus, pentru a modifica setările de blocare, trebuie să le editați folosind un editor special. Pentru a face acest lucru, puteți instala popularul Notepad++ sau puteți utiliza caracteristicile standard ale sistemului dvs. de operare, de exemplu, legendarul Notepad. Va trebui să încărcați tot codul de design extern pentru șablon în Notepad. Apoi apăsați Ctrl + F - se va activa „Căutare”. Găsiți partea de cod pe care browser-ul a evidențiat-o pentru dvs. când ați făcut clic pe codul elementului. Și apoi corectați datele de care aveți nevoie.
Dacă nu înțelegeți ce trebuie editat, atunci va trebui să petreceți câteva seri citind documente albe pentru scrierea CSS. Sau vizionați videoclipuri pe Internet - sunt destule acum. Principalul lucru pe care trebuie să-l înțelegeți este ce etichetă este responsabilă pentru ce. Unele componente sunt ușor de înțeles, cunoscând limba engleză elementară. De exemplu, aceeași culoare în CSS este desemnată ca culoare. Nu este greu să găsești propriile concluzii.
Editând CSS, puteți modifica majoritatea elementelor de pe site, de la logo la lățimea acestuia. Puteți chiar să schimbați imaginea de fundal. Pentru a face acest lucru, va trebui să adăugați o nouă imagine în folderul de imagini și, de asemenea, să scrieți calea către aceasta pe găzduire în cod.
În plus, diferitele extensii pe care le instalați pe site vor fi de mare folos. Este setul de pluginuri, module și componente care determină cum va fi resursa ta. Cu CSS, puteți modifica doar setările de bază, dar nu veți putea adăuga noi funcționalități site-ului. Dar cu o componentă, puteți schimba partea principală a paginii, iar cu module, puteți adăuga blocuri funcționale pentru diverse scopuri. Și pluginurile vor îmbunătăți funcționarea site-ului în sine, precum și vă vor permite să inserați tot felul de funcții chiar în mijlocul conținutului.
Tot ce trebuie să faceți este să determinați cum ar trebui să fie site-ul dvs. și apoi să găsiți instrumentele potrivite pentru a realiza acest lucru!
Astăzi voi vorbi despre cum să facem unic aspectul unui site WordPress, pentru care trebuie doar să refacem șablonul WordPress.
Cu siguranță ați observat că apariția multor site-uri găsite pe Internet este implementată folosind șabloane WordPress gratuite, ceea ce nu adaugă în nici un fel la reputația resursei.
Mai mult, nu este neobișnuit să găsiți site-uri care conțin link-uri externe către resurse terțe găzduite de creatorii de șabloane gratuite.
Desigur, în mod ideal ar trebui să folosiți șabloane plătite, dar pentru aceasta trebuie să investiți bani.
Dacă nu doriți să cheltuiți bani pe o temă WordPress, dacă aveți un site tânăr, de exemplu, și nu aveți abilitățile de a crea șabloane, atunci cel mai logic ar fi să refaceți un șablon WordPress existent.
Deci, pentru a reface un șablon WordPress și a-l face unic într-un fel, trebuie să găsim un șablon gratuit care ne place.
Pe Internet, nu va fi dificil să găsești o mulțime de șabloane gratuite, așa că nu ar trebui să existe probleme în această etapă.
Pentru acest articol, am luat un șablon care arăta astfel:
Caracteristicile șablonului original au fost următoarele: șablon pentru WordPress 3.7.1, până la 3 blocuri cu orice widget-uri sunt plasate deasupra subsolului, există un logo (PSD) care poate fi editat cu ușurință. Formularul de căutare se află pe aceeași linie cu meniul principal.
Planul de acțiune pentru schimbarea șablonului este următorul:
- modificați aspectul antetului șablonului (header);
- modificați aspectul subsolului șablonului (footer);
- modificați conținutul barei laterale;
- ștergeți fișierele șablon de legăturile externe inutile, inclusiv cele codificate;
- depanați funcționalitatea șablonului și returnați toate funcțiile disponibile înainte ca șablonul să fie schimbat (formular de comentariu VKontakte, săgeata în sus, butoanele rețelelor sociale etc.).
Acesta este un scurt plan de acțiune pentru reproiectarea unui șablon WordPress. Acum mai mult.
Deci, să trecem la o analiză mai detaliată a fiecăruia dintre punctele de mai sus.
Pentru a schimba aspectul antetului (antetului) șablonului, va trebui să găsim folderul în directorul cu tema originală imagini, în care, la rândul său, găsiți fișierele imagine utilizate în antetul șablonului. Nu va fi dificil să faci asta, în cazul meu acestea sunt următoarele două imagini:
Trebuie să spun că cazul cu șablonul pe care l-am ales pentru editare este privat, iar aspectul antetului nu trebuie să fie format din exact două poze. Nu ne vom opri asupra acestui lucru, nu este nimic complicat aici.
Și, în general, în acest articol mă gândesc la problema schimbării șablonului WordPress, ca să spunem așa, „cu puțin sânge”, adică cu modificări minime, astfel încât să fie clar pentru începători. Din acest motiv, dimensiunea imaginii utilizate în antet va rămâne aceeași.
Deci, acum, dacă folosiți un editor grafic, de exemplu, Photoshop, pentru a conecta aceste două imagini, vom obține următoarele:
Sper că gândurile mele sunt clare. Dacă nu chiar, atunci vă voi explica: trebuie să estimăm dimensiunea imaginii necesare, pe care o vom crea ulterior noi înșine pentru aspectul original al site-ului nostru, deoarece în cazul meu, această imagine este cea care joacă un rol decisiv în proiectarea șablonului selectat.
Deci, după conectarea imaginilor, determinăm dimensiunea imaginii necesare și, de asemenea, folosind ghidurile din Photoshop, indicăm poziția pe pânză a elementelor caracteristice ale funcționalității șablonului: câmpul pe care se află butoanele de meniu, și așa mai departe. Am obtinut urmatorul rezultat:
Acum, pentru cei care au puține sau deloc abilități în Photoshop, nu va fi dificil să împărțiți imaginea în două părți proporționale cu imaginile originale și apoi să le salvați sub numele imaginilor șablon originale în format jpg sau png. Rezultatul acțiunilor mele este mai jos:
Apoi, aruncăm aceste fișiere în director imagini tema reluată (dacă efectuați toate acțiunile cu fișierele de pe găzduire, puteți utiliza clientul FTP pentru a le accesa, așa cum este descris în). Ne uităm la rezultat - totul ar trebui să funcționeze ca un ceas. Gata!
De asemenea, am înlocuit logo-ul situat în antetul șablonului cu al meu:
Și în loc de frază orice continut introduceți informațiile necesare pe care doriți să le afișați în subsolul site-ului dvs. În cazul meu, codul este următorul:
Culoarea de fundal din subsol, pe care va fi afișat textul specificat, poate fi schimbată după cum urmează: deoarece avem id deasupra recipientului div se numește subsol, apoi în dosar css-stiluri stil.css trebuie să găsiți liniile responsabile pentru atribuirea stilurilor acestuia (dau un exemplu din șablonul meu):
| 1 2 3 4 5 6 7 8 9 | #footer ( fundal : niciunul repeta derulare 0 0 #2E4263 ; culoare : #FFFFFF ; dimensiunea fontului : 12px ; margine : 0 automat ; umplutură : 10px 10px 0 ; text-align: center ; lățime : 950px ; ) |
#footer ( fundal: nici unul repeta derulare 0 0 #2E4263; culoare: #FFFFFF; dimensiune font: 12px; margine: 0 automat; umplutură: 10px 10px 0; text-align: center; lățime: 950px; )
Și scrieți codul paletei de culori dorite în câmp fundal.
Cu acțiuni atât de simple asupra fișierelor șablon, am schimbat aspectul antetului și subsolului site-ului meu.
Schimbarea conținutului barei laterale este destul de simplă: trebuie doar să o faci în secțiune Aspect → Widgeturiîn panoul de administrare WordPress, activați sau dezactivați widget-urile corespunzătoare, precum și configurați-le. Totul depinde de tine, nu este nimic complicat. Voi adăuga doar că ordinea de afișare a categoriilor în bara laterală poate fi schimbată cu ajutorul unui plugin special, care se află pe site-ul meu.
Am scris despre cum să eliminați linkurile externe inutile dintr-un șablon (inclusiv cele codificate), citiți aceste informații, deoarece atunci când schimbați oricare dintre șabloanele WordPress gratuite> importanța acestei proceduri în dezvoltarea viitoare a resursei dvs. este greu de supraestimat.
În cele din urmă, trebuie să verificați performanța fiecărei funcții a resursei dvs., pentru care pur și simplu „vă uitați în jur” pe diferite pagini și link-uri de pe site-ul dvs. și să evaluați cum funcționează cutare sau cutare funcție.
De asemenea, va fi util să verificați cum este afișată resursa dvs. în diferite browsere de internet.
Și, desigur, este necesar să se întoarcă la locul lor toate funcțiile pierdute din cauza schimbării șablonului, de exemplu, cum ar fi:
După ce ați efectuat toate procedurile de mai sus pentru modificarea șablonului WordPress, veți crea un design unic pentru site-ul dvs. care vă va încânta pe dvs. și, bineînțeles, vizitatorii, ceea ce va avea, fără îndoială, un efect pozitiv asupra promovării și promovării resursei dvs.
Asta-i tot, mult noroc!
Fiecare document Word este asociat cu un fel de șablon. Dacă utilizați un șablon personalizat pentru documentul curent, dar ați uitat care dintre ele, Word îl face foarte ușor de aflat. Și la fel de ușor, puteți schimba șablonul asociat documentului curent.
Cometariu: Ilustrațiile pentru acest articol sunt din Word 2013.
Pentru a defini sau modifica șablonul asociat documentului curent, aveți nevoie de fila Dezvoltator(dezvoltator). Activați afișarea acestei file pe Panglică și deschideți-o.
In sectiune Șabloane(Șabloane) faceți clic Șablon de document(Șablon de document).
Se va deschide o casetă de dialog Șabloane și suplimente(Șabloane și suplimente). În câmp Șablon de document(Șablon de document) este numele șablonului (sau calea către fișierul șablon) asociat cu documentul curent. Pentru a schimba șablonul, faceți clic A te alatura(atașa).
În caseta de dialog Atașarea unui șablon(Atașați șablon) va deschide automat folderul implicit pentru șabloanele personalizate. Selectați un șablon din acest dosar sau navigați într-o altă locație pentru a selecta un alt șablon. Apoi apasa Deschis(Deschis).
Acum pe teren Șablon de document(Șablon de document) arată calea completă către fișierul șablon. Dacă doriți ca stilurile de document să fie actualizate automat când închideți această casetă de dialog, bifați caseta Actualizați automat stilurile(Actualizează automat stilurile documentelor). Clic Bine pentru a salva modificările și a închide caseta de dialog.
Conținutul documentului se va modifica în funcție de noul șablon. Stiluri, bare de instrumente personalizate, macrocomenzi (dacă șablonul personalizat a fost creat și salvat cu extensia .dotm) salvate în șablon sunt acum disponibile în documentul dvs. curent.
Cometariu: Atașarea unui șablon la un document nu adaugă text sau imagini din acel șablon la acesta. Acest lucru se întâmplă numai când creați un fișier nou dintr-un șablon.
Când închideți Word, cel mai probabil, vi se va afișa o casetă de dialog, ca în figura de mai jos. Acesta este un avertisment că stilurile din șablonul asociat documentului au fost modificate. Clic salva(Salvare) pentru a salva modificările, Nu salva(Nu salvați) dacă nu doriți să salvați modificările sau Anulare(Anulare) pentru a reveni la editarea documentului și pentru a nu închide Word.
Cometariu: Această casetă de dialog poate apărea chiar și atunci când nu ați făcut nicio modificare la șablon. Dacă nu doriți să schimbați șablonul, faceți clic pe Nu salva(Nu salvați).
De asemenea, puteți utiliza această procedură pentru a detașa un șablon dintr-un document. Pentru a face acest lucru, pur și simplu atașați un șablon la document Normalîn locul celui existent. Rețineți că fiecare document trebuie să aibă asociat un șablon.
Modificarea și editarea unui șablon este similară cu modificarea și editarea unui document obișnuit. Singura diferență este că trebuie să deschideți șablonul, nu documentul. Diferența este mică, dar semnificativă, deoarece șablonul nu este, până la urmă, un document.
- Alege o echipă Fișier>Nou.
Zona de activitate va apărea pe ecran. Crearea unui document.
- Selectați un șablon din listă sau faceți clic pe link Pe calculatorul meu pentru a deschide șablonul de pe hard disk.
De fapt, nu deschideți șablonul, ci creați un nou document pe baza acestuia. Nu utilizați șablonul în sine, ci un link către acesta.
- Fa schimbari.
Șablonul este editat în același mod ca orice alt document. Rețineți că aveți de-a face cu un șablon, nu cu un document „adevărat”. Orice modificare a stilului sau textului va face ca șablonul să se schimbe și apoi să fie salvat pe disc ca același șablon.
- Salvați șablonul editat selectând comanda Fișier>Salvare ca.
- Dați șablonului un nume nou, dar lăsați șablonul original neschimbat.
- Selectați din lista derulantă Tip fișier sens Șablon de document.
- Faceți clic pe butonul salva.
Notă
Modificările pe care le faceți unui șablon nu vor afecta documentele create anterior cu acel șablon. Cu toate acestea, acestea se vor reflecta în documentele pe care le creați după ce modificați șablonul.
Problema salvării fișierelor șablon pe hard disk
Este adesea mai ușor să modificați un șablon existent, așa cum este descris în acest capitol, decât să găsiți șablonul [ necesar pe hard diskul computerului dumneavoastră. Să nu credeți că exagerez, dar locurile în care Word salvează șabloanele de documente nu sunt ușor de găsit. Locația șabloanelor nu este un secret, dar locul în sine a fost ales, ca să spunem ușor, fără succes. Windows XP folosește folderul Documents and Settings ca depozit pentru toate datele utilizatorului. În acest folder veți găsi folderul Application Data, unde multe aplicații stochează date specifice utilizatorului. Șabloanele ar trebui căutate în acest fel: găsiți folderul Microsoft și în el folderul Șabloane. Mă îndoiesc că, fără ajutorul extern, Susanin ar fi putut găsi acest loc.
Fiecare temă are un număr de setări care pot fi modificate din panoul de control CMS. O varietate de parametri pot varia de la șablon la șablon, dar aproape fiecare temă vă permite să configurați logo-ul, fundalul, fonturile, barele laterale, titlul, descrierea site-ului din panoul de administrare.
În ciuda acestui fapt, proprietarul site-ului poate dori să schimbe câteva lucruri mici pe care panoul de control nu vă permite să le editați. În acest caz, puteți angaja un webmaster, dar dacă nu aveți bani sau timp, puteți înțelege cu ușurință șablonul și puteți face singur modificările necesare.
Motorul de teme este format din multe fișiere. Știind de ce parte a site-ului este responsabil fiecare dintre ei, puteți edita cu ușurință designul șablonului CMS pentru dvs.
Fișierele teme conțin cod HTML, PHP și CSS. Există un ghid separat pentru HTML/CSS pe site, iar cunoștințele PHP nu sunt necesare în principiu pentru a forma designul.
Deci, orice șablon WordPress are următoarele fișiere.
1. index.php. Fișierul formează pagina principală a site-ului și apelează alte fișiere skin.
2. header.php. Creează partea de sus, „header” a site-ului - de obicei conține sigla, titlul, descrierea resursei web, precum și un meniu orizontal. Container HTML se află și în acest fișier.
3. footer.php. Conține codul pentru partea de jos a site-ului, „subsolul” acestuia.
4. stil.css. Fișier foaie de stil în cascadă. Deoarece este de obicei destul de mare, stil.css bine comentat. Din păcate, cel mai adesea în limba engleză, dar cunoștințele de bază vor fi suficiente pentru a înțelege care parte a codului este responsabilă pentru designul căror elemente. Citiți mai multe despre CSS aici.
Acesta este fundamentul esențial al unui șablon WordPress, dar de obicei există mult mai multe fișiere de teme, iar aici sunt cele mai comune.
1. singur.php- un post separat.
2. pagina.php- pagina.
3. sidebar.php- bară laterală/panouri.
4. arhiva.php- arhive de articole.
5. căutare.php- pagina cu rezultatele căutării.
6. comentarii.php- ieșire de comentarii.
7. 404.php- pagina de eroare cu codul 404 (Fișierul nu a fost găsit).
8. funcții.php- fisier ce contine functiile temei. De asemenea, puteți adăuga propriile scripturi PHP la acesta.
Desigur, șabloanele conțin de obicei mult mai multe fișiere decât cele descrise mai sus, dar de obicei nu trebuie editate. În plus, puteți afla despre scopul fiecărui fișier din numele și comentariile din interior.
Editarea șabloanelor este adesea necesară pentru a corecta sau adăuga ceva mic. Mai jos sunt câteva situații comune.
Adăugați meniu
Meniul poate fi plasat nu numai în locurile stabilite de temă (acest lucru se face prin widget-uri), ci și în orice altă parte a site-ului sau chiar pe o anumită pagină.
Pentru a insera un meniu oriunde, adăugați linia:
direct în codul paginii unde doriți să o plasați. Linia va funcționa dacă există un singur meniu personalizat pe site. Dacă există mai multe, o linie ca aceasta ar trebui adăugată la cod:
„Meniu_1”)); ?>
unde în loc de Meniu_1 trebuie să introduceți numele meniului dvs.
Editați pagina 404
Dacă linkul duce la o pagină sau un fișier inexistent, WordPress duce utilizatorul la o pagină de eroare 404 (Fișier nu a fost găsit). Dosarul este responsabil pentru acesta. 404.php, stocat în folderul de teme activ. Adesea, textul în limba engleză este afișat pe ecran, iar dorința proprietarului unui site în limba rusă de a-l traduce în limba lor maternă este destul de de înțeles.
Pentru a modifica conținutul paginii, deschideți fișierul în editor 404.php, găsiți liniile cu textul afișat în browser și modificați-le (textul de ieșire este cel mai adesea cuprins între ghilimele). De exemplu, într-una dintre temele implicite (douăzeci și patru), veți fi interesat de următorul cod:
Înlocuiește textul citat (nu unde este douăzeci și patru, ci altceva) cu al tău și obține o pagină 404 modificată.
Înregistrați drepturile de autor
În partea de jos a site-ului, se obișnuiește să scrieți informații despre serviciu, în special, anii resursei și drepturile de autor. În marea majoritate a cazurilor, „eticheta” lor în dosar footer.php lăsați autorii temelor, iar webmasterii, desigur, doresc să înlocuiască aceste informații cu ale lor.
Pentru „picioarele” site-ului, după cum știm, fișierul stocat în rădăcina temei active este responsabil footer.php, și ar trebui să căutați codul responsabil pentru drepturile de autor din acesta.
De exemplu, tema alb-plat ascunde informații auxiliare în următoarele rânduri ale acestui fișier:
"title="(!LANG:"> ">
Rusificați textul
Adesea, șabloanele WordPress nu sunt complet rusificate sau nu sunt traduse deloc. Cunoscând structura fișierului temei și faptul că textul afișat utilizatorului (dacă nu este o variabilă) este întotdeauna citat în cod, este ușor să găsiți și să traduceți în mod independent fragmentul dorit și nu este necesar să căutați manual cuvântul - pentru aceasta puteți utiliza căutarea automată care este prezentă în fiecare editor de cod.
De exemplu, în șablonul alb-plat, doriți să rusificați imediat cel puțin două inscripții: „CITIȚI MAI MULT” și „Lăsați un comentariu”, deoarece acestea sunt vizibile pe pagina principală.
Fișierul este responsabil pentru pagina principală index.php, situat în rădăcina directorului temei, prin urmare, trebuie să îl editați. Dar textul inscripțiilor nu este în el, așa că trebuie să înțelegeți codul pentru a afla unde sunt stocate. În cazul nostru, fișierul este responsabil pentru informațiile de sub postările de pe pagina principală. template-parts/content.php, legate prin sfoară
Dacă intri în el și în cod
text Lasa un comentariu inlocuit de
- Câștiguri din programele de afiliere de la zero - instrucțiuni pas cu pas despre cum să câștigi bani din programele de afiliere Programe de afiliere de la zero
- Imprimanta imprimă cu dungi: ce să faci?
- Cum să activați Bluetooth pe un laptop Asus, HP, Dell, Acer
- Cum să faci bani pe Youtube de la zero pe abonați și vizualizări - instrucțiuni detaliate
Ajutor computer Olympus