Yksisivuinen verkkosivusto tarkoittaa, että kaikki sisältö on yhdellä sivulla, eikä valikko johda muihin URL-osoitteisiin: klikattaessa sivu rullaa sulavasti haluttuun kohtaan. Ei uudelleenlatauksia, ei kadonneita kävijöitä. Kuulostaa juuri siltä, mitä tarvitset laskeutumissivulle, portfoliolle tai käyntikortille, eikö?

Mutta tosipaikan tullen aloittelija törmää kahteen seinään. Ensimmäinen: "En osaa koodata." Toinen: "Tarvitsen varmaan kalliita lisäosia." Molemmat seinät murtuvat tunnissa.

Luo täysiverinen yksisivuinen verkkosivusto WordPressillä, jossa on sulava rullaus, ankkuriosiot ja täysin ilmaisilla työkaluilla. Ei riviäkään koodia.

Jos katsot mieluummin kuin luet, tässä on visuaalinen läpikäynti asennuksesta julkaisuun:

💡 Pikakatsaus:

• Asenna XAMPP, paikallinen palvelin WordPressin testaamiseen tietokoneellasi
• Ota WordPress käyttöön paikallisella koneella phpMyAdminin kautta ja muokkaamalla wp-config.php-tiedostoa
• Valitse teema, joka sopii yksisivuiseen rakenteeseen (käytämme SiteOrigin Northia)
• Asenna kaksi ilmaista lisäosaa SiteOriginilta: Page Builder ja Widgets Bundle
• Kokoa sivu valmiista asetteluista, määritä ankkuri-ID:t ja linkitä ne valikon kohtiin

Miksi ylipäätään yksisivuinen verkkosivusto

Yksisivuinen sivusto päihittää perinteisen monisivuisen sivuston tietyissä tilanteissa. Hallitset järjestystä, jossa kävijä kuluttaa tietoa: ensin arvo, sitten hinta, eikä toisin päin. Ei linkkien metsästystä valikosta.

Milloin tämä toimii

Valokuvaajan portfolio, palvelun laskeutumissivu, tuotteen promosivu, yrityksen käyntikortti viidellä osiolla, kaikki tämä mahtuu yhteen rullausnäkymään. Kuusi kahden tai kolmen kappaleen lohkoa yhdellä sivulla näyttää vakuuttavalta. Samat kuusi lohkoa kuudella eri sivulla näyttävät tyhjänpäiväiseltä sivustolta.

Mobiili ja nopeus

Yksisivuinen sivusto latautuu kerran. Sen jälkeen vain rullataan. Kävijä voi menettää internetyhteyden kesken lukemisen ja silti rullata loppuun: sivu on jo muistissa. Mobiilinäytöllä tämä tuntuu sovellukselta, ei verkkosivustolta. Google vahvisti jo kauan sitten: mobile-first-indeksointi on ollut standardi vuodesta 2018.

Milloin ei

Sata blogiartikkelia, monimutkainen verkkokauppa, monitasoinen rakenne, yksisivuinen sivusto ei selviä siitä. Rullaamisesta tulee loputonta, ja hakukoneoptimointi kärsii: hakukoneet rakastavat erillisiä URL-osoitteita jokaiselle merkityskokonaisuudelle.

Vaihe 1: XAMPPin asentaminen Windowsiin

XAMPP on ilmainen alustariippumaton paketti: Apache (verkkopalvelin), MariaDB (tietokanta), PHP ja Perl. Yksinkertaisesti sanottuna se muuttaa tietokoneesi paikalliseksi hosting-ympäristöksi, jossa WordPress toimii ilman internetiä ja ilman maksua. Ihanteellinen testaamiseen ja rakentamisen opetteluun.

Asennusohjeet Windowsissa:

• Mene Apache Friends -sivustolle ja lataa uusin XAMPP-versio järjestelmällesi.
• Suorita asennusohjelma. Tervetuloruudussa napsauta Next.
• Komponenttien valintavaiheessa jätä valintamerkit kohtiin MySQL ja phpMyAdmin, tämä riittää WordPressille. Loput voi jättää valitsematta: voit lisätä ne myöhemmin hallintapaneelin kautta tarvittaessa.

• Valitse asennuskansio (oletus on C:\xampp, voit pitää sen).
• Bitnami-ruudussa poista valinta kohdasta "Learn more about Bitnami for XAMPP", asennamme WordPressin manuaalisesti. Napsauta Next.
• Odota, että tiedostot puretaan. Jätä valintamerkki kohtaan "Launch control panel" ja napsauta Finish.

Jos hallintapaneeli avautui ilman punaisia virheitä ja Apache ja MySQL ovat korostettuina vihreällä, palvelin toimii. Avaa selain ja mene osoitteeseen http://localhost/. Jos näet XAMPPin tervetulosivun, kaikki on määritetty oikein.

