Több, mint 30 előre elkészített demo-ból választhatsz, ha a The7 kinézettel szeretnél weboldalt készíteni. Természetesen nem csak ilyen felépítésű lehet a weboldal, ugyanis ezeken túl is szinte bármilyen megjelenés összeállítható kinézethez tartozó a Visual Composer-rel, illetve az importált demo-k is teljesen testreszabhatóak.

A 30+ demo azért készült, hogy:

• Lásd: mennyire sokrétű ez a kinézet.
• Ha valamelyik tetszik, akkor könnyedén fel tudj építeni egy hasonlót.

Néhány The7 demo a 30-ból:

Korábbi videók a témában:

• Link 1.
• Link 2.

    

A The7 kinézet rendelkezik egy ikonkészlet támogatással, egészen pontosan a http://fontawesome.io/icons/ oldalról lehet ikonokat integrálni pl. a menüpontok és almenüpontok nevei elé.

Az alábbi, INGYENES, ~3 perces videón bemutatom a “hogyan?” kérdésre a választ:

Amennyiben kiválasztottál egy fizetős kinézetet a themeforest.net oldalon, vásárlás előtt regisztrálnod kell az oldalra. Erre azért van szükség, mert vásárlás és fizetés után a felhasználói fiókodba belépve fogod tudni letölteni a kinézetet.

Az alábbi videón bemutatom lépésről-lépésre a következőket: hogyan kell kosárba tenni a kinézetet, illetve a PayPalon keresztül hogyan tudsz bankkártyával fizetni, illetve ezek után hogyan tudod letölteni a kiválasztott és immáron megvásárolt kinézetet:

Képzeljük el az alábbi helyzetet: adott egy ~2,5 éve készült weboldal, amely AVADA kinézetet használ, és még csak nem is Child (gyerek) kinézettel működik. Igazi rémálom egy ilyen régi rendszert frissíteni.

A frissítés főbb lépései

Megj.: DIVI, THE7, stb. kinézetnél is hasonló metodikát kell követni!

• Nagyon figyelj, körültekintően járj el a művelet során!
• Tutira akarsz menni? Klónozd le a weboldaladat egy teszt-helyre, és végezd el ott a frissítést. Ha nincs gond, akkor frissítsd az éles weboldalt!
• Készíts biztonsági mentést a tárhelyről, adatbázisról, Avada beállításokról.
• Csinálj képernyőképeket a weboldalról, hogy egy-egy elemet könnyen vissza tudj állítani, ne csak emlékezetből lásd a korábbi állapotot.
• Mentsd el a főoldalad HTML kódját.
• Mentsd el a widgeteket.
• Hozz létre gyerek-kinézetet.
• Állj át a gyerek-kinézetre.
• Töltsd le a legújabb AVADA kinézetet.
• Frissítsd a fő – AVADA – kinézetet FTP-n keresztül.
• Ellenőrizd a kinézet beállításait, illetve a weboldalt.
• Állíts helyre minden “elromló” funkciót.
• Frissítsd a bővítményeket és a WordPress-t is.
• Ellenőrizd az összes bővítmény és widget megfelelő működését.
• Ha bármilyen egyéb probléma felmerül, orvosold.
• Készíts ismét biztonsági mentést a weboldalról.

Az alábbi, közel 21 perces videón végigmutatom a fentieket egy AVADA-frissítés után igazán szana-széjjel csúszó weboldalon.

    

Az alábbi videón azt mutatom be, hogyan kell egyedi fejlécképet és háttérszínt beállítani egy WordPress weboldalon. A megoldás nem általános megoldás, inkább csak inspirációs szándékkal teszem közzé, hogy aki nyitott rá, és megvan a szükséges ismerete, az továbbgondolva a látottakat fel tudja használni.

    

Mi a Divi?

Az Elegant Themes kinézetgyártó cég legnépszerűbb kinézete, amely egy beépített oldalépítgetővel rendelkezik. Ebből következően számtalan elrendezésű weboldalt lehet vele készíteni, viszonylag könnyen, hiszen az oldalépítgető megkönnyíti a különféle igények egyszerű megvalósítását. Az oldalépítgetőt úgy kell elképzelni, mint a Visual Composert, meg az AVADA Fusion Builderét, ez is ugyanolyan könnyen használható és széles körben elterjedt.

Főbb Divi funkciók:

Vizuális szerkesztő:

