Conversia site-urilor HTML în site-urile WordPress

Publicat: 2018-10-05

La început (de pe web) toate site-urile web erau realizate cu doar 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. Acestea oferă experiențe mai bogate și mai plăcute atât creatorilor de site-uri, cât și vizitatorilor.

Acest lucru se datorează în mare parte proiectelor open source precum WordPress. Care, în ultimii zece ani, a reușit în misiunea sa principală de a democratiza publicarea online (și multe altele în proces), astfel încât oricine are o instalare WordPress și tema / pluginurile potrivite să aibă un site web modern, cu design avansat și funcționalitate. Nu este necesară codificarea - nici măcar HTML!

Acesta este motivul pentru care pentru pasionații de utilizatori WordPress ca mine, este aproape greu de crezut că în 2018 cineva ar putea să funcționeze în continuare un site web static HTML în loc de un site web WordPress cu o temă și pluginuri. Faptul este că există încă o cantitate semnificativă de site-uri HTML active doar acolo. (Sau HTML cu un pic de CSS.)

Acordat, acești proprietari de site-uri pot avea motive întemeiate pentru a nu face upgrade sau conversie. Poate că conținutul site-ului lor nu se schimbă niciodată și simpla formatare și design deja existente sunt accesibile? Sau poate este mai puțin dificil decât să vă faceți griji cu privire la actualizarea unui site WordPress? Ambele sunt motive valabile (printre altele). Exemple principale de „Nu remediați ceea ce nu este stricat”.

Cu toate acestea, am sentimentul că acestea ar putea să nu fie principalul motiv pentru care unii (poate mulți) nu au făcut saltul. Cea mai evidentă este 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 a fi nevoie să faceți o formatare excesivă pe bază de pagină.

Din fericire, așa cum se întâmplă adesea cu WordPress, există o serie de modalități de a rezolva această problemă. Am compilat câteva opțiuni de mai jos.

Abonați-vă la canalul nostru Youtube

Opțiunile dvs. pentru conversia unui site HTML static într-un site 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ă, timpul dorit / investiția monetară și nivelul de calificare cu codul. Va trebui să fiți singurul care să decidă care este cel mai bun pentru dvs., dar cu rezumatele de mai jos ar trebui să puteți decide rapid și să treceți direct la cele mai relevante informații din acest post pentru situația dvs. specifică.

Există trei opțiuni principale:

1. Creați manual o temă WordPress pe baza site-ului dvs. HTML static actual.

Acest lucru vă va cere să intrați în codul dvs. Va trebui să accesați directorul site-ului curent prin FTP și să utilizaț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 biți de cod din WordPress codex. Acest lucru este destul de simplu și direct dacă aveți o experiență cu HTML, CSS și un pic de PHP.

2. Instalați o temă prefabricată ș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 numai dacă alegeți să achiziționați o temă premium. Pluginul pe care îl vom folosi pentru importul de conținut este disponibil gratuit în depozitul oficial de pluginuri WordPress.

3. Plătește pentru a avea un serviciu de conversie HTML în WordPress, recreează-ți site-ul.

Aceasta este cea mai ușoară soluție, deoarece nu vă cere să faceți mult din nimic. Cu toate acestea, nu va face mult pentru a vă familiariza cu WordPress, iar costul va varia în funcție de cine alegeți să angajați. Nu voi acoperi această opțiune în secțiunile de mai jos, deoarece dacă acesta este traseul care vă interesează, puteți pur și simplu să căutați rapid furnizorii de servicii și aceștia se vor ocupa de restul.

Pregătirea pentru conversia HTML în WordPress

Indiferent de ruta pe care decideți să o luați mai jos, există câteva lucruri pe care veți dori să le faceți înainte de a vă scufunda.

Primul este alegerea unui plan de găzduire. Veți dori să analizați opțiunile disponibile și să decideți un pachet care se potrivește cel mai bine nevoilor dvs. Sau poate doriți să creați o instalare locală WordPress? Puteți oricând să îl 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 se împart cele două căi posibile ale noastre.

Conversia manuală a site-ului dvs. HTML static în WordPress

Dacă obiectivul dvs. este să nu doar să vă conțineți conținutul de pe site-ul dvs. static HTML în WordPress, ci și să vă duplicați designul actual, acest lucru î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. 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 HTML, cât și la noul director al instalării WordPress.

Pasul 1: Creați un folder nou tematic și fișiere necesare

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

