Pál László - emte.siculorum.ropallaszlo/webprog/Eloadasok/WordPress_Jegyzet.pdf · Ezek létrehozása és szerkesztése a Vezérlőpult Bejegyzések, illetve Oldalak menüpontjából

WordPress jegyzet 0.1 verzió

Pál László

Sapientia Erdélyi Magyar Tudományegyetem

Csíkszereda, 2014

Tartalomjegyzék

1. Bevezető ................................................................................................................................................. 3

2. Telepítés.................................................................................................................................................. 3

2.1. Az XAMPP telepítése ..................................................................................................................... 3

2.2. A WordPress telepítése ................................................................................................................... 4

3. A WordPress felépítése .......................................................................................................................... 8

4. Tartalmak kezelése ............................................................................................................................... 10

4.1. Bejegyzések ................................................................................................................................... 10

4.2. Oldalak .......................................................................................................................................... 11

4.3. Hozzászólás ................................................................................................................................... 13

4.4. Hivatkozások ................................................................................................................................. 13

4.5. Médiatár ........................................................................................................................................ 13

5. A megjelenés beállításai ....................................................................................................................... 13

5.1. Alapbeállítások .............................................................................................................................. 13

5.2. Sablonok ........................................................................................................................................ 14

5.3. Widgetek ....................................................................................................................................... 15

5.4. Bővítmények ................................................................................................................................. 16

5.5. Menük............................................................................................................................................ 18

6. E-commerce alapú sablonok ................................................................................................................. 21

7. Hasznos bővítmények ........................................................................................................................... 21

1. Bevezető

A WordPress egy ingyenes tartalomkezelő rendszer (Content Management System - CMS), amely legnagyobb előnye az egyszerű telepítés és a letisztult kezelhetőség és a változatos és nagyszámú bővítmény, amelyek segítségével tökéletesen testreszabható egy honlap.

A WordPress telepítéséhez szükség van egy tárhelyre, ahová a későbbiekben feltöltjük a szükséges fájlokat. A tárhelynek támogatnia kell a PHP fájlokat, valamint a MySQL adatbázist.

2. Telepítés

A WordPress telepíthető olyan kiszolgálón (szerveren) ahol a PHP és MySQL támogatott

illetve telepíthető lokálisan a saját gépünkre is. Az utóbbi esetben előbb telepíteni kell egy web szervert, PHP értelmezőt és MySQL adatbázist. Az XAMPP vagy Wamp programok segítségével mindhárom összetevő egyszerűen telepíthető.

Az XAMPP egy szabad és nyílt forrású platformfüggetlen webszerver-szoftvercsomag, amelynek legfőbb alkotóelemei az Apache webszerver, a MySQL adatbáziskezelő, phpMyAdmin program valamint PHP és Perl programozási nyelvek értelmezői. Ez a szoftvercsomag egy integrált rendszert alkot, amely webes alkalmazások készítését, tesztelését és futtatását célozza, és ehhez egy csomagban minden szükséges összetevőt tartalmaz. A rendszer egyik nagy előnye az összehangolt elemek könnyű telepíthetősége (lásd Wikipédia)

2.1. Az XAMPP telepítése

A program letölthető a következő címről: https://www.apachefriends.org/ A telepítés általában zökkenőmentesen zajlik. A webszerver a xampp-control.exe program segítségével indítható el. A megjelenő ablakban lehet bekapcsolni a webszervert (Apache) és szükség szerint az adatbázist (MySql) (lásd Ábra).

1.Ábra. Az XAMPP program kezelő felülete (Control Panel)

A kiszolgáló működésének ellenőrzése: Töltsük be a webböngészőbe a http://localhost címet. Helyes működés esetén a http://localhost/xampp cím töltődik be (Ábra). Új alkalmazások, feladatok tesztelése céljából azokat az XAMPP program htdocs nevű mappájába kell helyezni

1.Ábra. A kiszolgáló működik

2.2. A WordPress telepítése

A WordPress telepítéséhez először le kell töltenünk a WordPress tartalomkezelő rendszert. Magyar nyelvű változatot a http://hu.wordpress.org/ címről illetve angol nyelvűt a www.wordpress.org helyről tölthetünk le.

A letöltetés után a következő telepítési lépéseket kell végrehajtani:

1. A letöltött csomagot tömörítsd ki egy üres könyvtárba az „…\XAMPP\htdocs\” mappán belül (pld. “…\XAMPP\htdocs\weboldal”)

