Hvordan Konvertere HTML Nettsted Til WordPress Business Theme

 html til wordpress

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.

topptekst

header

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

hoveddelen

hoveddelen

Bunntekst: bunnteksten delen vil inkludere den nederste delen.

 bunntekst

bunntekst

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.

 opprett temamappe

opprett temamappe

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)

wordpress-filer

wordpress-filer

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.

 html-mapper

html mapper

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

wordpress mapper og filer

wordpress mapper og filer

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.

aktiver wordpress tema

aktiver wordpress theme

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

 legge til scrrenshot png-fil

legge til scrrenshot png-fil

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

 wordpress tema bilde

wordpress theme image

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

tema detaljer

tema detaljer

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.

 topptekst php-fil

header php-fil

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.

 footer php-fil

footer php file

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

 indeks php-fil

index php fil

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

legge til hørt øverst i indeksfilen

legge til hørt øverst i indeksfilen

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

<?php get_footer(); ?>

legg til bunntekst nederst i indeksfilen

legg til bunntekst nederst i indeksfilen

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

 nettsted uten css og js

nettsted uten css og js

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.

css stilark i header fil

css stilark i header fil

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

registrer css-fil

registrer css fil

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.

 wordpress header krok

wordpress header hook

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

etter å ha lagt css-fil

etter å legge css-fil

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.

 søke etter js-filer

søker etter js-filer

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.

 enqueue js skript

enqueue js scripts

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

wordpress footer krok

wordpress footer hook

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.

 tema etter js og css

tema etter js og css

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.

 søk bildefiler

søk bildefiler

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

kaller bilder i wordpress

kaller bilder i wordpress

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

 wordpress bildefiler

wordpress bildefiler

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

wordpress tittel

wordpress tittel

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

h2 tittel

h2 title

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

 wordpress nettsted tittel

wordpress site title

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

legg til temamenyer

legg til temamenyer

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

 wordpress menyseksjonen

wordpress menyseksjon

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>

wp meny kode

wp-menykode

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.

Q. Kan JEG konvertere HTML Til WordPress?

prosessen med å konvertere HTML Til WordPress innebærer følgende trinn:

1) Opprett en ny mappe for temaet
2) Kopier CSS-koden i stilene.css-fil
3) Skill HTML-koden inn i toppteksten.php, sidebar.php og footer.php-filer
4) Konverter toppteksten.php og footer.php-filer til ønsket WordPress format
5) Generere et skjermbilde (dette vil bli brukt som et tema forhåndsvisning)
6) Zip mappen og laste den opp Til WordPress nettsted

Q. Hvordan legger DU TIL HTML I WordPress?

for å legge TIL HTML På En WordPress-side eller et Innlegg, gå til siden / innlegget og legg TIL HTML-koden i tekstfanen.

Q. Hvordan åpner JEG EN HTML-fil I WordPress?

du kan åpne EN HTML-fil ved å laste opp zippede HTML-filer til serveren og deretter åpne den i serverens Filbehandling.

Q. Bruker WordPress HTML?

WordPress bruker mye HTML for å gjengi og formatere informasjon på ulike sider og innlegg.

Del din mening i kommentarfeltet. KOMMENTAR nå

Del Denne Artikkelen

Kunde Gjennomgang på

«Vakkert optimalisert hosting For WordPress Og Magento»

Arda Burak

Farhan Ayub

Farhan Er en fellesskapssjef i Cloudways. Han elsker Å Jobbe Med WordPress og har en lidenskap for webutvikling. For det meste, han tilbringer sin tid i samspill med folk I WordPress samfunnet. Bortsett fra sitt arbeidsliv, farhan tilbringer sin tid gaming og spille sport. Ta gjerne kontakt Med Ham På Farhan

Få Koblet på: Twitter Community Forum

Leave a Reply

Din e-postadresse vil ikke bli publisert.