“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

Webcím: URL-képzés, Apache document root, keresőbarát URL, HTTP GET és POST metódusok

Az URL (Uniform Resource Locator), mint URI (Uniform Resource Identifier, egységes erőforrás-azonosító) többnyire szinonímája a webcímnek, holott valójában nem csak webcímet jelöl. Tény azonban az, hogy webcímként az ún. namespace-ben (névtér) egyedileg azonosít az egész világhálón egy helyet. 🙂

https://hu.wikipedia.org/wiki/URL

https://hu.wikipedia.org/wiki/URI

URL-ek, a teljesség igénye nélkül:

  1. http://dummy.restapiexample.com/ – ez már kacsintás a REST (Representational State Transfer) témakörbe, egy “sima” HTTP (HyperText Transfer Protocol) webcím, a 80-as porttal kommunikál (így is működik: http://dummy.restapiexample.com:80/)
  2. https://hu.wikipedia.org/wiki/REST – ez egy napjainkra elterjedt biztonságos (HTTPS) webcím (alternatívája a https://hu.wikipedia.org:443/wiki/REST – a portszámot elhagyjuk a gyakorlatban)
  3. ftp://ftp4.de.freesbie.org/pub/linux/metalab/system/emulators/wine – ez egy klasszikus FTP (File Transfer Protocol) cím, szintén kódolatlan, tökéletes file-ok letöltéséhez, és a böngészőnkbe is simán beírható! 🙂 Részletek: https://hu.wikipedia.org/wiki/File_Transfer_Protocol
  4. és akkor a végére egy érdekesség az Internet múltjából – a Gopher -, ilyen is van: http://gopher.quux.org:70/ – natív címen: gopher://gopher.quux.org/1/ – persze ezt már a Chrome böngészőm sem ismeri 🙂

Akkor mostanra kezdjük érteni a cím előtagját és a portszámot. Mit lehet még belefoglalni egy URL-be? Lehet benne pl. felhasználónév és jelszó is! Pl. “ftp://felhasznalonev:jelszo@szervern.ev/konyvtar1/konyvtar2/“. Aztán megnézhetjük a szervernév utáni törtvonal (“/” – perjel) határolta részeket. Ezek egy alap Linux rendszerben az ún. Document root – web gyökér – könyvtárunkban sima könyvtárnevek a filerendszerben. 🙂 Az Apache webszerverünk fordítja át a külvilág felé webes tartalommá. Egy ilyen könyvtárban kérhetjük a szerverünket egy automatikus index oldal megjelenítésére, de az nem túl biztonságos. Általában egy index.php (dinamikus script) vagy index.html (többnyire statikus adat) file kell legyen minden ilyen publikus könyvtárban, hogy az Interneten is megjelenhessen a tartalma. Amit index.html file-ba teszünk azt a sima “/” cím alatt láthatjuk. Tehát ha az Apache Document root-unk “/var/www/html“, a hosztnevünk nextweb.hu, akkor a “/var/www/html/index.html” file az Interneten a böngészőnkben a http://nextweb.hu/ cím alatt látszódik. Megjegyzem, hogy a záró törtvonal a webcím végén nem fontos. 🙂

Szólnunk kell a speciális (pl. magyar ékezetes) karakterek sorsáról URL-ben. Ugyanis nem lehetnek benne igazán az ún. ASCII karaktereken kívül mások. A ” “, space – üres – karaktert pl. “+” jellel vagy “%20”-ként lehet kódolni. Részletesebben az alábbi link alatt olvashatunk erről.

https://www.w3schools.com/tags/ref_urlencode.asp

Fontos lehet a DNS-ről korábban írtak (https://gvamosi.wordpress.com/2019/09/21/ethernet-bridging-switching-routing-es-a-linux-router-tablaja/) figyelembevételével az ún. virtuális hoszting témaköre. Egy feloldott IP-cím “alatt” több szervernév is van a gyakorlatban. Az Apache webszerverrel ezt ún. virtuális szerverek, hosztok (VirtualHost) konfigurálásával és futtatásával oldhatjuk meg. Így lehetséges egy webtárhely szolgáltatónál több webcím regisztrálása és kiszolgálása! Mielőtt azonban ISP-t (Internet Service Provider, azaz Internetszolgáltató) gründolnánk a lakásunkban, elmondanám, hogy azért ahhoz kissé több kell egy PC-nél (cluster-be, fürtbe kapcsolt számítógépek, terhelés-elosztás, azaz load balancing, RAID – redundáns, hibajavító-tűrő módon felépített háttértártömbök, etc.) 🙂

Visszatérve az URL-ekhez. Az URL-ekben, ahogy pl. egy google keresésben láthatjuk, kulcs-érték párokat is “átadhatunk” a szerver oldali programocskánknak (URL-ben lévő paraméterek a GET metódussal jutnak el a szerver oldalra): https://www.google.com/search?q=alma&oq=alma. Itt a “q” értéke “alma”, az “oq” értéke szintén “alma”. Így rákereshetünk a világ legjobb és legnagyobb keresőjében az “alma” kifejezésre. Elég csak a “q”-t megadni, de akkor nem láthattuk volna, hogy a “&” jel a kulcs-érték párok elválasztására való, míg ezeket a “?” választja el az URL első részétől. Na ez a nem keresőbarát. 😀 A google keresőmotorja nem keresőbarát. Persze minek is lenne az! 😀 A keresőbarát jóval közelebb áll a REST megközelítéshez. Világos, könyvtár-szerű, beszédes nevekkel ellátott URL-ek. Pl. ha ID kell bele, akkor nemakarmi.php?id=111“, hanem “/akarmi/111“. A keresők a web feltérképezéséhez ún. robotokat használnak, automatikus programokat – ugyanúgy, akár az ember egy böngészőben, csak egy robot tölti le, és indexeli az oldalt. Amennyiben értelmes kifejezések vannak már magában az URL-ben is, úgy máris eggyel jobb helyen vagyunk a találati listán, mivel a keresők kulcsszónak fogják venni az URL-ben találtakat is! A WordPress rendszerünk szerencsénkre keresőbarát, “beszédesURL-eket használ, ráadásul ún. “permalink“-eket is. Hiszen az is fontos, hogy fél év múlva is megtalálható legyen egy októberi írás, tehát legyen rá egy “permalink“, azaz egy állandó – és beszédeshivatkozás. 🙂

Ide beszúrom – csak az érdekesség kedvéért egy kacsintás az enterprise világába -, hogy a REST HTTP szoftverarchitektúra témaköréhez tartozik a hozzá hasonlóan felépített ún. “RESTful Web services” is. Csupán hogy valamit írhassak a Webszolgáltatásokról (Webservice). 😀

Végül nézzük meg a leggyakoribb HTTP metódusokat, a GET és a POST témákat. A GET-ről írtam a google kereső URL megadásánál. Az nagyjából ennyi. A POST metódussal webes formokat, vagyis ürlapokat küldhetünk el a szervernek, ahol ezek a GET metódussal kapott kulcs-érték párokhoz hasonlóan feldolgozásra kerülnek. Egy file feltöltés pl. tipikusan POST metódussal történik. Bővebben az alábbi linkeken tájékozódhatunk. 🙂

https://hu.wikipedia.org/wiki/HTTP

https://stackoverflow.com/questions/8659808/how-does-http-file-upload-work