Conversia șabloanelor HTML în teme WordPress

Deși tehnologia web a parcurs un drum lung, există încă site-uri web create exclusiv cu HTML. Dacă se întâmplă să dețineți unul dintre ele, s-ar putea să vă întrebați cum puteți converti un șablon HTML într-o temă WordPress.

Din fericire, aveți mai multe opțiuni la dispoziție, dacă doriți să convertiți acele fișiere HTML în WordPress. Tehnicile disponibile variază de la conversii manuale practice la parteneriat cu experți care se pot ocupa de toate sarcinile grele.

În acest articol, vom acoperi patru abordări diferite ale conversiei șabloanelor HTML. Pentru fiecare, vom oferi instrucțiuni și resurse care vă pot ajuta să introduceți un site web bazat pe HTML în fold-ul WordPress. Sunt multe de acoperit, așa că haideți să ne scufundăm!

Conversia HTML manual

Prima opțiune când vine vorba de conversie este abordarea manuală. Deoarece acesta este un proces destul de practic, va trebui să vă asigurați că aveți acces la fișierele atât pentru site-ul dvs. original, cât și pentru cel nou.

De obicei, veți folosi o aplicație Secure File Transfer Protocol (SFTP) în acest scop. După ce ați accesat site-ul dvs. web, puteți continua cu următorii pași.

Pasul 1: Creați un folder cu temă

Mai întâi, va trebui să creați un dosar pentru a păstra noile fișiere cu temă și să-l etichetați cu numele noii teme. Folosind editorul de cod, puteți crea apoi cinci fișiere specifice:

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

Deocamdată, puteți lăsa aceste fișiere goale și să le salvați în folderul pe care tocmai l-ați creat.

Pasul 2: Copiați și inserați CSS-ul dvs. existent

Următoarea dvs. prioritate este să personalizați fișierul Cascading Style Sheet (CSS). Aici veți schița toate elementele de stil diferite pentru site-ul dvs.

În partea de sus, este o practică bună să adăugați câteva informații despre fișier. De fapt, când vine vorba de WordPress, există unele elemente care sunt necesare pentru ca tema să fie prezentată în Directorul de teme.

Sub aceste informații, veți dori apoi să inserați în orice stil CSS existent de pe site-ul dvs. original pe care doriți să le transferați în noua temă.

Pasul 3: Separați HTML existent

Pe site-ul dvs. original, codul HTML care desemnează antetul, subsolul, bara laterală și zonele principale de conținut sunt probabil toate în fișierul index.html . Acum, va trebui să împărțiți fiecare dintre aceste elemente în noile fișiere pe care le-ați creat pentru tema dvs. WordPress.

De exemplu, în fișierul index.html al site-ului original, puteți găsi prima etichetă <div> cu clasa „principală”. Tot ceea ce precede această etichetă poate fi apoi copiat și lipit în noul fișier header.php .

Veți repeta apoi acest proces pentru etichetele „sidebar” și „footer”. Copiați codul conținut în fiecare dintre aceste elemente și inserați-l în fișierele PHP respective.

Acum, ceea ce vă rămâne este partea principală a fișierului dvs. index.html . Acesta este aspectul principal al conținutului site-ului dvs. web bazat pe HTML. Va trebui să copiați acest cod rămas și să-l lipiți în noul fișier index.php .

Pasul 4: Configurați fișierul Index.php

Următorul tău pas este să te asiguri că noul tău fișier index poate localiza fișierele necesare pentru a permite temei să afișeze structura și stilul site-ului tău. Pentru a realiza acest lucru, veți folosi etichete de șablon WordPress. Acestea sunt folosite pentru a spune temei să recupereze fișierele antet, subsol și bara laterală.

De exemplu, puteți solicita șablonului să afișeze fișierul antet pe care l-ați creat folosind următoarea etichetă:

get_header();

Veți plasa acest lucru în fișierul șablon index.php sau în paginile ulterioare în care doriți să apară antetul. Același lucru este valabil și pentru subsolul dvs.

Există o altă parte importantă a noului tău șablon pe care va trebui să o înțelegi și tu. Aceasta se numește bucla WordPress – un fragment de cod PHP care îi spune șablonului să atragă postări. De asemenea, poate fi personalizat pentru a controla câte postări sunt afișate.

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

Acum că noua temă este gata de acțiune, va trebui să plasați folderul său în directorul wp-themes/content/ pentru site-ul dvs.:

După ce ați încărcat fișierele, puteți să vă conectați la tabloul de bord WordPress și să navigați la Aspect > Teme. Aici, ar trebui să vedeți noua temă listată și să puteți face clic pe Activare și să începeți să o utilizați.

Importarea conținutului HTML cu un plugin

