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

Multe companii încă se bazează pe site-uri web HTML simple pentru prezența lor online. Aceste site-uri web HTML sunt de obicei statice, ceea ce înseamnă că va trebui să editați codul pentru a modifica chiar și un detaliu minor de pe site. Pentru a evita acest lucru, vă puteți converti site-ul HTML în WordPress.

În acest tutorial, vă voi învăța cum să convertiți HTML într-o temă de afaceri WordPress. Aceasta păstrează intacte toate elementele HTML și vă oferă flexibilitatea WordPress pentru a personaliza cu ușurință orice element.

Dacă sunteți familiarizat atât cu HTML, cât și cu WordPress, atunci acest tutorial este bun pentru dvs. Dacă sunteți un începător, încercați să faceți acest lucru cu un site web fals pe localhost, cum ar fi XAMPP.

• Conversia site-ului HTML în WordPress
• De ce fișiere WordPress aveți nevoie
• Configurarea CSS, JavaScript și imagini
• Adăugarea funcțiilor WordPress pentru a adăuga funcționalitate

Conversia site-ului HTML în temă WordPress

Pentru acest tutorial, am ales de aici o temă gratuită de afaceri HTML. Tehnicile vor rămâne aceleași în timp ce convertiți orice temă de afaceri. Dacă aveți întrebări cu privire la tema afacerii dvs., trimiteți doar un comentariu sau un e-mail și vă voi răspunde cu plăcere.

Să mergem mai departe. Mai întâi, aruncați o privire la tema dvs. HTML și marcați antetul, corpul principal și elementele de subsol.

Antet : antetul va include partea din partea superioară.

Corp principal : este o pagină lungă, așa că am micșorat pentru a face o captură de ecran, dar toată partea centrală este inclusă în corpul principal.

Subsol : secțiunea subsol va include partea de jos.

Pasul 1: premise

Sper că aveți deja instalat WordPress pe hostul dvs. local, cum ar fi XAMPP (adică computerul dvs.). Dacă nu, am acoperit deja un ghid detaliat pentru a vă ajuta să instalați și să configurați WordPress local.

Pasul 2: Creați folderul tematic

Pentru acest tutorial, folosesc XAMPP, iar site-ul meu WordPress este instalat în folderul htdocs. Pentru a crea o temă WordPress, trebuie să accesați folderul temelor și să creați un folder nou.
Acum, deschideți folderul XAMPP > htdocs > folderul WordPress (în cazul meu se testează )> wp-content > teme .

În folderul Teme, veți vedea toate temele WordPress instalate. Creați un folder nou și denumiți tema.

Pasul 3: Creați fișiere PHP

Folderul temei nou creat este gol și trebuie să creați câteva fișiere pentru al face funcțional. Pentru aceasta, trebuie să lansați editorul de cod (VS Code) și să deschideți întregul folder tematic WordPress (în cazul meu, farhan-wordpress-theme).

Acum creați următoarele fișiere esențiale WordPress pentru a vă organiza tema mai bine.

1. style.css (conține detalii despre temă și fișiere CSS)
2. index.php (servește conținutul principal dacă alte fișiere opționale nu sunt declarate)
3. header.php (conține elementele antetului temei)
4. footer.php (conține elementele de subsol ale temei)
5. functions.php (conține funcții care sunt activate în tema WordPress)

Pasul 4: copiați folderele CSS, imagini și JavaScript (JS)

Din tema dvs. HTML (descărcată mai sus), copiați folderul activelor (CSS, JS și folderele cu imagini) în noul folder cu teme WordPress.

După mutarea în noul folder tematic WordPress, va arăta astfel:

Pasul 5: activați o nouă temă WordPress

Acum, ați adăugat folderele importante care sunt necesare pentru orice temă wp. Apoi, deschideți site-ul WordPress pe browser și conectați-vă la tabloul de bord. Navigați la Aspect> Teme și veți vedea că noua temă a fost adăugată la această secțiune.

