Ügyfélszolgálat: +36 70 623 8822

Kategóriánként és oldalanként egyedi fejléckép beállítása

Szerző: Szűcs Ádám Kategória: Megjelenés - Kinézet - Sablonok, Videó

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.


      

82 perces Divi kinézet és Divi Builder bemutató

Szerző: Szűcs Ádám Kategória: Cikk, Ingyenes videók, cikkek, Megjelenés - Kinézet - Sablonok, Videó

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ő:

overview-top

overview-middle

 

overview-bottom

overview-footer

  • 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.

customizer-header

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!

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ó:


      

Képváltogató eltüntetése mobilos nézetről

Szerző: Szűcs Ádám Kategória: Hasznos lehet, Keresőoptimalizálás, Megjelenés - Kinézet - Sablonok, 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.


      

Fizetős WordPress kinézetek – a demón látott oldal összerakása 2.

Szerző: Szűcs Ádám Kategória: Hasznos lehet, Megjelenés - Kinézet - Sablonok, Videó

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!

      

Almenü színének a módosítása

Szerző: Szűcs Ádám Kategória: Hasznos lehet, Megjelenés - Kinézet - Sablonok, Videó

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:


      

WordPress child theme (gyerek sablon) létrehozása

Szerző: Szűcs Ádám Kategória: Megjelenés - Kinézet - Sablonok, Videó

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á.

Child-theme

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

child-stlye-css

(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

child-functions

(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:

20160829-functions-php3

(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.:

20160829-linkek

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ó:


      

WordPress kinézet exportálás, FTP hozzáférés nélkül

Szerző: Szűcs Ádám Kategória: Bővítmények, Megjelenés - Kinézet - Sablonok, Videó

Előfordulhat, hogy arra van szükséged, hogy a weboldalon használt kinézet a gépeden legyen (pl.: ha NotePad++ programmal akarsz keresni a fájlokban). Ha nincs FTP hozzáférés, vagy egyszerűen csak nem akarsz a tárhelyszolgáltatóval levelezni miatta, akkor javaslom, hogy telepítsd az alábbi videón bemutatott bővítményt, és pár kattintással le is tudod menteni a kinézetet .zip formátumban.

A videó megtekintéséhez PROFI PLUSZ hozzáférés szükséges.


      

WordPress kinézet: Avada

Szerző: Szűcs Ádám Kategória: Cikk, Hasznos lehet, Megjelenés - Kinézet - Sablonok, Videó

Mi az Avada?

A WordPress történetének legnépszerűbb fizetős kinézete, amelyet a cikk megírásának pillanatáig 227 003 példányban adtak el a themeforest.net oldalon:

avada

Mennyit kerestek vele a készítők?

Mai árfolyamon számítva több, mint 3,2 milliárd forintnyi dollárt. A themeforestet üzemeltető Envato jutaléktáblázatából kiszámítottam pontosan:

avada-jutalek

2014 októberében még “csak” ~88600 eladásnál járt a kinézet. Akkor írtam egy részletes cikket az Envato birodalomról, illetve azt a cikket is megnézve össze lehet vetni, hogy az elmúlt 20 hónapban mennyit kerestek az Avada kinézettel.

Ajánlom az Avada kinézetet?

NEM!
Most biztosan meglepődsz, akkor miért szánok rá külön cikket, miért van róla 24 perces (ld. lejjebb) videóm?

Menjünk végig a kérdéseken:

  • Miért nem ajánlom? Véleményem szerint (több Avada alapú weboldalt is készítettem már) túlságosan el van bonyolítva az admin felülete, vannak sokkal jobban használható kinézetek a piacon, hasonló áron. Pl.: THE7, amely minden idők 7. legnépszerűbb fizetős WordPress kinézete, azaz ez is TOP10-es – erről külön 21 perces videót is forgattam. Az Avada oldalépítgetőjének logikáját véleményem szerint nehezebb megérteni, mint a Visual Composert (29 perces videó a link mögött!), amelyet pl. a THE7 kinézethez adnak. Van olyan ügyfelem (Szia ******, ha olvasod ez a cikket!), aki Avada alapú weboldal elkészítésével bízott meg, majd a munka közben (mivel több weboldalt akart) vett egy PROFI PLUSZ tagságot, és  a THE7-ről szóló videó megtekintése után megkért: térjünk át arra, nem akar az Avada kinézettel bajlódni!
  • Miért van róla mégis videóm? A tény, hogy a legnépszerűbb fizetős WordPress kinézet, nem megkerülhető, ezáltal rengetegen használják. Illetve tudok két WordPress oktatással foglalkozó vállalkozásról is – ahonnan már jöttek tanulók hozzám – hogy az Avada-t ajánlják, de az engem felkereső ügyfelek nem jutnak el odáig sem, hogy a demón látott verziót összerakhassák. Nekik, és a jövőben érkező tanítványoknak szeretnék a videómmal segíteni.

Avada összefoglaló videó

  • Hogyan telepítsd az Avada-t?
  • Milyen kötelező bővítmények szükségesek az Avada-hoz?
  • Hogyan importáld az Avada demóján látott weboldalt?
  • Hogyan működik az Avada oldalépítgetője?
  • Hogyan néz ki egy Avada Woocommerce webshop?

Az alábbi, 24 perces videón – PROFI PLUSZ tagsággal nézhető – válaszolok a fentiekre:


      

Honlapunk cookie-kat használ. Részletek

Egy EU-s törvény alapján kötelező tájékoztatni a látogatókat, hogy a weboldal ún. cookie-kat használ. Ha ezzel nem értesz egyet, akkor a böngésződ megfelelő beállításait használva tiltsd le a cookie-k tárolását. | Részletes adatvédelmi tájékoztató |

Bezárás