O altă modalitate de a gestiona acest proces este să utilizați un plugin pentru a transfera conținut de pe site-ul dvs. vechi, bazat pe HTML. Din păcate, există foarte puține instrumente disponibile care sunt compatibile cu versiunile recente de WordPress. Cu toate acestea, puteți verifica o versiune de încercare gratuită a WP Site Importer:

Acest plugin vă poate scana întregul site web și cataloga conținutul care este mobil. Funcționează cel mai bine dacă HTML-ul este bine organizat și „curat” pentru început. De asemenea, veți putea importa conținut, cum ar fi meniuri și link-uri.

Utilizarea unei teme pentru copii

O altă modalitate de a vă muta site-ul HTML în WordPress este cu o temă copil. Aceasta are aceeași funcționalitate de bază și stil ca și tema părinte, dar veți putea păstra orice ajustări și personalizări pe care le faceți, chiar dacă actualizați părintele.

Pasul 1: Alegeți o temă

Există multe teme bine construite, gratuite din care să alegeți în Directorul de teme WordPress. După ce selectați unul care vă place, va trebui să îl instalați, astfel încât fișierele sale să fie disponibile în directorul de fișiere al site-ului dvs.:

Cu toate acestea, nu trebuie să activați această temă părinte.

Pasul 2: Creați un folder pentru tema copilului dvs

Apoi, va trebui să vă accesați fișierele cu o aplicație FTP și să creați un dosar nou în directorul wp-content/themes . Acest fișier ar trebui să aibă același nume ca și tema părinte, cu „-child” adăugat la sfârșit.

De exemplu, dacă intenționați să creați o temă copil pentru Twenty Nineteen, puteți crea un folder numit twentynineteen-child:

Această configurare înseamnă că tema copilului tău va putea extrage automat funcții și stiluri din tema părinte, odată ce ai configurat restul fișierelor temei necesare.

Pasul 3: Configurați o foaie de stil

Următorul pas va fi să configurați fișierul style.css . WordPress necesită unele informații specifice în foaia de stil pentru a face ca relația temei părinte-copil să funcționeze. Puteți, de asemenea, să inserați informații suplimentare de stil din fișierele HTML originale, dacă este necesar.

Pasul 4: Configurați un fișier Function.php

Acum că aveți în esență două teme cu care lucrați, va trebui să spuneți WordPress că tema copilului dvs. depinde de CSS-ul părintelui. Pentru asta, puteți folosi apelul PHP wp_enqueue_style() .

Mai întâi veți crea un fișier function.php și îl veți plasa în folderul temei copilului dumneavoastră. Acesta este fișierul în care veți executa funcția de coadă care explică dependențele temei și ierarhia.

Pasul 5: Activați tema copilului dvs

După ce ați încărcat aceste fișiere noi pe serverul site-ului dvs. web, vă puteți întoarce la tabloul de bord WordPress și puteți naviga la Aspect > Teme . Acolo, ar trebui să vedeți tema copilului dvs. gata de plecare.

Faceți clic pe Activați pe tema copilului pentru a o seta ca temă a site-ului dvs. web. Apoi sunteți gata să începeți să copiați conținutul site-ului dvs. HTML în noul site WordPress.

Achiziționați un serviciu de conversie a site-ului

Dacă nu aveți timpul sau resursele pentru a efectua singur o conversie, puteți consulta și un serviciu de conversie. În plus, dacă aveți nevoie de mai multe resurse sau de asistență pentru migrarea altor conținut WordPress, aici, la WP Engine, vă oferim multe soluții și resurse pentru migrare și conversie.

1. Angajați WPGeeks

HireWPGeeks este o opțiune de conversie cu servicii complete. Se va ocupa de toate sarcinile grele și veți ajunge la un site WordPress flexibil, receptiv, bazat pe teme, care este complet cu tot conținutul dvs. Va trebui să contactați compania pentru o ofertă, dar puteți planifica serviciile sale începând de la 89 USD.

2. Soluții FantasTech

FantasTech Solutions este un alt serviciu de conversie HTML la WordPress. Face publicitate pentru conversii extrem de profesionale din HTML în șabloane de teme WordPress de ultimă generație, bine codificate. Veți dori să rețineți că costurile încep de la 297 USD pentru o pagină. Paginile suplimentare încep de la 147 USD fiecare, cu prețul exact în funcție de complexitate.

Personalizați-vă experiența pe site cu WP Engine

Ar putea părea o activitate mare, dar conversia site-ului dvs. HTML în WordPress poate deschide multe alte oportunități. Cu această platformă extrem de flexibilă și extensibilă, veți deveni mai agil și mai capabil să implementați rapid conținut nou.

Aici, la WP Engine, credem că resursele adecvate pentru dezvoltatori pot avea un impact enorm asupra proiectelor dvs. Pe lângă soluțiile inovatoare, oferim planuri și niveluri de preț pentru orice buget!