HTML: n muuntaminen WordPressiksi (vaihe vaiheelta)


HTML: n muuntaminen WordPressiksiTie puhtaalla HTML-muodossa rakennetuilta sivustoilta WordPressiin ei ollut lyhyt. Koko tekstiversioista web-suunnittelu on siirtynyt erittäin vuorovaikutteiseen web-läsnäoloon. Lisäksi meidän ei enää tarvitse kirjoittaa merkintöjä itse, vaan voimme antaa sisällönhallintajärjestelmien tehdä raskas nosto.


Tämä ei kuitenkaan tarkoita, että staattisia HTML-verkkosivustoja ei enää olisi. Itse asiassa HTML5, merkintäkielen uusin iteraatio, on erittäin tehokas ja antaa sinun luoda laadukkaita verkkosivustoja ilman CMS: ää niiden takana.

WordPressin kasvava markkinaosuus osoittaa kuitenkin, että yhä useammat ihmiset ovat siirtymässä käyttöjärjestelmään.

WordPressin markkinaosuus vuonna 2019

Joillekin heistä se tarkoittaa siirtymistä staattisesta HTML: stä WordPressiin. Tämä voi olla pelottava tehtävä, mutta tämä viesti yrittää selittää miten se tehdään muutamalla yksinkertaisella tavalla.

Seuraavassa esitetään useita tapoja muuntaa HTML-tiedostosta WordPressiksi. Ensin opit, mitä eri vaihtoehdot ovat, sekä niiden edut ja haitat. Sen jälkeen näytämme sinulle, kuinka suorittaa jokainen niistä askel askeleelta.

Lähdetään.

Kolme tapaa siirtyä staattisesta HTML: stä WordPressiin

Siirtyäksesi HTML: stä WordPressiin, sinun on muutettava HTML-suunnittelustasi WordPress-teema. Teema hallitsee WordPress-verkkosivuston ulkoasua ja tunnetta, kun taas toiminnallisuuden tarjoaa itse CMS sekä lisälaajennukset.

Kytkimen suorittamiseksi sinulla on useita vaihtoehtoja. Kumpi sinulle sopii, riippuu tekijöistä, kuten ajasta ja rahasta, jonka olet pystynyt ja halukas sijoittamaan, koodaustaidoista ja henkilökohtaisista mieltymyksistä. Seuraavat ovat päävaihtoehtoja.

A) Muunna HTML manuaalisesti WordPress-teemaan

Ensimmäinen vaihtoehto on myös teknisin. Jos siirryt tälle reitille, otat olemassa olevan koodisi ja käytät sitä lähtökohtana WordPress-tematiedostojen luomiseen.

Se ei ole liian monimutkainen, varsinkin jos sinulla on koodauskokemusta. Voit vetää sen pois hiukan HTML-, CSS- ja jollain PHP-tiedolla. Suuri osa siitä on kopiointi ja liittäminen.

Haittapuoli: vaikka päädyt toimivaan WordPress-teemaan, sillä ei ole kaikkia WordPressin tarjoamia ominaisuuksia. Esimerkiksi, ellet rakenna sitä sisällön jälkeen, sivustosi ei sisällä widget-alueita tai kykyä muuttaa valikkoasi WordPress-taustaohjelmasta.

Vaikka sivustosi tekee tehtävänsä, et voi hallita sitä kokonaan WordPressin kautta. Tästä syystä pidämme henkilökohtaisesti seuraavaa vaihtoehtoa.

B) HTML WordPressiin WordPressin lapsiteeman kautta

Mielestämme tämä on luultavasti helpoin ja järkevin tie tiellä vaivan ja rahainvestointien kannalta. Sen sijaan, että käytät olemassa olevaa sivustoasi hyppäämispisteenä, käytät sen sijaan valmiita WordPress-teemoja. Tämän jälkeen säädät vain sen muotoilua niin, että se muistuttaa vanhaa verkkosivustoasi.

Näin voit hyödyntää WordPressiä täysimääräisesti säilyttäen samalla vanhan sivustosi ulkoasun. Sinun ei myöskään tarvitse lisätä WordPress-ominaisuuksia jälkikäteen. Sen sijaan voit rakentaa olemassa olevan teeman – jotain, jolle WordPress-alusta on nimenomaisesti tarkoitettu.

