Oldalsáv (sidebar) alapok

A Coality sablonunkban ugyan nem a címlapon, de van lehetőség aloldalakon oldalsáv megjelenítésére. Ezt úgy is nevezik a WordPress terminológiában, hogy Widget-ek. A kettes képernyőn a Megjelenés / Widgetek menüpont alatt vagy a hármas képernyőn wysiwyg szerkeszthetjük.

A Testreszabás / General Settings / Page Options alatt jelölhetjük ki, hogy right vagy left vagy hogy egyáltalán léegyen-e sidebar.

Alap esetben az alábbi widgetek, azaz elemek közül választhatunk.

Van itt lehetőség kép, szövegrész, videók beágyazására, egyéni HTML-re, azaz weblap tartalomra, de van legutóbbi bejegyzések, hozzászólások, kategóriák illetve akár címkefelhő is. Ez a widget oszlop minden aloldalunk jobb oldalán fog látszani.

Helyezzünk el egy címkefelhőt a widgetek között! Drag’n’drop (húzd és dobd, értsd: egérrel) működik és a megjelenési sorrendet is megszabhatjuk. 🙂

Osztályozásnak a kategóriákat állítom be, mivel címkéink (azaz tag-ek) még nincsenek a weboldalon. Láthatjuk az oldalon egy mentés / frissítés után az eredményt! 🙂

Ebben a sablonban lehetőség van még négy lábléc (footer) widget-terület megadására is, ezt most nem részletezem. Nézzük a kész oldal widgeteit! 🙂

Láthatók a legutóbbi bejegyzések is, illetve az archívum is.

Továbbá a kategóriák, amely most megegyezik a címkéinkkkel.

A blog tartalom

A blog tartalom a voltaképpeni weblap tartalommal megegyezik. Blog bejegyzések különböző kategóriák alá – ezel különböző menüpontok alá – tartozó halmaza a tulajdonképpeni “hálózatos” honlaptartalom.

Új blogbejegyzést legegyszerűbben – miután beléptünk adminisztrátorként a http://localhost/hegypasztor/wp-admin/ webcímen – a https://wlammpp.wordpress.com/2019/10/07/wordpress-honlap-szerkesztese-szerkesztesi-utak/ írásomban az egyes képernyőn a felső menüsorban vehetünk fel.

Ezután a megjelenő wysiwyg – what you see is what you get – szerkesztőben felvesszük a példa kedvéért a Kezdeményezések menüpont három almenüjébe – alkategóriájába – tartozó három bejegyzésünket. Ezek: Saját / Hazai / Nemzetközi kezdeményezések.

Látható, hogy a konkrét példában a jobb szélső blokkban bejelöljük a kategóriát. Ott a kipipált checkbox. Így járunk el mind a három oldalnál.

Látható az alábbi képernyőkivágáson a három blogbejegyzésünkből kettő a megfelelő menüpont alatt.

Így a “Kezdeményezések” menü alatt három új bejegyzés fog szerepelni, míg a három almenüpontja alatt egy-egy bejegyzés.

A nyitóoldalon azt angol eredetit átnevezzük “Legfrissebb bejegyzések”-re a hármas képernyő wysiwyg szerkesztőjében. Itt még számos egyéb paramétert is beállíthatunk, mint például a megjelenő bejegyzések számát, ami jelenleg három.

És akkor vessünk a nyitóképernyőnk alsó részére egy pillantást! Itt találjuk mind a három új bejegyzésünket egy-egy rövid szövegkiemeléssel.

Ennyire egyszerű weboldalat felépíteni WordPress-ben! 🙂

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 (angolul: wysiwyg – what you see is what you get), 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, hova tovább mod_perl Apache beépülő modul (https://en.wikipedia.org/wiki/Mod_perl) alkalmazást. 🙂

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