Jos Apache ei käynnisty, tarkista, onko portti 80 toisen ohjelman varaama. Skype ja IIS ovat yleisiä syyllisiä. Apachen asetuksissa (Config → Apache → httpd.conf) voit vaihtaa portin 80:stä 8080:een.

Vaihe 2: Tietokannan luominen ja WordPressin asentaminen

WordPress tallentaa kaiken, sivut, asetukset, käyttäjät, MySQL-tietokantaan. Luodaan se phpMyAdminin kautta.

• Napsauta XAMPPin hallintapaneelissa Admin-painiketta MySQL-rivillä. phpMyAdmin avautuu.
• Mene Databases-välilehdelle vasemmassa ylävalikossa.
• Anna tietokannan nimi, esimerkiksi wordpress, ja napsauta Create.

Tietokanta on valmis. Nyt itse WordPress:

• Lataa uusin WordPress-versio ja pura arkisto kansioon C:\xampp\htdocs\wordpress (voit nimetä kansion toisin, tämä on osa paikallista URL-osoitetta).
• Etsi kansiosta tiedosto wp-config-sample.php ja nimeä se uudelleen muotoon wp-config.php.
• Avaa tiedosto millä tahansa tekstieditorilla ja etsi MySQL-asetuslohko:

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

• Tallenna tiedosto ja sulje editori.
• Avaa selaimessa http://localhost/wordpress/. Valitse kieli, luo käyttäjätunnus ja salasana, klikkaa Asenna WordPress.

Valmista. Olet kirjautuneena WordPressin hallintapaneeliin paikallisella koneellasi. Ensimmäinen virstanpylväs saavutettu.

Vaihe 3: Teeman valinta

Melkein mikä tahansa teema toimii yksisivuiselle sivustolle, mutta käytämme SiteOrigin Northia. Se on ilmainen, responsiivinen ja suunniteltu toimimaan SiteOrigin-sivunrakentajan kanssa, joka otetaan käyttöön seuraavassa vaiheessa. Teema tukee kiinteää valikkoa, joten kävijöiden ei tarvitse selata takaisin ylös siirtyäkseen toiseen osioon.

Asennus: Ulkoasu → Teemat → Lisää uusi → kirjoita SiteOrigin North → Asenna → Ota käyttöön. Teeman on kehittänyt SiteOrigin-tiimi, samat ihmiset, jotka tekevät Page Builder -lisäosan. Ristiriitoja ei tule.

Vaihe 4: SiteOrigin-lisäosat, Page Builder ja Widgets Bundle

Rakennelman ydin, kaksi ilmaista lisäosaa WordPressin lisäosahakemistosta:

• SiteOrigin Page Builder (siteorigin-panels), raahaa ja pudota -rakentaja, jossa on ruudukko, asettelut ja sisäänrakennettu yksisivuisen sivuston vieritystoiminto (versiosta 2.3 alkaen). Live-esikatselut, puhdas HTML-tuloste, yli 500 000 aktiivista asennusta.
• SiteOrigin Widgets Bundle (so-widgets-bundle), joukko pienoisohjelmia: painikkeet, kuvat, liukusäätimet, kartat, hinnat ja parikymmentä muuta elementtiä. Kaikki, millä asettelut täytetään.

Asennus: Lisäosat → Lisää uusi → hae SiteOrigin Page Builder ja SiteOrigin Widgets Bundle yksi kerrallaan → Asenna → Ota käyttöön molemmat. Juuri näiden kahden lisäosan yhdistelmä antaa sinulle sekä rakentajan että sisältöä asetteluihin. Ankkuriskrollausominaisuus on sisäänrakennettu Page Builderiin, joten yksisivuisen sivuston toiminnallisuuteen ei tarvita muita lisäosia.

Vaihe 5: Sivun rakentaminen SiteOrigin Page Builderilla

Luo uusi sivu (Sivut → Lisää uusi). Vakioeditorin yläpuolelle ilmestyy välilehtiä, vaihda Page Builder -välilehteen.

SiteOrigin Page Builderin mukana tulee valmiiden asettelujen kirjasto. Klikkaa editorin yläpuolella olevaa Layouts-painiketta.

Esiasetusten luettelo avautuu, vaihtoehtoina on Fitness Gymistä Agencyyn. Valitse sopiva (me valitsimme Fitness Gymin) ja klikkaa Insert. Jos sivulla oli jo sisältöä, lisäosa kysyy: lisätäänkö ennen, jälkeen vai korvataanko. Tyhjällä sivulla valinnalla ei ole väliä.