• Elemek állítható szélességgel és magassággal.
• Fogd és vidd módszerrel történő átrendezés.
• Mobilbarát, reszponzív felépítés.
• ~40 beépített elem, amelyeket könnyedén el lehet helyezni az aloldalakon, pl.: Kapcsolati űrlap, képváltogató, szöveges rész, kép, gombok, ártáblázatok, ügyfélvélemény, keresés, mp3 lejátszó, videó beágyazás, galéria, oldalsáv, blog, tabos elrendezés, toggle-s elrendezés, stb.
• 20+ teljes layout, hogy még könnyebb legyen az elindulás.
• Elmenthető, és beolvasható elrendezés minták.
• Beépített Split teszt funkció.
• Nagyon erős “Testreszabás” menü támogatás. Még egy kinézetnél sem láttam ilyen szintű funkcionalitást.

A Divi kinézet hivatalos elérhetősége, ismertetője: https://www.elegantthemes.com/gallery/divi/

A Divi kinézet előnyei:

• Magyar nyelvű felület. (32 nyelven elérhető)
• Divi Builder – egyszerű, gyors, aprólékosan állítható elemek.
• Folyamatos fejlesztés.
• Menthető, exportálható, importálható elemek.
• Beépített A/B teszt lehetőség.
• Már 69$-ért elérhető, +86 kinézet “jár mellé”.
• Nagy ügyfélkör, az egyik legnépszerűbb kinézet: 371 133 (összes elegantthemes eladás) vs. 275 134 (1 kinézet, az Avada összes eladása) eladás.
• 30 napos pénzvisszafizetési garancia.

A Divi kinézet hátrányai:

• Törlés gomb működési elve.
• Betöltés könyvtárból funkció: felülírás a Visual Composer “mellétöltés” funkciója helyett.
• Divi Builder használata esetén eltűnik az oldalsáv.
• Nagyon ritkán “megfagy”.
• Váltás HTML nézetre: visszaáll minden a Divi Builder használata előtti állapotra.

Divi kinézettel készített weboldalak:

https://www.elegantthemes.com/showcase/

A Divi videó vázlatos tartalomjegyzéke:

A Divi videót olyanoknak ajánlom, akik nem ismerik a Divi-t, mert teljesen az alapoktól indul!

• Elegantthemes bemutató, csomagajánlatok.
• Divi vásárlás: https://www.elegantthemes.com/join/ (mindenképpen vedd meg, ne töltsd le valahonnan!)
• Kiegészítő bővítmények: https://www.elegantthemes.com/plugins/
• Divi Builderre épülő egyéb kinézet: https://www.elegantthemes.com/gallery/extra/
• Dokumentáció elérhetősége: https://www.elegantthemes.com/gallery/divi/documentation/
• Divi kinézet telepítése – ne feledkezz meg a gyerek kinézetről!
• Divi alapbeállítások.
• Testreszabás menü.
• Divi Builder bemutató – vizuális nézettel, könyvtárból való betöltéssel.
• Modulok testreszabása.
• Divi könyvtár funkció.

Részletes tartalomjegyzék, idővonal:

00:00 – Bevezető
00:40 – Mi a Divi?
00:56 – Divi letöltés
02:02 – Legtöbbet eladott kinézet?
02:57 – A Divi előnyei
05:32 – Divi-vel készült weboldalak
06:37 – Elegant Themes előfizetési lehetőségek összehasonlítása
09:43 – Dokumentáció
10:43 – Divi-vel készült weboldalak 2.
12:04 – Divi részletek, megvásárlás
12:42 – Divi telepítés, alap megjelenés
13:42 – Divi – „Sablon beállítások” menüpont
18:47 – Divi – „Téma testreszabás” menüpont
32:58 – Divi – „Modul testreszabás” menüpont (említés)
33:19 – Divi – „Szerepkör szerkesztő” menüpont
34:59 – Divi – „Divi könyvtár” menüpont
35:32 – A Divi Builder használata, működési elv, példák, tippek, trükkök.
51:53 – Visual Builder használata
52:15 – Mentés a Divi könyvtárba, importálás a Divi könyvtárból
54:28 – Visual Builder használata 2.
56:27 – Modulok felfedezése autodidakta módon, Divi Builder használata
1:03:37 – Néhány hasznos Divi link
1:06:09 – Blurb (Fülszöveg) testreszabás példa
1:12:30 – Divi – „Modul testreszabás” menüpont
1:15:08 – Divi – „Divi könyvtár” menüpont 2.
1:17:31 – A Divi hátrányai
1:18:54 – Elakadtál? Dokumentáció!
1:19:19 – Elakadtál? Segítsek?
1:20:30 – Érdekel részletesebben a WordPress? Tanulj velem!

És akkor jöjjön a 82 perces Divi videó:

    

Ha optimalizálni akarjuk a weboldalunkat, akkor annak az is része, hogy mobilos nézeten nem terheljük meg a mobilozó sávszélességét, hanem próbálunk minél gyorsabban betöltődő weboldallal szolgálni. Erre egy remek módszer, ha mobilos nézetről eltüntetjük a képváltogatót. Az alábbi videón mutatom is, hogyan kell ezt végrehajtani!

