Twenty Twelve sablon átalakítása

Átírás

1 Twenty Twelve sablon átalakítása Az előző leckékben mindent előkészítettünk (aldomain létrehozása a cpanelen, FTP kliens, pl. FileZilla telepítése, WordPress telepítése, WP fájlainak feltöltése a számítógépünkről az aldomainünk mappájába, a WP működéséhez szükséges wp-config.php fájl létrehozása és feltöltése az aldomainünk mappájába, aldomainen létrehozott weboldal megnyitása a böngészőben és alapbeállítások elvégzése az oldalon) ahhoz, hogy most egy WordPress sablont telepítsünk az oldalunkra és teljesen átdizájnoljuk azt. Első lépés - WordPress sablon telepítése Elképzelhető, hogy a WP már tartalmazza az átalakítandó Twenty Twelve nevű sablonunkat. Ennek ellenőrzéséhez lépjünk be a WP Vezérlőpultjába, majd kattintsunk a Megjelenés Sablonok menüpontra. Ha nem találjuk a sablont, akkor adjuk hozzá a WP-hez, azaz kattintsunk az Új hozzáadása lehetőségre, a keresőbe írjuk be, hogy Twenty Twelve, és telepítsük. Az új sablon automatikusan aktiválódik, kapcsoljuk is be. Navigáljunk át a weboldalunk főoldalára a Vezérlőpult bal felső sarkában, a házikó alatt található A honlap megtekintése lehetőségre kattintva. Maradjunk a főoldalon, amely most a Helló Világ! mintaoldal lesz hogy nyomon tudjuk követni a változásokat.

2 Második lépés A sablon fájljainak elérése Aptana Studio- ban, FTP- n keresztül Nyissuk meg az Aptana Studiot a WP sablon fájlainak az eléréséhez. Ennek menetét az ide kapcsolódó oktató videóból ismerheted meg. A kapcsolódás után navigáljunk be a saját aldomainünk alatt lévő WordPress, wp-content/themes/twentytwelve könyvtárába. Itt jó néhány fájlt találunk, többek között azokat a fő fájlokat (pl. header.php, index.php, comments.phph, sidebar.php) is, amelyekről már esett szó az előző leckében, a WP sablon felépítésének bemutatása során. Aptana- n kívül bármilyen más kódszerkesztővel, pl. Notepad++ (telepítéséről már láthattál videót a Kódszerkesztő című leckében) vagy PSPad- dal is szerkeszthetjük a számítógépünkön lévő fájlokat, majd szerkesztés és mentés után FTP-n (pl. FileZilla vagy bármely más, pl. Total Commander kliensekkel) feltölthetjük őket a tárhelyre, a megfelelő mappába. Tuti tipp: Talán a legkönnyebben érthető és kivitelezhető opció lehet, ha közvetlenül a WP admin felületén, a Megjelenés/Szerkesztő menüpont alatt szerkeszted a kiválasztott WP fájlokat és mented őket. Így a böngészőben rögtön láthatod is az eredményt. Ez kiválóan helyettesíti az Aptana és FTP kliensek fentebb leírt használatát. Harmadik lépés Sablon elemek átalakítása lépésről-lépésre Először a logót, a hátteret és a lábléc hátterét építjük be az alap sablonba. (A leckefájlok között található images mappa már tartalmazza ezeket: logo.png, tegla.jpg, deszka.jpg, így azokkal dolgozhatunk is). Ha saját tervezésű webdesignnal és látványtervvel dolgozunk, akkor nyissuk meg Photoshopban a weboldal látványtervét, és mentsük ki egy mappába külön fájlokként a logót, a hátteret és a lábléc hátterét, JPG vagy PNG formátumban. Fontos, hogy a háttér képét és a lábléc hátterének képét úgy vágjuk ki, hogy azok egymás alá, illetve mellé illesztve ismételhető textúrát tudjanak alkotni. Ezeket az elmentett képeket jelöljük ki, másoljuk őket (jelöljük ki őket egyszerre jobb klikk másolás), majd az Aptana bal oldalán, a Remote ablakban jobbklikkeljünk a twentytwelve könyvtárra és válasszuk a New Folder opciót, és hozzunk így létre egy új könyvtárat images néven. A létrejövő könyvtárra szintén jobbklikkeljünk és a Paste opciót választva, illesszük be a képeket. Nyissuk meg (dupla klikk) szerkesztésre a twentytwelve könyvtárban található style.css fájlt. Ez a sablon fő kinézetét adó CSS fájl, ezt kell kiegészítenünk az átalakításokhoz. A CSS-ről már

