Domači spletni mojster

Pred mesecem dni smo si ogledali, kako postaviti lasten spletni strežnik, zdaj pa je napočil čas, da se naučimo izdelovati preproste spletne strani. Zopet bomo za delo uporabili Maca in vanj naložili vsa potrebna orodja, ki nam bodo omogočila tako izdelovanje kot testiranje naslednje spletne umetnine.

S sistemom CMS je v kratkem času moč izdelati sodobno spletno stran profesionalnega videza.

Pred leti je bila izdelava spletne strani stvar profesionalcev, ki so za resnejše izdelke potrebovali posebno programsko znanje. Delo je terjalo veliko časa, zato so morali naročniki poslovnih spletišč na široko razvezati mošnjiček. Danes lahko odlično in zmogljivo spletno stran s sistemom CMS naredi vsakdo. Sistemi za urejanje spletnih vsebin so brezplačni, zmogljivi, prilagodljivi, razširljivi in ponavadi prevedeni v domač jezik, tudi v slovenščino. Ker bi radi ustvarjanje spletnih strani približali čim širšemu krogu ljudi, bomo v Maca namestili WordPress.

WordPress je odprtokodni sistem, ki uporabnikom omogoča postavitev in urejanje spletne strani. Nastal je leta 2003 kot pripomoček za ustvarjalce spletnih dnevnikov. Čeprav je odrasel v veliko več kot CMS za bloge, je to funkcionalnost obdržal do danes. WordPress je svetovno znana in najbolj priljubljena platforma, ki poganja četrtino vseh spletišč na svetu, s številnimi profesionalnimi izdelki vred. Osnovna funkcionalnost sistema CMS WordPress je brezplačna, nabor zmožnosti zavidljiv. Po potrebi ga razširimo s tako imenovanimi vtičniki (Plugin), ki nam odprejo popolnoma nov svet, saj praktično ni zmogljivosti, ki je ne bi mogli dodati. Med vtičniki najdemo dodatke, ki nam omogočijo dodajanje raznih kontaktnih obrazcev, prikaznih oken, drsnikov, gumbov za deljenje vsebin v družabnih omrežjih, sistemov za plačevanje ali rezervacije, pošiljanje elektronske pošte in še kaj. Možnosti je veliko, edina prava omejitev je domišljija razvijalcev. Podobno je z grafično podobo. Uporabnikom je na voljo veliko vnaprej pripravljenih predlog (Template), s katerimi v hipu spremenimo videz našega spletišča. Tako pri predlogah kot vtičnikih velja, da jih je veliko na voljo zastonj, a je za naprednejše običajno treba plačati.

WordPress je razvoj spletnih strani približal vsakomur, ki za lastno spletišče ne potrebuje drugega kot minimalen vložek v podobi registracije domene in spletnega gostovanja ter malo truda s študiranjem številnih priročnikov o delu z najbolj razširjenim sistemom CMS na svetu. Izdelave spletne strani se tako zlahka loti povsem običajen človek in ne zgolj eden izmed posebnežev, ki imajo osebnostne lastnosti spletnih mojstrov iz devetdesetih let, ki so spletišča kovali še v jeziku HTML. Čas je, da se sodobnim spletnim mojstrom pridružimo tudi sami.

Aplikacijo MAMP za Applove računalnike z operacijskim sistemom macOS sestavljajo spletni strežnik Apache, baza podatkov MySQL in programski jezik PHP, v katerem je spesnjen tudi WordPress.

Jabolčno testno okolje

WordPress uporablja na milijone ljudi, zato mnogi izmed njih prej ali slej pokukajo v ozadje sistema, popravijo tu in tam kaj v kodi ter prilagodijo delovanje nastajajočega spletišča svojim željam. Težava nastopi, ko zaradi neprevidnosti pri eksperimentiranju odpove celotna spletna stran. Rešitev je raba testnega okolja, na Macu nam ga pomaga ustvariti brezplačna aplikacija MAMP. Slednja uporabniku omogoča krajevni razvoj spletnih vsebin, urejanje in uporabo spletišča v simuliranem spletnem okolju brez potrebe po povezavi z internetom. Kratica v imenu aplikacije MAMP predstavlja njene štiri osnovne gradnike, Applov računalnik Mac z operacijskim sistemom macOS, odprtokodni spletni strežnik Apache, najbolj razširjeno zbirko podatkov na svetu, MySQL, in programski jezik PHP, v katerem je spisan WordPress. Vse štiri komponente sestavljajo krajevni spletni strežnik, s katerim lahko učinkovito testiramo spletne strani, ne da bi jih poprej zares objavili v internetu.