Această temă pare goală. Pentru a adăuga informațiile și bannerul pentru tema nou creată, deschideți fișierul style.css (creat anterior) și lipiți următorul cod și salvați-l ( ctrl + s ).

 / *

Nume temă: Tema Farhan WordPress

Autor: Farhan

Descriere: convertiți HTML în temă WordPress.

Versiune: 1.0

* /

Pentru banner, trebuie să adăugați un fișier imagine în noul folder cu teme. Dimensiunea imaginii trebuie să fie de 800 x 600, iar numele imaginii trebuie să fie Screenshot (format png).

După ce ați adăugat fișierul screenshot.png, reîmprospătați tabloul de bord wp-admin și va apărea bannerul de imagine.

Acum, puteți vedea informațiile temei când faceți clic pe banner.

Apoi, pur și simplu faceți clic pe Activare .

Pasul 6: convertiți codul HTML în antet, index și subsol

Antetul, subsolul și corpul principal sunt marcate cu comentarii HTML pentru a le adăuga cu ușurință în fișierele PHP WordPress și pentru a converti codul.

Acum copiați codul antet din index.html al temei descărcate în fișierul header.php pe care l-ați creat în folderul temelor WordPress. Trebuie să copiați de la <! DOCTYPE html> până </header> și să îl salvați.

În mod similar, copiați subsolul și elementele corpului principal din index.html în footer.php și, respectiv, index.php.

Pentru subsol, copiați din <footer> (în cazul meu, există un nume de clasă definit în eticheta subsolului, deci nu vă confundați) până </html> în fișierul footer.php și salvați-l.

Apoi, copiați tot codul după eticheta </header> și chiar înainte de <footer> în index.php și salvați-l.

Adăugați funcția WordPress get_header () în partea de sus și get_footer () la sfârșitul fișierului index.php.

Get_header () este o funcție încorporată care apelează în header.php și în mod similar, get_footer () este o funcție care apelează footer.php .

Adăugați următorul cod în partea de sus a fișierului index.php și salvați-l.

 <? php get_header (); ?> 

Pentru a apela într-un subsol, introduceți următorul cod la sfârșitul codului index.php și salvați-l.

 <? php get_footer (); ?> 

Acum, vizitați site-ul dvs. și veți vedea așa ceva.

Pasul 7: Configurarea CSS

Faptul că tema dvs. arată ciudat se datorează faptului că fișierele CSS nu sunt aplicate temei.

Ați copiat deja peste folderul CSS din tema HTML în folderul temei WordPress. Acum, trebuie să apelați aceste fișiere CSS pentru a finaliza aspectul temei.

Rețineți că numele fișierelor dvs. CSS pot diferi - deci verificați înainte de a efectua acest proces.

Veți găsi foile de stil CSS în fișierul header.php, deci trebuie să căutați „ rel =” foaia de stil ” ” prin CTRL + f .

După aceea, eliminați foile de stil ale fonturilor Google, deoarece nu avem nevoie de ele. Acum, trebuie doar să înregistrez foaia de stil CSS reală, adică <link rel = ”styleheet” href = ”assets / css / style-starter.css”> .

WordPress nu înțelege structura obișnuită a foilor de stil CSS; de aceea am nevoie să fac coadă și să înregistrez foaia de stil CSS. Mergeți la fișierul functions.php și adăugați următorul cod.

 <? php

funcție add_css ()

{

   wp_register_style ('first', get_template_directory_uri (). '/assets/css/style-starter.css', false, '1.1', 'all');

   wp_enqueue_style ('primul');

}

add_action ('wp_enqueue_scripts', 'add_css'); 

Wp_register_style vă va ajuta să vă înregistrați foaia de stil CSS.

Get_template_directory_uri (). „/ href” este folosit pentru a obține calea directorului șablonului curent. Acesta va concatena calea curentă cu fișierul respectiv. Deci, aici, trebuie să definiți locația fișierului dvs. CSS (href). Puteți vedea cum am definit calea fișierului CSS: get_template_directory_uri (). „/ assets / css / style-starter.css ”.

