Cum se convertește site-ul HTML în WordPress gratuit? Ghid

Publicat: 2015-05-18

La început, toate site-urile web erau realizate cu text și HTML static. Nu exista WordPress și trebuie să convertiți site-ul HTML în WordPress sau în orice alt sistem CMS.

Multe companii se bazează încă pe site-uri web HTML simple pentru prezența lor online. Aceste site-uri HTML sunt, de obicei, de natură statică. Acest lucru înseamnă că chiar și modificarea unui detaliu minor pe site se face prin editarea fișierului de codare.

Acum peste 20 de ani mai târziu, web-ul este un loc mult diferit. Alimentând peste 25% din Web , WordPress devine din ce în ce mai mult sistemul de gestionare a conținutului (CMS) la alegere pentru utilizatorul mediu.

Site-urile web sunt mult mai complexe. Acestea oferă experiențe mai bogate și mai plăcute atât creatorilor de site-uri, cât și vizitatorilor. Trecerea la WordPress înseamnă a începe din nou și a pierde tot timpul, energia și banii pe site-ul actual?

Cuprins

Site Web HTML

Indiferent de modul în care este codat site-ul dvs., odată ce un vizitator încarcă o pagină pe site-ul dvs., browserul preia toți biții (include partea serverului, imagini dintr-un alt director etc.) și le pune pe toate împreună într-un HTML static final. pagină.

Chiar dacă unele elemente de pe pagină sunt încă dinamice, codul în sine este împreună într-un singur loc care poate fi mutat într-o pagină WordPress care ar funcționa în continuare. S-ar putea să existe unele excepții de la asta, dar pentru majoritatea site-urilor de acolo, acest lucru ar fi adevărat.

Chiar dacă site-ul dvs. constă din somepage.php, care apelează un fișier numit header.inc și un fișier numit footer.php, atunci când utilizatorul vizualizează somepage.php într-un browser, codul sursă rezultat se află într-un singur loc , ca și cum au fost codificate manual ca o pagină HTML statică.

Acesta este tipul de cod necesar pentru a converti un site în WordPress. Oricine are o instalare WordPress și tema / pluginurile potrivite poate avea un site web modern, cu design și funcționalitate avansate.

Migrați de la site-ul HTML static la pașii prealabili WordPress

Dacă sunteți gata să treceți la WordPress, mai jos sunt patru pași de luat în considerare:

1. Analizați site-ul dvs. HTML existent

Verificați site-ul dvs. pentru conținut irelevant sau învechit și, dacă a fost găsit, curățați-l. Examinați sistemul de navigație actual și gândiți-vă cum poate fi îmbunătățit. Efectuarea analizei site-ului dvs. HTML vă va ajuta să decideți ce conținut, caracteristici și funcționalități ar trebui migrate către WordPress.

Acest lucru vă va oferi o idee clară despre ce pluginuri trebuie să instalați pentru a obține aceeași funcționalitate pe platforma WordPress.

2. Cunoașteți WordPress

Instalarea WordPress este un proces destul de ușor. Majoritatea gazdelor web oferă instalarea cu un singur clic. Dacă nu este familiar, ar fi bine să citiți și să informați despre noua platformă pe care va lucra site-ul dvs.

3. Faceți o copie de rezervă a site-ului dvs. HTML

Este recomandat să faceți o copie de rezervă completă a site-ului dvs. static pentru a evita orice risc de pierdere a datelor în timpul migrării.

4. Convertiți site-ul HTML în WordPress

Presupunând că aveți suficiente cunoștințe de codificare, iar site-ul dvs. este mic, cea mai bună opțiune posibilă în fața dvs. este să împărțiți codul HTML existent în patru secțiuni (antet, subsol, bara laterală și conținut) și apoi să copiați conținutul fiecărei secțiuni în fișierul PHP respectiv.

În cazul în care site-ul dvs. este mare, puteți profita de un plugin HTML la WordPress, cum ar fi HTML Import 2 sau puteți angaja pe cineva pentru a converti HTML în WordPress.

Cum se convertește site-ul HTML în tutorialul WordPress

Modul în care alegeți să vă convertiți site-ul HTML static într-un site WordPress va depinde fără îndoială de preferința dvs. personală, de timpul dorit / investiția monetară și de nivelul de calificare cu codul.

Metoda 1

