Wordpress-mallin visuaalinen muokkaus. Mallikohtaiset toiminnot. Kuinka muuttaa WordPress-malleja
Jokaisessa suunnitteluteemassa on useita asetuksia, joita voidaan muuttaa paneelista CMS-hallinta. Erilaiset parametrit voivat vaihdella mallista toiseen, mutta lähes jokaisen teeman avulla voit mukauttaa sivuston logoa, taustaa, fontteja, sivupalkkeja, otsikkoa ja kuvausta hallintapaneelista.
Tästä huolimatta sivuston omistaja saattaa haluta muuttaa joitain pieniä asioita, joita ohjauspaneeli ei salli. Tässä tapauksessa voit palkata verkkovastaavan, mutta jos sinulla ei ole rahaa tai aikaa, voit helposti selvittää mallin ja tehdä tarvittavat muutokset itse.
Moottorin teema koostuu useista tiedostoista. Kun tiedät, mistä sivuston osasta kukin heistä on vastuussa, voit helposti muokata suunnittelua CMS-malli"itseäsi varten."
Teematiedostot sisältävät HTML-, PHP- ja CSS-koodia. Sivustolla on erillinen hakuteos HTML/CSS:stä, mutta suunnitelman luomiseen ei periaatteessa tarvita PHP-taitoa.
Joten missä tahansa WordPress-mallissa on seuraavat tiedostot.
1. index.php. Tiedostolomakkeet kotisivu sivusto ja kutsuu muita teematiedostoja.
2. header.php. Luo sivuston yläosan, "otsikon" - yleensä se sisältää logon, nimen, verkkoresurssin kuvauksen sekä vaakasuora valikko. HTML-säilö on myös tässä tiedostossa.
3. alatunniste.php. Sisältää koodin sivuston alaosaan, sen "alatunnisteeseen".
4. tyyli.css. Tiedosto kaskadipöydät tyylejä. Koska se on yleensä melko suuri, tyyli.css hyvin kommentoitu. Valitettavasti useimmiten englanniksi, mutta perustieto riittää ymmärtämään, mikä koodin osa on vastuussa minkäkin elementin suunnittelusta. Lue lisää CSS:stä täältä.
Tämä on pakollinen perusta WordPress-mallille, mutta teematiedostoja on yleensä paljon enemmän, ja tässä ovat yleisimmät.
1. single.php- erillinen postaus.
2. page.php- sivu.
3. sidebar.php- sivupaneeli/paneelit.
4. arkisto.php- artikkeliarkistot.
5. search.php- hakutulossivu.
6. kommentit.php- kommenttien tulos.
7. 404.php- virhesivu koodilla 404 (Tiedostoa ei löydy).
8. function.php- teematoimintoja sisältävä tiedosto. Voit lisätä siihen omia PHP-skriptejä.
Tietenkin mallit sisältävät yleensä paljon lisää tiedostoja kuin yllä on kuvattu, mutta niitä ei yleensä tarvitse muokata. Lisäksi voit oppia kunkin tiedoston tarkoituksesta sen nimestä ja sisällä olevista kommenteista.
Mallien muokkaaminen on usein tarpeen joidenkin pienten yksityiskohtien korjaamiseksi tai lisäämiseksi. Alla on muutamia yleisiä tilanteita.
Lisää valikko
Valikot voidaan sijoittaa paitsi paikkoihin teeman mukaan(tämä tehdään widgetien kautta), mutta myös missä tahansa muussa sivuston osassa tai jopa tietyllä sivulla.
Lisää valikko mihin tahansa lisäämällä rivi:
suoraan sivukoodiin, johon haluat sijoittaa sen. Rivi toimii, jos sivustolla on vain yksi mukautettu valikko. Jos niitä on useita, lisää koodiin seuraava rivi:
"Menu_1")); ?>
missä sen sijaan Valikko_1 sinun on annettava valikon nimi.
Vaihda 404 sivua
Jos linkki johtaa olematon sivu tai tiedosto, WordPress vie käyttäjän virhesivulle, jonka koodi on 404 (Tiedostoa ei löydy). Tiedosto on vastuussa siitä 404.php, tallennettu aktiiviseen teemakansioon. Usein näyttö tulee näkyviin Englanninkielinen teksti, ja venäjänkielisen sivuston omistajan halu kääntää se kielelle äidinkieli ihan ymmärrettävää.
Jos haluat muuttaa sivun sisältöä, avaa tiedosto editorissa 404.php, etsi selaimessa näkyvän tekstin rivit ja muuta niitä (näkyvä teksti on useimmiten lainausmerkkien sisällä). Esimerkiksi yhdessä vakioteemoja(kaksikymmentäneljätoista) olet kiinnostunut seuraavasta koodista:
Korvaa lainausmerkeissä oleva teksti (ei siellä, missä on kaksikymmentäneljätoista, vaan jotain muuta) omalla tekstilläsi ja saat muokatun 404-sivun.
Rekisteröi tekijänoikeus
Sivuston alareunaan on tapana kirjoittaa virallisia tietoja, erityisesti resurssin käyttövuodet ja tekijänoikeudet. Useimmissa tapauksissa tiedostossa oleva "tunniste". alatunniste.php teemojen tekijöiden jättämät ja verkkovastaavat haluavat luonnollisesti korvata nämä tiedot omilla tiedoillaan.
Kuten tiedämme, sivuston "jalat" ovat vastuussa aktiivisen teeman juureen tallennetusta tiedostosta alatunniste.php, ja sinun tulee etsiä siitä tekijänoikeuksista vastaava koodi.
Esimerkiksi tasavalkoinen teema piilottaa tukitiedot seuraavat rivit Tämä tiedosto:
" title="">
">
Venäläistä tekstiä
Usein WordPress-malleja ei täysin venäläistetty tai ei käännetty ollenkaan. Kun tiedetään teeman tiedostorakenne ja se, että koodissa käyttäjälle näytettävä teksti (jos se ei ole muuttuja) on aina lainausmerkeissä, haluttu fragmentti on helppo löytää ja kääntää itsenäisesti, eikä se ole tarpeen etsiä sanaa manuaalisesti - tähän voit käyttää automaattista hakua, joka on läsnä jokaisessa koodieditorissa.
Esimerkiksi litteänvalkoisessa mallissa haluat heti venäläistää ainakin kaksi tekstiä: "LUE LISÄÄ" ja "Jätä kommentti", koska ne näkyvät pääsivulla.
Tiedosto vastaa pääsivusta index.php, joka sijaitsee teemahakemiston juuressa, joten sinun on muokattava sitä. Mutta kirjoituksille ei ole tekstiä, joten sinun on ymmärrettävä koodi saadaksesi selville, missä ne on tallennettu. Meidän tapauksessamme tiedosto vastaa pääsivun viestien alla olevista tiedoista template-parts/content.php, yhdistetty merkkijonolla
Jos menet siihen ja koodiin
".__("Jätä kommentti", "litteä-valkoinen")."
"; ?>
teksti Jätä kommentti korvattu
Harkitsin kerran mielenkiintoista projektia - visuaalista editoria WordPress-mallin luomiseen suoraan hallintapaneelista. Tänään kerron sinulle samankaltaisesta, mutta toimivammasta ja tehokkaammasta tuotteesta - . Tämä on erillinen versio ammattimaisesta työpöytäverkkoeditorista Pinegrow, jota käytetään verkkosivustojen luomiseen, joissa on reagointikyky, komentosarjat, Bootstrap ja muut ominaisuudet. Joten Pinegrow WP on erityinen lisäosa, jonka avulla voit luoda WordPress-malleja.
Pinegrow WP:n tärkeimmät ominaisuudet:
- Staattisten HTML-asettelujen muuntaminen WordPress-teemoiksi - valitse tietyt mallielementit ja valitse niille sopivat parametrit.
- WP-mallien luominen tyhjästä visuaalisen editorin avulla - lisää vain tarvittavat elementit sivulle (sivupalkki, viestiluettelo jne.)
- Tuki 175 WordPress-tunnisteelle - voit löytää nopeasti tarvittavat arvot HTML-asetteluelementeille (viestin otsikko, päivämäärä, tekijän nimi).
- Lisäosien ja PHP-toimintojen tuki - voit valita elementtiparametreiksi paitsi WordPress-tunnisteet, myös asettaa muuttujia ja lisätä PHP-toimintoja.
- Luotavan WordPress-teeman reaaliaikainen katselu antaa sinun nähdä, mitä asetusten jälkeen tapahtuu.
- Katso luotu PHP-koodi asettelua varten.
Lisäksi voit työskennellä suoraan WordPress-sivustosi sisällön kanssa tuomalla kuvia Pinegrow WP:hen. Saatu tulos on puhdasta PHP/HTML-koodia, eikä palvelu lisää tarpeettomia elementtejä perusasetteluun.
Tässä lyhyt video Pinegrow WP:n toiminnasta:
Voit testata tätä ohjelmistoa itse. Voit tehdä tämän lataamalla ohjelman viralliselta verkkosivustolta (on Windows-, Mac- ja Linux-versiot). Pyydä asennuksen jälkeen ilmainen väliaikainen lisenssiavain (7 päiväksi). Syötä sähköpostiisi saapuva salasana ja olet kirjautunut järjestelmään.
Valitse asetuksista (rataskuvake) Framework & Plugin Manager for index.html WordPress ja lataa sitten HTML-malli. Napsauta seuraavaksi tiettyjä asetteluelementtejä ja valitse niille vastaavat WordPress-toiminnot. Esimerkiksi: kuvalle - viestien_pikkukuva, otsikolle - otsikko, päivämäärälle - päivämäärä jne. Eli käyttäjän ei tarvitse tietää tarkasti, kuinka tämä tai toinen elementti asetetaan WordPressissä, vain etsi se käytettävissä olevista toiminnoista ja lisää se asetteluun. Asettamalla kaikki sivun lohkot oikeaan arvoon, saat lopulta toimivan WordPress-mallin vientiä varten. Algoritmi on suunnilleen tämä, vaikka sinun on ymmärrettävä Pinegrow WP -ohjelma tarkemmin (erilaisia toimintoja ja asetuksia on paljon).
Kaiken kaikkiaan Pinegrow WP on erittäin tehokas, mutta ei ilmainen. Henkilökohtainen lisenssi (3 tietokoneelle) maksaa 99 dollaria. Voit käyttää sitä niin moneen projektiin kuin haluat! Yrityksille ja kehitystiimeille on lisenssejä. Periaatteessa ohjelmaa tarvitaan juuri näihin tarkoituksiin - jos sinä tai yrityksesi luot ammattimaisesti verkkosivustoja (mukaan lukien WordPressillä), tämä ohjelmisto on hyödyllinen.
Viimeinen laajennus, jota meidän on harkittava, ovat mallit. Juuri malli CMS Joomla 3:ssa ja missä tahansa muussa versiossa määrittää sivuston ulkonäön ja ulkonäön. Mallien ansiosta voit muuttaa sivustosi suunnittelua radikaalisti viettämällä siihen mahdollisimman vähän aikaa, sinun tarvitsee vain ladata ja asentaa valmis malli ja päättää moduulien sijainnista.
Mutta ennen kuin aloitat uuden mallin asennuksen, on syytä ymmärtää, mistä, tai pikemminkin, mistä tiedostoista Joomla 3 -mallit koostuvat.
Mistä Joomla 3 -malli koostuu?
Joomlan malleille on erityinen kansio ”templates”, jonka juuressa jokaisella mallipohjalla on oma samanniminen kansio. Poikkeuksetta kaikki mallipohjat koostuvat tiedostoista, ja näiden tiedostojen määrä voi vaihdella eri malleissa. Mutta on myös vakiotiedostoja, joita ilman yksikään malli ei toimi:
- index.php– hakemistotiedosto, se määrittää sivuston rakenteen
- templateDetails.xml– tämä tiedosto sisältää kaikki tiedot mallista ja sitä käytetään mallin asentamiseen ohjauspaneelin kautta
- Tyylitiedostot (.css)– heidän avullaan päätetään sivujen ulkoasu
Lisäksi mallit voivat sisältää komentosarjatiedostot (.js), kuvat, kielet ja paljon enemmän. Alla oleva kuvakaappaus näyttää joukon tiedostoja, jotka muodostavat tavallisen "Protostar"-mallin:
Mitkä ovat mallit?
Mallityyppejä on melko suuri määrä, ja ne voidaan luokitella kehysten tai muiden parametrien mukaan, mutta kaikki mallityypit voidaan jakaa kahteen suureen luokkaan:
- Verkkosivuston mallit– muuttaa sivuston ulkoasua ja ulkoasua
- Ohjauspaneelin mallit– tämäntyyppiset mallit on tarkoitettu erityisesti ohjauspaneeliin, ne eivät vaikuta sivustoon millään tavalla.
Työskentely Joomla 3 -pohjien kanssa
Olemme lajitelleet tyypit, tallennuspaikan ja mallitiedostot, nyt puhutaan mallien käsittelystä ohjauspaneelin avulla. Siirrytään ensin "Mallit: Tyylit (Sivusto)" -osioon ("Laajennukset" -> "Mallit") ja katsotaan, mitkä mallit ovat jo olemassa CMS Joomlan peruskokoonpanossa:
"Mallit: Tyylit (sivusto)" -sivulla näet, että meillä on käytössämme kaksi mallia Beez3 ja Protostar, jälkimmäinen on oletusarvoisesti asetettu kaikille sivuston sivuille, kiinnitä tähän huomiota, koska Joomlassa sama sivusto voi koostua useista malleista. Ja sivuston eri osioihin voit määrittää omasi oma malli, mikä tekee sivustosta houkuttelevamman.
Avataan yksi malleista muokkausta varten ja katsotaan, mitä voidaan muokata ja miten:
Ensimmäisellä "Tiedot" -nimisellä välilehdellä näemme tietoja tästä mallista, ja sitten kehittäjät kirjoittavat meille, että malli käyttää Bootstrap-kehystä.
Seuraava välilehti " Lisävaihtoehdot" sisältää Perus asetukset malliin, täällä voimme muuttaa tekstin ja sivuston taustan väriä, logoa, otsikkofontteja ja muita asetuksia:
Ja viimeinen välilehti on "Valikkolinkitys", jonka avulla voit määrittää mallin koko sivustolle tai tietyille osille. Merkitsemme vain ne valikkokohdat, joille tämä malli määritellään:
Moduulien sijainnit Joomla 3 -mallissa
Joomla-moduuleita koskevalla oppitunnilla sanoimme, että ne näkyvät sivustolla tiukasti määritellyissä paikoissa, niin sanotuissa moduulipaikoissa. Jokaisessa mallissa näiden paikkojen lukumäärä ja sijainti on erilainen.
Kuinka selvittää tai mistä katsoa moduulipaikkoja Joomla 3:ssa? Tätä tarkoitusta varten Joomla tarjoaa erityisen esikatselu, mutta oletusarvoisesti se ei ole käytettävissä (pois käytöstä) ja se on otettava käyttöön asetuksissa.
Jotta moduulien paikat voidaan näyttää Joomla 3:ssa, napsauta "Mallit: Tyylit (Sivusto)" -sivulla "Asetukset" -painiketta. Tämän jälkeen siirrymme "Mallinhallinnan asetukset" -sivulle, jossa asetamme "View module positions" -kytkimen "Käytössä" -asentoon:
Siirry sen jälkeen uudelleen mallinhallintasivulle - "Mallit: Tyylit (Sivusto)" ja napsauta kuvaketta silmällä, joka sijaitsee mallin nimen vasemmalla puolella:
Avautuvalta sivulta näet kaikki mallissa saatavilla olevat moduulipaikat ja niiden sijainnit. Jatkossa nämä tiedot auttavat näyttämään tiettyjä moduuleja niissä.
Omien moduulipaikkojen luominen
Olemme jo oppineet tarkastelemaan olemassa olevia moduulipaikkoja, mutta entä jos malli ei sisällä juuri tarvitsemamme paikkaa? Tässä tapauksessa voit luoda oman sijaintisi moduuleille valmis malli Joomla. Prosessi ei ole monimutkainen, mutta vaatii muokkaamista tiettyjä tiedostoja sapluuna - index.php Ja templateDetails.xml.
Ensimmäisessä tiedostossa ilmoitamme, missä moduulien uusi sijainti tulee olemaan, toisessa kerromme moottorille, että tämä sijainti on mallissa ja sitä voidaan työstää.
Siirrytään sanoista tekoihin, avaa ensin tiedosto templateDetails.xml, joka sijaitsee juurihakemisto sapluuna. Sen olemukseen on nyt turha syventyä, meitä kiinnostaa vain moduulien paikat, ne ilmoitetaan rivien välissä<asema>moduulin sijainnin nimiasema> (Protostar-mallin rivit 28-47). Oletuksena niitä on 18:
Jotta voimme ilmoittaa moduulien asemamme, lisäämme ylimääräinen rivi(tai useita rivejä) näin:
minun-moduuli-asemani
Tallennamme tiedoston, voit sulkea sen, tärkeintä on muistaa sen aseman nimi, jolla ilmoitit sen.
Avaa nyt index.php-tiedosto ja lisää se uusi lohko DIV, josta tulee kontti uudelle moduulipaikalle. Esimerkkinä päätin luoda moduuleille uuden sijainnin sivuston alatunnisteeseen. Kirjoita alatunnisteeseen seuraava koodi:
Div>
Siinä kaikki, paikka on luotu, voit mennä "Mallinhallinta" -osioon ja tarkistaa sen saatavuuden. Indeksitiedostoni koodista tuli tällainen:
Katsotaanpa koodia, joka vastaa moduulin tulostamisesta, se alkaa rivillä:
Type="moduulit"
Nyt meidän on määritettävä moduulin sijainnin nimi, jonka määritimme templateDetails.xml-tiedostossa:
Name="my-module-position"
Vastaa moduulin koodityylistä tyyliparametri, jossa on useita suunnitteluvaihtoehtoja, oletuksena on "ei mitään", tässä tapauksessa moduulin otsikkoa ei näytetä sivuston sivuilla.
Moduulien näyttämisestä tietyssä paikassa vastaavan koodin lopputulos, kuten jo ymmärsit, näyttää tältä:
Näin voit luoda omia moduulipaikkoja täysin missä tahansa Joomla 3 -mallissa Kuten näet, prosessi ei ole ollenkaan monimutkainen.
Joomla 3 -mallin lisäasetukset
Olemme jo tarkastelleet perusmallien asetuksia, oppineet moduulien sijoituksista ja niiden tarkastelemisesta Joomla 3:ssa. Puhutaan nyt edistyneistä malliasetuksista, katsotaan missä ja miten mallitiedostoja voidaan muuttaa ja luodaan moduuleille, komponenteille ja asetteluille ohituksia.
"Muokkaaja"-välilehdellä voimme (jos tiedämme kuinka) muuttaa mallitiedostoja harkintamme mukaan ja tehdä näin mallin uudelleen itsellemme ja muuttaa sitä tuntemattomaksi. Muutamme vain tiedostoja, tallennamme ja tarkistamme tuloksen. Mallitiedostojen muokkaamisesta keskustellaan myöhemmin oman mallin luomista käsittelevässä oppitunnissa.
Seuraava meitä kiinnostava välilehti on "Luo ohitus" -välilehti. Täällä voimme määrittää uudelleen moduuleja, komponentteja tai sivuston asetteluja ja muuttaa niitä myöhemmin harkintamme mukaan tekemättä muutoksia alkuperäisiin tiedostoihin:
Ohituksen luominen on kuvattu yksityiskohtaisesti artikkelissa "Overriding in Joomla 3" ja tässä vaiheessa meidän on vain ymmärrettävä, missä ja mitä mallissa on muokattu.
Päällä viimeinen välilehti"Mallin kuvaus" sisältää joitain tietoja tämä malli, tämä välilehti ei ole kiinnostava meistä.
Mallin muokkaaminen on erittäin kätevä mahdollisuus muuttaa samantyyppisten sivujen ulkoasua (yhden moduulin sivut). Haluan vielä kerran kiinnittää huomiosi siihen, että muokkaamalla mallia et muutu tietty sivu sivustosi ja KAIKKI samantyyppiset sivut kerralla. Toivon jatkoa konkreettisia esimerkkejä se tulee selvemmäksi.
Kuinka muokata
Varmuuskopio.
Ensimmäinen asia, joka sinun on tehtävä, on luoda varmuuskopio mallistasi. Jos tehdyt muutokset ovat virheellisiä, voit aina palata mallin kopioon, joka on luotu ennen muokkausta.
Jos haluat luoda varmuuskopion, sinun on siirryttävä sivuston ohjauspaneeliin Suunnittelu - Varmuuskopioida sapluuna
Varmuuskopiointi luo kopiot kaikista verkkosivustosi malleista. Olemme jo tarkastelleet, mitä varten Ucozin verkkosivustolla on tietyt sivut verkkosivusto - tietty malli.
Klikkaus " Luo varmuuskopio"luoda se. Uusi varmuuskopio luodaan välittömästi, jolle annetaan oma 10-numeroinen numero. Et tietenkään muista numeroita, mutta luomispäivämäärään mennessä varmuuskopio voit saada laakerit. Ja silti, neuvoni ei ole luoda liikaa kopioita ja poistaa vanhoja, joista ei varmasti ole enää hyötyä. Silloin on helpompi navigoida.
Klikkaus " Palauttaa"jotta sivustosi saa aikaisemman ulkoasunsa (aiemmin tallennettujen mallien ulkoasu).
uCoz-verkkosivustomallin rakenne
uCoz-verkkosivuston minkä tahansa sivun malli koostuu:
- HTML-merkintä - HTML-tunnisteet, jotka määrittävät lohkojen sijainnin sivulla. Mallin todellinen kehys.
- uCoz-järjestelmäkoodit, jotka ovat $…$ sisällä. Luettelo järjestelmäkoodeista (ja niiden merkinnän dekoodauksella), joita voidaan käyttää tietyssä mallissa, sijaitsee mallin muokkauskentän alla. Käytä tätä luetteloa huijauslehtenä, koska joskus käy niin, että et voi käyttää jotakin järjestelmäkoodia toisessa mallissa. Siten järjestelmäkoodien luettelo vastaa VAIN mallia, jonka alla se sijaitsee.
Kuvassa sijainti sivulla: vihreä- HTML-tunnisteet; punaisessa - CSS-tyylejä; sininen - uCoz-järjestelmäkoodit.
uCoz-verkkosivustomallin muokkaaminen
Valitse sivumalli, jota haluat muuttaa. Haluan muistuttaa sinua vielä kerran, että muutat tämän mallin kaikkia sivuja. Otetaan esimerkkinä malli tältä sivustolta: Artikkeliluettelo - Sivu materiaalia ja kommentteja siihen.
Joten voit muokata mallia siirtymällä kohtaan Ohjauspaneeli - Suunnittelu - Suunnittelun hallinta (mallit). Valitse vaadittu malli ja napsauta sitä.
On olemassa useita tapoja muokata malleja:
1.Visuaalinen editori malleja Tämä menetelmä sopii pienten muutosten tekemiseen malliin. Muuta fontin väriä ja kokoa, muuta elementtien järjestelyä, lisää tekstiä.
Napsauta painiketta siirtyäksesi visuaalisen mallin muokkausohjelmaan.
Nyt voit tehdä tarvittavat muutokset. Täällä sinun ei tarvitse tietää HTML:ää ja CSS:ää, mutta sinun on tiedettävä luettelo järjestelmäkoodeista ja niiden merkityksestä. Itse editointi on hyvin samanlainen kuin Word tai yksinkertainen visuaalinen editori uCoz.
Muista tallentaa muutokset napsauttamalla Tallenna-painiketta.
2. Mallin HTML-koodin muuttaminen. Tämä menetelmä soveltuu mahdollisten muutosten tekemiseen malliin, enintään täydellinen muutos mallia, mutta sinulla on oltava ainakin jonkinlainen käsitys siitä HTML-tunnisteet ja CSS-tyylejä.
Voit vaihtaa koodin suoraan koodisivulla, mutta henkilökohtaisesti teen sen mieluummin kolmannen osapuolen kautta HTML-editori. Olen kirjoittanut jo useita kertoja, että pidän enemmän Dreamweaverista. Siksi puhun tämän ohjelman esimerkin avulla.
Mallia on helppo muokata Dreamveaverissa, koska toisella puolella näet koko mallikoodin ja oikealla on kaavamainen tulos:
Nyt voin turvallisesti vaihtaa malliani. Korostan oikealla haluttu alue, ja tästä vastaava koodi on myös korostettuna. Näin minun on helppo löytää paikka, jota haluan muuttaa, esimerkiksi liittää käsikirjoituksen tietty paikka. Pian julkaisen esimerkkinä videon käsikirjoituksen lisäämisestä malliin.
Jos haluat saada ensimmäisenä tiedon uusista artikkeleista sivustolla!!!
"Jatkoimme TemplateToaster-työkalujen tarkastelua ja tarkastelimme ohjelman viidennessä versiossa esiintyviä innovaatioita neljänteen versioon verrattuna.
Kuten olet ehkä jo ymmärtänyt, samankaltaisia työkaluja ja niiden vaihtoehtoja käytetään verkkosivustomallin eri elementtien määrittämiseen. Esimerkiksi tehosteet, tausta-asetukset jne. Ei ole mitään järkeä tarkastella niitä uudelleen jokaisen välilehden kohdalla. Siksi annan kerran linkin edellisissä artikkeleissa käsiteltyihin elementteihin, ja jatkossa tekstissä jätän tällaiset työkalut väliin.
Valikko
Asetuksiin ulkomuoto Mallin muokkausvalikko tarjoaa useita työkaluja samannimisessä välilehdessä (kuva alla).
Alue Esiasetusryhmä työkalu Esiasetukset
. Tämä työkalu (kuva alla) sisältää valmiita valikon suunnittelutyylejä.
Työkalu asema
valikosta
. Tämän työkalun avulla voit sijoittaa valikon alle, yläpuolelle tai sisälle otsikko(hadera). Se on myös mahdollista poistaa kokonaan käytöstä.
Alue Alivalikko
. Mukauta alivalikon "asettelu" ja "vastaus".
- Klikkaus. Alivalikon avaaminen napsauttamalla valikkokohdan painiketta.
- Vie hiiri. Alivalikon avaaminen viemällä hiiren valikkokohdan painikkeen päälle.
Vaihtaminen instrumenttien välillä Mega, Pystysuora Ja Muutat alivalikon "asettelua". Alla olevissa kuvissa on esimerkkejä alavalikoista riippuen valitusta työkalusta (yllä olevan luettelon järjestyksen mukaan).
Riippuen valitusta työkalusta ( Mega, Pystysuora Ja ) muut ovat saatavilla. Esimerkiksi jos valitset Mega, voit sitten määrittää Alivalikkoalue, valikkokohta Ja Alivalikon otsikko. Jos valitset Pystysuora tai , sitten vain Alivalikkoalue Ja Valikkokohta.
Alue alivalikko, työkalu Alivalikkoalue
. Voidaan mukauttaa tausta(väri, liukuväri tai kuva), reunus (tyyli, paksuus, fileen säde tai väri) ja varjo.
Alue alivalikko, työkaluja Ja Alivalikon otsikot
. Näiden työkalujen vaihtoehdot ovat samat (kuva alla). Verkkosivustomallieditorin avulla voit määrittää seuraavat parametrit (kaikkia niitä käsiteltiin edellä artikkelissa tai aiemmin muissa artikkeleissa):
- Korkeus.
- Leveys.
- Tausta.
- Raja.
- Vie hiiri reunaan.
- Varjo.
- Varjo päällä.
- Erotin.
- Sisennys. Ulkoinen.
- Sisennys. Sisustus.
- Kuvake. Normaali ja indusoitu tila.
- Kirjapaino. Parempi "typografia" - kirjasimien mukauttaminen. Normaali ja indusoitu tila.
Välilehdellä (kuva alla) on työkaluja mallin sivusarakkeiden mukauttamiseen.
Työkalu
Voit määrittää kuinka monta sivupaneelia tulee olla ja missä ne sijoitetaan (kuva alla).
- Ei. Ei sivupaneeleja.
- Vasemmalla on sivupalkki. Yksi sivupalkki sisältöalueen (sarakkeen) vasemmalla puolella.
- Oikea sivupalkki. Yksi sivupalkki sisältöalueen oikealla puolella.
- Vasen Vasen sivupalkki. Kaksi sivupaneelit sisältöalueen vasemmalla puolella.
- Vasen oikea sivupalkki. Yksi sivupalkki sisältöalueen vasemmalla puolella ja yksi oikealla.
- Oikea Oikea sivupalkki. Kaksi sivupalkkia sisältöalueen oikealla puolella.
Kaikki työkalut alueilla Tausta, asettelu, tehosteet, niistä keskusteltiin aiemmin artikkeleissa.
Alue Korkeus.
Mahdollistaa sivupaneelien korkeuden asettamisen. Tai 100 % pääsivun alueen (sisällön) korkeudesta – vaihtoehto Korkeus 100 % tai sivupalkin tulisi mukautua sen sisältämän sisällön korkeuteen. Vaihtoehto Vastaa sisältöä.
Tältä välilehdeltä (kuva alla) löydät työkalut, joilla voit muokata moduulien ulkonäköä. TemplateToaster 5 Professional -mallieditori tarjoaa sinulle useita työkaluja tätä varten. Huomaa, että välilehti näkyy vain, kun otat käyttöön yhden tai kahden sivupalkin käytön välilehdellä , työkalu .
Lisäksi työkalut on jaettu moduulien alueita vastaaviin alueisiin (kuva alla).
- Säiliö. Vihreä kehys alla olevassa kuvassa.
- Hader. Sininen kehys on alla olevassa kuvassa.
- . Punainen kehys on alla olevassa kuvassa.
Alue Säiliö, työkalu Säiliön ominaisuudet
. Voit määrittää ulkoisen, pehmuste, reunat (tyyli, paksuus, säde, väri) ja varjo. Kaikista näistä vaihtoehdoista on keskusteltu aiemmin, samoin kuin työkalusta Tausta.
Alue Hader.
Kaikki työkalut tällä alueella, mukaan lukien Otsikon ominaisuudet(kuvakkeet, ulkoiset ja sisäiset marginaalit, otsikkotyyppi) on jo käsitelty aiemmissa artikkeleissa.
Alue
Työkalu Tausta on jo harkittu. Työkalu (kuva alla) voit määrittää aiemmin käsiteltyjen asetusten lisäksi uusia elementtejä.
- Aktiivinen linkki, Navigoitu linkki, Vierailtu linkki. Voit määrittää tekstin suunnittelun, kuten muutkin tekstiobjekteja(tyyli, koko, väri jne.), joista on keskusteltu aiemmin, kolmelle eri hyperlinkkitilalle.
- Teksti. Tälle elementille on lisätty vaihtoehto Sisennys, jonka avulla voit määrittää kappaleen sisennys(ei pidä sekoittaa riviväliin).
- Otsikot. Visuaalisen mallin muokkaustyökalun avulla voit määrittää tyylin, kirjasinkoon (fonttikoon), perheen (kirjasintyypin), värin, sisennyksen, tehosteet, tasauksen, suunnittelun (alleviivattu, yliviivattu). Lisäksi tämä voidaan tehdä kunkin tason otsikolle (H1-H6) erikseen.
- Numeroitu luettelo. Numeroidun luettelon ulkoasun asettaminen. Jo tuttujen fonttiasetusten lisäksi voit valita tyylin. Esimerkiksi: 1, 2, 3; a, b, c ja niin edelleen.
- Järjestämätön lista. Luettelomerkityn luettelon suunnittelun mukauttaminen. Vain fonttiasetukset.
Työkalu
. Sisältää esiasetuksen vakiintuneita vaihtoehtoja moduulien suunnittelu (kuva alla).
Asetuksiin pystysuora valikko, valikko, joka sijaitsee yleensä sivupalkissa, pääset käyttämään samanlaisia vaihtoehtoja kuin välilehdissä Valikko Ja .
Haluan vain antaa valikon suunnitteluvaihtoehtoja (kuva alla), riippuen valitusta vaakasuunnassa laajennettavan alivalikon "tyypistä": Mega, pystysuora, vaaka.
Tässä välilehdessä (kuva alla) editori Joomla mallit tarjoaa sinulle useita vaihtoehtoja minkä tahansa sivuston tärkeimmän asian - sisällön (sisällön) - ulkoasun mukauttamiseen. Suurin osa työkaluista ja niiden asetuksista on jo käsitelty aiemmin. Emme koske niihin, vaan keskitymme vain uusiin.
Esimerkkejä etukäteen vakiintuneita tyylejä sisältösuunnittelu (esiasetukset) on esitetty alla olevassa kuvassa.
Alue työkalu
. Jo tuttujen vaihtoehtojen lisäksi sen avulla voit säätää rivin korkeutta pikseleinä (analogisesti rivivälin kanssa).
Haluan kiinnittää huomiosi siihen, että voit asettaa sisällölle useita rajoja:
- Sininen kiinteä viiva alla olevassa kuvassa. Alue , työkalu – Raja.
- Musta yhtenäinen viiva alla olevassa kuvassa. Alue Julkaisu, työkalu Postin ominaisuudet – Sisäkehys
– Raja.
- Punainen yhtenäinen viiva alla olevassa kuvassa. Alue Julkaisu, työkalu Viestin ominaisuudet – Sisällön raja.
- Vihreä katkoviiva alla olevassa kuvassa. Alue Julkaisu, työkalu Raja.
Alue työkalu Luettelot
. Toisin kuin moduulin luettelot, varten luettelomerkityt luettelot(järjestämätön) voit määrittää merkkikuvakkeen ja sen värin.
Alue työkalu Pöytä
. Asetusten käyttäminen tästä instrumentista(kuva alla) Sivustomallieditorin avulla voit mukauttaa sivustotaulukoiden ulkoasua (ei pidä sekoittaa CSS-taulukoihin).
- Taulukon tausta. Taustaväri taulukoita.
- Taulukon marginaali. Sisennys pöydän ylä-, oikea-, ala- ja vasemmasta reunasta ympäröiviin esineisiin.
- Pöydän pehmuste. Sisennys solun ylä-, oikea-, ala- ja vasemmasta reunasta solun sisäsisältöön.
- Taulukon otsikko. Taustan värin ja taulukon otsikkotekstin asettaminen.
- Kehyksen tyyppi. Yksi- tai kaksoisisku.
- Raja. Pöydän reunuksen tyyli, paksuus ja väri.
Niille, jotka tekevät verkkosivustoja Joomlassa, suosittelen lukemaan artikkelin "Droptables Review. Hinnaston luominen Joomlassa”, joka kuvaa laajennusta, jonka avulla voit luoda kauniita ja toimivia taulukoita ilman ohjelmointiosaamista.
Alue Julkaisu, työkalu
. Tänne (kuva alla) on koottu sisältöalueen sisällönhallinnan asetukset, jotka voidaan jakaa otsikkoon, sisältöön ja metatietoihin.
Alla olevassa kuvassa otsikko on ääriviivattu sinisellä, sisältö on ääriviivattu punaisella ja metatiedot vihreällä.
Näillä alueilla käytettävissä olevat asetukset (tarkastelemme vain uusia asetuksia):
- Näytä metatiedot. Näyttää\piilottaa metatiedot.
- Sisäkehys. Otsikolle ja/tai metatiedoille on mahdollista asettaa kehys. Voit muuttaa kehyksen tyyppiä, väriä, leveyttä ja sädettä, lisätä varjon, vaihtaa taustaa ja sisä-/ulkopehmusteita.
- Sisältökentät Ja Sisällön sisennys(parempi "Sisällön sisennys"). Täyte sisällöstä sisältöalueen reunaan ja täyttö sisältöalueen reunasta sisältöön (melkein sama asia).
- Lähetä kuva. Voit lisätä kuvan materiaaliin ja muokata sitä kehystävän kehyksen ulkonäköä.
- Julkaise pääsivulla. Tämä on eräänlainen sivuasettelun hallinta, kuten "Category Blog" (Joomlassa). Esimerkki tällaisesta sivusta on luokkasivu, jossa on arvosteluja. Voit valita arvon "0" - älä näytä täysleveää artikkelia sivun yläreunassa (paitsi tapauksissa, joissa vaihtoehto Sarakkeet"1" on valittu), "1" – näytä artikkeli sivun yläreunassa koko leveydellä.
- Sarakkeet. Voit näyttää sisältöä 1, 2, 3 tai 4 sarakkeessa. Samanlainen kuin sanomalehtien kolumnit.
Alue Julkaisu, työkalu Kirjapaino.
Samanlaisia kuin aiemmin käsitellyt samannimiset työkalut, mutta voit muuttaa tällaisten sisältöelementtien kirjasinominaisuuksia, kuten:
- Otsikko.
- Otsikko Hover. Otsikko, jonka päällä hiiren osoitin on.
- Metatiedot.
- Meta linkki. Hyperlinkki metatietoalueella.
- Kohdistettu meta-linkki. Hyperlinkki metatietoalueella, jonka päällä hiiri on.
Alue Julkaisu, työkalu .
Sivustomallieditorin avulla voit asettaa kuvakkeen seuraaville elementeille:
- Viestin otsikko.
- Tekijä.
- Päivämäärä.
- Tiiviste.
- sähköposti Mail.
Nämä kuvakkeet näkyvät materiaalin yläpuolella (esimerkiksi tällä sivustolla on tulostuskuvake yläreunassa). Voit valita jonkin TemplateToaster 5 Professional -kirjaston kuvakkeista ja määrittää sen värin tai määrittää oman kuvasi.
Seuraavassa artikkelissa "TemplateToaster Professional Review. HTML-mallin luonti » tarkastelemme moduulien paikkoja, eri säätimien ulkoasun asetuksia ja alatunnistetta (sivuston alatunniste tai alatunniste).