Tallenna sivu ja avaa se. Vaihda **Live **Editor -tilaan, linkki siihen ilmestyy WordPressin yläpalkkiin.

Live Editorissa voit viedä hiiren minkä tahansa elementin päälle ja nähdä heti, mikä widget siitä vastaa. Voit muokata tekstiä, vaihtaa kuvia ja raahata lohkoja, kaikki reaaliajassa.

Vaihe 6: Ankkuri-ID:t ja navigointivalikko

Viimeinen vaihe on linkittää valikon kohteet sivun osioihin. Ilman tätä vieritys ei toimi.

Vie hiiri Live Editorissa Hero-lohkon jälkeisen ensimmäisen rivin päälle, klikkaa jakoavainkuvaketta ja valitse Edit Row. Siirry Attributes-välilehdelle ja kirjoita Row ID -kenttään tunniste, esimerkiksi activities. Klikkaa Done.

Toista jokaiselle riville uniikilla ID:llä: services, sitten pricing, sitten contact ja niin edelleen. Tallenna sivu.

Sitten valikko: Ulkoasu → Valikot. Luo uusi valikko. Lisää kohteita Mukautetut linkit -kohdan kautta: URL-kenttään kirjoita #activities, nimikenttään "Toiminta". Toista jokaiselle ID:lle.

Tärkeä vivahde: risuaita # on pakollinen valikon kohteen URL-osoitteessa (tämä on HTML-ankkurimuoto), mutta Page Builderin Row ID -kenttään sinun ei tarvitse laittaa risuaitaa, builder ymmärtää itsestään, että kyseessä on tunniste.

Lisätietoja valikoiden luomisesta WordPressissä on oppaassamme navigoinnin määrittämisestä.

Tallenna valikko, liitä se teeman näyttöalueeseen ja avaa sivusto. Klikkaa valikon kohdetta, sivu vierii sulavasti haluttuun osioon.

⁉️🤔 Usein kysytyt kysymykset

Onko XAMPP pakollinen vai voinko mennä suoraan hostingiin?

XAMPP tarvitaan paikalliseen testaamiseen. Jos sinulla on jo hosting WordPressillä, ohita vaiheet 1 ja 2, siirry suoraan teemaan ja lisäosiin. Ankkurilogiikka toimii samalla tavalla sekä paikallisesti että live-palvelimella.

Voinko käyttää toista teemaa SiteOrigin Northin sijaan?

Kyllä, lähes mikä tahansa moderni WordPress-teema tukee yksisivuista rakennetta. Pääasia on, ettei teema ole ristiriidassa SiteOrigin Page Builderin kanssa. Page Builderin kehittäjät takaavat yhteensopivuuden useimpien WordPressin teemavaraston teemojen kanssa.

Toimiiko tämä asetelma Macilla tai Linuxilla?

XAMPP on alustariippumaton, versioita on Windowsille, macOS:lle ja Linuxille. Macilla voit käyttää myös MAMPia (ilmainen versio). WordPressin ja lisäosien asennus paikallisen palvelimen pystytyksen jälkeen on identtistä kaikissa käyttöjärjestelmissä.

Mitä tehdä, jos Apache ei käynnisty?

Kaksi yleisintä syytä: portti 80 on toisen ohjelman varaama (Skype, IIS, toinen verkkopalvelin) tai virustorjunta estää verkkotoiminnan. Ratkaisu: vaihda Apachen portti 8080:een httpd.conf-tiedostossa tai lopeta häiritsevä prosessi komennolla netstat -ano | findstr :80 komentorivillä.

Voinko lisätä osioita myöhemmin?

Kyllä. Milloin tahansa voit mennä Page Builderiin, lisätä uuden rivin, antaa sille Row ID:n ja luoda valikkokohteen samalla ankkurilla. Builder ei rajoita osioiden määrää.

Mitä sait tunnissa aikaan

Toimiva yksisivuinen verkkosivusto WordPressillä. Mukana ankkurivalikko, sulava vieritys, live-editori ja täysin ilmaisilla työkaluilla. Sama XAMPP + SiteOrigin -asetelma toimii myös kaupallisissa projekteissa: rakenna laskeutumissivu paikallisesti, testaa se ja siirrä se live-hostigille millä tahansa siirtolisäosalla.

Ota tavaksi: ensin paikallinen rakennus, sitten tuotanto. Tämä säästää rahaa hostingissa kokeilujen aikana ja säästää hermoja, kun jokin menee pieleen.

Jos materiaali oli hyödyllistä, kokeile rakentaa ensimmäinen yksisivuinen sivustosi tänään. XAMPP ja WordPress latautuvat viidessä minuutissa, ja SiteOrigin builder hoitaa kaiken asettelun.