Oldalsáv, eseménynaptár widget (My Calendar bővítmény)

https://hu.wordpress.org/plugins/my-calendar/

“Sima” oldalak – kapcsolat, Hero oldal, szolgáltatások, CallToAction oldal

A sablon több helyütt is “nevesített” oldalakra – nem blogbejegyzésekre – támaszkodik. Ezeket az oldalkat az 1-es képernyő “Új” menüje alatt az “Oldal” almenü kiválasztásával, illetve a 2-es képernyőn az “Oldalak” menüpont alatt az “Új hozzáadása” gomb megnyomásával hozhatjuk létre.

A kapcsolat oldalt vegyük csak fel új oldalként! 🙂

Felhívnám a figyelmet egy apróságra. Nem tanácsos kirakni szövegként e-mail címet honlapra, mivel mindenféle robotok, rosszindulatú script-ek és programocskák automatikusan beolvashatják, és szét-spam-elhetik a leveles ládánkat! Ez komoly veszély! Én képet szoktam generálni az e-mail címből. Az alábbi webcímen ezt megtehetjük.

https://www.generateit.net/email-to-image/index.php

És akkor nézzük meg a javított oldalunkat.

Ezután kapcsoljuk be a “Top Bar-t” (“felső sávot”) a “General Settings” / “Top Bar Options” menüpont alatt a 3-as képernyőn, majd hozzunk létre egy új menüt (TopBarMenü) a “Top Menu“-ként! Ezek után a honlap tetején keletkezik egy sötét csík, benne a Kapcsolat menüponttal. 🙂 Természetesen ebben a menüben célszerű több menüpontot is felvennünk a későbbiekben.

Ezek után nézzük meg a Hero oldalt. Ez egy olyan oldal, ami a címlapon – egy egész oldalon – hirdeti, reklámozza a legfontosabb dolgokat, aktualitásokat a honlapon. Úgy állíthatunk be képet, és szöveget, hogy létrehozunk egy oldalt, címmel, és egy pár szavas tartalommal + beállítunk egy “Kiemelt képet“, majd a 3-as képernyőn kiválasztjuk a “Section: Hero” / “Hero Content” menüpont alatt a “Select a page” legördülő menüben az imént létrehozott oldalt.

A CallToAction oldalt a Hero oldalhoz hasonlóan tudjuk beállítani. Itt egy aktuális, kihagyhatatlan üzleti ajánlatot helyezhetünk el – hogy marketingesen fejezzem ki magamat. 🙂

A “Szolgáltatásaink” beállításához először hozzunk létre három új oldalt; “Szállás“, “Programok” és “Egyéb” neveken. Kiemelt kép beállítása, satöbbi. Ezeket ki fogjuk linkelni a nyitólapra szolgáltatásokként. A kiemelt képet fogja kirakni a címlapra a rendszer. 🙂

A 3-as képernyőn a “Section: Services” menüpont alatt először is átírjuk a “Section Settings” alatt a “Section Title” mezőt magyarra (Szolgáltatásaink). Ezután a “Section Content“-ben beálltjuk a három oldalunkat. Ennyi! 🙂

Megjegyzés: ez a sablon angol nyelvű. Nyilván vannak magyar nyelvű sablonok is, sőt mi is lefordíthatjuk a sablont akár. Már ha megéri. Rengeteg ingyenes sablon van, próbáljuk meg a megfelelőt kiválasztani! 🙂

Menü(k), kategóriák (taxonómia) és tag-ek vagy címkék (terms)

Blogbejegyzések, menük, kategóriák – de mindezt hogyan? A kategóriákat megfeleltethetjük menüpontoknak! Egyébként a kategóriák az október 5-ei post-ban is szereplő wp_terms és wp_term_taxonomy táblában vannak letárolva. 🙂

Először is hozzuk létre a kategóriákat. Ezt a 2-es, adminisztrátori képernyő Bejegyzés / Kategóriák menüpont alatt tehetjük meg.

Ahogy ezzel megvagyunk, hozzunk létre egy új menüt a 3-as képernyőn a Menük / Új menü létrehozása gombbal! A menü neve “Főmenü”, és “Primary menu”, azaz “Elsődleges menü”. Adjuk hozzá az öt kategóriánkat! Ennyi. A menü kész! Jobb felülre kékkel kirakta a WordPress-ünk az öt menüpontunkat. 🙂

Ha becsukjuk a szerkesztő felületet, és átváltunk az 1-es képernyőre, majd rákattintunk egy menüpontra, akkor a belső oldalaink kinézete tárul elénk. Még van azért min dolgozni, mire ebből működő honlap lesz! 🙂

Ha egy új (blog)bejegyzést készítünk, a kategória megadásával az előbb beállított menüpontok “alá” tudjuk pozícionálni a bejegyzésünket.

Vizsgáljuk még meg, hogy mire valók a tag-ek. Ezek az úgynevezett címkék. Pl. ahogy ezen a blogon, minden cikkhez rendelhetünk címkéket, és megjeleníthetjük az egészet akár egy címkefelhőben is! 🙂

