Alussa (webin) kaikki sivustot tehtiin pelkällä tekstillä ja staattisella HTML:llä. Nyt kuitenkin, yli 20 vuotta myöhemmin, verkko on paljon erilainen paikka. Verkkosivustot ovat paljon monimutkaisempia. Ne tarjoavat rikkaampia ja miellyttävämpiä kokemuksia sekä sivustojen tekijöille että kävijöille.
Tämä on suurelta osin WordPressin kaltaisten avoimen lähdekoodin hankkeiden ansiota. Joka on noin kymmenen viime vuoden aikana onnistunut ydintehtävässään eli verkkojulkaisemisen demokratisoinnissa (ja siinä sivussa paljon muussakin) niin, että kuka tahansa, jolla on WordPress-asennus ja oikea teema/plugins, voi saada nykyaikaisen verkkosivuston, jossa on edistyksellinen muotoilu ja toiminnallisuus. Mitään koodausta – ei edes HTML:ää – ei tarvita.
Tämän vuoksi kaltaisilleni innokkaille WordPress-käyttäjille on melkein vaikea uskoa, että vuonna 2018 joku saattaa yhä käyttää staattista HTML-sivustoa eikä WordPress-sivustoa teemalla ja lisäosilla. Tosiasia on kuitenkin se, että aktiivisia pelkkiä HTML-sivustoja on edelleen merkittävä määrä. (Tai HTML:ää, jossa on vähän CSS:ää.)
Myönnettäköön, että näillä sivuston omistajilla voi olla hyvät syyt olla päivittämättä tai muuntamatta. Ehkä heidän sivustojensa sisältö ei koskaan muutu ja jo olemassa oleva yksinkertainen muotoilu ja design on käyttökelpoinen? Tai ehkä se on vähemmän vaivalloista kuin WordPress-sivuston päivittämisestä huolehtiminen? Molemmat ovat päteviä syitä (muiden muassa). Loistavia esimerkkejä siitä, että ”älä korjaa sitä, mikä ei ole rikki.”
Minulla on kuitenkin tunne, että nämä eivät ehkä ole ensisijainen syy siihen, että jotkut (ehkä monet) eivät ole tehneet harppausta. Ilmeisin on se, että he eivät yksinkertaisesti osaa muuntaa HTML-sivustoaan WordPress-sivustoksi. Varsinkaan menettämättä sisältöä tai joutumatta tekemään liiallista muotoilua sivukohtaisesti.
Onneksi, kuten usein WordPressin kohdalla, on olemassa useita tapoja ratkaista tämä ongelma. Olen koonnut alla muutamia vaihtoehtoja.
Tilaa Youtube-kanavamme
Vaihtoehtosi staattisen HTML-sivuston muuntamiseksi WordPress-sivustoksi
Miten päätät muuntaa staattisen HTML-sivustosi WordPress-sivustoksi, riippuu epäilemättä henkilökohtaisista mieltymyksistäsi, haluamastasi ajallisesta/rahallisesta investoinnista ja taitotasostasi koodin kanssa. Sinun on itse päätettävä, mikä on sinulle paras vaihtoehto, mutta alla olevien yhteenvetojen avulla sinun pitäisi pystyä päättämään nopeasti ja siirtymään suoraan tässä viestissä oleviin, juuri sinun tilanteesi kannalta olennaisimpiin tietoihin.
Vaihtoehtoja on kolme:
1. Luo manuaalisesti WordPress-teema, joka perustuu nykyiseen staattiseen HTML-sivustoosi.
Tämä edellyttää, että pääset käsiksi koodiin. Sinun on päästävä nykyisen sivustosi hakemistoon FTP:n kautta ja käytettävä olemassa olevaa koodiasi lähtökohtana. Sieltä sinun on luotava WordPress-teemalle tarvittavat tiedostot ja kopioitava koodinpätkiä WordPress-koodikirjasta. Tämä on melko yksinkertaista ja suoraviivaista, jos sinulla on jonkin verran kokemusta HTML:stä, CSS:stä ja hieman PHP:stä.
2. Asenna valmiiksi tehty teema ja siirrä sisältösi yksinkertaisesti.
Tämä on luultavasti paras vaihtoehto yksinkertaisuuden ja arvon risteyksessä. Olettaen, että sinulla on jo hosting nykyiselle verkkosivustollesi, sinun tarvitsee käyttää rahaa vain, jos päätät ostaa premium-teeman. Sisällön tuontiin käyttämämme lisäosa on vapaasti saatavilla WordPressin virallisessa lisäosarekisterissä.
3. Maksaa siitä, että HTML:stä WordPressiin -muunnospalvelu luo sivustosi uudelleen.
Tämä on helpoin ratkaisu, sillä se ei vaadi sinulta juuri mitään. Se ei kuitenkaan tee paljoa WordPressiin perehdyttämisessä, ja kustannukset vaihtelevat sen mukaan, kenet haluat palkata. En käsittele tätä vaihtoehtoa alla olevissa osioissa, koska jos tämä on reitti, josta olet kiinnostunut, voit yksinkertaisesti tehdä nopean haun palveluntarjoajille, ja he hoitavat loput.
HTML:stä WordPressiin -muunnoksen valmistelu
Riippumatta siitä, minkä reitin päätät valita alla, on muutamia asioita, jotka haluat tehdä ennen kuin sukellat sisään.
Ensimmäinen asia on isännöintisopimuksen valinta. Haluat tarkastella tarjolla olevia vaihtoehtoja ja päättää paketin, joka sopii parhaiten tarpeisiisi. Tai ehkä haluaisit sen sijaan luoda paikallisen WordPress-asennuksen? Voit aina siirtää sen hosting-palveluun myöhemmin.
Kun olet valinnut, sinun on asennettava WordPress ja kirjauduttava WP Adminiin. Tässä vaiheessa kaksi mahdollista polkuamme eroavat toisistaan.
Statisen HTML-sivuston muuntaminen manuaalisesti WordPressiin
Jos tavoitteenasi on paitsi saada sisältösi staattiselta HTML-sivustoltasi WordPressiin myös kopioida nykyinen ulkoasu, tämä tarkoittaa, että sinun on luotava oma mukautettu teemasi. Onneksi se ei ole niin pelottavaa kuin miltä se aluksi saattaa kuulostaa. Siihen kuuluu vain muutaman kansion ja tiedoston luominen, hieman kopiointia ja liittämistä ja lopputuloksen lataaminen.
Tarvitset koodieditorin, kuten Sublime tai Notepad++, ja pääsyn sekä HTML-sivustosi hakemistoon että uuden WordPress-asennuksesi hakemistoon.
Vaihe 1: Luo uusi teemakansio ja tarvittavat tiedostot
Luo työpöydällesi uusi kansio teematiedostojasi varten. Nimeä se haluamallasi nimellä.
Luo seuraavaksi muutama tiedosto (jotka kaikki menevät uuteen teemakansioosi) koodieditorissasi. Älä tee niille vielä mitään. Jätä ne vain auki myöhempää muokkausta varten.
- Style.css
- Index.php
- header.php
- sidebar.php
- footer.php
Vaihe 2: Kopioi olemassa oleva CSS uuteen tyylitaulukkoon
Jos haluat kopioida ulkoasun, tämä tarkoittaa todennäköisesti sitä, että sinulla on ainakin jonkin verran CSS:ää, jonka haluat tallentaa. Ensimmäinen tiedosto, jota haluat muokata, on siis Style.css-tiedostosi.
Aloittaaksesi, lisää tiedostosi alkuun seuraavat kohdat.
/*Theme Name: Replace with your Theme's name.Theme URI: Your Theme's URIDescription: A brief description.Version: 1.0Author: YouAuthor URI: Your website address.*/
Tämän kohdan jälkeen liitä yksinkertaisesti olemassa oleva CSS:si alle. Tallenna ja sulje tiedosto.
Vaihe 3: Erottele nykyinen HTML:si
Ennen kuin siirrymme vaiheeseen kolme, annan sinulle lyhyen huomautuksen siitä, miten WordPress toimii. WordPress käyttää PHP:tä kutsuakseen ja noutaakseen datapaloja sen taustalla olevasta tietokannasta. Jokainen tiedosto, jota käytämme tässä pienessä opetusohjelmassa, on suunniteltu kertomaan WordPressille, mikä osa sivustosi sisällöstä näytetään ja missä.
Kun siis sanon, että aiomme ”pilkkoa” nykyistä HTML:ääsi, teemme itse asiassa yksinkertaisesti leikkaamalla ja liittämällä osia nykyisestä koodistasi juuri luomiimme eri tiedostoihin, jotta WordPress tietää, missä ne näytetään.
Jatketaan tästä.
Avaa ensiksi nykyisen sivustosi index.html-tiedosto. Korosta kaikki tiedoston yläosasta avaavaan tagiin div class=”main” asti. Kopioi ja liitä tämä kohta header.php-tiedostoosi, tallenna ja sulje.
Toiseksi, palaa takaisin index.html-tiedostoosi. Korosta aside class=”sidebar”-elementti ja kaikki sen sisällä oleva. Kopioi ja liitä tämä osio sidebar.php-tiedostoosi, tallenna ja sulje.
Kolmanneksi, valitse index.html-tiedostossasi kaikki sivupalkin jälkeinen ja kopioi ja liitä se footer.php-tiedostoosi, tallenna ja sulje.
Viimeiseksi, valitse index.html-tiedostossasi kaikki, mikä on jäljellä (tämän pitäisi olla pääasiallinen sisältöosio) ja liitä se index.php-tiedostoosi. Tallenna, mutta älä sulje vielä.
Voit nyt kuitenkin sulkea index.html-tiedoston ja siirtyä viimeisiin vaiheisiin. Melkein valmis!
Vaihe 4: Viimeistele index.php-tiedostosi
Voidaksesi viimeistellä uuden teemasi index.php-tiedoston sinun on varmistettava, että se voi kutsua muita osioita (pääsisällön lisäksi), jotka sijaitsevat muissa luomissasi tiedostoissa. Tai toisin sanoen, kokoa juuri ”pilkkomamme” elementit takaisin yhteen.
Aivan index.php-tiedoston yläreunaan aseta seuraavat rivit php.
<?php get_header(); ?>
Sitten aivan index.php-tiedoston alaosaan aseta nämä rivit php.
<?php get_sidebar(); ?><?php get_footer(); ?>
Viimeiseksi meidän on lisättävä se, mitä kutsutaan nimellä The Loop. Tämä on ensisijainen osa php:tä, jota WordPress käyttää näyttääkseen postauksesi sisällön kävijöille. Viimeinen vaihe uuden teemasi index.php-tiedoston luomisessa on siis alla olevan koodin lisääminen sisältöosioon.
<?php if ( have_posts() ) : ?><?php while ( have_posts() ) : the_post(); ?> <div <?php post_class(); ?>> <div class="post-header"> <div class="date"><?php the_time( 'M j y' ); ?></div> <h2><a href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2> <div class="author"><?php the_author(); ?></div> </div><!--end post header--> <div class="entry clear"> <?php if ( function_exists( 'add_theme_support' ) ) the_post_thumbnail(); ?> <?php the_content(); ?> <?php edit_post_link(); ?> <?php wp_link_pages(); ?> </div> <!--end entry--> <div class="post-footer"> <div class="comments"><?php comments_popup_link( 'Leave a Comment', '1 Comment', '% Comments' ); ?></div> </div><!--end post footer--> </div><!--end post--><?php endwhile; /* rewind or continue if all posts have been fetched */ ?> <div class="navigation index"> <div class="alignleft"><?php next_posts_link( 'Older Entries' ); ?></div> <div class="alignright"><?php previous_posts_link( 'Newer Entries' ); ?></div> </div><!--end navigation--><?php else : ?><?php endif; ?>
Tallenna index.php ja sulje. Teemasi on nyt valmis! Jäljellä on enää sen lataaminen WordPress-sivustollesi.
Vaihe 5: Uuden teeman lataaminen
Nyt kun olet luonut teematiedostot ja ne on tallennettu uuteen teemakansioosi, sinun on päästävä käsiksi uuden WordPress-asennuksesi hakemistoon.
Sijoita uusi teemakansiosi kansioon /wp-content/themes/. Siirry sitten takaisin WP Admin > Appearance > Themes -kohtaan ja juuri luodun teemasi pitäisi näkyä siellä. Siirry eteenpäin ja aktivoi se!
Tässä vaiheessa jäljellä on enää uuden WordPress-sivustosi täyttäminen vanhan sivustosi sisällöllä. Seuraa alla olevaa osiota (ohittaen osan valmiiksi tehdyn teeman käyttämisestä) nähdäksesi, miten se tehdään.
Käyttämällä valmiiksi tehtyä WordPress-teemaa ja tuomalla HTML-sisältöä
Jos yllä olevat vaiheet tuntuvat sinulle liian intensiivisiltä tai aikaa vieviltä, voit olla varma, että on toinenkin tapa. Sen sijaan, että muuntaisit minkä tahansa suunnittelun, jonka kanssa satut työskentelemään juuri nyt, WordPress-teemaksi, voit hyödyntää mitä tahansa niistä tuhansista teemoista, jotka ovat saatavilla laajemmilla WordPress-markkinoilla.
On olemassa ilmaisia teemoja ja on premium-teemoja. Ennen kuin päätät, mikä on sinulle paras, kannattaa lukea, mitkä teemat on suunniteltu vastaamaan tarpeitasi, ja selata teemaluokittain täällä Elegant Themesissä ja muualla.
Kun olet valinnut mieleisesi teeman (ja olet ladannut sen zipatun tiedostopaketin), sinun kannattaa palata kohtaan WP Admin > Appearance > Themes > Add New (Lisää uusi) ja asentaa/aktivoida uusi WordPress-teemasi.
Kun tämä on tehty, sinulla on uusi WordPress-verkkosivusto ja -teema, mutta ei juuri muuta. Kun esikatselet sivustoasi, se on tyhjä sisällöstä ja näyttää luultavasti jotenkin tylsältä. Se ei haittaa, sillä seuraavaksi tuomme vanhan sivustosi sisällön.
WP Adminissa mene kohtaan Plugins > Add New ja etsi lisäosa nimeltä HTML Import 2 by Stephanie Leary. Kun tämä lisäosa on asennettu ja aktivoitu, seuraa sen kätevää käyttöohjetta tuodaksesi koko hakemistosi HTML-sivut. Täydellinen kuvineen!
Tämän jälkeen kaikki vanha sisältösi elää WordPressissä ja on muotoiltu uudella teemallasi. Tai jos olet luonut oman teemasi edellä, sivustosi pitäisi näyttää melko lailla samalta kuin ennenkin – vain WordPressissä toimivana.
Johtopäätös
Jos olet käyttänyt tätä viestiä oppaana sivustosi siirtämisessä WordPressiin, olet juuri liittynyt yhteen maailman suurimmista avoimen lähdekoodin yhteisöistä. Tervetuloa! Se on hauska paikka, jossa on paljon kehittäjiä, suunnittelijoita, bloggaajia, tee-se-itse-itse-käyttäjiä ja muita – kaikki rakentavat, leikkivät ja luovat WordPressin ja WordPress-teemojen/pluginien avulla.
Jos olet ”tarttunut WordPress-kärpäseen”, WordPress.orgin virallinen verkkosivusto on täynnä hyödyllisiä teemoja, plugineja ja muita resursseja. Jos haluat vielä tarkentaa teematiedostojasi, tutustu Codexiin, josta löydät näennäisesti loputtomasti vinkkejä, temppuja ja muunnelmia.