Zdravo čitaoci. Nedavno su me zamolili da objasnim kako prilagoditi stilski list u WordPress-u. I odlučio sam da opišem ključne vještine. Neću objašnjavati šta je stilski list, vjerovatno svi znaju. Ako ne znate, prvo morate posjetiti "Yasha" ili "Gosha".
Bilo koja moderna web stranica ne može raditi bez ove tabele. Ako može, poprimiće jadan izgled. Kao, na primjer, prve stranice koje su pisane u .html-u.
WordPress je pun gotovih šablona sa stotinama opcija. Samo izaberite i uradite to. Međutim, svi web majstori imaju problem da ga mijenjaju. Napravite poboljšanja kako biste uklonili nepotrebna polja, smanjili font, razmak između redova, uvlake itd. Sve ove brojne operacije mogu se obaviti uređivanjem samo jedne datoteke. Pa, možda ih ima više na različitim šablonima.
I tako da počnemo.
Pronađite datoteku stilova.
Datoteci stila možete pristupiti na dva načina: direktno preko servera ili preko konzole. Obično koristim konzole, zgodno je i brzo.
Izgled - Urednik
Ovdje ćete vidjeti listu svih datoteka web stranice. Morate odabrati željeni fajl na dnu da biste konfigurirali i uredili style.css WordPress
Druga slika prikazuje sam stilski list u .css formatu, obično se ova datoteka zove style.css
I tako smo se odlučili za fajl. I mi ćemo ga urediti. Pre nego što počnete da uređujete ili menjate bilo šta, savetujem vam da kopirate ovu originalnu datoteku na svoj računar.
Prilagodba, css uređivanje
Da biste prilagodili listu stilova, koristite posebne programe koji će vam olakšati život. Ali u mom slučaju je sve jednostavnije i ništa nije potrebno.
Koristim Google Chrome. Možda za mene najbolji pretraživač. I kada uređujem stilski list koristim ga. Ali možete ga koristiti i sa Operom.
Zašto sve ovo govorim? Zanima nas funkcija desnog klika na stranici. Tačnije, na područje koje nam je potrebno. Desnim klikom otvara se funkcija "Pogledaj kod elementa".
U ovom slučaju, element je istaknut i njegov kod se pojavljuje ispod. A na desnoj strani se pojavljuje ono što nam treba. Vrijednosti iz stilskog lista koje se primjenjuju na odabrani element. 
Ovdje vidimo sve elemente odabranog elementa. Siva tačka je uvlačenje. Iz vrijednosti možete vidjeti da je padding 15px na vrhu i 14px sa strane.
Ako trebamo promijeniti ovu vrijednost, možemo ih promijeniti na licu mjesta. i vidi kako će to sada izgledati. Ako ste odabrali željenu veličinu, sada morate pronaći i promijeniti ovu vrijednost u samom listu stilova.
Kako da ovo uradimo? Na slici sam ga označio crvenim linijama. .nav > li > a je upravo element koji sadrži padding: 15px 14px; Moramo pronaći ovu liniju u stilu. Imate čak i nagoveštaj style.css:520, što znači da je u datoteci style.css i red broj 520.
Dozvolite mi da vam dam još jedan primjer:
Mi ćemo promijeniti boju.
Desnom tipkom miša kliknite na područje koje nam je potrebno i pogledajte kod.
Vidimo da je ova haljina ofarbana u plavo. pozadina : #3b8dbd ; Za testiranje možemo promijeniti boju na licu mjesta. Nakon čega biramo željenu boju, tražimo .s1 .sidebar-toggle u stilu lista i pronalazimo ga. 
Ovdje možete vidjeti pozadinu: #3b8dbd; ovo je naša boja u obliku koda. samo ćemo morati da ga promenimo u našu boju i sačuvamo promene.
To je sve za sada. Sada možete promijeniti sve elemente. Ako imate bilo kakvih poteškoća, mogu vam pokazati uređivanje u drugim područjima. Pogledajte nastavak članka.
*Vizualni uređivač možete povezati u odeljku “Plugins” na konzoli.
Dodatak TinyMCE Advanced dodaje dodatna dugmad u standardni uređivač za formatiranje teksta. Evo nekih od njih:
- Veličina slova
- Vrsta fonta
- Boja pozadine
- Funkcija za pretraživanje i zamjenu teksta na stranici
Također možete onemogućiti automatsko uklanjanje praznih redova.
Možete dodati ili ukloniti dugmad za podešavanja sa trake sa alatkama i rasporediti ih redosledom koji vama odgovara.
Postavke uređivača nalaze se u odjeljku konzole “Postavke” - “TinyMCE Advanced”.
Postavke dodataka
Postavke dodatka nalaze se u “Postavke - TinyMCE Advanced”. Ne bojte se da dodatak nije preveden na ruski - sami gumbi u vizualnom uređivaču TinyMCE su gotovo svi prevedeni na ruski, tako da vam nije potrebno znanje engleskog. Da, i mačka ovdje vapi za postavkama - u stvari, samo trebate koristiti miš da prevučete potrebne gumbe na traku s alatima vizualnog uređivača. Da, i to nije obavezno - gotovo sve je duplicirano u izborniku uređivača:
Inače, meni se može onemogućiti prvom postavkom dodatka:
Sama dugmad su na engleskom, ali je lako razumjeti šta znače:
Kao što vidite, sve u postavkama dodatka je na engleskom, ali prilikom uređivanja posta svi engleski natpisi se automatski prevode na ruski. Čak i ako nešto ne razumete, pustite dugme na panelu, sačuvajte podešavanja, pređite na uređivanje unosa i pogledajte šta znači ovo ili ono dugme.
Nije dobra ideja dodavati svako moguće dugme na traku sa alatkama, jer vam nikada neće trebati mnogo dugmadi. Štaviše, bolje je ukloniti neke tipke od onih koji su već tamo. Što je uređivač jednostavniji, to je praktičniji i efikasniji za upotrebu.
Dugme “Pronađi i zamijeni” otvara sljedeći dijalog:
Mogućnost odabira fonta i veličine:
Ovo je također vrlo korisna funkcija koja vam omogućava da formatirate tekst vašeg članka onako kako želite bez uređivanja stilova šablona.
Tu je i funkcija "blok gledanja":
Omogućava vam da vizuelno procenite kako je vaš tekst formatiran. Ovo je važno jer je često vrlo teško razumjeti u vizualnom uređivaču kako je formatiran ovaj ili onaj dio teksta. Ili odakle dolaze dodatne uvlake u nekom dijelu teksta:
U WordPress uređivaču oznake paragrafa i reda se postavljaju automatski i vi ih uopće ne vidite. Svaki tekst nakon kojeg pritisnete “Enter” se uzima u oznake pasusa, koje ne možete vidjeti čak ni ako se prebacite na karticu “Text” u vizualnom uređivaču.
Ponekad ovakvo ponašanje urednika izaziva potpuni omamljenost. Na primjer, na ovom snimku ekrana možete vidjeti da je tekst uključen u oznake
automatski se ispostavilo da je takođe umotan u oznake paragrafaInače, dodatak TinyMCE Advanced omogućava da vidite pravi izvorni kod vašeg teksta, bez izrezanih oznaka. Da biste to učinili, u meniju "Alati" odaberite stavku menija "Izvorni kod":
Ova funkcija će vam omogućiti da vidite stvarni izvorni kod vašeg članka, a ne onaj koji vidite kada se prebacite na karticu Tekst. Na primjer, na kartici "Tekst" kod bi mogao biti ovakav:
A kada koristite funkciju izvornog koda, vidjet ćete:
To jest, vidjet ćete svoj tekst sa već postavljenim oznakama pasusa. I to će biti upravo onaj kod koji će biti prikazan u vašem objavljenom postu na stranici.
Dodatak također proširuje mogućnost umetanja standardnih lista. Zadani editor ima samo jednu vrstu liste:
Dodatak vam omogućava da ubacite liste različitih tipova:
Dugme za umetanje emotikona:
Zabavno dugme koje vam omogućava da procenite kako će emotikon izgledati u objavljenom postu, jer će u vizuelnom uređivaču emotikoni i dalje biti prikazani u tekstualnom obliku. Samo ne zaboravite otići na "Postavke\Pisanje" i označiti opciju "Pretvori emotikone poput 🙂 i 😛 u slike".
Sada je vrijedno spomenuti postavke koje se nalaze ispod panela za odabir neiskorištenih dugmadi:
Podrazumevano, samo opcija “ Lista opcija stila", koji uključuje napredne opcije za umetanje lista, koje su gore opisane. Opcija " Kontekstni meni"uključuje kontekstni meni dodatka koji se poziva kada kliknete desnim tasterom miša u uređivaču:
Opcija " Link (zamjenjuje dijalog Umetanje/Uređivanje veze)" odnosi se na dijalog za umetanje veze. Standardno ovaj dijalog izgleda ovako:
Dodatak ga može zamijeniti ovim:
To jest, u stvari, dijalog dodataka vam dozvoljava samo da unesete za veze, a sve ostalo je u standardnom dijalogu za dodavanje linkova. Da li vam je potrebna ova funkcija dodatka ili ne, odlučite sami.
Posljednji dio postavki dodatka su "napredne" postavke:
Učitajte CSS klase koje se koriste u editor-style.css i zamijenite dugme Formats i podmeni— ova funkcija nije podržana na Prihod.ru.
Prestanite da uklanjate
I
oznake prilikom spremanja i prikaži ih u uređivaču teksta — Najnovija postavka dodatka uzrokuje da uređivač prikazuje oznake paragrafa i prijeloma reda na kartici Tekst. Odnosno, prilikom uređivanja posta sve će biti isto, ali na kartici "Tekst" vidjet ćete punu html oznaku. Međutim, uređivač će i dalje biti čudan sa svojim automatskim formatiranjem. Na primjer, evo koda:
Nakon prebacivanja na “Vizuelni” i povratak na “Tekst” pretvorit će se u:
To jest, urednik je uklonio jedan prijelom reda, uzimajući preostale dvije prijelome u oznake pasusa. Ali nakon spremanja stranice sve
će nestati.Ali kada omogućite ovu postavku, WordPress prestaje da „jede“ prazne redove koje unesete pomoću dugmeta Enter u režimu vizuelnog uređivanja. Editor ubacuje kod na mjesto praznog reda
i ne briše ga prilikom spremanja, čak i ako ima mnogo takvih redova na stranici.Članak je preuzet odavde i malo proširen :)
Pregledano (4481) puta
Objavili smo na stranici komponenta Komponenta- poseban element sistema dizajniran za prikaz informacija iz baze podataka sajta.
Predložak komponente
Parametar Predložak komponente odgovoran za izgled. Većina komponenti ima samo jedan zadani predložak ( .default).
Ako postoji nekoliko predložaka, na padajućoj listi odaberite onaj koji vam je potreban. Imajte na umu da kada promijenite predložak, izgled kreirane stranice će se promijeniti.
Osnovni parametri i izvor podataka
Ovdje postavljamo izvor objavljenih podataka (informativni blok, forumi, web formular, anketa, itd.):
U nekim slučajevima, izvor treba navesti pomoću koda koji prosljeđuje identifikator elementa podataka (međutim, to je rijetko odgovornost upravitelja sadržaja).
Trebali biste odmah postaviti parametre sortiranja (po kojim kriterijima i kako se podaci sortiraju), na primjer:
Predlošci veza
Ovdje konfiguriramo adrese stranica (za više informacija kontaktirajte administratora):
Upravljanje adresama stranica
Ovdje konfiguriramo način rada CNC CNC je web adresa koja je čitljiva ljudima. Ovo je skraćenica za frazu “ljudski čitljiv url” (gdje je “url” sleng za URL).
Kontrola moda AJAX AJAX- tehnologija za pristup serveru bez ponovnog učitavanja stranice.
Ovdje postavljamo AJAX u komponenti. AJAX tehnologija ne ažurira (učitava) cijelu stranicu, već samo njen dio nakon radnji korisnika (na primjer, kada se klikne na dugme). Tako će korisnik brzo vidjeti rezultat svojih radnji.
Postavke keširanja
Ovdje definiramo ponašanje skladiste Cash- ovo je vrsta skladišta za ubrzavanje pregleda informacija na web stranici. Kada korisnik pregleda informacije na web stranici, one se ne traže uvijek iz baze podataka, već se uzimaju iz keša. za komponentu:
Keširanje se koristi za smanjenje opterećenja na serveru i ubrzanje prikaza podataka. Vrijeme keširanja uglavnom ovisi o učestalosti ažuriranja informacija: što se informacije rjeđe ažuriraju, vrijeme keširanja može biti duže. Budite oprezni, postavljajte postavke keša samo u dogovoru sa administratorom stranice.
Dodatne postavke
Ovdje su definirani dodatni parametri - staza kruha, zaglavlja stranica, formati prikaza datuma, itd.:
Čemu služe ostale stavke iskačućeg menija? Hajde da to shvatimo.
Pored komande za uređivanje, vidimo listu komponenti koje se koriste u oblasti koja nas zanima. Za svaku komponentu vidimo tri naredbe:
- Copy template;
- Uredi šablon;
- Onemogućite komponentu.
Prve dvije komande se koriste za rad sa šablonom, najčešće je to zadatak administratora stranice. Evo tima Onemogući komponentu može pomoći menadžeru sadržaja. Ova opcija čini komponentu neaktivnom. Podaci iz ove komponente neće biti prikazani na stranici dok ne budete vi upali ponovo Lokacija komponente kada je uključen način uređivanja bit će označena kvadratom sa crvenom bojom
dot. Da biste omogućili komponentu, slijedite obrnute korake:
.
U ovoj teškoj lekciji shvatili smo kako da konfigurišemo komponente. Vrijedi napomenuti da svaka komponenta ima svoj skup parametara. Za detaljne informacije o komponenti i njenim parametrima, molimo kontaktirajte. U sljedećoj lekciji ćemo pojačati ono što smo naučili stvarnim primjerima korištenja komponenti.