Vannak alkategóriák is. Ha beállítjuk a szülő kategóriát, úgy felvehetünk alá alkategóriákat. És hogy hogyan vehetünk fel alkategóriákat almenünek? Simán! Csak beljebb kell húznunk eggyel az almenüket egérrel! 🙂

És a kinézete. 🙂

Sablonok (template-ek), a webszerkesztés alapjai, mobilbarát WordPress

Mostanában, hogy WordPress-szel kezdtem honlapokat gyártani, több ingyenes sablont is kipróbáltam, és használok is a mai napig. Emlékszem, hogy 20 éve is már külön “generáltuk” a fejlécet és a láblécet. Ma még részletesebb lett a kép, de a lényeg aligha változott.

Az általánosan használt “layout“, azaz elrendezés az alábbi ábrán látható. A fejléc általában valami háttérképet és címfeliratot tartalmaz. A láblécben a copyright infó kerül, illetve az impresszum vagy egyéb linkek. A menüsor önmagáért beszél, nem részletezem. Beszélhetünk még a jobb oldali oldalsávról (sidebar) – ez lehet két oldalas is, esetleg baloldali. Ebben az oldalsávban vannak a widgetek. Mindenféle egyéb tartalmi elem; keresés, népszerű oldalak, friss hírek, etc. Ide kerülhetnek be bizonyos bővítmények (plugin-ok) is, pl. a “my calendar” eseménynaptár widget is. Végül, de nem utolsó sorban a WordPress alapvetően blog-oldalakhoz lett kitalálva – noha tud akár webshop-ot is -, ezért a tartalom részbe a bejegyzések (a post-ok) kerülnek. 🙂

Hegypásztor oldalunknak megfelelő sablont kell válasszunk a sok-sok lehetőség közül. Az adminisztrátori (2-es) vagy a szerkesztői (3-as) oldalon találunk menüpontot az alapbeállítású sablon (Twenty Nineteen) lecserélésére.

Rákerestem az “Új hozzáadása”, “Sablonok keresése” alatt a “sidebar” kifejezésre, majd kiszúrtam egy “Coality” nevű sablont, ami akár jó is lehet.

Ennek a sablonnak van egy “Elixar” nevű szülő sablonja. Mindkettő ingyenes, GNU (General Public License v3) licensszel rendelkezik, tehát szabadon másolható és módosítható is. 🙂 Ráadásul jó desktop gépre, tablet-re és okostelefonra is!

Telepíteni nem triviális. Mindkettő “.zip” archívját le kell tölteni, és három dologra kell odafigyelni. A “wp-content/themes” könyvtár alá kell bemásolni őket.

  1. A szülő téma style.css-ében hogy van a téma név? “Theme Name: Elixar” – kis és nagybetű számít!
  2. A gyerek téma könyvtárneve szülő-gyerek formában kell legyen a “themes” könyvtárban!
  3. Mi van a gyerek téma style.css fejlécében (“Template: Elixar”)? Pont úgy kell elnevezni a szülő téma könyvtárát!

Beidézem a vonatkozó könyvtárlistát. 🙂

gvamosi@gergo1:/var/www/html/hegypasztor/wp-content/themes$ l
total 4644
-rw-r--r-- 1 gvamosi gvamosi 1085129 Oct 9 05:10 coality.1.0.5.zip
drwxr-xr-x 10 gvamosi gvamosi 4096 Sep 24 11:54 Elixar
-rw-r--r-- 1 gvamosi gvamosi 3641465 Oct 9 05:11 elixar.2.8.zip
drwxr-xr-x 7 gvamosi gvamosi 4096 Sep 16 13:02 Elixar-Coality
-rw-r--r-- 1 gvamosi gvamosi 28 Jun 5 2014 index.php
drwxr-xr-x 8 gvamosi gvamosi 4096 Sep 5 11:36 twentynineteen
drwxr-xr-x 5 gvamosi gvamosi 4096 Sep 5 11:36 twentyseventeen
drwxr-xr-x 7 gvamosi gvamosi 4096 Sep 5 11:36 twentysixteen

Innentől már csak be kell kapcsolnunk a Coality témát az adminfelületen. 🙂

WordPress honlap szerkesztése, szerkesztési “utak”

Új honlapunkat összesen három különböző felületen lehet szerkeszteni.

1. Egyes képernyő, maga a honlap, szerkesztési lehetőségekkel az oldalon, illetve a felső menüsorban – http://localhost/hegypasztor/.

  • az 1-es képernyő elérhető a 2-es képernyőről: Vezérlőpult menüpont, Tekintsük meg a honlapot link, illetve bal felül Hegypásztor Kör Oszkó

2. Kettes képernyő, az adminisztrátori felület, innen minden módosítható, és itt lehet “bejelentkezni” is honlap tulajdonosként – http://localhost/hegypasztor/wp-admin/.

  • a 2-es képernyő elérhető az 1-es képernyőről: bal felül Hegypásztor Kör Oszkó

