Kun verkko aloitettiin, verkkosivustot olivat melko tyhmiä. Toisin sanoen ne eivät olleet muuta kuin tekstiä ja staattista HTML-koodia, ilman hienoja tehosteita ja hyvin vähän interaktiivisuutta.

Kaksikymmentä vuotta myöhemmin verkkosivustot perustuvat monimutkaiseen ohjelmointiin, ja niiden rakentaminen voi kestää viikkoja ja viikkoja. Ne ovat täynnä ominaisuuksia, erittäin interaktiivisia, reagoivampia, paremman näköisiä ja niin edelleen.

Nykyään koodin kirjoittamisen sijaan voit käyttää sisällönhallintajärjestelmiä, jotka käsittelevät verkkosivustosi takana olevan koodin itse. Sinun tarvitsee vain valita teema ja aloittaa julkaisu.

WordPress on yksi tällainen sisällönhallintajärjestelmä, jota käyttävät nyt miljoonat ympäri maailmaa. Parasta WordPressissä on, että se on erittäin joustava alusta. Sen käyttäminen ei vaadi koodausosaamista, ja voit luoda sen avulla kaikkein herkimmät ja hämmästyttävät verkkosivustot.

Jos omistat verkkosivuston, jota ei ole päivitetty 1990-luvun jälkeen, tämä wpDataTables -tiimimme luoma artikkeli auttaa sinua muuttamaan HTML:n WordPressiksi, jotta sinäkin voit hyötyä modernin verkkotekniikan eduista.

Jatka lukemista saadaksesi lisätietoja.

Miksi sinun pitäisi muuntaa HTML WordPressiksi?

Syyt, miksi ihmisen pitäisi muuntaa HTML WordPressiksi, ovat melko erilaisia. Tässä on valikoima tärkeimpiä:

WordPressiksi muuntaminen antaa sinulle täyden hallinnan verkkosivustosi jokaisesta yksityiskohdasta. Aina kun et pidä jostakin sivustosi osasta, voit muokata sitä helposti mieleiseksesi.
WordPress-sivustoja on paljon helpompi käyttää, hallita ja ylläpitää verrattuna staattisiin HTML-sivustoihin. Tämä on erittäin tärkeä syy tehdä HTML-muutos WordPressiin.
Muuntamalla HTML-mallityylisi WordPressiksi saat ainutlaatuisen teeman, jota kukaan muu sisällönhallintajärjestelmää käyttävä henkilö ei omista.
WordPress auttaa hakukoneoptimoinnissa ja varmistaa, että useammat ihmiset löytävät verkkosivustosi.
Verkkosivujen kehittäjänä työsi puolittuu, koska WordPress hoitaa suurimman osan aiemmin tarpeettoman aikaa vievistä toiminnoista.

Siirtyminen staattisesta HTML:stä WordPressiin: menetelmät

Nyt kun sinulla on kaikki syyt muuntaa HTML:ää WordPressiksi, voit jatkaa oppimista, miten se tehdään.

Voit valita kahdesta menetelmästä: manuaalinen menetelmä, jossa kaikki tehdään itse, alusta alkaen; ja lapsiteeman menetelmä, joka sisältää WordPressin perusteeman käytön ja sen säätämisen tarpeidesi mukaan.

Menetelmän valinta riippuu kokemuksestasi koodaamisesta, kuinka paljon aikaa haluat sijoittaa tähän tehtävään, sekä omista mieltymyksistäsi. Jokainen näistä menetelmistä esitellään alla olevissa osioissa, joissa opit muuttamaan HTML:n WordPressiksi.

Manuaalinen menetelmä

1 Luo uusi teemakansio

Luo työpöydällesi uusi kansio, johon teematiedostosi tallennetaan. Nimeä tämä kansio haluamallasi tavalla (se edustaa teeman nimeä). Luo nämä tiedostot haluamassasi koodieditorissa ja jätä ne auki:

tyyli.css
index.php
header.php
sidebar.php
alatunniste.php

2 Kopioi olemassa oleva CSS-koodi uuteen tyylitaulukkoon

Kun olet luonut tiedostot, voit siirtyä kopioimaan CSS-koodisi. Niiden, jotka haluavat kopioida sivustonsa ja siirtää ne WordPressiin, on vietävä ja tuotava edellisen sivustonsa CSS-koodi. CSS vastaa siitä, miltä sivusto näyttää, joten muokkaa style.css-tiedostoa lisäämällä siihen seuraavat koodirivit:


/*
Theme Name: Replace with your Theme's name.
Theme URI: Your Theme's URI
Description: A brief description.
Version: 1.0
Author: You
Author URI: Your website address.
*/

Korvaa vaaditut tiedot omilla tiedoillasi, lisää loput CSS-rivit ja olet valmis. Älä unohda tallentaa tiedostoa. Voit nyt sulkea style.css:n.

3 Hanki nykyinen HTML-koodisi

Siirry sivustosi index.html-tiedostoon ja korosta kaikki sisältö asiakirjan alusta div class="main"-tunnisteeseen. Tämä osio on liitettävä vaiheessa 1 luomaasi header.php-tiedostoon.

Palaa index.html-tiedostoon ja korosta kaikki class="sidebar”-elementin sisältä. Kopioi sisältö ja liitä se luomaasi sidebar.php-tiedostoon. Tee sama alatunnisteelle, kun koko sisältö on sivupalkkielementin jälkeen.

Valitse index.php-tiedostossa kaikki korostamisen jälkeen jäljellä oleva sisältö ja liitä se uuteen tiedostoon, tallenna ja jätä se auki seuraavaa vaihetta varten.

4 Muokkaa index.php-tiedostoa