A videón érintőlegesen arra is kitérek, hogyan kell különböző felbontású eszközökön más stíluslap-elemet használni.

    

Korábban bemutattam egy megoldást arra vonatkozóan, hogyan kell a demón látott kinézetet kialakítani egy fizetős (THE7) kinézetben. Azóta a kinézet fejlődött, és elegánsabb módja is van a demón látott tartalom összerakásának.

Alább két videót találsz:

• az egyiken magának a kinézetnek a különféle demo megjelenítési módjainak importálását mutatom be,
• a másikon pedig a Revolution Slider importálását. Egyébként javaslom inkább a LayerSlider használatát, szerintem egyszerűbb!

    

Egy hozzászólásban érkezett a kérdés, egy kicsit egyszerűsítve:

“A problémám az, hogy a weboldalam legördülő menüjében a legördülő menü háttészínével majdnem egyező színű a menüpont nevének színe. Azaz alig látszik a háttéren a menüpont neve, mivel mindkét szín sötét. Az egyiket meg kellene változtatnom.”

Az ottani válaszom:

Az alábbi videón megmutatom a gyakorlatban is a fentieket:

    

Amikor az általunk használt kinézetet frissítik a fejlesztők, azt a frissítést érdemes feltelepíteni a weboldalunkra is, hiszen lehet, hogy funkcionálisan, vagy éppen biztonság (sok weboldalt az elavult kinézet miatt tudnak feltörni) terén fejlesztettek valamit. Hogy ne váljon elavulttá a weboldalunk, ezeket ajánlott telepíteni.

Ennek azonban nagy hátránya az, hogy a kinézetben eszközölt változtatások – pl.: css, funkciók, nyelvi fájlok – elveszhetek, sőt szinte (néhány kivétel van, illetve körülményes módon meg lehet akadályozni az adatvesztéssel járó plusz fejlesztői munkát) minden esetben el is vesznek.

A megoldás: gyerek kinézet (child theme)

Pontosan ezért találták ki a WordPress fejlesztői az ún. child theme-t, azaz gyerek kinézetet. Ez technikailag egy új WordPress kinézet, amelynek minden eleme a szülő kinézetből származtatható.

Nem kell megijedni, nem az ördögtől való dolog a gyerek kinézet létrehozása, pár egyszerű lépés szükségeltetik hozzá.

Mi is az a gyerek kinézet (child theme)?

A gyerek kinézet/child theme annyiban tér el a szülő kinézettől, amennyit a szülő kinézethez képest változtatunk rajta (és két kivételtől eltekintve csak ennyiből, a módosításokból áll az egész gyerek kinézet), amely változtatásokat „fizikailag” a child theme/gyerek kinézet könyvtárában tárolunk. Ezekről lesz szó részletesebben lejjebb, példával illusztrálva.

Hogyan működik a gyerek kinézet (child theme)?

A child theme/gyerek kinézet úgy működik, hogy a WordPress mindig először onnan próbálja kinyerni az éppen lekért adatokat, funkciókat, és csak akkor – de akkor onnan – a szülő kinézetből, ha a child theme-ben/gyerek kinézetben nincs olyan, amely az éppen lekért adathoz tartozik. Azaz ha a szülő kinézethez képest van változtatás a gyerek kinézetben, akkor a weboldalon úgy fog megjelenni, és nem a szülő kinézet által meghatározott módon.

A gyerek kinézetek használatának legnagyobb előnye

A child theme/gyerek kinézet használatakor bátra(bba)n frissíthetjük a weboldalunk szülő kinézetét, jó eséllyel nem fognak elveszni a CSS-ben eszközölt változtatások, plusz funkcionális fejlesztések, hiszen azok a gyerek kinézetben vannak, nem a szülő kinézetben. Azért frissítés előtt érdemes egy biztonsági mentést készíteni a weboldalról, mert child theme/gyerek kinézet használata esetén is felléphet működési zavar a weboldalon, amennyiben a szülő kinézet nagy arányú eltérést tartalmaz annak korábbi verziójától és/vagy child theme/gyerek kinézetétől. A fentieken túl gyorsítja a fejlesztési időt a gyerek kinézet használata.

Gyors példa az előzőre:

Ha a gyerek kinézet tartalmaz egy footer.php-t, akkor a szülő kinézet footer.php fájlja helyett ez fog megjelenni/betöltődni a weboldal alján. Azaz – mivel a weboldal működéséhez a szülő kinézet footer.php-ja nem kell – a szülő kinézet frissítése nem fogja befolyásolni a footer.php megjelenését, mert annak módosításai a gyerek kinézetben vannak.

Hogyan készítsünk gyerek kinézetet az általunk használt kinézethez?