C) Tuo sisältö HTML: stä WordPressiin laajennuksen avulla

On selvää, että jos et vaadi nykyisen mallisi käyttöä ja olet avoin sen muuttamiselle, asiat muuttuvat entistä helpommaksi. Tällöin sinun tarvitsee vain perustaa sivusto, asentaa teema ja tuoda HTML-sisältösi. Kuten alla näet, tämä on erittäin nopea ja kivuton prosessi.

A) Kuinka muuntaa HTML-tiedosto manuaalisesti WordPress-teemaksi

Jos tavoitteesi on aloittaa tyhjästä ja luoda oma WordPress-teema, joka muistuttaa nykyistä HTML-verkkosivustoasi, aloita tästä.

Älä huolestu, jos se kuulostaa pelottavalta, huomaat, että se on kaikkea muuta. Vain muutama tiedosto ja kansio sekä jotkut kopiointi ja liittäminen ovat kaikki mitä tarvitaan.

1. Luo teemakansio ja perustiedostot

Ensimmäinen asia, joka sinun on tehtävä, on luoda uusi teemakansio. Voit tehdä sen työpöydälläsi kuin tietokoneesi hakemistoon. Nimeä se mitä haluat teemaasi kutsutaan.

Siirry sen jälkeen koodieditoriin ja luo useita tekstitiedostoja. Nimeä heille seuraavat:

  • style.css
  • index.php
  • header.php
  • sidebar.php
  • footer.php

Älä tee vielä mitään heidän kanssaan, pidä tiedostot auki editorissa. Tarvitset niitä pian.

2. Kopioi olemassa oleva CSS WordPress-tyylisivulle

Nyt on aika valmistella WordPress-tyylisivu (tiedostostyle.css olet juuri luonut) kopioidaksesi vanhan sivustosi CSS: n siihen. Avaa tätä varten tiedosto ja liitä seuraava:

/ *
Teeman nimi: Kaksikymmentätoista
Teeman URI: http://wordpress.org/themes/twentythirteen
Kirjoittaja: WordPress-tiimi
Kirjoittajan URI: http://wordpress.org/
Kuvaus: WordPressin teema 2013 vie meidät takaisin blogiin, joka sisältää täyden valikoiman viestimuotoja, joista jokainen näkyy kauniisti omalla ainutlaatuisella tavalla. Suunnittelun yksityiskohtia on runsaasti aloittaen elävästä värimallista ja vastaavista otsikkokuvista, kauniista typografiasta ja kuvakkeista sekä joustavasta asettelusta, joka näyttää hyvältä kaikilta laitteilta, isoilta tai pieniltä.
Versio: 1.0
Lisenssi: GNU General Public License v2 tai uudempi
Lisenssin URI: http://www.gnu.org/licenses/gpl-2.0.html
Tunnisteet: musta, ruskea, oranssi, ruskeanruskea, valkoinen, keltainen, vaalea, yhden sarakkeen, kahden sarakkeen, oikean sivupalkin, joustavan leveyden, mukautetun otsikon, mukautetun valikon, toimittajan tyylillä, esitellyt kuvat, mikromuodot, jälkiformaatit, rtl-kielen tuki, tarttuva viesti, käännösvalmiina
Tekstialue: kaksikymmentätoista

* /

Tämä on ns. Tyylisivun otsikko (Tärkeää: älä jätä kommenttia/*...*/ tunnistaa!). Täytä jokainen osa näin:

  • Teeman nimi – Tässä menee teeman nimi. Se voi olla mitä haluat, mutta se on yleensä sama kuin teemakansion nimi.
  • Teeman URI – Voit yleensä lähettää teeman kotisivun tähän, mutta voit käyttää omaa sivustosi osoitetta.
  • kirjailija – Se olet sinä. Laita oma nimesi tänne tai mihin tahansa haluat kutsua.
  • Kirjoittajan URI – Linkki kotisivullesi. Se voi olla rakennuksesi tai mikä tahansa järkevä.
  • Kuvaus – Valinnainen kuvaus teemaasi. Tämä näkyy WordPress-taustaohjelmassa.
  • Versio – Teeman versio. Koska et julkaise sitä, sillä ei ole väliä. Laitamme yleensä tähän 1.0.
  • Lisenssi, lisenssin URI, tunnisteet – Nämä asiat ovat tärkeitä vain, jos aiot lähettää teeman WordPress-teemahakemisto. Voit jättää heidät pois tässä tapauksessa, sisällytimme heidät vain valmistumisen vuoksi.