Cu această metodă de a converti site-ul HTML în WordPress, veți păstra același design și aspect al site-ului.

1. Descărcați paginile HTML de la gazda actuală. Utilizați WinHTTrack pentru a face acest lucru. Este un instrument gratuit excelent, care este foarte ușor de utilizat. Asigurați-vă că luați și dosarul de imagini (sau oriunde ați avea imaginile pe site-ul vechi).

2. Instalați WordPress la noua dvs. gazdă web.

  • Setați-vă structura de legătură permanentă la „Nume postare” (/% postname% /)
  • Bifați caseta „Descurajați motoarele de căutare să indexeze acest site” (până când totul este terminat)
  • Instalați un plugin pentru modul de întreținere (dacă doriți), astfel încât nimeni, în afară de dvs., să vă poată accesa noul WordPress.
  • Instalați pluginul WordPress gratuit HTML Import 2. Folosiți-l pentru a „încărca” site-ul vechi pe noul dvs. site. Ghid de utilizare pentru a importa întregul dvs. director de pagini HTML.

3. Încărcați conținutul pe care tocmai l-ați descărcat de la pasul 1 în noua dvs. structură de fișiere gazdă web. Puneți-le într-un folder numit, de exemplu, „html-files-to-import”. Încărcați toate imaginile vechi în biblioteca dvs. media din WordPress pe noul dvs. site.

4. Rulați Import

5. Pregătiți promptul de comandă DOS și Excel

  • La promptul DOS, navigați la locul în care ați plasat fișierele HTML (este mai ușor să le puneți într-un folder numit „site-ul dvs. web” și să puneți acel folder în unitatea C: \). Apoi, inițiați această comandă: i. dir> files.txt
  • Deschideți fișierul files.txt în Excel.
  • Acum la Excel. În esență, veți folosi câteva funcții Excel, inclusiv „concatenare” pentru a reda codul „canonic” pe care îl veți introduce în fișierele HTML.
  • Plasați codul canonic corespunzător în fiecare fișier HTML. Puteți face acest lucru, angajați-l unui externalizat sau angajați pe cineva să scrie codul PHP care ar face acest lucru automat.

6. Încărcați fișierele HTML pe gazda dvs. web . Puneți-le în folderul ROOT (adică cel mai sus) pentru noul dvs. site web. Nu uitați să încărcați și dosarul de imagini în ROOT.

7. Asigurați-vă că totul funcționează în continuare pe noul site.

8. Debifați caseta de la Pasul 2 - „Descurajați motoarele de căutare să indexeze acest site” și dezactivați pluginul HTML Import 2.

9. Schimbați DNS la registratorul dvs.

10. Asigurați-vă că adresa URL a site-ului dvs. se rezolvă la adresa IP corectă (noul dvs. IP nu vechiul IP) și că TOATE paginile se încarcă corect. Este posibil să trebuiască să așteptați câteva ore pentru ca serverele de nume să fie actualizate.

11. Puteți elimina vechile pagini HTML după un timp, dar nu este necesar. Nu veți fi loviți cu penalități de „conținut duplicat”, deoarece referințele canonice se ocupă de asta.

Veți dori să adăugați redirecționări în fișierul dvs. .htaccess care vă îndreaptă vechile „pagini .html” către noile dvs. pagini WordPress.

Metoda 2

Dacă obiectivul dvs. este să nu doar să vă conțineți conținutul de pe site-ul dvs. HTML static în WordPress, ci și să vă duplicați designul actual, aceasta înseamnă că va trebui să creați tema personalizată.

Aceasta implică doar crearea câtorva dosare și fișiere, un pic de copiere și lipire și apoi încărcarea rezultatului. Veți avea nevoie de un editor de cod precum Sublime sau Notepad ++ și de acces atât la directorul site-ului dvs. HTML, cât și la noul director al instalării WordPress.

1. Creați un nou folder tematic și fișierele necesare. Pe desktop, creați un folder nou pentru a păstra fișierele tematice. Denumiți-o oricum doriți să fie identificată tema dvs.

Apoi, creați câteva fișiere (care intră în noul folder cu teme) în editorul de cod:

  • Style.css
  • Index.php
  • header.php
  • sidebar.php
  • footer.php

