Üheleheline veebisait on see, kui kogu sisu asub ühel lehel ja menüü ei vii teistele URL-idele: klõpsamisel kerib leht sujuvalt vajaliku plokini. Ei mingeid laadimisi, ei mingeid kadunud külastajaid. Kõlab nagu see, mida vajad maandumislehe, portfoolio või visiitkaardi jaoks, eks?

Aga kui asi tegudeni jõuab, põrkab algaja kahe seina vastu. Esimene: „Ma ei oska kodeerida." Teine: „Ilmselt on vaja kalleid pluginaid." Mõlemad seinad murenevad tunni ajaga.

Sa lood täisväärtusliku ühelehelise veebisaidi WordPressis sujuva kerimise, ankurdussektsioonidega ja seda täiesti tasuta tööriistadega. Mitte ühtegi koodirida.

Kui eelistad lugemise asemel vaadata, siis siin on visuaalne läbikäik installimisest kuni avaldamiseni:

💡 Kiire ülevaade:

• Paigalda XAMPP, kohalik server WordPressi testimiseks oma arvutis
• Rakenda WordPress kohalikus masinas phpMyAdmini ja wp-config.php redigeerimise kaudu
• Vali ühelehelise struktuuriga ühilduv teema (kasutame SiteOrigin Northi)
• Paigalda kaks tasuta pluginat SiteOriginilt: Page Builder ja Widgets Bundle
• Pane leht kokku valmispaigutustest, määra ankru-ID-d ja lingi need menüüelementidega

Miks üldse üheleheline veebisait

Üheleheline sait edestab klassikalist mitmelehelist veebisaiti kindlates stsenaariumides. Sina kontrollid, millises järjekorras külastaja infot tarbib: kõigepealt väärtus, siis hind, mitte vastupidi. Ei mingit linkide otsimist menüüst.

Millal see toimib

Fotograafi portfoolio, teenuse maandumisleht, toote promoleht, ettevõtte visiitkaart viie sektsiooniga, kõik see mahub ühele keritavale ekraanile. Kuus kahe-kolme lõiguga plokki ühel lehel näevad soliidsed välja. Needsamad kuus plokki kuuel erineval lehel näevad välja nagu poolik sait.

Mobiil ja kiirus

Üheleheline sait laadib ühe korra. Pärast seda ainult kerimine. Külastaja võib lugemise keskel internetiühenduse kaotada ja ikkagi lõpuni kerida: leht on juba mälus. Mobiiliekraanil tundub see nagu äpp, mitte veebisait. Google kinnitas juba ammu: mobiiliesikohaga indekseerimine on olnud standard alates 2018. aastast.

Millal mitte

Sada blogiartiklit, keeruline e-pood, mitmetasandiline struktuur, üheleheline sait sellega hakkama ei saa. Kerimine muutub lõputuks ja SEO kannatab: otsingumootorid armastavad iga tähendusklastri jaoks eraldi URL-e.

1. Samm: XAMPPi paigaldamine Windowsile

XAMPP on tasuta platvormideülene pakett: Apache (veebiserver), MariaDB (andmebaas), PHP ja Perl. Lihtsalt öeldes muudab see sinu arvuti kohalikuks majutuseks, kus WordPress töötab ilma interneti ja tasuta. Ideaalne testimiseks ja ehitamise õppimiseks.

Paigaldamise protseduur Windowsis:

• Mine Apache Friendsi veebisaidile ja laadi alla XAMPPi uusim versioon oma süsteemile.
• Käivita paigaldaja. Tervitusekraanil klõpsa Next.
• Komponentide valiku etapis jäta linnukesed MySQL ja phpMyAdmin ette, sellest piisab WordPressi jaoks. Ülejäänutelt võib linnukesed eemaldada: neid saab vajadusel hiljem juhtpaneeli kaudu lisada.

• Vali paigalduskaust (vaikimisi C:\xampp, võid selle jätta).
• Bitnami ekraanil eemalda linnuke „Learn more about Bitnami for XAMPP", paigaldame WordPressi käsitsi. Klõpsa Next.
• Oota failide lahtipakkimist. Jäta linnuke „Launch control panel" ette ja klõpsa Finish.

Kui juhtpaneel avanes ilma punaste vigadeta ning Apache ja MySQL on roheliselt esile tõstetud, siis server töötab. Ava brauser ja mine aadressile http://localhost/. Kui näed XAMPPi tervituslehte, on kõik õigesti seadistatud.