Kopioi ja liitä otsikon jälkeen olemassa oleva CSS staattiselta HTML-verkkosivustoltasi. Tallenna tiedosto sitten uuteen teemakansioon ja sulje se. Aika siirtyä muualle.

3. Erota olemassa oleva HTML

Seuraavaksi sinun on ymmärrettävä, että WordPress käyttää yleensä PHP: tä tietojen hakemiseen tietokannasta. Tästä syystä sinun on leikattava nykyinen HTML-tiedosto eri osiksi, jotta CMS voi koota ne oikein.

Vaikka tämä kuulostaa monimutkaiselta, se tarkoittaa vain, että kopioit ja liitä HTML-asiakirjan osat useisiin PHP-tiedostoihin. Tämän osoittamiseksi paremmin olemme koonneet yksinkertaisen esimerkkisivun, jonka voit nähdä alla.

html WordPress-esimerkkisivulle

Kuten näette, se on hyvin tavallinen HTML-malli, joka sisältää otsikon, sisältöalueen, sivupalkin ja alatunnisteen. Oheinen koodi on tämä:





Verkkosivun otsikko







Verkkosivun otsikko

  • navigointikohde # 1
  • navigointikohde # 2
  • navigointikohde # 3

Artikkelin otsikko

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodades urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, egest molestie nisl pharetra in. Kaikkien muualle luokittelemattomien eu-porttien nopeutta.

alanimikkeen

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodades urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, egest molestie nisl pharetra in. Kaikissa muissa muodoissa eu porta velit mollis. Curabitur posuere enim eget turpis feugiat tempor. Etiam ullamcorper lorem dapibus velit suscipit haavaumat. Proin in est sed erat facilisis pharetra.

alanimikkeen

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodades urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, egest molestie nisl pharetra in. Kaikissa muissa muodoissa eu porta velit mollis. Curabitur posuere enim eget turpis feugiat tempor. Etiam ullamcorper lorem dapibus velit suscipit haavaumat. Proin in est sed erat facilisis pharetra.

Jos mallisi on erilainen, saatat joutua säätämään jonkin verran alla olevia vaiheita. Kokonaisprosessi pysyy kuitenkin samana.

Avaa ensin nykyinen index.html (HTML-sivustosi päätiedosto). Sen jälkeen käy läpi äskettäin luodut WordPress-tiedostot ja kopioi seuraava niihin (alla olevat esimerkit ovat merkintöni):

header.php

Kaikkea HTML-tiedostosi alusta pääsisältöalueelle (yleensä merkitty

tai

) menee tähän tiedostoon. Tämän lisäksi, juuri ennen kuin sanotaan, Kopioi ja liitä . Tämä on välttämätöntä, jotta monet WordPress-laajennukset toimivat oikein.




Verkkosivun otsikko






Verkkosivun otsikko

  • navigointikohde # 1
  • navigointikohde # 2
  • navigointikohde # 3

sidebar.php

Kaikki osaan kuuluu

Sen jälkeen olet valmis index.html ja voi sulkea sen. Tallenna kaikki muut tiedostot teemakansioon ja sulje ne paitsi header.php ja index.php. Sinulla on vielä työtä heidän kanssaan.

4. ”WordPressify” Header.php ja Index.php

Otsikon osalta jäljellä on vain tyylitaulukon kutsun muuttaminen HTML: stä WordPress-muotoon. Voit tehdä niin etsimällä olemassa olevan linkin osiossa. Se voi näyttää noin:

Korvaa se tällä:

Cool, nyt voit tallentaa ja sulkea header.php. Käänny sitten index.php. Sen pitäisi olla tyhjä tällä hetkellä. Joten ensin kopioi ja liitä nämä koodirivit:




Nämä ovat puhelut muihin tiedostoihin, jotka sisältävät muun sivustosi. Saatat huomata välilyönnin otsikon kutsun ja sivupalkin välillä. Sitä lisäät Silmukka.