Acum, putem elimina legătura cu foaia de stil CSS din fișierul header.php și o putem înlocui cu următorul cod și putem salva fișierul.

 <? php wp_head (); ?>

Wp_head () este un cârlig esențial WordPress care este definit în secțiunea <head> </head> din header.php.

Când vă vizitați site-ul WordPress, veți observa că fișierele CSS sunt de fapt cozi la noua dvs. temă WordPress, dar totuși, designul nu este în ordine. Acest lucru se datorează faptului că nu ați configurat încă scripturile JS.

În header.php, am o foaie de stil CSS și am înregistrat-o numai în functions.php. Dar dacă aveți mai multe foi de stil? În acest caz, trebuie să definiți wp_register_style () pentru fiecare foaie de stil. Nu-ți face griji! Puteți lua un exemplu din pasul următor, unde am mai multe scripturi JS. Procesul este același, așa că vă va șterge întrebările și vă va ajuta să înțelegeți cum veți face treaba respectivă.

Pasul 8: configurați JavaScript

Tema HTML cu care lucrați utilizează JavaScript, iar în fișierul footer.php, fișierele JavaScript sunt deja apelate în format HTML. Pentru a rula aceste fișiere JS, tot ce trebuie să faceți este să urmați aceleași acțiuni pe care le-ați efectuat în pasul anterior.

Deschideți fișierul footer.php și căutați „ <script src = “ prin „ CTRL + f ”. Acest lucru vă va ajuta să găsiți toate fișierele JS pe care le aveți. În cazul meu, am cinci și aici trebuie să le înregistrez și să le pun pe toate.

Apoi, trebuie să vă deschideți fișierul functions.php și să lipiți următorul cod:

 funcție add_script ()

{

   wp_register_script ('js-script', get_template_directory_uri (). '/assets/js/jquery-3.3.1.min.js', array ('jquery'), 1.1, true);

   wp_enqueue_script ('js-script');

   wp_register_script ('change', get_template_directory_uri (). '/assets/js/theme-change.js', array ('jquery'), 1.1, true);

   wp_enqueue_script („schimbare”);

   wp_register_script ('popup', get_template_directory_uri (). '/assets/js/jquery.magnific-popup.min.js', array ('jquery'), 1.1, true);

   wp_enqueue_script ('popup');

   wp_register_script ('carusel', get_template_directory_uri (). '/assets/js/owl.carousel.js', array ('jquery'), 1.1, true);

   wp_enqueue_script („carusel”);

   wp_register_script ('bootstrap', get_template_directory_uri (). '/assets/js/bootstrap.min.js', array ('jquery'), 1.1, true);

   wp_enqueue_script ('bootstrap');

}

add_action ('wp_enqueue_scripts', 'add_script');

Puteți vedea că structura codului este aceeași cu cea făcută mai devreme în partea de configurare CSS. Dar aici, veți folosi wp_register_script în loc de stil. Înregistrați și puneți în coadă fiecare fișier JS în aceeași funcție.

Acum, puteți elimina toate legăturile scriptului JS (am cinci) din fișierul footer.php , apoi lipiți următoarea linie de cod la sfârșitul codului (deasupra etichetei </body>) și salvați fișierul.

 <? php wp_footer (); ?> 

Acum, deschideți-vă site-ul în browser și veți observa că noua temă WordPress funcționează bine, dar totuși are câteva imagini lipsă.

Pasul 9: Configurați imagini

Acest proces este simplu și aici trebuie să definiți calea imaginilor.

Mai întâi, deschideți fișierul index.php și căutați „< img src = ” prin „ CTRL + f ”. Acest lucru vă va ajuta să găsiți toate fișierele de imagine pe care le aveți. În cazul meu, am opt și aici am nevoie de calea tuturor.