2. Copiați CSS-ul existent într-o foaie de stil nouă Dacă doriți să duplicați un design, aceasta înseamnă probabil că aveți cel puțin CSS pe care doriți să le salvați. Deci, primul fișier pe care doriți să îl editați este fișierul Style.css.

Pentru început, adăugați următoarele în partea de sus a fișierului.

 / *
 Nume temă: înlocuiți cu numele temei.
 URI tematică: URI-ul temei tale
 Descriere: o scurtă descriere.
 Versiune: 1.0
 Autor: Tu
 Autor URI: adresa site-ului dvs. web.
 * /

După această secțiune, lipiți CSS-ul existent numai mai jos. Salvați și închideți fișierul.

3. Separați HTML-ul curent

Aici vine procesul de tăiere și lipire a părților din codul dvs. existent în diferitele fișiere pe care le-ați creat.

  • Mai întâi, deschideți fișierul index.html al site-ului curent. Evidențiați totul, de la partea de sus a fișierului până la deschiderea div class = „main” tag. Copiați și lipiți această secțiune în fișierul header.php , salvați și închideți.
  • Reveniți la fișierul index.html . Evidențiați elementul aside class = „sidebar” și tot ce se află în interiorul acestuia. Copiați și lipiți această secțiune în fișierul dvs. sidebar.php , salvați și închideți.
  • În index.html selectați totul după bara laterală și copiați-l și lipiți-l în fișierul footer.php , salvați și închideți.
  • În fișierul index.html , selectați tot ce a mai rămas (aceasta ar trebui să fie secțiunea principală de conținut) și lipiți-l în fișierul index.php . Salvați, dar nu închideți încă. Cu toate acestea, puteți închide fișierul index.html acum și puteți trece la pașii finali. Aproape gata!

4. Finalizați fișierul Index.php

Pentru a finaliza fișierul index.php al noii teme, trebuie să vă asigurați că poate apela cealaltă secțiune (în afară de conținutul principal) care se află în celelalte fișiere pe care le-ați creat.

În partea de sus a fișierului index.php, plasați următoarea linie de php.

<?php get_header(); ?>

Apoi, chiar în partea de jos a fișierului index.php, plasați aceste linii de php.

<?php get_sidebar(); ?>
<?php get_footer(); ?>

Acum aveți „Bucla”. Acesta este bitul principal de PHP pe care WordPress îl folosește pentru a afișa conținutul postării dvs. vizitatorilor. Deci, ultimul pas în crearea fișierului index.php al noii teme este adăugarea codului de mai jos în secțiunea de conținut.

<?php if ( have_posts() ) : ?>
<?php while ( have_posts() ) : the_post(); ?> ( have_posts() ) : the_post(); ?>
<div id= "post-<?php the_ID(); ?>" <?php post_class(); ?>> <?php post_class(); ?>>
<div class = "post-header" >
<div class = "date" ><?php the_time( 'M j y' ); ?></div> ); ?></div>
<h2><a href= "<?php the_permalink(); ?>" rel= "bookmark" title= "Permanent Link to <?php the_title_attribute(); ?>" ><?php the_title(); ?></a></h2> ><?php the_title(); ?></a></h2>
<div class = "author" ><?php the_author(); ?></div> ><?php the_author(); ?></div>
</div><!-- end post header-->
<div class = "entry clear" >
<?php if ( function_exists( 'add_theme_support' ) ) the_post_thumbnail(); ?> ) ) 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>
</div><!-- end post footer-->
</div><!-- post--> 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>
<div class = "alignright" ><?php previous_posts_link( 'Newer Entries' ); ?></div> ); ?></div>
</div><!-- end navigation-->
<?php else : ?>
<?php endif ; ?> ; ?>

Salvați index.php și închideți. Tema dvs. este acum terminată! Tot ce a mai rămas este să îl încărcați pe site-ul dvs. WordPress.

5. Încărcați noua temă

Acum veți stoca fișierele temei create în noul dvs. folder tematic. Instalați WordPress.

Amplasați noul folder de temă în / wp-content / themes / . Navigați la WP Admin> Aspect> Teme și ar trebui să vedeți tema recent creată acolo. Activează-l! Tot ce mai rămâne de făcut în acest moment este să completați noul site web WordPress cu conținutul vechiului site.

6. Copiați conținutul de pe site-ul HTML pe WordPress