Kui Apache ei käivitu, kontrolli, kas porti 80 ei kasuta mõni teine programm. Skype ja IIS on tavalised süüdlased. Apache seadetes (Config → Apache → httpd.conf) saad pordi 80 asemel 8080 vastu vahetada.

2. Samm: Andmebaasi loomine ja WordPressi paigaldamine

WordPress salvestab kõik, lehed, seaded, kasutajad, MySQL andmebaasi. Loome selle phpMyAdmini kaudu.

• XAMPPi juhtpaneelil klõpsa MySQL reas nuppu Admin. phpMyAdmin avaneb.
• Mine üleval vasakul menüüs vahekaardile Databases.
• Sisesta andmebaasi nimi, näiteks wordpress, ja klõpsa Create.

Andmebaas on valmis. Nüüd WordPress ise:

• Laadi alla WordPressi uusim versioon ja paki arhiiv lahti kausta C:\xampp\htdocs\wordpress (võid kausta nimetada teisiti, see saab olema osa kohalikust URL-ist).
• Leia kaustast fail wp-config-sample.php ja nimeta see ümber wp-config.php-ks.
• Ava fail suvalise tekstiredaktoriga ja leia MySQL-i seadete plokk:

1
define('DB_NAME', 'wordpress');
2
define('DB_USER', 'root');
3
define('DB_PASSWORD', '');
4
define('DB_HOST', 'localhost');

• Salvesta fail ja sulge redaktor.
• Ava brauseris http://localhost/wordpress/. Vali keel, loo kasutajanimi ja parool, klõpsa Paigalda WordPress.

Valmis. Oled oma kohalikus masinas WordPressi administraatoriliidesesse sisse logitud. Esimene verstapost saavutatud.

3. Samm: kujunduse valimine

Peaaegu iga kujundus sobib ühelehelise veebisaidi jaoks, kuid meie kasutame SiteOrigin Northi, see on tasuta, responsiivne ja loodud töötama koos leheehitajaga SiteOrigin, mis tuleb mängu järgmises sammus. Kujundus toetab kleepuvat menüüd, nii et külastajad ei pea teise jaotisesse navigeerimiseks üles tagasi kerima.

Paigaldamine: Välimus → Kujundused → Lisa uus → sisesta SiteOrigin North → Paigalda → Aktiveeri. Kujunduse on loonud SiteOrigini meeskond, samad inimesed, kes teevad Page Builderi pistikprogrammi. Konflikte ei teki.

4. Samm: SiteOrigini pistikprogrammid, Page Builder ja Widgets Bundle

Meie ehituse tuum, kaks tasuta pistikprogrammi WordPressi repositooriumist:

• SiteOrigin Page Builder (siteorigin-panels), lohista-ja-tilguta leheehitaja koos ruudustiku, paigutuste ja sisseehitatud ühelehelise kerimise funktsionaalsusega (alates versioonist 2.3). Reaalajas eelvaated, puhas HTML-väljund, üle 500 000 aktiivse paigalduse.
• SiteOrigin Widgets Bundle (so-widgets-bundle), vidinate komplekt: nupud, pildid, slaidid, kaardid, hinnad ja veel paarkümmend elementi. Kõik, mis paigutusi täidab.

Paigaldamine: Pluginad → Lisa uus → otsi ükshaaval SiteOrigin Page Builder ja SiteOrigin Widgets Bundle → Paigalda → Aktiveeri mõlemad. Just nende kahe plugina kombinatsioon annab sulle nii lehe koostaja kui ka sisu küljenduste jaoks. Ankruga kerimise funktsioon on Page Builderisse sisse ehitatud, ühelehelise saidi toimimiseks pole lisapistikprogramme vaja.

Samm 5: lehe loomine SiteOrigin Page Builderis

Loo uus leht (Lehed → Lisa uus). Standardse redaktori kohale ilmuvad vahekaardid, lülitu vahekaardile Page Builder.

SiteOrigin Page Builderiga tuleb kaasa valmis küljenduste kogu. Klõpsa redaktori kohal nuppu Layouts.

Avaneb eelseadistuste kataloog alates Fitness Gymist kuni Agencyni. Vali sobiv (meie valisime Fitness Gym), klõpsa Insert. Kui lehel oli juba sisu, küsib plugin: kas lisada enne, pärast või asendada. Tühja lehe puhul pole sellel vahet.

