Hvordan Konvertere HTML Nettsted Til WordPress Business Theme

Hvordan Konvertere HTML Nettsted Til WordPress Business Theme

Mange bedrifter stoler fortsatt på enkle HTML-nettsteder for deres online tilstedeværelse. DISSE HTML-nettstedene er vanligvis statiske, noe som betyr at du må redigere koden for å endre enda en liten detalj på nettstedet. For å unngå DET, kan du konvertere HTML-nettstedet Ditt Til WordPress.

i denne opplæringen skal jeg lære deg hvordan du konverterer HTML til Et WordPress-forretningstema. Dette holder ALLE HTML-elementene intakte og gir deg fleksibiliteten Til WordPress for å tilpasse ethvert element enkelt.

hvis du er kjent med BÅDE HTML og WordPress, så denne opplæringen er bra for deg. Hvis du er nybegynner, prøv å gjøre dette med en dummy nettside på din localhost som XAMPP.

• Konvertere HTML-Nettsted Til WordPress
• Hvilke WordPress-filer du trenger
• Konfigurere CSS, JavaScript Og Bilder
• Legge Til WordPress-funksjoner for å legge til funksjonalitet

Konvertere HTML-Nettsted Til WordPress-Tema

for denne opplæringen har jeg plukket opp en GRATIS HTML-virksomhet tema herfra. Teknikkene vil forbli den samme mens konvertere enhver bedrift tema. Hvis du har spørsmål om din bedrift tema, bare slippe en kommentar eller en e-post, og jeg vil gjerne svare.

La oss gå videre. Først, ta en titt PÅ HTML tema og markdown header, hoveddelen, og bunntekst elementer.

Topptekst: toppteksten vil inkludere den øverste delen.

Main Body: Det er en lang Side, så jeg zoomet ut for å ta et skjermbilde, men hele senterdelen er inkludert i hoveddelen.

Bunntekst: bunnteksten delen vil inkludere den nederste delen.

Trinn 1: Forutsetninger

jeg håper Du allerede Har WordPress installert på din localhost som XAMPP (dvs.datamaskinen din). Hvis ikke, har vi allerede dekket en detaljert guide for å hjelpe deg med å installere Og sette Opp WordPress lokalt.

Trinn 2: Lag Temamappen

for denne opplæringen bruker JEG XAMPP, Og WordPress-siden min er installert under htdocs-mappen. For å opprette Et WordPress-tema må du få tilgang til temamappen din og opprette en ny mappe.
nå åpner XAMPP folder > htdocs > WordPress mappe (i mitt tilfelle det er testing) > wp-content > temaer.

I Themes-mappen vil du se alle dine installerte WordPress-temaer. Opprett en ny mappe og navngi temaet ditt.

Trinn 3: Opprett PHP-Filer

den nyopprettede temamappen er tom, og du må opprette noen filer for å gjøre den funksjonell. For dette må du starte kodeditoren din (VS-Kode) og åpne Hele WordPress-temamappen (i mitt tilfelle farhan-wordpress-theme).

opprett nå følgende viktige WordPress-filer for å organisere temaet ditt bedre.

1. stil.css (inneholder tema detaljer OG CSS-filer)
2. indeks.php (serverer hovedinnholdet hvis andre valgfrie filer ikke er deklarert)
3. header.php (inneholder header elementer av temaet)
4. bunntekst.php (inneholder bunntekst elementer av temaet)
5. funksjoner.php (inneholder funksjoner som på I WordPress tema)

Trinn 4: Kopier CSS, Bilder Og JavaScript (JS) Mapper

FRA HTML-temaet ditt (lastet ned over), kopier aktivamappen (CSS, Js og images-mapper) til din Nye WordPress-temamappe.

etter å ha flyttet til din Nye WordPress temamappe, vil det se slik ut:

Trinn 5: Aktiver Et Nytt WordPress-Tema

nå har du lagt til de viktige mappene som kreves for et hvilket som helst wp-tema. Deretter åpner Du WordPress-siden din i nettleseren din og logger På Dashbordet ditt. Naviger Til Utseende > Temaer, og du vil se at ditt nye tema er lagt til i denne delen.

