Egy fiktív oktatási intézmény többnyelvű webportáljának kialakítása

Wordpress alapokonI. rész

Abonyi-Tóth Andor, ELTE Informatikai Kar

1

A prezentáció a Tempus Közalapítvány által az Európai Felsőoktatási Térség reformja (559232-EPP-1-2014-1-HU-EPPKA3-BOLOGNA ) projekt keretében szervezett “Nemzetközi honlapfejlesztési ismeretek és web 2.0 ötletek, módszerek, technikák” című kurzushoz készült

Előfeltételek

Szükség van egy előre telepített Wordpress környezetre, amelybe adminisztrátori jogosultsággal bejelentkeztünk.

A Wordpress CMS ingyenweb.info tárhelyre történő telepítésének leírása elérhető az alábbi oldalon:http://bit.ly/wpingyenweb

2

Ezt a portált fogjuk elkészíteni

3

Ismerkedés a felülettel

4

5Adminisztrátori felület: a bal oldali menüben érhetőek el az egyes funkciók és beállítások.

Vezérlőpult kisebb ablakban

Kisebb böngészőablakban csak a funkciók ikonjai látszanak, nagyobb méretben jelenik meg csak a menüpontok szövege. 6

A vezérlőpult és a publikus nézet közti váltás

Ha a házikó ikon fölé visszük az egeret, megjelenik a honlap megtekintése link. Ezt követve látható, hogy hogyan néz ki a portál publikus változata.

7

A publikus oldalon az oldal tetején megjelenik egy menüsáv. Ha a My blog menüpontra visszük az egeret, megjelenik a Vezérlőpult link, amivel visszatérhetünk az adminisztrátori felületre.

A portál publikus nézete

8

Az alapértelmezett Wordpress sablon nagyon puritán, de van lehetőségünk más sablonok telepítésére is (később erre még kitérünk).

A portál publikus nézete

9

A kezdőlapon látszik egy minta blogbejegyzés, illetve oldalt különböző blokkok (widgetek) látszódnak, ilyen például a legutóbbi bejegyzések, hozzászólások, archívum.

Publikus nézet testreszabása A Megjelenés / Widgetek menüpontban

testreszabhatjuk, hogy az oldalsávon milyen összetevők, milyen sorrendben jelenjenek meg.

10

Publikus nézet testreszabása Az oldalsávra fogd és vidd

módszerrel elhelyezhetünk Widgeteket (blokkokat), illetve a sorrendet is így tudjuk befolyásolni.

A Widgeteken a lefelé mutató nyílra kattintva előjön egy menü, amelyben akár törölhetjük is az adott összetevőt a fő oldalsávról.

11

Feladat

Töröljük ki a Meta nevű widgetet!

12

Ennek hatására eltűnik ez a

blokk a publikus felületről.

Feladat

Az Oldalak nevű widgetet helyezzük el a legutóbbi hozzászólások blokk alatt! Kattintsunk a mentés gombra és ellenőrizzük az eredményt a publikus nézetben!

13

Megjelenik az

oldalak blokk

Publikus nézet testreszabása Vigyázzunk mert a Wordpress portálrendszerhez

számos sablon telepíthető, amelyek azt is meghatározzák, hogy milyen elemekre helyezhető el Widget.

Így lehet, hogy akár több olyan terület is megjelenik (pl. bal alsó terület, jobb alsó terület), amelyeken elhelyezhetjük az elemeket.

Később látjuk, hogy egyedi bővítmények is telepíthetők. A bővítmények egy részéhez olyan Widget is tartozik, amelyet el kell helyeznünk a képernyőn, hogy megfelelően használni tudjuk az adott funkciót.

14

Minta bejegyzés és oldal törlése A Wordpress friss telepítés után tartalmaz egy

minta bejegyzést (Hello world!) és egy minta oldalt (Sample page) is. Ezeket töröljük ki (tegyük Lomtárba), hogy ne zavarjanak minket!

Ehhez a Bejegyzés / Összes bejegyzés, illetve Oldalak / Összes oldal menüpontot kell kiválasztani, majd a törlendő elemeknél a Lomtár hivatkozásra kell kattintani.

15

Általános beállítások

A Beállítások / Általános menüpontot válasszuk ki!

Itt tudjuk például megváltoztatni a következőket: Honlap neve, egysoros leírása, E-mail cím, Időzóna, Dátum formátum.

16

Közvetlen hivatkozások A Beállítások / Közvetlen hivatkozások menüben

érdemes olyan beállítást választanunk, amelynél a nap és a bejegyzés címe is látható a webcímben.

17

Közvetlen hivatkozások Ez keresőoptimalizálási

szempontból is előnyökkel jár!

http://mediainf.elte.hu/a-szakiranyrol/kurzusok-adatlapja/web-technologia-i-ii-iii/

http://mediainf.elte.hu/?p=321

18

Itt az url már a kulcsszavakat is tartalmazza

Itt nem utal az url a tartalomra.

BővítményekA következőkben telepítünk olyan bővítményt, amellyel többnyelvű portált építhetünk.

19

Bővítmények A Wordpress portálrendszerhez számos

bővítmény telepíthető. Ezek leírása megtalálható a http://wordpress.org/plugins/ címen.

20

Telepített bővítmények A Bővítmények/Telepített bővítmények

oldalon láthatjuk a már telepített bővítményeket, amelyeket akár ki- és bekapcsolhatunk, illetve törölhetünk is.

21

Telepített bővítmények Feladat: Töröljük ki a Hello Dolly

bővítményt!

22

Új bővítmény hozzáadása

Új bővítmény hozzáadásához az Új hozzáadása menüpontot válasszuk ki, és keressünk rá a bővítmény nevére.

23

Polylang bővítmény telepítése Telepítsük a polylang nevű bővítményt,

amely lehetővé teszi többnyelvű portál létrehozását!

24

A kulcsszó alapú keresés után kattintsunk a bővítmény adatain a

Telepítés most hivatkozásra!

Polylang bővítmény bekapcsolása Ezek után a telepítés sikerességéről

visszajelzést kapunk. Sikeres telepítés esetén kattintsunk a Bővítmény bekapcsolása hivatkozásra!

25

Nem elég telepíteni a

bővítményt, be is kell kapcsolni.

Polylang bővítmény beállítása A beállítások módosításához válasszuk

ki a Bővítmények/Telepített bővítmények menüpontot, és a Polylang bővítménynél kattintsunk a Beállítások hivatkozásra!

Ugyanezt a funkciót elérhetjük a Beállítások / Nyelvek menüpontban is.

26

Többnyelvű portál készítése Példaképpen egy két nyelvű portált

hozunk létre a polylang bővítménnyel.

A tartalmakat magyar, illetve angol nyelven fogjuk publikálni, ezért ennek megfelelően állítjuk be a bővítményt.

27

Polylang bővítmény beállítása

Új nyelvként vegyük fel a magyar nyelvet, az Új nyelv hozzáadása menüponttal.

Ugyanezt ismételjük meg az angol (English-en_GB) nyelvvel is!

28

Polylang bővítmény beállítása

A Szöveg fordítások fülön beállíthatjuk a nyelvfüggő elemek fordítását, vagy akár az eltérő dátumformátumokat.

29

Feladat

Állítsuk be, hogy a honlap neve a következő legyen (magyarul és angolul): KMTE

Az egysoros leírás a következő legyen: (magyarul): Közép-magyarországi

Tudományegyetem (angolul): University of Central Hungary

30

Feladat eredménye

A kezdőlapon meg kell jelennie a szövegeknek attól függően, hogy milyen nyelvet választunk ki.

31

Polylang bővítmény beállítása A Beállítások fülön további módosításokat

végezhetünk. Beállíthatjuk az alapértelmezett nyelvet, és azt, hogy a nyelv milyen módon jelenjen meg a honlap címében.

32

Ha végeztünk, kattintsunk a Módosítások mentése gombra!

Oldalak hozzáadása

33

Oldal vs bejegyzés

A Wordpress portálban az oldalak jelentik a menüpontokhoz tartozó tartalmi elemeket, ezeket szokás almenürendszerbe szervezni.

A bejegyzések pedig a friss információk, hírek publikálására alkalmas. Ezek egy oldalon (jellemzően a kezdőlapon) jelennek meg úgy, hogy a friss hírek kerülnek felülre. 34

Oldal hozzáadása

Az Oldalak/Új hozzáadása menüponttal lehet új oldalt hozzáadni.

A Polylang bővítménynek köszönhetően már az oldal nyelvét is be tudjuk állítani.

A publikálás a Közzététel gomb megnyomásával történik.

35

KMTE portál

A következőkben bemutatjuk, hogy lehetne kialakítani a következő menüstruktúrát a Wordpress CMS-ben.

36

Magyar verzió Angol verzió

Magunkrólo Rektori köszöntő

Nemzetközi tanulmányok

About uso Honorary Rector's Message

International studies

A felhasználható forrásanyag elérhető a következő címen: http://bit.ly/1hscay2 Az ebben lévő tartalmak felhasználásával készítjük el a portálunkat.

Feladat

Hozzunk létre egy Magunkról nevű oldalt. A tartalom a forrásanyagból (http://

bit.ly/1hscay2) kimásolható.

37

Angol nyelvű oldal hozzáadása A magyar nyelvű oldal angol változatát (About

us címmel) többféleképpen is létrehozhatjuk. 1. módszer: az oldal szerkesztésekor

kattintsunk a + gombra az adott nyelvi változat mellett.

38

Angol nyelvű oldal hozzáadása Ezután töltsük fel az oldalt

tartalommal és publikáljuk.

39

Angol nyelvű oldal hozzáadása2. módszer: tekintsük meg az oldalak

listáját (Oldalak/Összes oldal), és az adott oldal idegen nyelvű változatát a + ikonra kattintva készítsük el.

40

Aloldal készítése

Új oldal készítésénél meghatározhatjuk, hogy melyik oldal almenüjeként jelenjen meg az oldal.

Esettanulmányunkban a „Rektori köszöntő” oldalt a Magunkról oldal aloldalaként fogjuk elhelyezni.

Hasonlóan az angol nyelvű oldalon a „Honorary Rector's Message” oldal az „ About us” oldal almenüjeként fog megjelenni.

41

Aloldal készítése Új oldal készítésénél az Oldal tulajdonságok

szakaszban állíthatjuk be, hogy melyik oldal almenüjeként jelenjen meg az oldal.

Példánkban a Rektori köszöntő oldalon az oldal tulajdonságainál a Magunkról oldalt kell szülőként beállítani.

42

Feladat

Hozzuk létre a Rektori köszöntő aloldalt magyar és angol nyelven, illetve készítsük el a Nemzetközi tanulmányok oldalt is magyar és angol nyelven!

43

Magunkrólo Rektori köszöntő

Nemzetközi tanulmányok

About uso Honorary Rector's Message

International studies

Eredmény

Ha megtekintjük a portált, látható, hogy az Oldalak blokkban a kívánt struktúrában jelennek meg az oldalak.

44

Nyelv választási lehetőség Azonban még a látogatóink nem

tudnak a nyelvekből választani. Hogy ezt lehetővé tegyük, el kell

helyeznünk egy nyelvválasztó widgetet az oldalon.

45

Nyelv választó Widget

A Megjelenés/Widgetek menüpontban helyezzük el a Nyelvválasztó widgetet fogd és vidd módszerrel a Widget terület tetejére!

46

Eredmény

Ennek hatására az oldalsáv tetején megjelenik a nyelvválasztási lehetőség.

Amennyiben egy adott oldalt olvasunk, és átváltunk a másik nyelvre, akkor az adott nyelven elérhető változatra kerülünk, amennyiben van ilyen. 47

Polylang widget beállítása A nyelv választó

widget jellemzőit is beállíthatjuk. A „Hides languages with

no translation” opció bekapcsolásakor csak azon nyelvek jelennek meg a nyelvválasztó menüben, amelyeknek van tényleges fordítása az adott nyelven.

48

Bejegyzés készítése

49

Bejegyzés készítése

A Bejegyzés/Új hozzáadása menüponttal készíthetünk új bejegyzést.