Viimeistele index.php-tiedosto kopioimalla nämä koodirivit ja liittämällä ne asiakirjan yläosaan:

Sijoita sitten nämä PHP-rivit index.php-tiedoston alaosaan.

Tiedosto ei ole vielä valmis, koska sinun on luotava viestisilmukka, joka edustaa PHP-koodia, jota WordPress tarvitsee näyttääkseen verkkosivustosi blogitekstit tai artikkelit oikein. Lisää seuraavat koodirivit tiedoston sisältöosioon:

Kun olet valmis, tallenna tiedosto, sulje se ja siirry seuraavaan vaiheeseen.

5 Lataa uusi teemasi

Kun teemakansiosi on valmis, sinun on ladattava se sivustollesi ja suoritettava HTML-muunnos WordPressiksi. Voit tehdä tämän siirtymällä kansioon, johon asensit WordPressin, ja sijoittamalla juuri luomasi kansion /wp-content/themes/.

Siirry WP Admin -sivullesi, Ulkoasu ja sitten Teemat nähdäksesi, näkyykö teeman nimi luettelossa vai ei. Jos näin on, olet tehnyt kaiken oikein ja voit aktivoida sen. Jos näin ei tapahdu, lue huolellisesti kaikki vaiheet HTML:n muuntamiseksi WordPressiksi uudelleen.

Siellä on myös tämä hyödyllinen Traversy Median videoopas, joka kannattaa tutustua:

WordPressin lapsiteeman käyttäminen

Jos edellisessä vaiheessa mainitut vaiheet vaikuttavat liian monimutkaisilta tasosi, tämä on menetelmä, joka vaatii vähemmän tietoa koodauksen alalla. Se on helpompi hallita ja vie myös vähemmän aikaa.

Muuntaaksesi HTML:n WordPressiksi nopeammin voit käyttää olemassa olevasta teemasta peräisin olevaa alateemaa. Lapsiteemat on nimetty tällä tavalla, koska ne on rakennettu toiselle teemalle, joka on yläteema.

1 Valitse teema

Ensinnäkin, valitse teema, joka sopii HTML-suunnitteluusi. Etsi lapsiteemaa, joka on samanlainen kuin nykyinen verkkosivustosi. Etsi sen rakennetta, jotta sinun ei tarvitse kaivaa koodaukseen liikaa.

Sinun tulisi valita aloitusteema, koska ne perustuvat hyvin peruskoodiriviin.

2 Luo uusi teemakansio

Aivan kuten edellisessä tapauksessa, sinun on luotava uusi teemakansio. Ainoa ero on, että annat kansion nimen samalla tavalla kuin pääteemaa, johon lapsiteemasi perustuu, ja lisäät siihen pääteosan "-child".

Jos esimerkiksi teemasi on nimeltään Twenty Nine, kutsut kansiota "twentynine-child". Varmista, että et lisää nimeen välilyöntejä.

3 Määritä uusi tyylitaulukko

Luo seuraavaksi style.css-tiedosto kansioon ja lisää seuraavat koodirivit:


/*
Theme Name: Twenty Nineteen Child
Theme URI: http://example.com/twenty-nineteen-child/
Description: Twenty Nineteen Child Theme
Author: John Doe
Author URI: http://example.com
Template: twentynineteen
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
Text Domain: twenty-nineteen-child
*/

Muista, että tämä on esimerkki. Sinun on korvattava tiedot omillasi. Tallenna tiedosto viimeistelyn jälkeen.

4 Luo functions.php-tiedosto

Kun sinulla on style.css-tiedosto, voit aktivoida teeman sellaisenaan. Jotta sivusto näyttäisi ja toimisi paremmin, sinun on kuitenkin käytettävä pääteeman toimintoja ja tyylejä. Tätä varten sinun on luotava functions.php-tiedosto.

Käytä näitä koodirivejä ja tallenna tiedosto:


/*
Theme Name: Twenty Nineteen Child
Theme URI: http://example.com/twenty-nineteen-child/
Description: Twenty Nineteen Child Theme
Author: John Doe
Author URI: http://example.com
Template: twentynineteen
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
Text Domain: twenty-nineteen-child
*/

5 Aktivoi lapsiteema

Lopuksi sinun on aktivoitava teema. Pakkaa kansio ja lisää se WordPressiin siirtymällä Ulkoasu-valikkoon, Teemat ja napsauttamalla sitten "Lisää uusi". Lataa zip-tiedosto sinne. Toinen vaihtoehto olisi vetää kansio wp-content/themes-kansiossa.

Lopussa

Tarvitset kärsivällisyyttä HTML:n muuntamiseksi WordPressiksi, mutta se on varmasti vaivan arvoista. Vaikka prosessi vaatii hieman huomiotasi, päädyt todella ainutlaatuiseen sivustoon, jota on paljon helpompi hallita kaikista näkökulmista.

Jos noudatat tämän artikkelin ohjeita huolellisesti, mikään ei voi mennä pieleen, joten älä huoli! Jos kuitenkin kohtaat ongelmia, älä epäröi tutustua WordPress-yhteisön tukifoorumeihin. Siellä on monia käyttäjiä, jotka auttavat sinua mielellään.

Jos pidit tämän artikkelin lukemisesta HTML:n muuntamisesta WordPressiksi, sinun kannattaa tutustua tähän WordPress-kehittäjien palkkaa käsittelevään artikkeliin .

Kirjoitimme myös muutamista aiheeseen liittyvistä aiheista, kuten parhaasta koodieditorista, WordPress-koulutuksesta, JavaScript-kirjastoista ja Brackets-laajennuksista.

: wpdatatables.com