2. Hozzál létre egy új adatbázist a phpMyAdmin (http://localhost/phpmyadmin/) segítségével (Lásd 1.Ábra)

1.Ábra. Adatbázis létrehozása

3. Nyisd meg a wp-config-sample.php fájlt egy szerkesztőben és töltsd ki az adatbázis kapcsolatoddal kapcsolatos részeket (adatbázis neve, felhasználó és jelszó), majd mentsd el a fájlt, wp-config.php néven.

2.Ábra. Példa a konfigurációs fájl kitöltésére. „Élesben” itt is szükség van új felhasználó névre

(nem root) és jelszóra

4. A WordPress indítása a böngészőn keresztül (pld. http://localhost/weboldal/). Ha az előző lépést kihagyjuk, akkor a WordPress egy újabb ablakban (Lásd 3-4. Ábrák) kéri be az adatbázissal kapcsolatos információkat, különben a honlap alapadatait bekérő ablak (5.Ábra) jelenik meg (Honlap név, admin felhasználónév és jelszó, email cím).

3.Ábra. A telepítést megelőző információs ablak

4.Ábra. Adatbázis adatok megadása

5.Ábra. Alapadatok megadása

5. A telepítő ezután a bejelentkező oldalra fog irányítani. Lépj be az admin felhasználó

névvel és a jelszóval, amit a telepítés közben generált.

6.Ábra. Bejelentkező ablak

6. A bejelentkezés után a WordPress vezérlőpultjába lépünk be, amely segítségével az oldalunk testre szabható, szerkeszthető és bővíthető (új oldalak és bejegyzések létrehozása, megjelenés, felhasználók létrehozása és jogosultságok kezelése, stb.)

3. A WordPress felépítése

3.1. A vizuális tervező

A WordPress testreszabása egy vizuális felületen keresztül történik, ami akkor jelenik

meg, ha sikeresen bejelentkeztünk a rendszerbe. A vizuális felület tulajdonképpen egy menürendszerből áll, amelynek első eleme a Kezdőlapot, ahol az oldalunkkal kapcsolatos legfrissebb információk összefoglalásvalamint a Frissítések pontot, amelynek segítségével elvégezhetjük a WordPress motor, valamint a bővítmények frissítéseinek telepítését.

A vezérlőpulton túl a következő menüpontok találhatóak: Hozzászólás, Megjelenés, Bővítmények

7.Ábra. A vezérlőpult

A WordPress felépítése

A WordPress testreszabása egy vizuális felületen keresztül történik, ami akkor jelenik sikeresen bejelentkeztünk a rendszerbe. A vizuális felület tulajdonképpen egy

menürendszerből áll, amelynek első eleme a vezérlőpult. A vezérlőpulton keresztül elérhetjük , ahol az oldalunkkal kapcsolatos legfrissebb információk összefoglalás

pontot, amelynek segítségével elvégezhetjük a WordPress motor, valamint a bővítmények frissítéseinek telepítését.

A vezérlőpulton túl a következő menüpontok találhatóak: BejegyzésBővítmények, Felhasználók, Eszközök, Beállítások.

A WordPress testreszabása egy vizuális felületen keresztül történik, ami akkor jelenik sikeresen bejelentkeztünk a rendszerbe. A vizuális felület tulajdonképpen egy

keresztül elérhetjük a , ahol az oldalunkkal kapcsolatos legfrissebb információk összefoglalását láthatjuk,

pontot, amelynek segítségével elvégezhetjük a WordPress motor, valamint

Bejegyzés, Médiatár, Oldalak,

7.Ábra. A vezérlőpult

3.2. A WordPress könyvtár struktúrája

A WordPress tartalomkezelı rendszer fájljai egy jól strukturált és egyszerő

könyvtárszerkezetben találhatóak. Itt funkcióik szerint vannak különválasztva a fájlok. A gyökér mappa (ahová a WordPress-et telepítettük) az a hely ahol az adatbázison kívül minden WordPress állomány és mappa elhelyezkedik. A WordPress gyökér mappa három almappát (wp_content, wp_includes and wp_admin) és néhány fájlt tartalmaz (lásd Ábra).

7.Ábra. A WordPress gyökér mappája

Wp-admin:

Ebben a mappában az adminisztrációhoz szükséges rendszerfájlok és függvényleírások találhatóak.

Wp-content:

A felhasználó mappája. Itt találhatóak a bővítmények (plugins), sablonok (themes) és a feltöltött állományok (uploads) is. A helyes működés érdekében erre a mappára írási jogot kell adnunk.

7.Ábra. A Wp-content mappa tartalma

Wp-includes:

Az oldal működéséhez szükséges függvények definícióit tartalmazó fájlok helye. Az itt található állományokat a felhasználónak nem kell szerkesztenie.

4. Tartalmak kezelése

4.1. Bejegyzések

A WordPress alapú honlapokon a tartalmak oldalak és bejegyzések formájában jelenhetnek meg. Ezek létrehozása és szerkesztése a Vezérlőpult Bejegyzések, illetve Oldalak menüpontjából lehetséges.

Új bejegyzéseket az Új hozzáadása menüpont kiválasztásával tudunk létrehozni. A bejegyzésnek nevet kell adni, majd a szerkesztőmezőben a tartalmát kell létrehozni. A bejegyzésnél (a cím alatt) megjelenik a Közvetlen link, amely segítségével a későbbiekben hivatkozást tudunk létrehozni, amely az adott bejegyzésre fog mutatni.

8.Ábra. Bejegyzés szerkesztése

A bejegyzés elkészítése után a Közzététel gombra klikkelve, elérhetővé válik a bejegyzésünk a közvetlen linken (megtekinthető a Bejegyzés megtekintése gombra klikkelve). A nyilvánosság segítségével a létrehozott bejegyzés láthatóságát tudjuk meghatározni (nyilvános - mindenki számára látható, jelszóval védett – csak a megadott jelszó ismeretével látható, magánjellegű – csak a szerző számára látható). A későbbi módosítások alkalmával a Frissítés gombra klikkelve kerülnek megőrzésre a módosítások.

9.Ábra. Bejegyzés közzététele

4.2. Oldalak

Oldalak létrehozása és szerkesztése

Az oldalak létrehozása az Oldalak menüpont alatt lehetséges. A lépések hasonlóak, mint a bejegyzés létrehozásánál.

Ábra. Új oldal létrehozása

Az új oldal esetén lehetőség van a szülő oldal beállítására a jobb oldalon található Oldal tulajdonságoknál. Ez a menü pontok kialakításánál lehet hasznos.

Ábra. A szülő oldal beállítása

A sorrenddel szabályozni lehet, hogy (ha nem használjuk a WordPress menükezelőjét) a menüben hol jelenjen meg az oldal. Alapértelmezésben az abc szerint növekvő sorrendbe rendezi az oldalakat.

Továbbá lehetőség van az aktuális oldalhoz úgynevezett kiemelt kép hozzáadásához is. A

képet fel lehet tölteni vagy a Médiatárból hozzáadni. A kép az oldal tetején fog megjelenni.

Ábra. Kiemelt kép beállítása

4.3. Hozzászólás

4.4. Hivatkozások

4.5. Médiatár

5. A megjelenés beállításai

5.1. Alapbeállítások

A honlap testreszabása gombra klikkelve, a Vezérlőpult nézetet vált és a bal oldali sávban tudjuk elvégezni az egyes műveleteket. Közvetlenül az egyes műveletek elvégzése után láthatóvá válik ezek eredménye.

Ábra. A honlap testreszabása

Ezen a felületen meg tudjuk változtatni a honlap nevét és leírását, valamint a színekkel kapcsolatos beállításokat. Hátérként alkalmazhatunk különböző színeket vagy háttérképet, illetve a kettőt ötvözve.

A Statikus oldal legördülő menüjéből a kezdőlap tartalmát tudjuk meghatározni (a legutóbbi bejegyzések, illetve egy statikus oldal meghatározásával).

5.2. Sablonok

Sablon cseréje és telepítése

A sablon meghatározza a honlapunk kinézetének minden elemét. Cseréje a a Vezérlőpult, Megjelenés almenüjének Sablonok menüpontjának kiválasztásával valósulhat meg. Az egyes elemek szerkesztése és ezek alkalmazása után a honlapunk nevére történő klikkeléssel (bal felső sarok) tudjuk a műveleteink eredményét megtekinteni a honlapon.

Ábra. Sablon kezelő

Új sablont a Sablonok telepítése fülre kattintva tudunk telepíteni. Új sablonokat színek, elrendezés, tulajdonságok és a tartalom alapján tudunk keresni.

A kiválasztott sablon alatt található Telepítés most szövegre klikkelve elkezdődik a letöltése, kibontása és telepítése (amely időtartama a sablon méretétől függően változhat). Az Előnézet linkre klikkelve meg tudjuk tekinteni a sablont.

Ábra. Sablon telepítése

A letöltött sablonok a továbbiakban elérhetőek lesznek a sablonkezelőből (bármikor bekapcsolhatók) és a tárhelyünkön a wp-contents/themes/sablon_neve mappában kerülnek tárolásra. Ha egyes sablonokat nem szeretnénk tovább tárolni, illetve felhasználni, akkor a Törlés szövegre kell klikkelni.

5.3. Widgetek

A Widgetek minialkalmazások, amelyek a Vezérlőpult Megjelenés menü Widgetek menüpontjából érhetők el. A widgetek engedélyezése a „fogd és vidd” módszerrel történik (a megfelelő sorrendben a megfelelő területre). Az egyes widgetek alatt rövid leírást kapunk ezek tartalmáról és használatuk lényegéről. A szerkesztés után a Mentés gombra klikkelve alkalmazzuk a műveleteinket.

Ábra. Elérhető widgetek

Ábra. Az elsődleges és másodlagos widget területek

5.4. Bővítmények

A különböző bővítmények telepítésével és bekapcsolásával a honlapunkat kiegészítő funkciókkal tudjuk gazdagítani (tetszőleges idézetek megjelenítése, látogatóink száma és földrajzi helye, címkefelhő, kapcsolat a népszerű közösségi oldalakkal, stb.).

A telepített bővítmények a Vezérlőpult Bővítmények menüpontjára klikkelve érhetők el

(itt kapcsolhatók be/ki, szerkeszthetők és törölhetők).

Ábra. Elérhető bővítmények

Új bővítményt az Új hozzáadása szövegre klikkelve tudunk hozzáadni. Ezután a bővítmény keresése kulcsszavak (használjunk angol kulcsszavakat) vagy egyéb kategória alapján történik.

Ábra. Bővítmény telepítése

Példa a WP-Polls szavazó bővítmény telepítésére:

Telepítés után a bővítményt be kell kapcsolni:

5.5. Menük

Menük készítése a Vezérlőpultból a Megjelenés menü, Menük menüpontjára klikkelve lehetséges. A menük helyét és megjelenését az alkalmazott sablon határozza meg.

Egy sablon esetén már alap létezik menü, így azt lehet módosítani (új menü pontok beszúrása stb.). Van lehetőség teljesen új menü létrehozására is, amely elkészítése a név beírása után a Menü létrehozása gombra klikkelve valósul meg.

Ábra. Menü létrehozása

A menü elemeit létrehozhatjuk a saját (külső vagy belső) linkekből, oldalainkból vagy kategóriából (Hozzáadás a menühöz gombra klikkelve).

Ábra. Menü létrehozása

A hozzáadott elemet el kell nevezni (Navigációs címke). Ez a szöveg fog megjelenni a menüben. A Cím tulajdonságok szöveg az egér a menüpontra történő mozgatása után fog megjelenni.

Ábra. Menü elem szerkesztése

Az egyes elemek szerkesztését a Menü mentése gombra klikkelve őrizzük meg. Az egyes menüpontok helyét és az elképzelt rangsorban elfoglalt helyzetét horizontális és vertikális áthúzással tudjuk módosítani.

Ábra. Menü szerkezet

Ábra. A menü szerkezet élőben

Oldal nélküli menüpont létrehozása

Általában lebomló menük legfelső menü pontjára szokták megkövetelni, hogy ne legyen link mögötte, csak az almenü-pontok esetén. Ebben az esetben egy hivatkozást kell létre hozni, amelynek az URL-je: javascript: void(0);

Ábra. Menü pont hivatkozás nélkül

6. E-commerce alapú sablonok

7. Hasznos bővítmények

1. WP Polls – szavazó

2. Event Geek – eseménynaptár

3. Facebook Like Box Widget

4. WP UserOnline – online felhasználók

5. Fast Secure Contact Form – kapcsolattartó, regisztráló űrlap

6. Contact Form DB – üzenetek kimentése adatbázisba

7. TablePress – tábla szerkesztő

8. WP Login Box – login ablak

9. Easy Image Gallery - képgaléria

10. Transposh WP Translation – oldal fordító

11. WP Translate – oldal fordító

12. qTranslate – oldal fordító

13. EasyTranslator – oldal fordító

14. WordPress Database Protect

15. TinyMCE Advanced - szerkesztés

16. cforms

17. WP Maintenance Mode – karbantartási mód beállítása