Sok fizetős kinézetnél a letöltött csomagban van child theme mappa is. Ha nem vagy ilyen szerencsés, akkor kövesd az alábbi útmutatót!

Hogyan?

Egyszerű lesz, pár lépés!

1. Gyerek sablon mappájának létrehozása
2. style.css létrehozása
3. functions.php létrehozása

Nézzük lépésről-lépésre:

1. Gyerek sablon mappájának létrehozása

Érdemes olyan nevet adni a mappának, amely megegyezik a szülő kinézet mappájának nevével, hozzáadva a „child” karaktersorozatot. Pl.: a „core” nevű kinézet gyerek sablonjának a könyvtárneve legyen „corechild”. Ebbe a mappába kell beletenni az alábbi módon létrehozott style.css és functions.php fájlokat.

2. style.css létrehozása

(kód letöltése)

A fentiekből a Theme Name és Template mezők kitöltése kötelező, és mindegyiket érdemes valós, személyre szabott adatokkal kitölteni! Figyelem! Ha a kinézet neve nagybetűt tartalmaz, akkor a gyerek sablonban is így szerepeljen, így kell rá hivatkozni!!

3. functions.php létrehozása

(kód letöltése)

A szülő kinézet css-ének betöltése a gyerek sablonba:

A fentieken túl érdemes (nem mindegyik kinézet igényli) elhelyezni egy kódsort vagy a style.css, vagy a functions.php fájlokban, hogy a szülő kinézet stíluslapját örökölje és betöltse a gyerek sablon is. Ennek két módja van.

A régi módszer, picit lassabb betöltődést eredményez:
A style.css fájlban helyezzük az alábbi kód kinézetspecifikusan módosított verzióját:

@import url(“../core/style.css”);
Természetesen több css importálására is van lehetőség, amennyiben ez szükséges.

Az új módszer:
A functions.php fájlban helyezzük el az alábbi kódot:

(kód letöltése)

Több css importálása esetén a codex.wordpress.org/Child_Themes oldalon leírtak szerint kell eljárni.

A fentiek után a hagyományos módon lehet a gyerek kinézetet telepíteni és aktiválni. Előfordulhat, hogy a Megjelenés => Menük alatt újra be kell állítani ilyenkor a menüt, valamint lehetséges, hogy a kinézet beállításait és ismét meg kell határozni. Olyan kinézeteknél, ahol a kinézet beállításainak exportálására van lehetőség, érdemes ezzel élni, majd a gyerek kinézet aktiválásakor elveszett beállításokat vissza lehet importálni. A gyerek kinézet aktiválása előtt is érdemes egy biztonsági mentést készíteni a weboldalról.

Aktiválás utána minden, a szülő kinézetben eszközölendő változtatást a gyerek sablonban helyezzünk el. Ha pl. a footer.php-ban szeretnénk módosítani, akkor a szülő könyvtár footer.php fájlját másoljuk át a gyerek kinézet mappájába, és ott szerkesszük. Ha a szülő kinézet módosítandó fájlja egy almappában van, akkor a gyerek kinézetben is hozzuk létre az almappát, és abba másoljuk át a fájlt. Természetesen új egyedi oldalsablonokat és egyéb dolgokat tartalmazó php fájlokat is elhelyezhetünk a gyerek kinézet könyvtárában.

Fontos!
get_template_ fügyvénycsalád a szülő kinézet mappájára vonatkozik, míg a get_stylesheet_ függvénycsalád a gyerek kinézet mappájára.

Pl.:

Az első link a kinézet mappájából veszi a képet, míg a második a gyerek kinézet mappájából.
(a fenti két kód premium.wpmudev.org oldalról származik)

A fentieken túl érdemes egy screenshot.png-t és nyelvi fájlokat elhelyezni a gyerek sablonban.

Videón a fentiek, és azok kiegészítése.

Tartalomjegyzék:

• Hogyan veszik el a módosítás kinézet frissítéskor, ha nincs child theme?
• Hogyan kell létrehozni gyerek kinézetet (mappa, style.css, functions.php, stb.), és hogyan kell aktiválni?
• Hogyan ne veszítsd el a gyerek kinézet aktiválásakor az addigi beállításokat? (azért készíts egy biztonsági mentést a művelet előtt!)
• Hogyan veszi át a gyerek kinézet a szülő css-ét? Hogyan lehet azt felülírni?
• A kinézetben lévő php fájlok módosítása, és gyerek kinézetben történő tárolása.
• Hogyan használd a gyerek kinézet functions.php fájlját?
• Kinézet frissítés, gyerek sablon mellett.
• További példák, hogy mit és hogyan lehet/érdemes a gyerek kinézettel.

WordPress gyerek kinézet létrehozás, használat – videó: