Veebi alguses olid veebisaidid üsna lollid. See tähendab, et need ei olnud muud kui tekst ja staatiline HTML-kood, millel polnud väljamõeldud efekte ja väga vähe interaktiivsust.

Kakskümmend aastat hiljem põhinevad veebisaidid keerukal programmeerimisel ja nende loomine võib võtta nädalaid ja nädalaid. Need on funktsioonirohked, väga interaktiivsed, tundlikumad, parema välimusega ja nii edasi.

Täna saate ise koodi kirjutamise asemel kasutada sisuhaldussüsteeme, mis tegelevad teie veebisaidi taga oleva koodiga ise. Kõik, mida pead tegema, on valida teema ja alustada postitamist.

WordPress on üks selline CMS, mida kasutavad nüüd miljonid üle maailma. WordPressi parim osa on see, et see on väga paindlik platvorm. Selle kasutamiseks ei ole vaja kodeerimisteadmisi ning saate sellega luua kõige tundlikumaid ja hämmastavamaid veebisaite.

Kui teil on veebisait, mida pole alates 1990. aastatest uuendatud, aitab see meie wpDataTablesi meeskonna loodud artikkel teil HTML-i WordPressiks teisendada, et ka teie saaksite kasutada kaasaegse veebitehnoloogia eeliseid.

Jätkake lugemist, et rohkem teada saada.

Miks peaksite HTML-i WordPressiks teisendama?

Põhjused, miks inimene peaks HTML-i WordPressiks teisendama, on üsna mitmekesised. Siin on valik kõige olulisematest:

WordPressi teisendamine annab teile täieliku kontrolli oma veebisaidi iga detaili üle. Kui teile mõni saidi osa ei meeldi, saate seda hõlpsalt oma maitse järgi kohandada.
WordPressi saitidele on staatiliste HTML-saitidega võrreldes palju lihtsam juurde pääseda, neid hallata ja hooldada. See on väga oluline põhjus HTML-i migreerimiseks WordPressi.
Teisendades oma HTML-malli stiili WordPressiks, saate ainulaadse teema, mida ükski teine CMS-i kasutaja ei oma.
WordPress aitab otsingumootoritele optimeerida ja tagab, et teie veebisaidi avastavad rohkem inimesi.
Veebisaidi arendajana väheneb teie töö poole võrra, sest WordPress saab hakkama enamiku tegevustega, mis olid varem tarbetult aeganõudvad.

Staatiliselt HTML-ilt WordPressile üleminek: meetodid

Nüüd, kui teil on kõik põhjused HTML-i WordPressiks teisendamiseks, saate edasi õppida, kuidas seda teha.

Valida on kahe meetodi vahel: käsitsi meetod, mis hõlmab kõike nullist ise; ja lapseteema meetod, mis hõlmab WordPressi põhiteema kasutamist ja selle kohandamist vastavalt teie vajadustele.

Meetodi valik sõltub teie kogemusest kodeerimisega, sellest, kui palju aega soovite sellesse ülesandesse investeerida, samuti teie enda eelistustest. Kõiki neid meetodeid tutvustatakse allolevates jaotistes, kus saate teada, kuidas HTML-i WordPressiks teisendada.

Käsitsi meetod

1 Looge uus teemakaust

Looge oma töölauale uus kaust, kuhu teie teemafailid salvestatakse. Andke sellele kaustale nimi, mis teile meeldib (see tähistab teema nime). Looge need failid eelistatud koodiredaktoris ja jätke need avatuks:

stiil.css
index.php
header.php
külgriba.php
jalus.php

2 Kopeerige olemasolev CSS-kood oma uuele stiililehele

Kui olete failid loonud, saate jätkata CSS-koodi kopeerimisega. Need, kes soovivad oma saite dubleerida ja WordPressi ümber paigutada, peavad eksportima ja importima oma eelmise saidi CSS-koodi. CSS vastutab saidi välimuse eest, seega muutke faili style.css, lisades sellele järgmised koodiread:


/*
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.
*/

Asenda nõutud teave enda omaga, lisa ülejäänud CSS-i read ja ongi valmis. Ärge unustage faili salvestada. Nüüd saate style.css-i sulgeda.

3 Hankige oma praegune HTML-kood

Minge oma saidi faili index.html ja tõstke esile kogu sisu alates dokumendi algusest kuni märgendini div class="main". See jaotis tuleb kleepida 1. sammus loodud faili header.php.

Minge tagasi faili index.html ja tõstke esile kõik elemendi class="sidebar” sees. Kopeerige sisu ja kleepige see loodud sidebar.php faili. Tehke sama jaluse puhul, kogu sisu pärast külgriba elementi.

Faili index.php jaoks valige kogu sisu, mis pärast esiletõstmist alles jääb, ja kleepige see uude faili, salvestage ja jätke see järgmise sammu jaoks avatuks.

4 Redigeerige faili index.php

Faili index.php viimistlemiseks kopeerige need koodiread ja kleepige need dokumendi ülaossa:

Seejärel asetage need PHP read faili index.php allossa.

Fail pole veel valmis, kuna peate looma postitustsükli, mis esindab mõnda PHP-koodi, mida WordPress vajab teie veebisaidi ajaveebipostituste või artiklite korrektseks kuvamiseks. Lisage faili sisu jaotisesse järgmised koodiread:

Kui olete valmis, salvestage fail, sulgege see ja liikuge järgmise sammu juurde.

5 Laadige üles oma uus teema

Kui teie teemakaust on valmis, peate selle oma saidile üles laadima ja viima lõpule HTML-i teisendamise WordPressiks. Selleks liikuge kausta, kuhu installisite WordPressi, ja asetage äsja loodud kaust kausta /wp-content/themes/.

Avage oma WP administraatori leht, Välimus ja seejärel Teemad, et näha, kas teema nimi kuvatakse loendis või mitte. Kui see nii on, olete teinud kõik õigesti ja saate selle aktiveerida. Kui seda ei juhtu, lugege hoolikalt kõiki samme, kuidas HTML-i WordPressi teisendada.

Seal on ka see kasulik Traversy Media videojuhend, mida peaksite vaatama:

WordPressi lapseteema kasutamine

Kui eelmises etapis mainitud sammud tunduvad teie taseme jaoks liiga keerulised, on see meetod, mis nõuab kodeerimise vallas vähem teadmisi. Seda on lihtsam hallata ja see võtab ka vähem aega.

HTML-i kiiremaks teisendamiseks WordPressi saate kasutada olemasoleva teema alamteemat . Lapseteemad on nimetatud sel viisil, kuna need on üles ehitatud teisele teemale, milleks on vanemateema.

1 Valige teema

Kõigepealt valige oma HTML-i kujundusele sobiv teema. Otsige lapseteema, mis sarnaneb teie olemasoleva veebisaidiga. Otsige üles selle struktuur, et te ei peaks kodeerimisesse liiga palju süvenema.

Peaksite valima alustava teema, kuna need tuginevad väga lihtsatele koodiridadele.

2 Looge uus teemakaust

Nii nagu eelmisel juhul, peate looma uue teemakausta. Ainus erinevus seisneb selles, et annate kaustale nime samamoodi nagu lapseteema aluseks olevale vanemteemale ja lisate sellele järelliide „-laps”.

Näiteks kui teie teema nimi on Twenty Nine, nimetate kausta "kakskümmend üheksa last". Veenduge, et te ei lisaks nimesse tühikuid.

3 Seadistage uus laaditabel

Järgmisena looge kaustas fail style.css ja lisage need koodiread:


/*
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
*/

Pidage meeles, et see on näide. Peate selle teabe enda omaga asendama. Pärast lõpetamist salvestage fail.

4 Looge fail functions.php

Kui teil on fail style.css olemas, saate teema sellisel kujul aktiveerida. Veebisaidi paremaks väljanägemiseks ja töötamiseks peate siiski kasutama põhiteema funktsioone ja stiile. Selleks tuleb luua fail functions.php.

Kasutage neid koodiridu ja salvestage fail:


/*
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 Aktiveerige lapseteema

Lõpuks peate teema aktiveerima. Pakkige kaust kokku ja lisage see WordPressi, navigeerides menüüsse Välimus, Teemad ja seejärel klõpsake nuppu "Lisa uus". Laadige ZIP-fail sinna üles. Teine võimalus oleks lohistada kaust jaotises wp-content/themes.

Lõpetamisel

HTML-i WordPressi teisendamiseks vajate kannatlikkust, kuid see on kindlasti vaeva väärt. Kuigi protsess nõuab teie tähelepanu, saate tõeliselt ainulaadse saidi, mida on igast vaatenurgast palju mugavam hallata.

Kui järgite hoolikalt selles artiklis esitatud juhiseid, ei saa midagi valesti minna, seega ärge muretsege! Kui teil siiski tekib probleeme, vaadake WordPressi kogukonna tugifoorumeid. Seal on palju kasutajaid, kes aitaksid teid hea meelega.

Kui teile meeldis lugeda seda artiklit HTML-i WordPressiks teisendamise kohta, peaksite lugema seda artiklit WordPressi arendaja palga kohta .

Kirjutasime ka mõnest seotud teemast, nagu parim koodiredaktor, WordPressi koolitus, JavaScripti teegid ja Bracketsi laiendused.

: wpdatatables.com