Jälkimmäinen on osa WordPressiä, jossa CMS tuottaa taustalla luodun sisällön. On ratkaisevan tärkeää, jos haluat, että WordPress lisää sisältöä dynaamisesti sivuillesi, jotka tulet myöhemmin. Liitä tämä tähän heti sen jälkeen :


Säästä nyt index.php arkistoi ja sulje se. Hyvin tehty! Perusteema on valmis. Nyt voit lisätä sen uuteen WordPress-sivustoosi.

5. Luo näyttökuva ja lähetä teema

Nyt lisäät teeman kuvakaappauksen, joka toimii yhdessä tyylilehden otsikossa olevien tietojen kanssa verkkosivustosi esikatseluna WordPress-taustaohjelmassa.

Voit tehdä tämän avaamalla nykyisen sivustosi selaimessa ja ottamalla kuvakaappauksen haluamallasi menetelmällä. Avaa sen jälkeen valitsemasi kuvankäsittelyohjelma ja rajaa se 880 × 660 kuvapisteeseen. Tallenna se nimellä screenshot.png ja lisää se teemakansioon. Nyt olet valmis lähettämään teemaasi.

Saadaksesi uusi teema WordPress-sivustoosi, sinulla on useita vaihtoehtoja. Edellytyksenä on kuitenkin, että kaikki tiedostot sijaitsevat teemakansiossa.

Ensimmäinen vaihtoehto on luoda ZIP-tiedosto siitä. Siirry sen jälkeen WordPress-sivustollesi ja sitten Ulkonäkö> Teemat. Napsauta tätä Lisää uusi ylhäällä ja sitten Lataa teema.

lataa muunnettu teema

Selaa tulevassa valikossa -painiketta ZIP-tiedoston sijaintiin. Valitse se ja napsauta Avata, sitten Asenna nyt. Aktivoi teema, kun se on valmis.

Vaihtoehtoisesti voit muodostaa yhteyden palvelimeesi FTP: n kautta (tai vain siirtyä kiintolevyn paikallishakemistoon) ja siirtyä kohtaan wp-content / themes. Lataa sitten (pakkaamaton) teemakansio sinne. Sen jälkeen aktivoi teema samasta paikasta kuin aiemmin.

Kiva! Uuden sivustosi käyttöliittymän tulisi näyttää nyt vanhalta sivustoltasi. Ainoa jäljellä oleva siirto HTML: stä WordPressiin on nykyisen sisällön tuominen. Käsittelemme tätä tarkemmin alla, kun puhutaan olemassa olevan WordPress-teeman käytöstä.

Huomaa kuitenkin, että vaikka perusteema toimii nyt, voit tehdä useita asioita integroidaksesi HTML-koodisi paremmin WordPressiin. Tämä sisältää jolloin blogin otsikko ja kuvaus ovat muokattavissa, widget-alueiden lisääminen, kommentteja ja paljon muuta. Saatat joutua lisäämään myös CSS-merkinnät, koska sisältö ei kuulu alkuperäiseen malliin, kuten kuvat.

Koska se on paljon työtä, haluamme henkilökohtaisesti käyttää ratkaisua, jolla on jo kaikki tuo toiminnallisuus ja joka tarvitsee vain suunnittelumuutoksen. Tätä me näytämme sinulle seuraavaksi.

B) HTML WordPressiin WordPressin lapsiteeman kautta

Jos yllä oleva näyttää sinulle liian intensiiviseltä, seuraava menetelmä saattaa olla hallittavissa. Sen avulla voit hyödyntää tuhansia WordPress-teemoja säilyttäen samalla alkuperäisen suunnittelun.

Se tapahtuu niin kutsutun lapsiteeman avulla. Nämä teemat on rakennettu toisen teeman (vanhemman) päälle, joka ei seiso yksinään, vaan vain muuttaa vanhemman teemaa tarpeitasi vastaavaksi. Tarpeeksi helppo tehdä, vaikka se vie vähän etsivätyötä.

1. Valitse sopiva teema

Ensimmäinen askel on valita sopiva teema mallin perustaksi. Siksi se auttaa löytämään teeman, joka on lähellä nykyistä suunnitteluasi, tai käyttää teemakehystä tai aloitusteemaa, jotka molemmat on tehty toimimaan räätälöityjen teemojen pohjana.