A da o cale către imagini; adăugați următorul cod PHP în etichetele src și salvați fișierul.

 <img src = "<? php echo get_template_directory_uri (). '/ assets / images / p1.jpg';?>" alt = "" class = "img-fluid radius-image" />

<img src = "<? php echo get_template_directory_uri (). '/ assets / images / p2.jpg';?>" alt = "" class = "img-fluid radius-image" />

<img src = "<? php echo get_template_directory_uri (). '/ assets / images / p3.jpg';?>" alt = "" class = "img-fluid radius-image" />

<img src = "<? php echo get_template_directory_uri (). '/ assets / images / p4.jpg';?>" alt = "" class = "img-fluid radius-image" />

<img src = "<? php echo get_template_directory_uri (). '/ assets / images / p5.jpg';?>" alt = "" class = "img-fluid radius-image" />

<img src = "<? php echo get_template_directory_uri (). '/ assets / images / p6.jpg';?>" alt = "" class = "img-fluid radius-image" /> 

Acum, tema dvs. va arăta similar cu tema HTML și va prelua toate imaginile.

Dar îi va lipsi caracteristicile WordPress, cum ar fi schimbarea titlului site-ului și meniul de navigare WordPress.

Pasul 10: Activați titlul personalizat în WordPress

Dacă accesați panoul de administrare WordPress și modificați titlul site-ului web, acesta nu va afecta titlul site-ului. Pentru a activa această caracteristică, puteți utiliza funcția încorporată WordPress bloginfo () cu parametrul „ nume ” între etichetele de titlu din fișierul header.php și salvați fișierul.

 <? php bloginfo („nume”); ?> 

Și în mod similar, trebuie să utilizați funcția încorporată WordPress bloginfo () cu parametrul „ nume ” între etichetele h1 din fișierul header.php și să salvați fișierul.

 <? php bloginfo („nume”); ?> 

Acum, tema dvs. va prelua titlul pe care l-ați setat în Setări -> General-> Titlul site-ului din panoul WP-admin.

Pasul 11: Adăugați meniul de navigare WordPress în WordPress

Când vizitați administratorul WordPress al site-ului dvs. și navigați la Aspect, nu veți vedea o opțiune pentru Meniu.

Mai întâi trebuie să activați Meniul adăugând următoarea linie de cod în fișierul functions.php.

 add_theme_support ('meniuri'); 

Aceasta va activa funcționalitatea Meniu din tema dvs., dar are nevoie de o anumită configurație pentru a gestiona meniurile de pe tabloul de bord WP.

Mai întâi, găsiți unde este meniul de navigare a temei HTML și apoi înlocuiți-l folosind funcția încorporată WordPress wp_nav_menu (); Puteți citi mai multe despre această funcție aici.

În această temă, header.php conține meniul de navigare.

Găsiți următoarele linii de cod:

 <ul class = "navbar-nav mx-lg-auto">

<li class = "nav-item active">

<a class="nav-link" href="index.html"> Pagina principală <span class = "sr-only"> (actual) </span> </a>

</li>

<li class = "nav-item @@ about__active">

<a class="nav-link" href="about.html"> Despre </a>

</li>

<li class = "nav-item @@ contact__active">

<a class="nav-link" href="contact.html"> Contact </a>

</li>

</ul> 

Înlocuiți liniile de mai sus cu:

 <? php wp_nav_menu (array ('menu_class' => 'navbar-nav mx-lg-auto', 'container' => 'ul',)); ?>

Meniul dvs. WordPress va apărea acum pe tema dvs. și va adăuga flexibilitate temei dvs. de afaceri WordPress.

Încheiat!

Sper că acest articol v-a ajutat să înțelegeți cum să convertiți un șablon HTML sau un site într-o temă WordPress. Acesta este un tutorial detaliat în care am parcurs unsprezece pași pentru a demonstra procesul.

Dacă aveți întrebări și întrebări, nu ezitați să întrebați oricând în secțiunea de comentarii de mai jos.