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

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

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

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

dacă sunteți familiarizat cu HTML și WordPress, atunci acest tutorial este bun pentru tine. Dacă sunteți un începător, încercați să faceți acest lucru cu un site web fals pe gazda dvs. locală, cum ar fi XAMPP.

• conversia site-ului HTML în WordPress
• 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 Tema WordPress

pentru acest tutorial, am luat o temă de afaceri HTML gratuită de aici. Tehnicile vor rămâne aceleași în timp ce conversia orice temă de afaceri. Dacă aveți întrebări cu privire la tema de afaceri, picătură doar un comentariu sau un e-mail, și voi fi fericit să răspundă.

să mergem mai departe. HTML și marcați antetul, corpul principal și elementele de subsol.

antet: antetul va include partea de sus a secțiunii.

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

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

Pasul 1: Cerințe preliminare

sper că aveți deja WordPress instalat pe localhost ca XAMPP (adică, computerul). 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 sub folderul htdocs. Pentru a crea o temă WordPress, trebuie să accesați folderul teme și să creați un folder nou.
acum, deschideți folderul XAMPP > htdocs > folderul WordPress (în cazul meu este testarea) > 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 tematic nou creat este gol și trebuie să creați câteva fișiere pentru a-l 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 WordPress esențiale pentru a vă organiza mai bine tema.

1. stil.css (conține detalii temă și fișiere CSS)
2. index.php (servește conținutul principal dacă alte fișiere opționale nu sunt declarate)
3. antet.php (conține elementele de antet ale temei)
4. subsol.php (conține elementele de subsol ale temei)
5. funcții.php (conține funcții care pe tema WordPress)

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

din tema HTML (descărcată mai sus), copiați folderul active (folderele CSS, JS și imagini) în noul folder tematic WordPress.

după trecerea la noul dosar temă WordPress, acesta va arăta astfel:

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

acum, ați adăugat folderele importante necesare pentru orice temă wp. Apoi, deschideți site-ul WordPress în browser și conectați-vă la tabloul de bord. Navigați la aspect > teme și veți vedea că noua dvs. 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 stilul.fișier css (creat anterior) și lipiți următorul cod și salvați-l (ctrl+S).

/*Theme Name: Farhan WordPress ThemeAuthor: FarhanDescription: Convert HTML to WordPress theme.Version: 1.0*/

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

odată ce ați adăugat captura de ecran.fișier png, reîmprospătați tabloul de bord wp-admin și va apărea bannerul de imagine.

acum, Puteți vizualiza informațiile despre temă atunci 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 dvs.

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

în mod similar, Copiați elementele de subsol și corpul principal din index.html în subsol.php și index.php, respectiv.

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

apoi, copiați tot codul după </antet>tag-ul și chiar înainte de < subsol> la 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 indexului.fișier php.

get_header() este o funcție încorporată care apelează în antet.php și în mod similar, get_footer() este o funcție care solicită subsol.php.

adăugați următorul cod în partea de sus a indexului.fișier php și salvați-l.

<?php get_header(); ?>

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

<?php get_footer(); ?>

acum, vizitați site-ul dvs. și veți vedea ceva de genul acesta.

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 temă WordPress. Acum, trebuie să apelați aceste fișiere CSS pentru a completa aspectul temei.

rețineți că numele fișierelor CSS pot diferi — deci verificați din nou înainte de a efectua acest proces.

veți găsi foile de stil CSS în antet.fișier php, deci trebuie să căutați „rel=”foaie de stil” ” prin CTRL + f.

după aceea, eliminați foile de stil Google font, deoarece nu avem nevoie de ele. Acum, am nevoie doar să se înregistreze foaia de stil CSS real adică <link rel=” stylesheet”href=” active/css/style-starter.css ” >.

WordPress nu înțelege structura obișnuită a foii de stil CSS; de aceea trebuie să întreb și să înregistrez foaia de stil CSS. Mergeți la funcții.fișier php și adăugați următorul cod.

<?phpfunction add_css(){ wp_register_style('first', get_template_directory_uri() . '/assets/css/style-starter.css', false,'1.1','all'); wp_enqueue_style( 'first');}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 curentă director șablon. Acesta va concatena calea curentă cu fișierul respectiv. Deci, aici, trebuie să definiți locația fișierului CSS (href). Puteți vedea cum am definit calea acelui fișier CSS: get_template_directory_uri (). ‘/active/css / stil-starter.css’.

acum, putem elimina linkul foii de stil CSS din antet.fișier php și înlocuiți-l cu următorul cod și salvați fișierul.

<?php wp_head(); ?>

wp_head() este un cârlig WordPress esențial care este definit în secțiunea< head ></head > a antetului.php.

când vizitați site-ul dvs. Este pentru că nu ați configurat scripturile JS încă.

în antet.php, am o foaie de stil CSS și am înregistrat-o doar în funcții.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, astfel încât vă va șterge întrebările și vă va ajuta să înțelegeți cum veți face acea treabă.

Pasul 8: Configurați JavaScript

tema HTML cu care lucrați utilizează JavaScript și în subsol.fișier 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 subsolul.fișier 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 întreb pe toate.

în continuare, trebuie să vă deschideți funcțiile.fișier php și lipiți următorul cod:

function 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( 'change'); 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('carousel', get_template_directory_uri() . '/assets/js/owl.carousel.js', array ( 'jquery' ), 1.1, true); wp_enqueue_script( 'carousel'); 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 pe care ați făcut-o mai devreme în partea de configurare CSS. Dar aici, veți folosi wp_register_script în loc de stil. Vă înregistrați și enqueue fiecare fișier JS în aceeași funcție.

acum, Puteți elimina toate link-urile script JS (am cinci) din subsol.fișier 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 site-ul dvs. î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 imaginile

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

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

pentru a da o cale imaginilor; 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, va lipsi caracteristici WordPress, cum ar fi schimbarea titlul site-ului și meniul de navigare WordPress.

Pasul 10: activați titlul personalizat în WordPress

dacă intrați în Panoul de administrare WordPress și schimbaț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 antet.fișier php și salvați fișierul.

<?php bloginfo( 'name' ); ?>

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

<?php bloginfo( 'name' ); ?>

acum, tema dvs. va ridica 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.

trebuie să activați meniul Mai întâi adăugând următoarea linie de cod în funcții.fișier php.

add_theme_support( 'menus' );

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

mai întâi, găsiți unde este meniul dvs. de navigare cu temă 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ă, antetul.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">Home <span class="sr-only">(current)</span></a></li><li class="nav-item @@about__active"><a class="nav-link" href="about.html">About</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', )); ?>

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

Împachetez!

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.