Tarkista WordPress-teemahakemisto, luettelomme mahtavia teemoja tai tutkia premium-teemat sopivan ehdokkaan löytämiseksi. Tutkimuksen jälkeen päätimme, että Kaksikymmentäkaksi teema olisi hyvä lähtökohta siirtymiselleni HTML: stä WordPressiin. Yleensä valitsemme jotain ajan tasalla olevaa, mutta se sopii hyvin työskentelemämme yksinkertaisen suunnittelun kanssa.

Kun olet valinnut, asenna teema WordPress-verkkosivustoosi samalla tavalla kuin asentaisit minkä tahansa teeman. Sitä ei tarvitse aktivoida. Kuten mainittiin, se on vain siellä, että se tarjoaa sinulle perustan työskennellä. Loppu tapahtuu lapsiteemassa.

2. Luo uusi kansio

Samoin kuin aikaisemmassa menetelmässä, lapsiteeman kohdalla sinun on luotava teemakansio. Täältä voit laittaa kaikki siihen kuuluvat tiedostot.

Lapsiteemoja luotaessa on tavallista, että kutsutaan kansiota samalla nimellä kuin vanhemmat teemat plus -lapsi. Joten koska lapsiteema perustuu kaksikymmentäkahta teemaan, kutsumme sen hakemistoa twentytwelve-lapsi.

Minkä tahansa nimen valitsetkin, älä vain sisällytä välilyöntejä, koska se ei toimi tällä tavalla.

3. Asenna tyylisivu

Lasten teema tarvitsee myös tyylisivun. Tämä toimii melkein samalla tavalla kuin yllä luotu tyylitaulukko. Sillä on kuitenkin hieman erilainen otsikko ja se sisältää vähemmän koodia.

Pääset toiseen osaan myöhemmin. Luo toistaiseksi tavallinen style.css ja aseta se teemakansioon. Lisää sitten seuraava:

/ *
Teeman nimi: Kaksikymmentä viisitoista lasta
Teeman URI: http://example.com/twenty-fifteen-child/
Kuvaus: Kaksikymmentä viisitoista lasta koskeva teema
Kirjoittaja: John Doe
Kirjoittajan URI: http://example.com
Malline: kaksikymmentätoista
Versio: 1.0.0
Lisenssi: GNU General Public License v2 tai uudempi
Lisenssin URI: http://www.gnu.org/licenses/gpl-2.0.html
Tunnisteet: vaalea, tumma, kaksisarakkeinen, oikea sivupalkki, reagoiva asettelu, saavutettavuusvalmis
Tekstialue: 25-vuotias
* /

Kuten voitte nähdä, se on hyvin samanlainen kuin aiemmin käyttämäsi tyylisivun otsikko yhdellä poikkeuksella: se sisältää Sapluuna tag.

Tähän kohtaan sinun tulisi laittaa vanhemmalle toimivan teeman nimi. Ilman sitä lapsiteema ei toimi. Tämän välttämiseksi syötä vanhemman kansion nimi. Joten kaksikymmentäkaksi se olisi Malli: kaksikymmentäkaksi.

4. Luo Functions.php ja Peri vanhemmat tyylit

Ainoastaan ​​tyylitaulukolla ja kansiolla on jo mahdollista aktivoida lapsiteema. Se ei kuitenkaan tee paljon hyvää, koska sivustosi näyttäisi tällä hetkellä HTML-sivulta ilman muotoilua.

Jos haluat muuttaa sitä, sinun on ensin perittävä vanhempien tyylit ja sitä varten tarvitset functions.php. Tämä tiedosto on tärkeä osa kaikkia WordPress-asennuksia ja antaa sinun tehdä laajoja muutoksia verkkosivustollesi.

Tässä tapauksessa kuitenkin käytät sitä vain vanhempien tyylien soittamiseen. Luo sitä varten uusi tiedosto ja soita sille functions.php. Ensimmäinen asia, jonka lisäät alussa, on tämä:

Avautuvalla PHP-tunnisteella tiedosto on teoriassa valmis, mutta se ei tee vielä mitään. Joten lisäksi joudut syöttämään tämän:

toiminto child_theme_enqueue_styles () {

$ parent_style = 'vanhemman tyyli';

wp_enqueue_style ($ parent_style, get_template_directory_uri (). '/style.css');
wp_enqueue_style ('lapsityylinen',
get_stylesheet_directory_uri (). '/Style.css',
taulukko ($ parent_style),
wp_get_theme () -> get ( 'Version')
);
}
add_action ('wp_enqueue_scripts', 'child_theme_enqueue_styles');

Tämä koodinpätkä kertoo WordPressin siirtyvän mallihakemistoon (aliasteemaan) ja käyttämään siihen sisältyviä tyylejä. Se mahdollistaa myös teeman muokkaamisen lapsiteeman kautta (lisätietoja myöhemmin).

5. Aktivoi lapsiteema

Tässä vaiheessa lapsiteema on valmis aktivoitavaksi.

Voit lisätä kuvakaappauksen, kuten yllä olevissa ohjeissa, jos haluat. Sen lisäksi voit joko kopioida sen ja lisätä sen WordPressiin Ulkonäkö> Teemat> Lisää uusi> Lataa teema tai lisäämällä kansio sellaisenaan wp-content / themes.

Molemmissa tapauksissa, kun aktivoit teema, sivustosi pitäisi nyt näyttää täsmälleen vanhemmaltaan.

6. Säädä malli

Edellä mainittu etsivätyö alkaa tässä. Nyt on aika muuttaa olemassa olevan teeman muotoilu niin, että se muistuttaa alkuperäistä HTML-sivustoasi.

Esimerkiksi yksi ensimmäisistä, mikä erottuu, on, että WordPress-teema lisää tilaa otsikon yläpuolelle ja alatunnisteen alle, jota HTML-sivustollamme ei ole.

html WordPressiin lapsiteema-esimerkkisivun kautta

Tämän korjaamiseksi voimme tarkastella HTML-sivustoa meidän selaimen kehittäjän työkalut löytää vastuullinen merkintä. Kun teemme niin, kohtaamme tämän:

vartalo {
marginaali: 0;
}

Sitten teemme saman uuden WordPress-teemani kanssa, josta löydät nämä tyylit:

body .site {
reunan yläosa: 48px;
marginaalinen yläosa: 3,428571429rem;
marginaali-pohja: 48px;
marginaali-pohja: 3,428571429rem;
}

Tavoitteenani on nyt soveltaa muotoilua HTML-sivustolta WordPress-teemaan. Tässä tapauksessa voimme saavuttaa tämän yksinkertaisesti lisäämällä seuraavat lapsen teemaani style.css:

body .site {
marginaali: 0 auto;
}

Tallennuksen jälkeen WordPress-teemassa on uusia tyylejä:

html WordPressiin lapsiteeman muokkaaman esimerkkisivun kautta

Tämä johtuu siitä, että kaikki lapsiteeman tyylitaulukkoon lisäämäsi ohittaa sen vanhemman tyylit. Loput merkinnät pysyvät kuitenkin ehjinä, joten voit muuttaa vain asioita, jotka ovat merkityksellisiä.

Lisäksi, jos käytät HTML5-mallia aloittajana ja nykyaikaista WordPress-teemaa vanhempana, suuri osa perusmerkinnöistä vastaa, mikä tekee elämästäsi paljon helpompaa.

Lapsiteemoilla voi tehdä paljon enemmän, jotka voit oppia tässä. Kun olet säätänyt mallia, on aika tuoda sisältösi. Mennään siihen nyt.

C) Tuo sisältö HTML: stä WordPressiin laajennuksen avulla

Lopuksi HTML-sivustosta WordPressiin siirtymisessä käytetään olemassa olevaa teemaa sellaisenaan ja siirrät vain sisältösi HTML-sivustolta siihen. Tämä on yksinkertaisin tapa - sinun tarvitsee vain asentaa ja aktivoida valitsemasi teema (oletamme, että osaat tehdä tämän jo nyt) ja noudata sitten alla olevia vaiheita.

Muuten, vaikka tämä prosessi ei ole kova, on asioita, jotka voivat mennä pieleen. Tästä syystä varmista, että varmuuskopioit WordPress-sivustosi ennen kuin käsittelet sitä.

1. Asenna Tuo laajennus

Ensimmäinen asia, joka sinun on tehtävä, on asentaa laajennus HTML-tuonti 2. Helpoin tapa saavuttaa tämä on mennä Laajennukset> Lisää uusi ja etsi se nimen mukaan. Kun löydät sen luettelosta (se saattaa olla alareunassa), napsauta Asenna nyt. Aktivoi se, kun se on valmis.