Spletne strani živijo v strežnikih po vsem svetu, ki so programirani tako, da nam ob posamezni zahtevi postrežejo želeno vsebino. Vsakič, ko obiščemo določeno spletno stran, jo strežnik iz baze pošlje v okno krajevnega spletnega brskalnika. Naši računalniki niso strežniki, saj praviloma niso povezani neposredno v splet, temveč jim internet zagotavlja izbrani ponudnik. Ker je MAMP nameščen v krajevnem računalniku, lahko vsebino vidimo samo mi. Naveza štirih gradnikov seveda omogoča tudi razdajanje vsebin zunanjim obiskovalcem, a za potrebe našega članka je dovolj, če vemo, da bomo pri izdelovanju strani, dodajanju novih zmožnosti, spreminjanju funkcionalnosti in drugih, za celovitost spletišča potencialno nevarnih postopkih privzeto sami. Ko je (zares) preprosta namestitev skupka programov MAMP končana, v okolje dodamo kopijo urejevalnika vsebin WordPress.

Spletni dnevnik za vse

S spletne strani WordPress.org prenesemo zadnjo kopijo programske opreme WordPress, po želji si omislimo prevedeno različico v slovenščini, nato v raziskovalcu Finder odpremo imenik z imenom uporabnika sistema macOS in v njem ustvarimo mapo Sites. Na področju Sites ustvarimo mapo WordPress in vanjo prepišemo datoteko ZIP z namestitvijo izbrane različice CMSa, nato med aplikacijami Applications poiščemo poprej nameščeni MAMP in ga zaženemo. Na pozdravnem zaslonu izberemo gumb Preferences, se pomaknemo na zavihek Ports in po želji spremenimo vhodna vrata za splet in zbirko podatkov na 80 in 3306. Sami nismo komplicirali in smo vrednosti pustili na privzetih višinah (8888 in 8889).

Priporočljivo je, da krajevnemu disku določimo območje, kjer bodo prebivale vse spletne strani v nastajanju. Prvi, ki mu povemo za skrito mesto, je spletni strežnik Apache.

V naslednjem koraku nastavimo področje, kjer bodo v krajevnem strežniku prebivale spletne strani, izberemo zavihek Web Server, se prepričamo, da je označen strežnik Apache in programu pokažemo pot do poprej ustvarjenega uporabniškega imenika Sites/WordPress. Po pritisku na gumb OK bo MAMP ostal nameščen na prvotnem mestu, spremenilo se bo zgolj področje, kjer bo iskal spretno vsebino. Če smo pravilno sledili navodilom, se bosta ob izbiri akcije Start Servers obarvala gumba Apache Server in MySQL Server in se odprla spletna stran s trenutno sestavo strežnikov, če se ne, pa jo ročno zaženemo z gumbom Open WebStart page. Pripravljeni smo na namestitev krajevne kopije sistema CMS WordPress.

Preden zaženemo namestitveno datoteko in WordPressu najdemo nov dom, moramo pripraviti vse potrebno za dostojno dobrodošlico. Slednja je dokaj odvisna od zbirke podatkov. Vsa spletišča, ustvarjena s platformo WordPress, uporabljajo odprtokodno zbirko MySQL, v nasprotnem primeru za izdelavo preproste statične strani zbirke ne potrebujemo. Pri delu z WordPressom nam zbirk ni treba razumeti do potankosti, vedeti moramo le, da se vanje shranjuje vsebina spletnih strani in aplikacij, uporabniška imena, besedila objav, komentarji, slike in drugo. Zbirko s skupkom programov MAMP nastavljamo z aplikacijo phpMyAdmin, do katere pridemo tako, da poljubni spletni brskalnik usmerimo na naslov localhost:8888/phpMyAdmin/. Na srečo je vmesnik phpMyAdmin poslovenjen, tako da bo delo z njim povprečnemu Slovencu lažje. Novo zbirko ustvarimo tako, da izberemo zavihek Zbirke podatkov, v polje Ustvari zbirko podatkov vpišemo ime, ki naj bo v povezavi z nastajajočim spletiščem, da se bomo v primeru kasnejše gneče znali orientirati, in namero potrdimo z gumbom Ustvari.