În WP Admin accesați Plugins> Add New. Căutați un plugin numit HTML Import 2 de Stephanie Leary. Odată ce acest plugin este instalat și activat, urmați ghidul utilizatorului pentru a importa întregul dvs. director de pagini HTML. După aceasta, site-ul dvs. ar trebui să arate așa cum a făcut-o înainte, doar rulând pe WordPress.

Utilizarea temei WordPress existente pentru a converti site-ul HTML (cea mai simplă metodă)

Dacă pașii de mai sus par prea intensivi sau consumă mult timp, există o altă cale. Acesta este cel mai simplu mod.

În loc să convertiți designul HTML existent pentru a arăta la fel pe WordPress, puteți profita de oricare dintre mii de teme disponibile pe piața WordPress.

Există teme gratuite și teme premium. După ce ați ales o temă care vă place (și ați descărcat pachetul de fișiere comprimate), instalați / activați noua temă WordPress.

Odată ce ați făcut acest lucru, veți avea un nou site web și temă WordPress. Când vă previzualizați site-ul, acesta va fi gol. Este timpul să importați conținut și să terminați procesul pentru a converti site-ul HTML în site-ul WordPress.

În WP Admin, accesați Plugins> Add New și căutați un plugin numit HTML Import 2. Urmați ghidul utilizatorului pentru a importa întregul dvs. director de pagini HTML. După aceasta, veți avea tot conținutul vechi, dar un aspect nou.

4 Convertiți HTML în WordPress cu Theme Matcher

De asemenea, puteți utiliza Theme Matcher. Oferă conversie automată HTML în WordPress. Doar introduceți site-ul dvs. și selectați zona corespunzătoare. Theme Matcher preia imagini, stiluri și aspect de pe site-ul dvs. web existent.

Convertiți-site-HTML-în-site-WordPress-cu-temă-potrivire

5 Serviciu de conversie HTML la WordPress

HTML în WordPress convertește desenele HTML în teme WordPress, fără a fi nevoie să scrieți o singură linie de PHP.

Puteți alege planul de servicii în care vă vor converti site-ul HTML static în WordPress. Această opțiune poate adăuga prețul. De asemenea, puteți alege opțiunea Converter, care este semnificativ mai ieftină.

Serviciu de conversie HTML la WordPress

Conversia este complet automatizată , iar funcționalitatea temei poate fi extinsă doar prin adăugarea de clase de convertoare prefixate „wp-” în HTML.

Convertorul creează șabloane pentru fiecare fișier HTML și vă referă activele și completează toate acele funcții php necesare. Utilizați Bootstrap, Webflow, Dreamweaver sau orice alt instrument / cadru cu care vă simțiți deja confortabil pentru a crea site-uri web. Atâta timp cât site-ul web este realizat folosind HTML, îl puteți converti într-o temă.

Ce trebuie făcut după migrare?

Odată ce conversia este finalizată, trebuie să faceți câteva lucruri pentru a da site-ului dvs. WordPress atingerea finală.

  • Instalați plug-in-uri necesare - Pentru a supraîncărca site-ul WordPress nou, cu aceleași funcționalități ca și site-ul HTML, instalați plugin-uri pe care le-ați găsit la îndemână.
  • Verificați și remediați legăturile întrerupte - Verificați site-ul web pentru legături întrerupte (erori 404) și, dacă a fost găsit, remediați-le.
  • Configurați o pagină de eroare 404 personalizată - Adăugați o pagină de eroare 404 personalizată pentru a vă vizita vizitatorii în secțiunile relevante ale site-ului dvs. WordPress, în cazul în care încearcă să acceseze orice adresă URL care nu există.
  • Redirecționarea linkurilor - Pentru a informa motoarele de căutare că conținutul site-ului dvs. web a fost mutat la o nouă adresă web, configurați 301 redirecționări. În acest scop, puteți utiliza redirecționarea simplă 301.
  • Activați indexarea motoarelor de căutare : accesați „ Setări -> Citire ” în tabloul de bord WordPress și bifați „ Permiteți motoarelor de căutare să indexeze acest site ” pentru a vă indexa site-ul de către motoarele de căutare.
  • Generați și trimiteți sitemap XML : pentru a vă asigura că site-ul dvs. va fi inclus în rezultatele motorului de căutare cât mai repede posibil, creați un sitemap XML și trimiteți-l la Google.

WordPress vs HTML - PROS & CONTRA