Apoi, creați câteva fișiere (care intră toate în noul dvs. folder tematic) în editorul de cod. Nu le faceți nimic încă. Lasă-le deschise pentru editare ulterioară.

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

Pasul 2: Copiați CSS-ul existent într-o foaie de stil nouă

Dacă doriți să copiați un design, aceasta înseamnă probabil că aveți cel puțin CSS pe care doriți să îl 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. 

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

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

Pasul 3: Separați codul HTML actual

Înainte de a trece la pasul trei, permiteți-mi să vă dau o notă rapidă despre modul în care funcționează WordPress. WordPress folosește PHP pentru a apela și prelua fragmente de date din baza sa de date. Fiecare fișier pe care îl folosim în acest mic tutorial este conceput pentru a spune WordPress care parte a conținutului site-ului dvs. trebuie afișat și unde.

Deci, când spun că vom „tăia” codul dvs. HTML existent, ceea ce facem de fapt este pur și simplu tăierea și lipirea părților din codul dvs. existent în diferitele fișiere pe care tocmai le-am creat, astfel încât WordPress să știe unde să afișeze lor.

Începem.

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.

În al doilea rând, 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 al treilea rând, î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 cele din urmă, î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!

Pasul 4: Finalizați fișierul dvs. 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. Sau, cu alte cuvinte, puneți la loc elementele pe care tocmai le-am „tăiat”.

Î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(); ?>

Și, în cele din urmă, trebuie să adăugăm ceea ce se numește 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(); ?>
  <div id="post-<?php the_ID(); ?>" <?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 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.

Pasul 5: Încărcați noua temă

Acum că v-ați creat fișierele tematice și le-ați stocat pe toate în noul dvs. folder tematic, va trebui să accesați noul director de instalare WordPress.

Plasați noul folder de temă în / wp-content / themes / . Apoi navigați înapoi la WP Admin> Aspect> Teme și tema dvs. recent creată ar trebui să apară acolo. Continuați și activați-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. Urmați împreună cu secțiunea de mai jos (săriți peste partea despre utilizarea unei teme pre-realizate) pentru a vedea cum se face acest lucru.

Folosirea unei teme WordPress pre-realizate și importarea conținutului HTML

Dacă pașii de mai sus vi se par prea intensivi sau consumatori de timp, atunci fiți siguri, există o altă cale. În loc să convertiți orice design cu care lucrați acum într-o temă WordPress, puteți profita de oricare dintre mii de teme disponibile pe piața WordPress mai largă.

Există teme gratuite și există teme premium. Înainte de a decide care este cel mai potrivit pentru dvs., vă recomandăm să citiți ce teme sunt concepute pentru a satisface nevoile dvs. și să navigați pe categorii de teme aici la Teme elegante și în alte părți.

După ce ați ales o temă care vă place (și ați descărcat pachetul de fișiere comprimate), veți dori să vă întoarceți la WP Admin> Aspect> Teme> Adăugați noi și 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 - dar puțin altceva. Când vă previzualizați site-ul, acesta va fi gol de conținut și, probabil, va părea plictisitor. Este ok, pentru că urmează să importăm conținutul vechiului site.

În WP Admin, accesați 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 de utilizare util pentru a importa întregul dvs. director de pagini HTML. Complet cu imagini!

După aceasta, veți avea tot conținutul vechi pe WordPress și formatat de noua temă. Sau, dacă v-ați creat propria temă de mai sus, site-ul dvs. ar trebui să arate cam așa cum a făcut-o înainte - doar rulând pe WordPress.

In concluzie

Dacă ați folosit această postare ca ghid pentru migrarea site-ului dvs. web pe WordPress, tocmai v-ați alăturat uneia dintre cele mai mari comunități open source din lume. Bine ati venit! Este un loc distractiv, cu o mulțime de dezvoltatori, designeri, bloggeri, bricolaj și multe altele - toate construiesc, joacă și creează cu teme / plugin-uri WordPress și WordPress.

Dacă ați „surprins eroarea WordPress”, site-ul oficial WordPress.org este plin de teme utile, pluginuri și alte resurse. Dacă doriți să vă îmbunătățiți în continuare fișierele tematice, explorați Codex pentru sfaturi, trucuri și variante aparent nesfârșite.

Și, bineînțeles, sperăm să rămâneți la chat în comentariile de mai jos și să vă abonați pentru mai multe postări pe blog în viitor.

Miniatură articol prin Max Griboedov / shutterstock.com