Zbirko podatkov MySQL nam pomaga držati na vajetih upraviteljski pripomoček phpMyAdmin.

Ko je zbirka podatkov pripravljena za WordPress, se lotimo namestitvene datoteke, ki ždi v uporabniškem imeniku Sites/WordPress v obliki ZIP. Datoteko z dvoklikom najprej razširimo, nato imenik wordpress preimenujemo skladno z ustvarjeno zbirko. Znotraj imenika poiščemo datoteko wp-config-sample.php, jo odpremo v poljubnem urejevalniku besedila in popravimo vnos database_name_here na ime zbirke, ustvarjene v aplikaciji phpMyAdmin. Poleg imena zamenjamo še vnosa username_here in password_here s privzetim uporabniškim imenom in geslom zbirke podatkov, ki se glasi root, datoteko wp-config-sample.php shranimo in preimenujemo v wp-config.php.

Namestitev zaženemo tako, da brskalnik usmerimo na naslov localhost:8888/ime_spletišča (v našem primeru s slik je to teniskamp). Če smo vse opravili skladno z navodili, nas pričaka slovita petminutna namestitev, kjer je najpomembnejša naloga, da si izberemo poljubno uporabniško ime in čim varnejše geslo za dostop do nadzorne plošče sistema WordPress. Takoj po namestitvi obiščemo naslov localhost:8888/teniskamp/wp-admin/, kjer je teniskamp ime našega spletišča in kjer poslej prebiva nadzorna plošča, v kateri bomo preživeli levji delež spletnega razvijanja.

Če smo dosledno sledili navodilom, nas na krajevnem naslovu localhost:8888/ime_spletišča čaka slovita petminutna namestitev sistema CMS WordPress.

Nujni prvi koraki

V testnem okolju se dobesedno lahko izživljamo, delujočo stran shranimo na varno mesto, kopiji pa po želji spremenimo vsak delček kode. Ko smo z izdelkom zadovoljni, ga delimo s svetom. Preden spletno stran, narejeno s platformo WordPress, objavimo v živo, je priporočljivih nekaj sprememb, na katere začetniki navadno pozabijo. Privzeto uporabniško ime v sistemu WordPress je admin. Če ga ne spremenimo, olajšamo delo nepridipravom, ki ob pomoči naše neprevidnosti lažje vdrejo v spletišče. Z uporabo raznih programskih pripomočkov preizkušajo najrazličnejša gesla v kombinaciji s privzetim uporabniškim imenom, dokler se jim enkrat ne posreči. Zatrimo njihove ideje v kali in zaprimo vhodna vrata s spremembo privzetega uporabniškega imena! Podobno priporočljivo je spremeniti tudi slogan spletišča, ki ga najdemo v nastavitvah WordPressa Nastavitve/Splošne nastavitve/Slogan in se uporablja za kratek opis spletne strani. Če vrednost te nastavitve pustimo nespremenjeno, bo Google pri indeksiranju strani upošteval privzeto sporočilo, ki se glasi Še eno spletišče WordPress/Moj WordPress blog.