html WordPressin tuontilaajennukseen

2. Valmistele tuonti

Jos haluat tuoda useita sivuja kerralla, sinun on ladattava ne samaan palvelimeen kuin WordPress-asennus. Laajennus ehdottaa jotain html-tiedostoja-to-tuonti  kansion nimi, mutta voit valita mitä haluat. Muista vain muistaa polku.

Kuten seuraavasta näet, voit myös tuoda yksittäisiä sivuja yksi kerrallaan. Kumpaakin tapaa varten siirry WordPressiin ja Asetukset> HTML-tuonti. Menemme nyt perusasetukset. Jos tarvitset lisätietoja tai jos jokin on epäselvää, katso virallinen käyttöopas.

Tiedostot

html WordPress -tuontitiedostoihin

Määritä tämä näyttö seuraavasti:

  • Tuotava hakemisto - Kirjoita polku, johon olet juuri kopioinut olemassa olevat tiedostosi.
  • Vanhan sivuston URL-osoite - Käytetään uudelleenohjauksiin. Kirjoita vanha URL-osoite. Käsittelemme tätä uudelleen myöhemmin tässä artikkelissa.
  • Oletustiedosto —Vanhaisen sivuston hakemistojen oletustiedosto yleensä index.html.
  • Sisällytettävät tiedostotunnisteet - Tiedostojen laajennukset, jotka haluat tuoda.
  • Poissuljettavat hakemistot - Jos vanhassa sivustossa on hakemistoja, joita et halua tuoda, kirjoita ne tähän.
  • Säilytä tiedostonimet - Jos haluat, että laajennus käyttää automaattisesti tiedostosi nimiä uudena URL-osoitteena, valitse tämä valintaruutu. Tämä on järkevää, jos otsikot ovat erittäin pitkiä, koska yleensä maahantuoja käyttää niitä luomaan etanan.

Sisältö

Sisällön alla on määritettävä HTML-tunniste, joka sisältää sivustosi sisällön.

html WordPress -sisällön tuontiin

Voit tehdä sen valitsemalla vaihtoehdon HTML-tunniste huipulla. Määritä sitten tunniste seuraaviin kolmeen kenttään. Jos sisältö sisältyy esimerkiksi tunnisteeseen, jota kutsutaan

, syöttämäsi tiedot olisivat div, id ja tärkein.

Tämän sivun muiden asetusten on oltava itsestään selviä ja niiden avulla on mahdollista tuoda kuvia, asiakirjoja, päivittää sisäisiä linkkejä ja paljon muuta.

Otsikko ja metatiedot

html WordPress -tuotteen otsikkoon ja metatietoihin

Tämä osa on samanlainen kuin aiempi sisältöosa. Se käsittelee kuitenkin sivunimikkeitä. Aluksi sinun on kerrottava laajennukselle, kuinka otsikot on merkitty HTML-malliin, jotta se voi tuoda ne oikeaan paikkaan.

Lisäksi voit suodattaa tarpeettomat asiat, kuten sivuston otsikon, kuten WordPress-teemat usein näyttävät oletuksena. Jos otsikot sijaitsevat sisällössä, voit myös kehottaa maahantuojaa poistamaan ne, jotta niitä ei sisällytetä kahdesti.

Tärkeää on, että päätät tuoda vanhan sisällön, kuten viestit tai sivut. Loppuosa on itsestään selvää ja antaa sinun määrittää WordPress-asetukset uusille sivuille.

Muokatut kentät

html to wordpress tuo mukautettuja kenttiä

Jos sinulla on tietoja, jotka on tuotava mukautettuihin kenttiin, voit määrittää tämän täällä.

Luokat ja tunnisteet

html WordPressin tuontiluokkiin ja tunnisteisiin

Täällä voit määrittää luokkia, tunnisteita ja lähettää muotoja tuodulle sisällöllesi. Laajennus näyttää sivustosi nykyisen taksonomian tämän vaiheen helpottamiseksi.

Työkalut

html WordPressin tuontityökaluihin

Tässä näytössä on lueteltu useita hyödyllisiä työkaluja onnistuneeseen tuontiin HTML: stä WordPressiin.

