Salutare cititori. Recent, am fost rugat să explic cum să configurez o foaie de stil în WordPress. Și am decis să descriu abilitățile cheie. Nu voi explica ce este o foaie de stil, probabil că toată lumea știe. Dacă nu știți, atunci mai întâi trebuie să vizitați „Yasha” sau „Gosha”.
Orice site modern nu poate funcționa fără acest tabel. Dacă poate, va arăta rău. Ca de exemplu primele site-uri care au fost scrise în .html.
Există sute de șabloane gata făcute pentru WordPress. Alegeți și faceți numai. Cu toate acestea, toți webmasterii au o problemă să-l schimbe. Faceți îmbunătățiri pentru a elimina câmpurile inutile, reduceți fontul, spațierea între linii, indentările și așa mai departe. Toate aceste numeroase operații pot fi realizate prin editarea unui singur fișier. Ei bine, pot fi mai multe despre diferite șabloane.
Și deci să începem.
Găsiți fișierul de stil.
Puteți accesa fișierul de stil în două moduri, fie direct prin server, fie prin consolă. De obicei folosesc console, este comod și rapid.
Aspect - editor
Aici veți vedea o listă cu toate fișierele site-ului. Trebuie să selectați fișierul dorit în partea de jos pentru a configura și edita style.css WordPress
A doua figură arată foaia de stil în sine în format .css, este obișnuit să se numească acest fișier style.css
Și așa ne-am hotărât asupra dosarului. Și o vom edita. Înainte de a începe să editați ceva, vă sfătuiesc să îl schimbați prin copierea acestui fișier în original pe computer.
Setarea, editarea css
Pentru a personaliza foaia de stil, utilizați programe speciale pentru a vă ușura viața. Dar în cazul meu, totul este mai simplu și nu este nevoie de nimic.
Folosesc Google Chrome. Probabil cel mai bun browser pentru mine. Și când editez o foaie de stil, o folosesc cu el. Dar îl poți folosi și cu Opera.
De ce spun toate astea? Ne interesează funcția butonului drept al mouse-ului de pe site. Mai exact, în zona de care avem nevoie. Făcând clic dreapta, se iese din funcția „Vizualizare cod element”.
În acest caz, elementul este evidențiat și codul său apare mai jos. Și în dreapta apare ceea ce avem nevoie. Valori din foaia de stil care se aplică elementului selectat. 
Aici vedem toate elementele elementului selectat. Evidențierea gri este indentarea. Din valori puteți vedea că umplutura este de 15px din partea de sus și 14px din lateral.
Dacă trebuie să schimbăm această valoare, le putem schimba pe loc. și vezi cum arată acum. Dacă ați ales acum dimensiunea potrivită, trebuie să găsiți și să modificați această valoare pe foaia de stil în sine.
Cum o facem? L-am evidențiat cu linii roșii în imagine. .nav > li > a este exact elementul în care se află umplutura: 15px 14px ; Trebuie să găsim această linie în foaia de stil. Aveți chiar și indiciu style.css:520, ceea ce înseamnă că este în fișierul style.css și numărul de linie 520.
Hai sa-ti mai dau un exemplu:
Să schimbăm culoarea.
Facem clic dreapta în zona de care avem nevoie și ne uităm la cod.
Vedem că această îmbrăcăminte este vopsită în albastru. fundal : #3b8dbd ; Putem schimba culoarea pentru test chiar pe loc. După aceea, pe măsură ce alegem culoarea dorită, căutăm .s1 .sidebar-toggle în foaia de stil și o găsim. 
Puteți vedea fundalul aici: #3b8dbd ; aceasta este culoarea noastră în cod. va trebui doar să o schimbăm în culoarea noastră și să salvăm modificările.
Asta este tot pentru acum. Acum puteți schimba orice element. Dacă aveți dificultăți, vă pot demonstra și edita alte domenii. Vezi continuarea articolului.
*Puteți conecta editorul vizual în secțiunea „Plugin-uri” a consolei.
conecteaza TinyMCE avansat adaugă butoane suplimentare la editorul standard pentru formatarea textului. Iată câteva dintre ele:
- Marimea fontului
- Tipul fontului
- Culoare de fundal
- Funcția de găsire și înlocuire a textului pe pagină
De asemenea, puteți dezactiva ștergerea automată a liniilor goale.
Puteți adăuga sau elimina butoanele de setări din bara de instrumente și le puteți aranja în ordinea dorită.
Setările editorului se află în secțiunea consolei „Setări” - „TinyMCE Advanced”.
Setări plugin
Setările pluginului se află în „Setări – TinyMCE Advanced”. Nu vă fie teamă că pluginul nu este tradus în rusă - butoanele în sine din editorul vizual TinyMCE sunt aproape toate traduse în rusă, deci nu trebuie să cunoașteți engleza. Da, iar pisica a plâns setările aici - de fapt, trebuie doar să trageți butoanele necesare în bara de instrumente a editorului vizual cu mouse-ul. Da, și acest lucru nu este obligatoriu - aproape totul este duplicat în meniul editorului:
Apropo, meniul poate fi dezactivat prin prima setare a pluginului:
Butoanele în sine sunt în engleză, dar este ușor de înțeles ce înseamnă:
După cum puteți vedea, totul în setările pluginului este în engleză, dar atunci când editați o postare, toate inscripțiile în limba engleză sunt traduse automat în rusă. Chiar dacă ceva nu este clar pentru tine - au aruncat un buton pe panou, au salvat setările, au trecut la editarea înregistrării și s-au uitat la ce înseamnă acest buton sau acela.
Nu este o idee bună să adăugați fiecare buton posibil din bara de instrumente, de atâtea butoane de care nu veți avea nevoie niciodată. Mai mult, este mai bine să eliminați unele butoane din cele care sunt deja acolo. Cu cât editorul este mai simplu, cu atât este mai convenabil și mai eficient de utilizat.
Butonul Găsiți și înlocuiți deschide următorul dialog:
Posibilitatea de a alege fontul și dimensiunea acestuia:
Este, de asemenea, o caracteristică foarte utilă care vă permite să aranjați textul articolului dvs. așa cum vă place, fără a edita stilurile șablonului.
Există, de asemenea, o funcție de „vizualizare bloc”:
Vă permite să evaluați vizual modul în care este proiectat textul dvs. Acest lucru este important deoarece este adesea foarte dificil de înțeles într-un editor vizual cum este proiectat cutare sau cutare bucată de text. Sau de unde provin liniuțele suplimentare într-o bucată de text:
În editorul WordPress, etichetele de paragraf și de întrerupere de rând sunt plasate automat și nu le vedeți deloc. Orice text după care apăsați „Enter” este luat în etichete de paragraf, pe care nu le veți putea vedea chiar dacă treceți la fila „Text” a editorului vizual.
Uneori, acest comportament al editorului provoacă o stupoare completă. De exemplu, în această captură de ecran puteți vedea că textul preluat în etichete
automat s-a dovedit a fi încă înfășurat și în etichete de paragrafApropo, pluginul TinyMCE Advanced vă permite să vedeți codul sursă real al textului dvs., fără etichete tăiate. Pentru a face acest lucru, în meniul „Instrumente”, selectați elementul de meniu „Cod sursă”:
Această funcție vă va permite să vedeți codul sursă real al articolului dvs., nu pe cel pe care îl vedeți trecând la fila „Text”. De exemplu, în fila „Text”, codul ar putea arăta astfel:
Și când utilizați funcția „Cod sursă”, veți vedea:
Adică, veți vedea textul dvs. cu etichete de paragraf deja plasate. Și acesta va fi exact codul care va fi afișat în postarea dvs. publicată pe site.
Pluginul extinde, de asemenea, posibilitățile de inserare a listelor standard. Există o singură vizualizare de listă în editorul implicit:
Pluginul vă permite să inserați liste de diferite tipuri:
Inserați butonul emoji:
Un buton amuzant care vă permite să evaluați cum va arăta emoticonul în postarea publicată, deoarece emoticoanele vor fi în continuare afișate sub formă de text în editorul vizual. Nu uitați să mergeți la „Setări\Scriere” și să bifați caseta „Conversie emoticoane precum 🙂 și 😛 în imagini”.
Acum merită menționat setările care se află sub panoul de selecție a butoanelor neutilizate:
În mod implicit, doar opțiunea " Listează opțiuni de stil", care include opțiuni avansate de inserare a listelor, care sunt descrise mai sus. Opțiune " meniul contextual» include meniul contextual al pluginului, numit când faceți clic dreapta în editor:
Opțiune " Link (înlocuiește dialogul Inserare/Editare link)» se referă la dialogul de inserare a linkurilor. În mod implicit, acest dialog arată astfel:
Plugin-ul îl poate înlocui cu acesta:
Adică, de fapt, dialogul pentru plugin vă permite doar să setați pentru link-uri, iar orice altceva se află în dialogul standard pentru adăugarea link-urilor. Indiferent dacă aveți nevoie de această funcție de plugin sau nu, decideți singur.
Ultima parte a setărilor pluginului sunt setările „avansate”:
Încărcați clasele CSS utilizate în editor-style.css și înlocuiți butonul Formate și submeniul— această funcție nu este acceptată pe Prihod.ru.
Nu mai eliminați
Și
etichete atunci când salvați și afișați-le în Editorul de text — Cea mai recentă setare a pluginului face ca editorul să afișeze etichete de paragraf și de întrerupere de linie în fila Text. Adică, atunci când editați o postare, totul va fi la fel, dar în fila „Text” veți vedea markup complet html. Cu toate acestea, editorul va fi în continuare ciudat cu formatarea sa automată. De exemplu, iată codul:
După trecerea la „Vizual” și înapoi la „Text” se va transforma în:
Adică, editorul a eliminat o întrerupere de linie, luând celelalte două pauze în etichete de paragraf. Dar după ce ai salvat pagina totul
va fi pierdut.Dar când activezi această setare, WordPress nu mai „mâncă” linii goale pe care le pui cu butonul Enter în modul de editare vizuală. Editorul introduce codul în locul liniei goale
și nu îl șterge la salvare, chiar dacă există multe astfel de rânduri pe pagină.Articolul este preluat de aici și ușor completat 🙂
Vizualizat (4481) ori
Am plasat pe pagină componentă Componentă- un element special al sistemului conceput pentru a afișa informații din Baza de date a site-ului.
Șablon de componentă
Parametru Șablon de componentă responsabil de aspect. Majoritatea componentelor au un singur șablon implicit ( .Mod implicit).
Dacă există mai multe șabloane, selectați-l pe cel de care aveți nevoie din lista derulantă. Vă rugăm să rețineți că atunci când schimbați șablonul, aspectul paginii create se va schimba.
Parametri principali și sursa de date
Aici setăm sursa datelor publicate (infoblock, forumuri, formular web, sondaj etc.):
În unele cazuri, sursa ar trebui să fie setată folosind codul care trece ID-ul articolului (cu toate acestea, aceasta este rareori responsabilitatea managerului de conținut).
Aici ar trebui să setați și opțiunile de sortare (după ce atribut și cum sunt sortate datele), de exemplu:
Șabloane de linkuri
Aici configuram adresele paginilor (contacteaza administratorul pentru mai multe informatii):
Gestionarea adreselor paginii
Aici setăm modul CNC CNC este o adresă web care poate fi citită de om. Aceasta este o abreviere pentru expresia „url care poate fi citit de om” (unde „url” este argou URL).
Controlul modului AJAX AJAX- tehnologie de accesare a serverului fără a reîncărca pagina.
Aici am configurat AJAX în componentă. Tehnologia AJAX actualizează (încarcă) nu întreaga pagină, ci doar o parte a acesteia după acțiunile utilizatorului (de exemplu, când faceți clic pe un buton). Astfel, utilizatorul va vedea rezultatul acțiunilor sale mai rapid.
Setări de stocare în cache
Aici definim comportamentele cache Bani lichizi- acesta este un fel de stocare pentru a accelera vizualizarea informațiilor de pe site. Atunci când un utilizator vizualizează informații de pe un site, acestea nu sunt întotdeauna solicitate din baza de date, ci sunt preluate din cache. pentru componenta:
Memorarea în cache este utilizată pentru a reduce sarcina de pe server și pentru a accelera afișarea datelor. Timpul de stocare în cache depinde în principal de frecvența actualizării informațiilor: cu cât informațiile sunt actualizate mai rar, cu atât timpul de stocare în cache poate fi mai lung. Atenție, faceți setările cache-ului numai de comun acord cu administratorul site-ului.
Setari aditionale
Parametri suplimentari sunt definiți aici - lanțul de navigare, titlurile paginilor, formatele de afișare a datei etc.:
Pentru ce sunt celelalte elemente din meniul pop-up? Să ne dăm seama.
Pe lângă comanda de editare, vedem o listă de componente care sunt utilizate în zona de interes pentru noi. Pentru fiecare componentă, vedem trei comenzi:
- Copiați șablonul;
- Editați șablonul;
- Dezactivează o componentă.
Primele două comenzi sunt folosite pentru a lucra cu șablonul, cel mai adesea aceasta este sarcina administratorului site-ului. Și aici este echipa Dezactivați componenta poate ajuta managerul de conținut. Această opțiune face componenta inactivă. Datele din această componentă nu vor fi afișate pe pagină până când dvs porniți-l din nou Locația componentei cu modul de editare activat va fi indicată printr-un pătrat cu un roșu
punct. Pentru a activa componenta, urmați pașii inversi:
.
În această lecție dificilă, ne-am dat seama cum să configuram componentele. Trebuie remarcat faptul că fiecare componentă are propriul set de parametri. Pentru informații detaliate despre componentă și parametrii acesteia, consultați . În lecția următoare, vom consolida cunoștințele dobândite cu ajutorul exemplelor reale de utilizare a componentelor.