dette temaet ser tom. For å legge til informasjon og banner for det nyopprettede temaet, åpne stilen din.css-fil (opprettet tidligere) og lim inn følgende kode og lagre den (ctrl+s).

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

for banneret må du legge til en bildefil i den nye temamappen. Bildestørrelsen skal være 800 x 600, og bildenavnet skal Være Skjermbilde (png-format).

når du har lagt til skjermbildet.png-fil, oppdatere wp-admin dashbordet, og bildet banner vises.

nå kan du se temaet informasjon når du klikker på banneret.

Neste, klikker Du Bare På Aktiver.

Trinn 6: Konverter HTML-Kode Til Topptekst, Indeks Og Bunntekst

toppteksten, bunnteksten og hoveddelen er merket MED HTML-kommentarer for enkelt å legge DEN til WordPress PHP-filene dine og konvertere koden.

kopier nå header-koden fra indeksen.html av det nedlastede temaet i overskriften.php-filen du opprettet I WordPress themes-mappen. Du må kopiere fra <!DOCTYPE html> til </header> og lagre den.

På Samme Måte Kopierer du over bunnteksten og hoveddelelementene fra indeksen.html i bunntekst.php og indeks.php, henholdsvis.

for bunnteksten, kopier fra < bunntekst >(i mitt tilfelle er det et klassenavn definert i bunnteksten, så ikke bli forvirret) til </html> i bunnteksten.php fil og lagre den.

kopier deretter all koden etter </header > tag og like før <footer > til indeks.php og lagre det.

Legg WordPress funksjon get_header () på toppen og get_footer () på slutten av indeksen.php-fil.

get_header () er en innebygd funksjon som kaller i header.php og tilsvarende, get_footer () er en funksjon som kaller bunntekst.php.

Legg til følgende kode øverst i indeksen.php fil og lagre den.

<?php get_header(); ?>

for å ringe inn en bunntekst, sett inn følgende kode på slutten av indeksen.php kode og lagre det.

<?php get_footer(); ?>

nå, besøk nettstedet ditt, og du vil se noe slikt.

Trinn 7: Konfigurere CSS

det faktum at temaet ditt ser rart ut, er FORDI CSS-filene ikke brukes på temaet.

du har allerede kopiert OVER CSS-mappen FRA HTML-temaet Til WordPress-temamappen din. Nå må du ringe DISSE CSS-filene for å fullføre utseendet på temaet.

Husk at navnene PÅ CSS-filene dine kan variere — så dobbeltsjekk før du utfører denne prosessen.

DU vil finne CSS stilark i overskriften.php-fil, så du må søke etter «rel=» stilark «» AV CTRL + f.

etter det, fjerne Google font stilark fordi vi ikke trenger dem. Nå trenger jeg bare å registrere SELVE CSS stilark dvs. <link rel= «stylesheet» href= » assets / css / style-starter.css » >.

WordPress forstår ikke den vanlige CSS stilarkstrukturen; derfor må jeg enqueue og registrere CSS stilarket. Gå til funksjonene.php fil og legge til følgende kode.

<?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');

den wp_register_style vil hjelpe deg å registrere DIN CSS stilark.

get_template_directory_uri() . ‘/href ‘ brukes til å få gjeldende mal katalogbane. Det vil sammenkoble gjeldende bane med den respektive filen. Så her må du definere plasseringen AV CSS-filen (href). Du kan se hvordan jeg definerte banen TIL CSS-filen: get_template_directory_uri (). ‘/eiendeler / css / stil-starter.css’.

nå kan vi fjerne CSS stilark linken fra overskriften.php fil og erstatte den med følgende kode og lagre filen.

<?php wp_head(); ?>

wp_head() er en viktig WordPress-krok som er definert under < head > < / head> delen av header.php.

når du besøker Ditt WordPress-nettsted, vil du legge merke til AT CSS-filene faktisk er enqueued til ditt Nye WordPress-tema, men likevel er designet ikke i orden. Det er fordi DU ikke har konfigurert js-skriptene ennå.

i overskriften.php, jeg har ett CSS stilark, og jeg registrerte det bare i funksjoner.php. Men hva om du har flere stilark? I så fall må du definere wp_register_style () for hvert stilark. Ikke bekymre deg! Du kan ta et eksempel fra neste trinn, der jeg har flere JS-skript. Prosessen er den samme, så det vil fjerne dine spørsmål og hjelpe deg å forstå hvordan du skal gjøre jobben.