3. Aloita tuonti

Kun olet valmis, tallenna asetukset. Tämä mahdollistaa Tuo tiedostoja painiketta. Napsauta sitä aloittaaksesi.

HTML WordPress -tuontiin

(Huomaa: pääset tänne myös Työkalut> Tuo ja sitten poiminta Suorita maahantuoja alla HTML vaihtoehto.)

Valitse seuraavaksi, tuodaanko tiedostohakemisto vai yksittäinen tiedosto (selataan siihen), ja paina sitten Lähetä. Laajennus menee sitten töihin.

Kun se on valmis, sinulla pitäisi olla kaikki WordPress-sivustosi olemassa oleva sisältö ja uuden teeman alustama. Tai jos menit jollain muista reiteistä, sivustosi pitäisi näyttää periaatteessa samalta kuin entinen HTML-verkkosivusto. Hienosti tehty!

Lisävaiheet

Jos aiot ottaa WordPress-sivuston käyttöön samassa paikassa, jossa staattinen HTML-verkkosivusto oli ennen, on vielä muutama tehtävä ennen kuin lopetat.

Ensimmäinen on tarkistaa vasta tuotujen viestien ja sivujen URL-osoitteet varmistaaksesi, että ne ovat hakukoneystävällisiä (ts. Sisältävät avainsanat, joille haluat sijoituksen). Se on hyvin yksinkertaista - mene vain sivulle tai viestiin ja katso otsikon alla olevaa URL-osoitetta.

tarkista pysyvät linkit html: n jälkeen WordPressin tuontiin

Vaihda se napsauttamalla Muokata oikealla, vaihda valitsemasi URL-osoitteeseen ja paina kunnossa.

Toinen asia on toteuttaa uudelleenohjaukset vanhoista URL-osoitteista uusiin. Tällä tavalla et menetä olemassa olevaa SEO-arvoa.

Jos olet täyttänyt vanhan sivuston osoitteen HTML-laajennuksessa, se luo uudelleenohjauskoodin sinulle. Voit kopioida ja liittää tämän tiedostoon.htaccess joka sijaitsee palvelimellasi (yleensä juurihakemistossa).

Käytät sitä FTP: n kautta, saatat joutua sallimaan piilotettujen tiedostojen näyttämisen, koska se ei ole oletuksena näkyvissä. Muokkaa sitten .htaccess ja syötä säännöt.

Huomaa, että se toimii vain, jos olet jättänyt URL-osoitteet ennallaan. Jos et ole joutunut määrittämään mukautettuja uudelleenohjauksia, käytä Uudelleenohjauslaajennus. Se on erittäin mukava ratkaisu, jota seurataan myös aina, kun joku laskeutuu sivustosi olemattomaan URL-osoitteeseen. Tällä tavalla voit toteuttaa uudelleenohjaukset myös näihin linkkeihin.

Siirritkö onnistuneesti HTML: stä WordPressiin?

Ja siinä se on. Olet juuri oppinut muuttamaan staattisen HTML-sivuston WordPressiksi. Seurauksena on, että sinusta on tullut osa yhtä suurimmista web-yhteisöistä ja saanut pääsyn tuhansiin resursseihin sivustosi entistä paremmiksi.

Edellä valitsemastasi ratkaisusta riippuen olet jo saanut kuvan WordPressin toiminnasta. Tästä eteenpäin on melko helppo haarautua ja syventyä verkkosivustojen luomiseen WordPress-alustalla. Jos tarvitset lisäapua tällä alueella, tällä sivustolla on runsaasti sitä. Voit oppia:

  • Mukauta WordPress vaihe vaiheelta
  • Siirrä sivustosi HTTP: stä HTTPS: ään
  • Lisää mukautettuja fontteja WordPressiin
  • Nopeuta WordPress-verkkosivustoasi
  • Lisää yhteyslomake WordPress-sivustoosi

Toivomme sinulle onnea äskettäin lyötetyn WordPress-verkkosivustosi kanssa. Toivomme sinun nauttivan työskentelystä WordPressin kanssa yhtä paljon kuin mekin.

Siirritkö sivustosi HTML: stä WordPressiin? Kuinka kokemuksesi oli? Onko lisää vinkkejä? Kerro meille alla olevassa kommenttiosassa.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map