Po namestitvi WordPressa se na spletni strani prikaže vzorčna vsebina (Sample Page, Sample Post). Čeprav jo med ustvarjanjem spletne strani skrijemo, to ni dovolj. Če vzorčne vsebine ne izbrišemo, jo najdejo spletni pajki iskalnikov, to pa slabo vpliva na uvrščenost spletišča med rezultati iskanj. Vzorčno vsebino najdemo v upraviteljskem delu WordPressa med Prispevki (Posts) in Stranmi (Pages). Prepoznavnost spletne strani razširimo z uporabo ikone favicon. Gre za majhno sličico ob naslovu spletne strani na vrhu brskalnika. Favicon spletišču na platformi WordPress dodamo z nastavitvijo Videz/Prilagodi/Identiteta spletišča/Ikona spletišča. Del optimizacije spletne strani je struktura trajnih povezav. V osnovi ima WordPress trajne povezave vezane na ID prispevka oziroma strani, to pa ni prijazno ne do obiskovalcev ne do spletnih pajkov iskalnikov, ki pri razvrščanju iskalnih rezultatov upoštevajo tudi strukturo povezav. V nastavitvah Nastavitve/Trajne povezave/Struktura po meri zato vnesemo vrednost /%postname% in težavo nemudoma odpravimo.

Grafične predloge so velika prednost sistema CMS WordPress, saj z njimi v hipu spremenimo videz spletišča. Na voljo je veliko brezplačnih predlog, ki za običajne potrebe povsem zadostujejo, veliko pa je plačljivih. Z njimi bo stran videti še bolj profesionalno. Žal se pod krinko predlog v WordPressu na stran hitro pretihotapijo zlikovci, ki naše spletišče zlorabijo za širjenje zlonamernih povezav. Da bi bili pred njimi varni, uporabljamo zgolj preverjene grafične predloge in si plačljivih ne omislimo ob pomoči priljubljenih torrentov. Pri izbiranju grafične predloge si nujno ogledamo demo različico z dodanimi vzorčnimi vsebinami, slikami in drugimi elementi, saj bomo tako najlaže in najhitreje videli, kaj vse nam predloga omogoča.

Preden spletno stran iz testnega okolja na Macu predstavimo v živo, je med drugim priporočljivo prečesati nadzorno ploščo sistema WordPress za ostanki vzorčne vsebine.

Med pomembnejšimi stvarmi pri vzdrževanju lastnega spletišča je komunikacija z obiskovalci. Večina grafičnih predlog poskrbi zanjo s preprostim navajanjem stika v obliki elektronskega naslova ali telefonske številke. Številni uporabniki WordPressa mislijo, da je to dovolj. Ker je za WordPress na voljo precej brezplačnih vtičnikov, ki omogočajo enostavno umeščanje kontaktnega obrazca na stran, je takšno ravnanje nesprejemljivo. Marsikomu se ne ljubi iskati elektronskega naslova in odpirati programa za elektronsko pošto, veliko lažje mu je poslati sporočilo prek obrazca na strani. Enako nadležen je obisk počasne spletne strani, na kateri mrgoli (prostorsko) prevelikih fotografij. Za hitrost nalaganja poskrbimo z uporabo optimiziranih slik, primernih za objavo v spletu. Poleg obiskovalcev nam bodo hvaležni iskalniki, ki se oddolžijo z višjo uvrstitvijo spletišča med zadetki iskanja. Ker so strani WordPress dinamične, se vsebina iz zbirke ustvarja sproti in prometni zamašek na strani nam lahko predstavlja tudi veliko število obiskovalcev. Povečanega obiska se lotimo s predpomnjenjem, ki omogoča izdelavo statičnih strani za hitrejše prikazovanje spletne vsebine, saj vedno vnovično generiranje celotne vsebine in ponavljajoče se izvajanje zahtevkov v zbirki podatkov ni potrebno. Predpomnjenje je zapleten postopek, ki ni za vsakogar, a se ga lahko loti vsakdo, če ima ustrezen vtičnik.

Ker je WordPress najbolj priljubljena platforma za ustvarjanje spletnih vsebin, je redna tarča spletnih kriminalcev, ki vdrejo vanj prek razpok v varnosti. Da bi bilo slednjih čim manj, moramo redno posodabljati jedro platforme, uporabljeno grafično predlogo in aktivne vtičnike. Poleg zahtevnega gesla in posodobljenih gradnikov sistem WordPress učinkovito varujejo tudi namenski vtičniki. Njihova nastavitev je vse prej kot mačji kašelj, a se v spletu najde precej uporabnih priročnikov, s katerimi si pomagamo pri nameščanju vtičnika, kakršen je Wordfence Security.