3 megtanultuk azt, hogy az egyes stílusértékek a későbbiekben felülírhatók. Ezt a lehetőséget fogjuk most kihasználni, így felülírva az alapértelmezett stílusokat. HÁTTÉR Görgessünk a CSS fájl végére, tegyünk (Enter leütésekkel) pár üres sort, majd szúrjuk be a következő részt: body { background: url('images/tegla.jpg'); Ha elmentjük a CSS fájlt (az eszközsor Save lehetőségére kattintva vagy File Save) és megnézzük a weboldalunkat, frissítést követően láthatjuk is, hogy a háttér kicserélődött a téglás háttérre. LÁBRÉSZ Itt már a HTML struktúrát is át kell alakítani. Nyissuk meg a footer.php fájlt, ami a lábrészt tartalmazza. A <footer id="colophon" role="contentinfo"> és a </footer> részeket és az ezek közötti részt nyugodtan töröljük ki (, mivel nekünk saját copyright szövegünk lesz és az is máshol kap helyet.) A megmaradt kódrészlet végén találjuk a </div> elemet, ezt vágjuk ki eredeti helyéről (jobb klikk Cut) és beillesztéssel (jobb klikk Paste) helyezzük el a feljebb található </div> elem alá alá. Erre azért van szükség, mert így a lábléc az egész oldal alján végig fog érni, e változtatás nélkül csak a fehér háttérdobozban helyezkedne el. Ezt követően a legelőször a footer- ből eltávolított rész helyére begépelhetjük saját HTML kódunkat, amely így néz ki: <div class="custom_footer"> <div class="white"></div> <p>smaragd Kertészet Minden jog fenntartva</p> <p>elérhetőségeink: info@smaragdkerteszet.hu </p> </div>

4 A lábléc pedig így néz ki a tartalmi információk után:?> </div> </div> <div class="custom_footer"> <div class="white"></div> <p>smaragd Kertészet Minden jog fenntartva</p> <p>elérhetőségeink: info@smaragdkerteszet.hu </p> </div> <?php wp_footer();?> </body> </html> Magyarázat: A.custom_footer lesz a láblécet tartalmazó DIV, amely a deszkás textúrát is kapja. A.white DIV lesz az áttetsző fehér csík a deszkás részen, középen. A két <p> elem pedig a szövegeket tartalmazza. Ezeket az alábbi módon formázzuk meg a CSS-ben (tehát kiegészítjük a következő kódokkal a style.css fájlunkat, hiszen ezek a részek eredetileg nem szerepelnek a sablonban). Illesszük be ezt a kódot a style.css végére, pár enter után:.custom_footer { margin-top: -50px; width: 100%; padding-bottom: 50px; background: url('images/deszka.jpg'); color: #fff; font-size: 14px; text-align: center; text-shadow: 1px 1px 2px #000000, -1px -1px 2px #000000, -1px 1px 2px #000000, 1px -1px 2px #000000;.custom_footer p { padding: 4px 0 4px 0;.custom_footer.white { max-width: 1040px; height: 36px; margin: 0 auto 20px auto; background: #ffffff; opacity: 0.65;

5 A.custom_footer DIV-nek beállítjuk a felső margót -50 pixelre, azaz annyira felhúzzuk, hogy összeérjen a fenti tartalmi résszel. Megadjuk, hogy 100% hosszú legyen, azaz töltse ki az egész oldalt. Teszünk 50 pixelnyi belső térközt alulra, hogy a szöveg után is még egy sávban látszódjon a deszka textúra. Háttérnek beállítjuk a deszka.jpg-t. Ezután megadjuk a szöveg színét, méretét és azt, hogy középre igazodjon. Illetve ráteszünk négy szöveg árnyékot, a szöveg mind a négy oldalára, így elérve egy erős, körvonalas árnyékot. (Ezek az értékek az árnyék méretét és irányát (kiterjedését), valamint színét jelölik.) A.custom_footer p elemeinek adunk fentre és alulra 4 pixel belső térközt, hogy a sorok között nagyobb legyen a távolság, jobb és bal oldalra pedig 0-0 értéket adunk meg, mert a két oldalon nincs szükség belső térközre. (A paddingben az óra járásával megegyezően haladunk, állítjuk be az értékeket, tehát felül 4px, jobb oldalon 0, alul 4px és bal oldalon 0 a belső térköz. Ha csak egy-egy oldalra vonatkozó padding értéket kellene megadnunk, akkor azt az adott oldal jelölésével adjuk meg, pl. padding-bottom: 4px, padding-right: 20px.) A.custom_footer.white elemét is megformázzuk. Az oldalunk maximális szélessége 1040 pixel, így ennek az elemnek is megadjuk, hogy a szélessége is maximum ennyi legyen. Ha ennél kisebbre húzzuk a böngészőt, akkor kisebbre összeugorhat, viszont ennél nagyobb nem lesz. Magassága legyen 36 pixel. Felülre nem teszünk margót, de alulra igen, 20 pixelnyit. A bal és jobb margókat auto- ra állítva, középre helyeződik az elem. (A margó értékeinek megadásakor is az óra járásával megegyezően haladunk, tehát felső, jobb oldali, alsó és bal oldali margó. Ha csak egy-egy oldalra vonatkozó margó értékét kellene megadnunk, akkor azt az adott oldal jelölésével adjuk meg, pl. marginbottom: 10px, margin-right: 50px.) Háttérszínnek fehér színt adunk meg. Végül az opacity tulajdonsággal megadjuk az elem áttetszőségét, ami százalékban értendő. Itt most 0.65% az elem áttetszősége, így áttűnik alatta a fa textúra. WIDGETEK CÍMEI A következő átalakítást a jelenleg a főoldalon található, jobb oldali widgetek címeinek betűméretén végezzük el.

6 Hogy kiderítsük milyen HTML elem és milyen CSS osztály formázza ezeket, hívjuk segítségül a böngésző inspectorát. Ehhez jobbklikkeljünk az egyik widget címére a böngészőben, majd válasszuk a Vizsgálat, illetve Elem vizsgálata/megtekintése opciót. Itt a bal oldalon ki is emeli nekünk a böngésző, hogy ez a szöveg hol és milyen HTML taggel helyezkedik el a dokumentumban. Ahogy látjuk is, egy h3 elemben, melynek a CSS osztálya widgettitle. Vegyük is ezt fel a style.css-be az előző CSS formázásaink után, a következő paraméterekkel:.widget-title { font-weight: normal; font-size: 24px; text-transform: none; line-height: 28px; color: #333333; Magyarázat: Itt először a vastagított betűt levesszük, azaz normal-ra állítjuk a szövegvastagságot. Beállítunk 24 pixeles betűméretet. A text-transformot none-ra állítjuk, azaz megszüntetjük a nagybetűsítést is. A line-height megadásával a sorok magasságát (28 pixel) adjuk meg, hogy ne legyenek nagyon szellősen az esetleg több sorba kerülő widget címek. Végül a szöveg színét is megadjuk. MENÜ A menü (A menü még csak a Kezdőlap nevű menüpontot jelenti, hiszen még nem állítottunk be teljes menüsort, tehát erre jobbklikkeljünk.) esetében is a Vizsgálat, illetve az Elem megtekintése eljárással megkereshetjük a menüpontokat tartalmazó elemet.

7 Ez a.nav-menu osztályú <ul> elem lesz. A menüpontokat pedig egy-egy <a> elem határolja. Így ezeknek méretét már könnyen át tudjuk méretezni, ha így hivatkozunk rájuk (másoljuk be ezt a kódot a style.css- be az előzőleg elvégzett módosításaink után):.nav-menu a { font-size: 14px; Magyarázat: A menüpontok betűméretét 14 pixel nagyságúra állítottuk be. FEJRÉSZ Itt el kell tüntetni az oldal címét és a szlogent, amit a WP alapértelmezetten kiírat ebben a sablonban, illetve a helyére egy slideshowt teszünk, és legfelülre el kell helyeznünk a logónkat. A fejrész HTML része a header.php fájlban található, nyissuk is ezt meg. Cím és szlogen eltüntetése: A HTML fájl 37. sorában találunk egy <hgroup> </hgroup> részt. Ez tartalmazza az oldal címét és szlogenjét. Mivel erre nekünk nincs szükségünk, töröljük ki ezt a taget és a benne lévő részeket is. Logó elhelyezése: A logó elhelyezéséhez közvetlenül a </head> után illesszük az alábbi sort: <a class="custom_logo" href="<?php echo esc_url(home_url('/'));?>"></a> Magyarázat: Ezzel elhelyezünk egy hivatkozást, aminek a href értéke az oldalunk kezdőoldala lesz. Az itt látható PHP kóddal a WordPress ezt be fogja oda írni automatikusan, bármi legyen is az URL. Folytassuk tovább, hogy megjelenjen a logónk: Az <a> elemet egy blokká alakítottuk, hogy különböző CSS formázásokat tudjunk neki adni. Az ehhez tartozó CSS formázás pedig így néz ki, vegyük fel az előző CSS formázásaink után:.custom_logo { display: block; width: 90%; height: 147px; margin: 30px auto 20px auto; background: url('images/logo.png') center center no-repeat; background-size: contain;

8 Magyarázat: A logó elemét 90% szélesre állítjuk. Azért nem 100%-ra, hogy legyen egy kis térköz az oldal szélétől, ha kis méretben, például mobileszközön nyitjuk meg a weboldalt. Magasságának megadhatjuk az eredeti méretet, a 147 pixelt. Ez reszponzív nézetben automatikusan kisebb lesz. Beállítjuk a margókat is, felső margó 30 pixel, az alsó margó 20 pixel, a jobb és bal oldalon pedig auto értéket állítunk be, ezzel biztosítjuk, hogy a logó mindig középen helyezkedjen el. Háttérnek megadjuk a logónk képét, majd a hátteret középre helyezzük, vízszintesen és függőlegesen is (ezeket jelzi a center center), valamint megadjuk, hogy ne ismétlődjön (no-repeat). A trükk pedig a background-size, amivel a háttér kitöltését adjuk meg. A contain értékkel mindig akkorára méretezi a hátteret, hogy a logó minden irányból kitöltse azt. Tehát kis méretben a háttér lekicsinyül akkorára, hogy a logó méretarányosan kitöltse. Ezzel a logónk reszponzív megjelenését biztosítjuk. Slideshow beillesztése: Most, hogy a design átalakításával megvagyunk, egészítsük ki a sablonunkat egy slideshow galériával, ami a főoldalon fog mindig megjelenni. Ehhez egy nagyon jó WordPress bővítmény (plugin) a Simple Responsive Slider. A WP Vezérlőpultján a Bővítmények Új hozzáadása menüpont alatt keressünk rá erre a pluginre, majd a megjelenő listából kiválasztva, telepítsük. Az installálás után kapcsoljuk is be. A Vezérlőpult Megjelenés menüje alatt ezután megjelenik egy Simple Responsive Slider menüpont, nyissuk meg. A megjelenő oldalon töltsünk fel néhány képet (A leckefájlok között a slideshow képek mappában megtalálod a méretre vágott képeket.), amelyek majd a slideshowban fognak megjelenni. Ha saját képeket töltesz fel ide, a legjobb minőség elérése érdeklében ügyelj rá, hogy a méretük pontosan akkora legyen, mint a leckefájlok közül feltöltött slideshow képek mérete és felbontása. (A feltöltött képekhez állíthatunk be pl. hivatkozást: ha rákattint a látogató a képre, akkor milyen aloldal nyíljon meg, milyen aloldalra vezessen a kép.) A feltöltést követően navigáljunk át a Settings fülre és itt a Max-width -et állítsuk 1040px-re (ugye ez az oldalunk maximális szélessége), a Max-height-et pedig 420px-re (ez lesz a képek maximális magassága). Ha szeretnénk, a további opciókkal finomhangolhatjuk az animációt, illetve a megjelenést. Mentés gombra ne felejtsünk el kattintani.

9 Most ismét a header.php fájlt fogjuk szerkeszteni. Ahhoz, hogy a képek megjelenjenek, azaz a bővítmény működésbe lépjen, az alábbi kódot kell beszúrnunk a </nav> sor (ez a sor a felső menü vége, amely után szeretnénk elhelyezni a slideshowt) után: <?php if ( is_front_page() ) { if ( function_exists( 'show_simpleresponsiveslider' ) ) { show_simpleresponsiveslider();?> Magyarázat: Ez egy egyszerű PHP kód, ami először azt vizsgálja, hogy az oldal a főoldal-e ( is_front_page() ), majd azt, hogy létezik-e a galéria megjelenését végző függvény (function_exists( 'show_simpleresponsiveslider' )). Ha mindkét feltétel teljesül, azaz a főoldalon vagyunk és a függvény is a rendelkezésünkre áll, akkor lefuttatja azt: show_simpleresponsiveslider(); Mást nem is kell tennünk ezután, így máris megjelennek a képek, amelyek automatikusan váltogatják egymást. Megjegyzés: A legtöbb bővítmény ennél egyszerűbben működik, valóban elég csak telepíteni és máris működik, funkcionál a weboldalon. Ha telepítünk egy bővítményt és azt tapasztaljuk, hogy nem működik, akkor érdemes megnézni a telepítési útmutatóját azon az oldalon (pl. ahonnan le lehet tölteni (ha nem közvetlenül a WP-ben töltjük le). Ezt a kódsort is a Simple Responsive Slider oldalán találtuk a telepítési információi között. Néhány bővítmény ún. Shotcodeokkal működik, melyek kis kódsorok, amiket ott kell elhelyezni, ahol épp szeretnénk a bővítményt megjeleníteni (pl. egy űrlapot, egy kalkulátort, képgalériát, vagy bármi mást ) Az ilyen Shotcodeokkal való működésről szintén a bővítmény használati útmutatójában tájékozódhatunk, melyet a fejlesztő weboldaláról szinte mindig le tudunk tölteni. ÚTMUTATÓ A WEBOLDAL TOVÁBBI RÉSZEINEK KIALAKÍTÁSÁHOZ Főoldal létrehozása: Magát a meglévő Mintaoldalt is átalakíthatjuk a látványtervnek megfelelően főoldallá (előzőleg is ezt állítottuk be statikus oldalnak, tehát eddig is ez volt a főoldalunk ). Másik megoldást is választhatunk (új oldal létrehozása), ebben az esetben célszerű a Mintaoldalt törölni az Oldalak menüben.

10 Létrehozhatunk egy új oldalt is az Oldalak Új hozzáadása menüpont alatt. Megadjuk a címét (pl. A 2016-os szezonra a kerttervezést megkezdtük ), kitöltjük Lorem Ipsum szöveggel, hozzáadunk egy balra igazított fotót, típusa maradhat alapértelmezett, majd közzétesszük az oldalt. Ezután bemegyünk a Beállítások Olvasás menübe, ahol a második mezőben ( egy statikus oldal ) a legördülő listából kiválasztjuk ezt az oldalt statikus oldalnak, majd Módosítások mentése gombra kattintunk. Menü beállítása: Látogassunk el a Megjelenés Menük menübe, ahol létrehozunk egy menüt (adjuk meg a menü nevét, pl. Menü1 ), majd a Menü szerkezethez a bal oldali listából (Oldalak/Legfrissebb) behúzzuk ( Hozzáadás a menühöz ) a A 2016-os szezonra a kerttervezést megkezdtük nevű oldalunkat. Lekattintjuk a fület és a Navigációs címke mezőbe beírjuk, hogy Főoldal vagy Kezdőoldal, azaz elnevezzük a menüpontot. A Menü beállítások részben pedig bepipáljuk a Sablon helye: elsődleges menü opciót, majd a Menü mentése gombra kattintva elmentjük a menüt. Ha további oldalakat is létrehozunk, akkor ezeket is a bal oldali listából kiválasztva behúzzuk a menübe, sorrendjükön egyszerű fogd és vidd áthelyezéssel tudunk módosítani. Widgetek beállítása: Az oldalsáv widgetjeit a Megjelenés Widgetek menü alatt találjuk. Itt igazából bármilyen nekünk tetsző widgeteket elhelyezhetünk az oldalsávban. Ezt kialakíthatjuk a látványterven láthatóra vagy hasonlóra. Kép és szöveg oldalsávba való beszúrásához a Szöveges widget használható, ahova tetszőleges szöveget vagy HTML kódot írhatunk. Ez utóbbival pl. képet vagy hivatkozást szúrhatunk be. Ha csak fotót szeretnénk a widgetbe illeszteni, akkor egyszerűen megadjuk a kép forrását: (Töltsünk fel képeket a Médiatárba, majd rákattintva láthatjuk az egyedi URL-jüket.) Pl: <img src=" Ha olyan fotót szeretnénk a widgetbe beilleszteni, mely kattintható, tehát elnavigálja a felhasználót egy adott aloldalra, akkor használjuk a Webes alapok részben már megismert html tag-eket. Először megadjuk a hivatkozást, tehát azt, hogy hova vezessen a kép, majd megadjuk a kép forrását. Pl: <a href=" src=" Ahhoz, hogy pl. a képek és a szövegek egymás alatt helyezkedjenek el a widgetben, pipáljuk ki az Automatikus bekezdés-hozzáadás lehetőséget az adott widget fülén, így ha Enter-t nyomunk egyegy kép vagy szöveg után, akkor azok valóban egymás alá kerülnek a widgetben. (Illetve a <br> tag beszúrásával is beállíthatunk sortöréseket.)

11 Felsorolást (vékony vonalakkal elválasztott sorokat) is beállíthatunk a widgetben. Ehhez a <li> és a </li> tageket használjuk, pl.: <li>kövess minket a Facebookon is!</li> <li>kövess minket a Pinteresten is!</li> És ha ezeket kattinhatóvá szeretnénk tenni, vagyis azt szeretnénk, hogy navigáljanak el minket egy másik weboldalra vagy az egyik aloldalra, akkor a hivatkozást is meg kell adni. <li><a href=" EXTRÁK Azoknak, akik további beállításokat is elvégeznének a weboldalon. Almenüpontokat szeretnék létrehozni, mi a teendő? Almenüpontokat, lenyíló menüpontokat is létre tudunk hozni. Megjelenés/Menü menüpontban a bal oldali listából kiválasztva behúzzuk a menübe az adott aloldalt, majd az alá a menüpont/oldal alá húzzuk kicsit jobbra húzva közben az egeret ( altétel felirat jelenik meg közben a fülön), amely alá szeretnénk rendelni. Ebben az esetben nem érdemes tartalmat elhelyezni azon az oldalon, amely alá az aloldalt rendeltük. Ha nincs tartalom azon az oldalon, amely alá behelyeztük az almenüket/aloldalakat, akkor érdemes a menüpontot nem kattinthatóvá tenni, tehát klikkelésre ne navigáljon sehova, csak az almenüpontok nyíljanak meg alatta. Ehhez a következőt kell tenni: A menüszerkesztőben a bal oldalon a Saját hivatkozások fülnél vegyünk fel egy egyéni hivatkozást. Ehhez az URL mezőbe ne írjunk semmit, a Hivatkozás szövege pedig legyen az eredeti menüpont neve. Adjuk hozzá a menühöz, töröljük az eredeti menüpontot, és helyette ezt az új menüpontot tegyük be. Nem láthatóak a lenyíló menüpontok, mi a probléma? Mivel egy slideshow fut a főoldalon, ezért a főoldalon nem fognak megjelenni a lenyíló menüpontok. A probléma az az, hogy a slidert tartalmazó DIV feljebb van, mint a menü legördülő része. Így is legördül a menü, de nem látjuk, mert a slider alatt van. A probléma elhárításához a következőt kell tenni: A style.css végére írjuk be:.main-navigation li ul { z-index: 900; A z-index-el gyakorlatilag a DIV-ek egymás feletti helyzetét lehet befolyásolni. Ezzel a 900-as értékkel felülre állítjuk a lenyíló menüpontokat és így a slider elé kerülnek.