Salvesta leht ja ava see. Lülitu **Live **Editorile, link sellele ilmub WordPressi ülemise haldusriba sisse.

Live Editoris liigutad hiire suvalise elemendi kohale ja näed kohe, milline vidin selle eest vastutab. Saad muuta teksti, vahetada pilte ja lohistada plokke, kõik toimub reaalajas.

6. Samm: ankrute ID-d ja navigeerimismenüü

Viimane samm on menüüelementide linkimine lehe sektsioonidega. Ilma selleta kerimine ei tööta.

Live Editoris liigu hiirega esimesele reale pärast Hero plokki, klõpsa mutrivõtme ikoonil ja vali Edit Row. Mine vahekaardile Attributes ja väljale Row ID sisesta identifikaator, näiteks activities. Klõpsa Done.

Korda seda iga rea puhul unikaalse ID-ga: services, siis pricing, siis contact ja nii edasi. Salvesta leht.

Nüüd menüü: Appearance → Menus. Loo uus menüü. Lisa elemente läbi Custom Links: URL-i väljale sisesta #activities, nime väljale „Activities". Korda iga ID puhul.

Oluline nüanss: menüüelemendi URL-is on trellid # kohustuslikud (see on HTML-i ankru formaat), kuid Page Builderi Row ID-sse ei pea te trelle panema, ehitaja mõistab ise, et tegemist on identifikaatoriga.

Täpsemalt on WordPressis menüüde loomist käsitletud meie juhendis navigatsiooni seadistamise kohta.

Salvesta menüü, määra see teema kuvamisalale ja ava sait. Klõpsa menüüelemendil, leht kerib sujuvalt vajaliku sektsioonini.

⁉️🤔 Korduma kippuvad küsimused

Kas XAMPP on kohustuslik või võin kohe hostimisele minna?

XAMPP on vajalik kohalikuks testimiseks. Kui teil on juba WordPressiga hostimine olemas, jätke 1. ja 2. samm vahele, minge otse teema ja pluginateni. Ankrute loogika töötab ühtmoodi nii kohalikult kui ka reaalses serveris.

Kas ma võin SiteOrigin Northi asemel mõnda muud teemat kasutada?

Jah, peaaegu iga kaasaegne WordPressi teema toetab ühelehelist ülesehitust. Peamine on, et teema ei läheks SiteOrigin Page Builderiga vastuollu. Page Builderi arendajad garanteerivad ühilduvuse enamiku WordPressi repositooriumi teemadega.

Kas see seadistus töötab Macis või Linuxis?

XAMPP on platvormiülene, versioonid on olemas Windowsile, macOS-ile ja Linuxile. Macis saate kasutada ka MAMP-i (tasuta versioon). WordPressi ja pluginatega seotud toimingud pärast kohaliku serveri seadistamist on kõigis operatsioonisüsteemides identsed.

Mida teha, kui Apache ei käivitu?

Kaks kõige levinumat põhjust: porti 80 kasutab mõni teine programm (Skype, IIS, mõni teine veebiserver) või viirusetõrje blokeerib võrgutegevuse. Lahendus: muutke Apache'i port failis httpd.conf 8080-ks või lõpetage segav protsess käsurealt käsuga netstat -ano | findstr :80.

Kas ma saan hiljem sektsioone juurde lisada?

Jah. Minge igal ajal Page Builderisse, lisage uus rida, määrake sellele Row ID ja looge menüüsse sama ankruga element. Ehitaja ei piira sektsioonide arvu.

Mida te ühe tunniga saite

Töötava ühelehelise veebisaidi WordPressis. Koos ankurmenüü, sujuva kerimise, reaalajas redaktoriga ja seda kõike täiesti tasuta tööriistadega. Sama XAMPP + SiteOrigini seadistus töötab ka äriliste projektide puhul: ehitage sihtleht kohalikult valmis, testige seda ja viige see ükskõik millise migratsiooniplugina abil reaalsesse hostimisse üle.

Võtke reegliks: kõigepealt kohalik ehitamine, seejärel toodang. See säästab katsetuste ajal hostimise arvelt raha ja hoiab närve, kui midagi valesti läheb.

Kui materjal oli abiks, proovige juba täna ehitada oma esimene üheleheline sait. XAMPP ja WordPress laaditakse alla viie minutiga ning SiteOrigini ehitaja hoolitseb kogu küljenduse eest.