Trinn 8: Konfigurer JavaScript

HTML-temaet du jobber med, bruker JavaScript, og i bunnteksten.php-fil, JavaScript-filer blir allerede kalt I HTML-format. For å kjøre DISSE js-filene, er alt du trenger å gjøre, å følge de samme handlingene du utførte i forrige trinn.

Åpne bunnteksten.php-fil og søk etter «<script src= » AV «CTRL + f». Dette vil hjelpe deg med å finne ALLE JS-filene du har. I mitt tilfelle, jeg har fem, og her må jeg registrere og enqueue dem alle.

Deretter må du åpne funksjonene dine.php-fil og lim inn følgende kode:

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');

du kan se at kodestrukturen er den samme som du gjorde tidligere I CSS-konfigurasjonsdelen. Men her vil du bruke wp_register_script i stedet for stil. Du registrerer og enqueue hver JS fil i samme funksjon.

Nå kan du fjerne ALLE JS script-koblingene (jeg har fem) fra bunnteksten.php-fil, lim deretter inn følgende kodelinje på slutten av koden (over </body> tag) og lagre filen.

<?php wp_footer(); ?>

nå åpner du nettstedet ditt i nettleseren din, og du vil legge merke til at det nye WordPress-temaet fungerer bra, men det har fortsatt noen manglende bilder.

Trinn 9: Konfigurer Bilder

denne prosessen er enkel, og her må du definere banen til bildene.

først åpner du indeksen.php-fil og søk etter «<img src= » MED «CTRL + f». Dette vil hjelpe deg med å finne alle bildefilene du har. I mitt tilfelle har jeg åtte, og her trenger jeg banen for dem alle.

for å gi en bane til bilder; legg TIL FØLGENDE PHP-kode i src-koder og lagre filen.

<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" />

nå vil temaet ditt se ut som HTML-temaet og hente alle bildene.

men det vil mangle WordPress-funksjoner, for eksempel endring av nettstedstittel og WordPress navigasjonsmeny.

Trinn 10: Aktiver Tilpasset Tittel I WordPress

hvis Du går inn I WordPress admin panel og endre nettstedets tittel, vil det ikke påvirke tittelen på nettstedet. For å aktivere denne funksjonen kan Du bruke WordPress innebygd funksjon bloginfo () med parameteren «navn» mellom tittelkodene i overskriften.php-fil og lagre filen.

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

og på samme måte må Du bruke WordPress innebygd funksjon bloginfo() med parameteren «navn» mellom h1-kodene i overskriften.php-fil og lagre filen.

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

nå vil temaet plukke opp tittelen som du angir I Innstillinger- > Generelt – > Site Title inne I wp-admin panel.

Trinn 11: Legg Til WordPress Navigasjonsmeny I WordPress

når Du besøker WordPress admin på nettstedet ditt og navigerer Til Utseende, vil Du ikke se et Alternativ For Meny.

du må aktivere Menyen først ved å legge til følgende linje med kode i funksjonene.php-fil.

add_theme_support( 'menus' );

Dette vil aktivere Menyfunksjonaliteten i temaet ditt, men det trenger litt konfigurasjon for å administrere menyer fra wp-dashbordet.

finn først hvor HTML-tema navigasjonsmenyen er, og erstatt den med WordPress innebygd funksjon wp_nav_menu (); Du kan lese mer om denne funksjonen her.

i dette temaet, overskriften.php inneholder navigasjonsmenyen.

Finn følgende linjer med kode:

<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>

Erstatt over linjene med:

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

Din WordPress-meny vil nå dukke opp på temaet ditt og legge til fleksibilitet i WordPress-forretningstemaet.

Innpakning Opp!

jeg håper denne artikkelen hjalp deg med å forstå hvordan du konverterer EN HTML-mal eller et Nettsted til Et WordPress-tema. Dette er en detaljert opplæring der jeg har dekket elleve trinn for å demonstrere prosessen.

hvis du har spørsmål og spørsmål, kan du spørre når som helst i kommentarfeltet nedenfor.