Lansarea unui site web de afaceri nu este un proces ușor. Una dintre cele mai mari dileme este dacă alegeți un site HTML static sau să mergeți pentru WordPress.

WordPress - WordPress este perceput a fi un CMS (Content Management System). Versiune HTML simplificată pentru utilizatorii non-techie pentru a adăuga și modifica lucruri pe site-urile lor web.

Site-urile CMS sunt de obicei dinamice, ceea ce înseamnă că nu există restricții cu privire la frecvența cu care vă schimbați conținutul. Puteți schimba totul, de la imagini la texte întregi.

Interfața este foarte simplă și ușor de utilizat și nimeni nu are nevoie de o pregătire specială pentru ao învăța. Piața CMS este extrem de competitivă, dar WordPress bate competiția de fiecare dată.

Un alt lucru de reținut înainte de a începe este că există o diferență semnificativă de la WordPress.com la WordPress.org, deoarece acesta din urmă este un CMS open source. WordPress.com, pe de altă parte, funcționează ca un serviciu de găzduire a blogurilor.

Avantajele utilizării WordPress:

  • Vă oferă mii de pluginuri pentru a adăuga pe site funcționalitatea care îi lipsește.
  • O modificare este posibilă în orice moment și nimeni nu vă limitează.
  • În comparație cu configurarea HTML, WordPress necesită mult mai puțin timp pentru a fi configurat.

Dezavantaje ale utilizării WordPress:

  • Nu poți doar să-l configurezi și să-l uiți. Necesită atenție cu normă întreagă și actualizarea constantă a software-ului, pluginurilor și temelor.
  • Hackerii vor ataca site-urile web slab protejate și neactualizate. Ristiți ca site-ul dvs. web să nu funcționeze deloc dacă nu țineți pasul cu actualizările.
  • WordPress este ușor, dar nu atât de mult pentru începători. Există multe tutoriale online și materiale cuprinzătoare pentru a vă ajuta să treceți peste curba de învățare.

Site-uri web statice HTML - Înainte nu existau astfel de șabloane și singura modalitate de a crea un site web a fost să angajezi un profesionist în programare care să o facă pentru tine.

Prin urmare, toate site-urile web au fost construite ca HTML static (Limbaje Hyper Text Markup). Ideea era să ai un site web. Nu modificați conținutul sau aspectul acestuia, deoarece ar trebui să angajați din nou dezvoltatorul HTML.

Pe site-urile HTML, conținutul este stocat în fișiere statice, ceea ce face incredibil de dificilă modificarea acestuia.

Avantajele site-ului HTML:

  • Odată ce site-ul web devine online, nu vi se cere să îl actualizați sau să îl faceți backup. De cele mai multe ori, nimic nu trebuie schimbat vreodată pe acel site.
  • Site-urile HTML sunt de bază și ușor de configurat.
  • Mărimea lor și faptul că utilizează mai puține resurse decât site-urile dinamice le oferă un avantaj semnificativ de viteză în comparație cu site-urile dinamice, făcându-le să se încarce mult mai repede.

Dezavantaje ale site-ului HTML:

Trebuie să fii profesionist în limbaje de markup. În caz contrar, nu veți putea face nicio actualizare semnificativă a site-ului dvs. web. Angajarea unui dezvoltator web de mai multe ori va costa, chiar dacă site-ul dvs. web este unul foarte mic sau afișează doar informații banale.

Un alt dezavantaj important este că nu puteți adăuga pluginuri , ceea ce înseamnă că vă confruntați cu o lipsă severă de funcționalitate.

Cum se convertește HTML în rezumat WordPress

Indiferent dacă aveți nevoie de mai mult de pe site-ul dvs. sau construiți unul nou cu un șablon în minte, procesul de conversie poate părea destul de complicat pentru un începător. Răbdarea și cunoștințele vă vor permite să faceți ceea ce trebuie să faceți cu un anumit nivel de succes.

Odată ce site-ul dvs. este live, vă puteți mândri că știți că ați învățat cum să faceți ceva nou și ați putut aplica aceste cunoștințe site-ului dvs. web.

Sper că cel puțin o metodă de mai sus v-a ajutat să convertiți site-ul HTML în WordPress. Dacă aveți orice altă metodă sau tutorial, anunțați-mă. Ați convertit vreodată HTML în WordPress și care sunt experiențele dvs. cu acesta?