A bejegyzéseket kategóriákba rendezhetjük, illetve egyedi címkékkel láthatjuk el.

50

Feladat Készítsük el az Alumni est (2015. február 15.) című

bejegyzést angol és magyar nyelven is a forrásanyagok felhasználásával!

Eredményül azt kell kapnunk, hogy a főoldalon megjelenik a bejegyzés.

51

Ragadós bejegyzés (sticky post) A bejegyzéseknél alapesetben a

legfrissebb kerül legfelülre. De lehet olyan bejegyzés, amit mindig legfelül akarunk látni, például ilyen az üdvözlő szöveg.

Ezt ragadósként kell megjelölni, hogy mindig felül maradjon! A bejegyzések listájában az egeret a bejegyzés

fölé és a megjelenő menüben válasszuk a Gyorsszerkesztés menüpontot!

52

Ragadós bejegyzés (sticky post)

53

A megjelölés ragadósként jelölőnégyzetet jelöljük ki és frissítsük a bejegyzést!

Feladat

Készítsünk egy ragadós bejegyzést Üdvözlet címmel, a következő tartalommal:

„Ez az oldal egy fiktív intézmény honlapja, csak tesztelés céljára lett létrehozva. A szövegek a http://web.ibs-b.hu/ oldalról származnak. ”

Készítsük el a bejegyzés angol változatát is, ami szintén legyen ragadós.

54

Sablonok telepítése

55

Sablonok telepítése

A felsőoktatási intézmény számára egy egyedi sablont lenne szükséges kidolgozni a Wordpress CMS sablonrendszerébe illeszkedően.

Most nincs ilyen sablonunk, ezért próbáljunk keresni olyat, amellyel átalakíthatjuk a mostani, puritán kinézetet.

56

Sablonok telepítése

A Megjelenés/Sablonok menüpontban látjuk, hogy milyen elérhető sablonjaink vannak.

Az Új hozzáadása gombra kattintva letölthetünk új sablonokat.

Különböző szempontok szerint kereshetünk, ha a Jellemző szűrő hivatkozásra kattintunk.

57

58

Mivel a sablon készítői sorolják kategóriákba (sokszor rosszul) a sablonokat, így nem feltétlenül fedi a valóságot a találati lista.

Sablonok keresése

Ajánlott olyan sablonok között keresni, amelyek: Több oszloposak Rugalmas szélességűek Ragadós bejegyzéseket támogatnak Fordításra előkészítettek.

59

Sablonok

Sablonokat bárki készíthet, így azok minősége, megvalósítása, testreszabhatósága nagyban eltér.

Többet is ki kell próbálni ahhoz, hogy az ideális sablonhoz eljussunk.

60

Sablon a teszteléshez

Példaképpen telepítsük az Accelerate nevű sablont. Írjuk be a nevét a keresőmezőbe

61

A megjelenő képre vigyük rá az egeret és kattintsunk a Telepítés gombra!

Sablon a teszteléshez

A telepítés után az alábbi információ jelenik meg.

Kattintsunk a Bekapcsol linkre és nézzük meg, hogyan változik a portál megjelenése!

62

Eredmény

63

Reszponzivitás Megfigyelhetjük,

hogy kisebb felbontásban a menü összecsukásra kerül, így mobil eszközökön is jobban használható az oldal.

64

Testreszabás

A Megjelenés / Testreszabás menüben a telepített sablon tulajdonságai módosíthatóak. Például feltölthetünk képet a

fejlécbe, megváltoztathatjuk a színeket, stb.

65

Testreszabás

Ennél a sablonnál új Widget területek is megjelennek (Megjelenés / Widgetek). Feladat: Helyezzük át a Nyelv

választó widgetet a Header Sidebar nevű területre.

Ennek hatására a nyelv választás a fejlécbe kerül, nem az oldalsávba.

66

Feladat

A sablonok között keressen olyat, amely Ön szerint megfelelő kiindulási alap lehetne egy intézményi portál esetén!

Állítsa be ezt a sablont, és ossza meg az Ön által létrehozott portál webcímét a következő padleten:

http://padlet.com/abonyita/qlibkt25q5lh

67

VÉGE

68