La început (al web-ului) toate site-urile au fost făcute doar cu text și HTML static. Acum însă, peste 20 de ani mai târziu, web-ul este un loc mult diferit. Site-urile web sunt mult mai complexe. Ele oferă experiențe mai bogate și mai plăcute atât pentru creatorii de site-uri, cât și pentru vizitatori.
Acest lucru se datorează în mare parte proiectelor open source precum WordPress. Care, în ultimii zece ani sau cam așa ceva, a reușit să-și îndeplinească misiunea de bază de a democratiza publicarea online (și multe altele în acest proces), astfel încât oricine cu o instalare WordPress și tema/pluginurile potrivite poate avea un site web modern cu design și funcționalitate avansată. Nu este necesară nicio codificare – nici măcar HTML!- necesară.
De aceea, pentru utilizatorii avizi de WordPress, ca mine, este aproape greu de crezut că în 2018 cineva ar putea încă să opereze un site web HTML static în loc de un site web WordPress cu o temă și plugin-uri. Dar realitatea este că există încă o cantitate semnificativă de site-uri active numai HTML. (Sau HTML cu un pic de CSS.)
De acord, acești proprietari de site-uri pot avea motive întemeiate pentru a nu se actualiza sau converti. Poate că conținutul site-ului lor nu se schimbă niciodată, iar formatarea simplă și designul deja existent este utilizabil? Sau poate că este mai puțin deranjant decât să se preocupe de menținerea unui site WordPress actualizat? Ambele sunt motive valabile (printre altele). Primele exemple de: „Nu reparați ceea ce nu este stricat.”
Cu toate acestea, am sentimentul că acestea ar putea să nu fie motivul principal pentru care unii (poate mulți) nu au făcut saltul. Cel mai evident fiind acela că pur și simplu nu știu cum să își convertească site-ul HTML într-un site WordPress. Mai ales fără a pierde conținut sau fără a fi nevoie să facă o formatare excesivă pagină cu pagină.
Din fericire, așa cum se întâmplă adesea în cazul WordPress, există mai multe modalități de a rezolva această problemă. Am compilat câteva opțiuni mai jos.
Subscribe To Our Youtube Channel
Your Options for Converting a Static HTML site to a WordPress site
Cum alegeți să vă convertiți site-ul HTML static într-un site WordPress va depinde, fără îndoială, de preferințele dvs. personale, de timpul/ investiția monetară dorită și de nivelul de îndemânare cu codul. Va trebui să fiți cel care va trebui să decideți care este cea mai bună variantă pentru dumneavoastră, dar cu ajutorul rezumatelor de mai jos ar trebui să puteți decide rapid și să treceți direct la cele mai relevante informații din această postare pentru situația dumneavoastră specifică.
Există trei opțiuni principale:
1. Creați manual o temă WordPress bazată pe site-ul dvs. HTML static actual.
Aceasta va necesita să intrați în codul dvs. Va trebui să accesați directorul site-ului dvs. curent prin FTP și să folosiți codul existent ca punct de plecare. De acolo va trebui să creați fișierele necesare pentru o temă WordPress și să copiați bucăți de cod din codex-ul WordPress. Acest lucru este destul de simplu și direct dacă aveți ceva experiență cu HTML, CSS și un pic de PHP.
2. Instalați o temă pre-făcută și pur și simplu migrați conținutul.
Aceasta este probabil cea mai bună opțiune la intersecția dintre simplitate și valoare. Presupunând că aveți deja găzduire pentru site-ul dvs. actual, va trebui să cheltuiți bani doar dacă alegeți să cumpărați o temă premium. Plugin-ul pe care îl vom folosi pentru importarea conținutului este disponibil gratuit în depozitul oficial de plugin-uri WordPress.
3. Plătiți pentru ca un serviciu de conversie HTML în WordPress să vă recreeze site-ul.
Aceasta este cea mai simplă soluție, deoarece nu vă cere să faceți mare lucru. Cu toate acestea, nu va face prea multe pentru a vă familiariza cu WordPress, iar costul va varia în funcție de persoana pe care alegeți să o angajați. Nu voi aborda această opțiune în secțiunile de mai jos, deoarece, dacă aceasta este ruta care vă interesează, puteți pur și simplu să faceți o căutare rapidă a furnizorilor de servicii, iar aceștia se vor ocupa de restul.
Pregătirea pentru conversia de la HTML la WordPress
Nu contează ce rută decideți să urmați mai jos, există câteva lucruri pe care veți dori să le faceți înainte de a vă arunca cu capul înainte.
Primul este alegerea unui plan de găzduire. Veți dori să vă uitați peste opțiunile care există și să decideți asupra unui pachet care se potrivește cel mai bine nevoilor dumneavoastră. Sau poate că, în schimb, doriți să creați o instalare locală a WordPress? Puteți oricând să o migrați la un serviciu de găzduire mai târziu.
După ce ați ales, va trebui să instalați WordPress și să vă conectați la WP Admin. Acesta este punctul în care cele două căi posibile ale noastre se despart.
Conversia manuală a site-ului HTML static în WordPress
Dacă obiectivul dvs. este nu numai să obțineți conținutul de pe site-ul HTML static în WordPress, ci și să duplicați designul dvs. actual, aceasta înseamnă că va trebui să vă creați propria temă personalizată. Din fericire, acest lucru nu este atât de înfricoșător pe cât ar putea părea la început. Implică doar crearea câtorva dosare și fișiere, un pic de copiere și lipire și apoi încărcarea rezultatului.
Vă veți avea nevoie de un editor de cod, cum ar fi Sublime sau Notepad++ și acces atât la directorul site-ului dvs. HTML, cât și la directorul noii dvs. instalări WordPress.
Pasul 1: Creați un nou dosar pentru temă și fișierele necesare
Pe desktop, creați un nou dosar care să conțină fișierele temei dvs. Numiți-l cum doriți să se numească tema dumneavoastră.
În continuare, creați câteva fișiere (care vor merge toate în noul dosar al temei dumneavoastră) în editorul de cod. Nu le faceți nimic deocamdată. Doar lăsați-le deschise pentru editarea ulterioară.
- Style.css
- Index.php
- header.php
- sidebar.php
- footer.php
Pasul 2: Copiați CSS-ul existent în noua foaie de stil
Dacă doriți să duplicați un design, acest lucru înseamnă probabil că aveți cel puțin o parte din CSS pe care doriți să o salvați. Așadar, primul fișier pe care veți dori să îl editați este fișierul Style.css.
Pentru a începe, adăugați următoarele în partea de sus a fișierului dumneavoastră.
/*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.*/
După această secțiune, lipiți pur și simplu CSS-ul existent mai jos. Salvați și închideți fișierul.
Pasul 3: Separați HTML-ul curent
Înainte de a intra în pasul trei, dați-mi voie să vă dau o scurtă notă despre cum funcționează WordPress. WordPress folosește PHP pentru a apela și a prelua bucăți de date din baza sa de date de bază. Fiecare fișier pe care îl folosim în acest mic tutorial este conceput pentru a-i spune lui WordPress ce parte din conținutul site-ului dvs. trebuie să fie afișat și unde.
Atunci când spun că vom „tăia” HTML-ul dvs. existent, ceea ce facem de fapt este pur și simplu să tăiem și să lipim părți din codul dvs. existent în diferitele fișiere pe care tocmai le-am creat, astfel încât WordPress să știe unde să le afișeze.
Iată-ne.
În primul rând, deschideți fișierul index.html al site-ului dvs. actual. Evidențiați totul din partea de sus a fișierului până la tag-ul de deschidere div class=”main”. Copiați și lipiți această secțiune în fișierul header.php, salvați și închideți.
În al doilea rând, mergeți înapoi 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 sidebar.php, salvați și închideți.
În al treilea rând, în fișierul index.html selectați tot ceea ce se află după bara laterală și copiați și lipiți în fișierul footer.php, salvați și închideți.
În cele din urmă, în fișierul index.html, selectați tot ceea ce a rămas (aceasta ar trebui să fie secțiunea de conținut principal) și lipiți în fișierul index.php. Salvați, dar nu închideți încă.
Puteți închide însă acum fișierul index.html și treceți la pașii finali. Aproape gata!
Pasul 4: Finalizați fișierul index.php
Pentru a finaliza fișierul index.php al noii dvs. teme, trebuie să vă asigurați că acesta poate apela celelalte secțiuni (în afară de conținutul principal) care sunt găzduite în celelalte fișiere pe care le-ați creat. Sau, cu alte cuvinte, puneți laolaltă elementele pe care tocmai le-am „tocat”.
În partea de sus a fișierului index.php, plasați următoarea linie de php.
<?php get_header(); ?>
Pe urmă, în partea de jos a fișierului index.php, plasați aceste linii de php.
<?php get_sidebar(); ?><?php get_footer(); ?>
Și, în final, trebuie să adăugăm ceea ce se numește The Loop. Aceasta este bucățica principală de php pe care WordPress o folosește pentru a afișa conținutul postului dvs. pentru vizitatori. Așadar, pasul final î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(); ?> <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; ?>
Salvați fișierul index.php și închideți. Tema dvs. este acum finalizată! Tot ce a mai rămas este să o încărcați pe site-ul dvs. WordPress.
Pasul 5: Încărcați noua dvs. temă
Acum că ați creat fișierele temei și le-ați stocat pe toate în folderul noii dvs. teme, va trebui să accesați directorul noii dvs. instalări WordPress.
Puneți folderul noii dvs. teme în interiorul /wp-content/themes/. Apoi, navigați înapoi la WP Admin > Appearance > Themes și tema dvs. nou creată ar trebui să apară acolo. Dați-i drumul și activați-o!
În acest moment, tot ce mai rămâne de făcut este să populați noul site WordPress cu conținutul vechiului dvs. site. Urmați secțiunea de mai jos (sărind peste partea referitoare la utilizarea unei teme prefabricate) pentru a vedea cum se face acest lucru.
Utilizarea unei teme WordPress prefabricate și importul de conținut HTML
Dacă pașii de mai sus vi se par prea intensivi sau consumatori de timp, atunci stați liniștit, există o altă cale. În loc să convertiți orice design cu care se întâmplă să lucrați în acest moment într-o temă WordPress, puteți profita de oricare dintre miile de teme disponibile pe piața mai largă a WordPress.
Există teme gratuite și există teme premium. Înainte de a decide care este cea mai bună pentru dvs., este posibil să doriți să citiți despre ce teme sunt concepute pentru a răspunde nevoilor dvs. și să navigați în funcție de categoria de teme aici la Elegant Themes și în altă parte.
După ce ați ales o temă care vă place (și aveți pachetul său de fișiere zip descărcat), veți dori să vă întoarceți la WP Admin > Appearance > Themes > Add New și să instalați/activați noua dvs. temă WordPress.
După ce acest lucru este făcut, veți avea un nou site WordPress și o temă – dar puțin altceva. Când vă veți previzualiza site-ul, acesta va fi gol de conținut și probabil va arăta oarecum plictisitor. Este în regulă, pentru că în continuare vom importa conținutul vechiului dvs. site.
În WP Admin mergeți la Plugins > Add New și căutați un plugin numit HTML Import 2 de Stephanie Leary. Odată ce acest plugin este instalat și activat, urmați ghidul său de utilizare la îndemână pentru a importa întregul dvs. director de pagini HTML. Complet cu imagini!
După aceasta veți avea tot conținutul dvs. vechi care va trăi pe WordPress și va fi formatat de noua dvs. temă. Sau, dacă v-ați creat propria temă de mai sus, site-ul dvs. ar trebui să arate cam la fel ca înainte – doar că rulează pe WordPress.
În concluzie
Dacă ați folosit această postare ca un ghid pentru migrarea site-ului dvs. pe WordPress, atunci tocmai v-ați alăturat uneia dintre cele mai mari comunități open source din lume. Bine ați venit! Este un loc amuzant, cu o mulțime de dezvoltatori, designeri, bloggeri, DIYers și mulți alții – toți construind, jucându-se și creând cu WordPress și cu teme/plugins WordPress.
Dacă ați „prins microbul WordPress”, site-ul oficial WordPress.org este plin de teme utile, plugin-uri și alte resurse. Dacă doriți să modificați în continuare fișierele temei, explorați Codex-ul pentru sfaturi, trucuri și variații aparent nesfârșite.
.