Amennyiben egy tárhelyszolgáltatónál vagyunk vagy vesszük a fáradságot beállítani a dolgokat, úgy pár kattintással is telepíthetjük a widget-et. A kettes adminisztrátori képernyőn a Bővítmények / Új hozzáadása menüpont alól indul a telepítés.
Keresősztringnek a calendar-t adom meg.
Innen a “Telepítés most” gombra kattintva telepíthető.
Nem bajlódom a telepítéssel, helyette hoznék egy élő oldalról működő naptárat. A http://szombathelyigorogkatolikus.hu oldalon található felprogramozott és karbantartott naptár widge, illetve bővítmény működés közben, a különböző egyházi liturgikus eseményekkel feltöltve. Lássuk! 🙂
Ahogy telepítettük, beépül a bővítmény a megfelelő helyekre az adminisztrátori képernyőn. Innen felvehetünk naptár-eseményt, illetve mindenféle beállítást elvégezhetünk a naptárunkon. 🙂
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 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.
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! 🙂
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.
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 szekciót. A címlapon, azaz a nyitólapon mozgunk. A Hero oldal annak egy szekciója: 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 szekció oldalát 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! 🙂
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! 🙂
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 aloldali “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” (oldalsáv, azaz oldalsávot tartalmaz) 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.
A szülő téma style.css-ében hogy van a téma név? “Theme Name: Elixar” – kis és nagybetű számít!
A gyerek téma könyvtárneve szülő-gyerek formában kell legyen a “themes” könyvtárban!
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!
Innentől már csak be kell kapcsolnunk a Coality témát az adminfelületen. 🙂
Megjegyzés: általában igaz, ahogy erre a szabadon választott sablonra is, hogy van egy “nyitóképernyő” és az “blog aloldalak”. Beállítható – és ez nagyon gyakori, most mégse tesszük – hogy a blog aloldalak közül az index oldal legyen a nyitóoldal maga. Esetünkben marad a külön exponált nyitólap a maga sajátosságaival, amit a következő részekben szemléltetek.
Az alábbi checkbox-szal állíthatjuk be a Coality sablon nyitóoldal használatát a hármas képernyő wysiwyg szerkesztőjében.
Nézzük meg, hogy mit takar a sablonunk mobilbarátsága. Vegyük az alábbi részt a /var/www/html/hegypasztor/wp-content/themes/Elixar-Coality/css/coality-rtl.css file-ból.
@media only screen and (max-width:1023px){
#mobile-trigger-quick{text-align:left;padding-left:25px;}
.e-contact-right-head{float:right;margin-right:0;}
a#mobile-trigger{float:right;padding-right:25px;}
.sidr-main-opena#mobile-trigger{padding-right:278px;}
.sidr-quick-open #mobile-trigger-quick{padding-left:278px;}
.mobile-nav-wrap{right:0;}
#mobile-trigger i{margin-left:15px;}
.sidr ul li ul li a,.sidr ul li ul li span{padding-right:30px;}
#mobile-trigger-quick i{margin-right:15px;}
a#mobile-trigger-quick{float:left;}
}
Látható, hogy ha a képernyő mérete 1023 pixel alá csökken, átrendeződik az egész oldal. Legfelülre ún. hamburgermenük kerülnek, továbbá minden elem a nyitólapon és az aloldalakon is “egymás alá” kerül. Tehát tablet-en és mobilon más képet fog mutatni az oldalunk, ezzel együtt mobilbarát a kinézete. 🙂
Ú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
Apache, MySQL/MariaDB, Perl/PHP 