3. Hármas képernyő, ez az amit szerkesztel-látod szerkesztői felület, itt változtatható a grafikai sablon – azaz az oldal kinézete -, szerkeszthetőek a fejléc, a menü, a blog oldal címfelirata, az oldalsáv és a lábrész – http://localhost/hegypasztor/wp-admin/customize.php.

  • a 3-as elérhető az 2-es képernyőről: Vezérlőpult menüpont, A honlap testreszabása gomb
  • a 3-as elérhető az egyes képernyőről is: Testreszabás menüpont
  • a 3-as képernyő bal felső X-re kattintva bezárható, és vissza tudunk jutni a kiinduló képernyőre, ez lehet az 1-es ill. a 2-es is 🙂

Tipikus szerkesztési folyamatok a következőek:

  • Sablon módosítása, a kinézet “belövése” – ez a 3-as képernyőn a “Bekapcsolt sablon” – “Váltás” gombbal, illetve ugyanide jutunk a 2-es képernyőn a “Megjelenés” menüpont alól
  • Új bejegyzés, média (pl. fénykép), illetve oldal – ez elérhető mind az 1-es, mind a 2-es képernyőkről – az 1-es képernyő felső menüsávja shortcut-okat tartalmaz a 2-es képernyő megfelelő menüpontjaihoz
  • Egyéb tartalmak (fejléc, menü, widgetek az oldalsávban vagy a lábrészben, lábrész) szerkesztése a 3-as képernyő megfelelő menüpontjai alatt elérhetőek

Mit értünk webprogramozás, webfejlesztés alatt

A 21. századra rárobbant az információs kor. A World Wide Web, azaz a WWW kora, az Internet multimédia-tartalommal bíró kommunikációs csatornája, a kiszolgáló oldali (web)szerverek – ez volna az Apache vagy az nginx -, és a kliens oldali böngészők – Chrome, Firefox, Edge – kommunikációjaként előálló interakció. Az egész Internet lényegében tekinthető egy online adatfeldolgozó, -tároló és -továbbító rendszernek. Ezért fontos beszélni az adatok tárolására és feldolgozására szolgáló többnyire SQL alapú adatbázis szerverekről is – ezek a MySQL vagy a MariaDB -, illetve a szerver oldali adatfeldolgozó script-ekről, azaz webszerverbe ágyazott szoftverrendszerekről is, melyek sok esetben Perl és PHP nyelveken íródnak. Fontos még említeni a kliens oldal legütősebb script-nyelvét, a JavaScript-et. Legismertebb képviselője a széles körben elterjedt JavaScript könyvtár, a jQuery (https://jquery.com). Az adatok továbbítása valójában a hálózaton keresztül valósul meg, mindig kliens-szerver kommunikációban – lévén ugyanis a szerver egyszerre több klienst is kiszolgál, továbbá a szerverek egymással is tudnak beszélgetni, de adott esetben egy kliens is egyszerre több szerverhez kapcsolódhat. 🙂 Jelen írás a fentiekben leírtak bemutatásával szeretne foglalkozni.

A webfejlesztés tehát minden esetben egy szoftver-rendszerben történik. Egy jó kiindulási szoftver környezet található az alábbi linken.

https://www.apachefriends.org/hu/index.html

Ebben az írásomban szeretném az operációs rendszer, az adatbázis szerver, a webszerver és a kliens oldal összhangját három esettanulmányon keresztül bemutatni. Egyébként a fenti link alatt található XAMPP-ot hívják még LAMP-nak is. Szinte mindegy, hogy melyik variánst vesszük, ugyanaz az eredmény. 🙂 Ez az architektúra (szoftverépítészeti megoldás) igen elterjedt és nagy népszerűségnek örvend, többek között a nem enterprise (nem nagyvállalati vagy nagy volumenű üzleti) felhasználási területen.

https://hu.wikipedia.org/wiki/LAMP_(szoftvercsomag)

Megjegyezném, hogy ezen technológiák ismerete enterprise megoldások kiindulási pontja lehet, illetve hogy nagy dolgokat is meg lehet a segítségükkel valósítani. 🙂

A három esettanulmány – három rész – rendre a következők lesznek:

  1. A nyílt forráskódú, PHP-ban írt WordPress (https://hu.wordpress.org/), weboldalak, blogok és egyéb webes alkalmazások motorjának bemutatása egy webalkalmazáson keresztül.
  2. A nyílt forráskódú CodeIgniter (http://codeigniter.hu/) PHP keretrendszer megismertetése egy webalkalmazáson keresztül. Ez a keretrendszer a letisztult MVC (Model – View – Controller) programtervezési mintát (Design Patterns) követi.
  3. Harmadikként pedig a 30 éve folyamatosan fejlesztett Perl nyelven fogunk webalkalmazást, azon belül is klasszikus CGI-t (Common Gateway Interface https://hu.wikipedia.org/wiki/Common_Gateway_Interface) illetve FastCGI-t írni. 🙂

Végül lássuk egy szemléltető diagramon az MVC pattern-t. A lényege, hogy mindent a Controller (vezérlő) végez, a modellváltoztatást is, és a felhasználó nézetének változtatását is. 🙂