Sådan konverteres HTML hjemmeside til ordtryk Business tema

Sådan konverteres HTML hjemmeside til ordtryk Business tema

mange virksomheder stadig stole på simple HTML hjemmesider for deres online tilstedeværelse. Disse HTML hjemmesider er normalt statisk, hvilket betyder, at du bliver nødt til at redigere koden for at ændre selv en mindre detalje på hjemmesiden. For at undgå dette kan du konvertere din HTML-hjemmeside til .

i denne vejledning lærer jeg dig, hvordan du konverterer HTML til et forretningstema. Dette holder alle HTML-elementer intakte og giver dig fleksibiliteten ved at tilpasse ethvert element let.

hvis du er bekendt med både HTML og ordtryk, så er denne tutorial god for dig. Hvis du er nybegynder, kan du prøve at gøre dette med en dummy hjemmeside på din localhost.

• konvertering af HTML-hjemmeside til ordtryk
• hvilket Ordtryksfiler du har brug for
• konfiguration af CSS, JavaScript og billeder
• tilføjelse af Ordtryksfunktioner for at tilføje funktionalitet

konvertering af HTML-Site til Ordtrykstema

til denne tutorial har jeg hentet et gratis HTML-forretningstema herfra. Teknikkerne forbliver de samme, mens du konverterer ethvert forretningstema. Hvis du har spørgsmål vedrørende din virksomhed tema, bare drop en kommentar eller en e-mail, og jeg vil være glad for at svare.

lad os gå videre. Først skal du kigge på dit HTML-tema og markere elementerne header, main body og footer.

Header: overskriften vil omfatte den øverste sektion del.

hoveddel: det er en lang side, så jeg sprang ud for at tage et skærmbillede, men hele centerdelen er inkluderet i hoveddelen.

sidefod: sidefodssektionen inkluderer bunddelen.

Trin 1: Forudsætninger

jeg håber du allerede har installeret på din localhost som din computer. Hvis ikke, har vi allerede dækket en detaljeret vejledning, der hjælper dig med at installere og konfigurere lokalt.

Trin 2: Opret din Temamappe

til denne tutorial bruger jeg. Hvis du vil oprette et tema, skal du få adgang til mappen Temaer og oprette en ny mappe.
nu skal du åbne mappen > htdocs > (i mit tilfælde er det test) > htdocs > temaer.

i mappen Temaer vil du se alle dine installerede temaer. Opret en ny mappe og navngiv dit tema.

Trin 3: Opret PHP-filer

den nyoprettede temamappe er tom, og du skal oprette nogle filer for at gøre den funktionel. Til dette skal du starte din kodeditor (VS-kode) og åbne hele temamappen (i mit tilfælde farhan-ordtryk-tema).

Opret nu følgende vigtige Ordtryksfiler for at organisere dit tema bedre.

1. stil.css(indeholder tema detaljer og CSS filer)
2. indeks.php (serverer hovedindholdet, hvis andre valgfrie filer ikke er erklæret)
3. header.php (indeholder overskriftselementerne i temaet)
4. sidefod.php (indeholder footer elementer af temaet)
5. funktioner.php (indeholder funktioner, der er tændt i Ordtrykstemaet)

Trin 4: Kopier CSS, billeder og JavaScript (JS) mapper

fra dit HTML-tema (hentet ovenfor), Kopier mappen aktiver (CSS, JS og billeder) til din nye temamappe.

efter at have flyttet til din nye temamappe, vil det se sådan ud:

Trin 5: Aktiver et nyt tema

nu har du Tilføjet de vigtige mapper, der kræves til ethvert tema. Derefter skal du åbne din hjemmeside og logge ind på dit Dashboard. Naviger til udseende > temaer, og du vil se dit nye tema er blevet tilføjet til dette afsnit.

dette tema ser tomt ud. For at tilføje oplysningerne og banneret til det nyoprettede tema skal du åbne din stil.css-fil (oprettet tidligere) og indsæt følgende kode og gem den (ctrl+s).

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

for banneret skal du tilføje en billedfil til din nye temamappe. Billedstørrelsen skal være 800 ved 600, og billednavnet skal være skærmbillede (png-format).

når du har tilføjet skærmbilledet.png-fil, Opdater dit dashboard, og billedbanneret vises.

nu Kan du se temaet oplysninger, når du klikker på banneret.

næste, skal du blot klikke på Aktiver.

Trin 6: konverter HTML-kode til overskrift, indeks og sidefod

overskriften, sidefoden og hoveddelen er markeret med HTML-kommentarer for nemt at tilføje det til dine PHP-filer og konvertere koden.

kopier nu overskriftskoden fra indekset.html af det hentede tema i overskriften.php-fil, du oprettede i mappen Temaer. Du skal kopiere fra <!DOCTYPE html> till < / header> og gem det.

tilsvarende kopiere over sidefoden og vigtigste organ elementer fra indeks.html til sidefod.php og indeks.php, henholdsvis.

til sidefoden skal du kopiere fra< sidefod >(i mit tilfælde er der et klassenavn defineret i sidefodsmærket, så bliv ikke forvirret) indtil</html > i sidefoden.php fil og gemme den.

kopier derefter hele koden efter </header>tag og lige før < footer> til indeks.php og gem det.

Tilføj ordtryksfunktion get_header() øverst og get_footer() i slutningen af indekset.php-fil.

get_header() er en indbygget funktion, der kalder i header.php og tilsvarende get_footer () er en funktion, der kalder sidefod.php.

tilføj følgende kode øverst i indekset.php fil og gemme den.

<?php get_header(); ?>

for at ringe til en sidefod skal du indsætte følgende kode i slutningen af indekset.php kode og gemme det.

<?php get_footer(); ?>

besøg nu din side, og du vil se noget som dette.

Trin 7: konfiguration af CSS

det faktum, at dit tema ser underligt ud, er fordi CSS-filerne ikke anvendes på temaet.

du har allerede kopieret over CSS-mappen fra HTML-temaet til din temamappe. Nu skal du ringe til disse CSS-filer for at fuldføre temaets udseende.

Husk, at navnene på dine CSS — filer kan variere-så dobbelttjek, før du udfører denne proces.

du finder dine CSS stylesheets i overskriften.php-fil, så du skal søge efter”rel=” stylesheet “” af CTRL + f.

fjern derefter Google font stylesheets, fordi vi ikke har brug for dem. <link rel= “stylesheet”href=” aktiver/css/style-starter.css ” >.

forstår ikke den almindelige CSS stylesheet struktur; derfor er jeg nødt til at spørge og registrere CSS stylesheet. Gå til funktionerne.php fil og tilføje 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 vil hjælpe dig med at registrere din CSS stylesheet.

get_template_directory_uri() . ‘/href ‘ bruges til at hente den aktuelle skabelonmappesti. Det vil sammenkæde den aktuelle sti med den respektive fil. Så her skal du definere placeringen af din CSS-fil (href). Du kan se, hvordan jeg definerede stien til den CSS-fil: get_template_directory_uri() . ‘/aktiver / css / stil-starter.css’.

nu kan vi fjerne CSS stylesheet linket fra overskriften.php fil og erstatte det med følgende kode og gemme filen.

<?php wp_head(); ?>

hovedhovedet() er defineret under afsnittet< hoved ></hoved >.php.

når du besøger din hjemmeside, vil du bemærke, at CSS-filer er faktisk forespurgt til din nye tema, men stadig, designet er ikke i orden. Det er fordi du ikke har konfigureret JS scripts endnu.

i overskriften.php, jeg har et CSS stylesheet, og jeg registrerede det kun i funktioner.php. Men hvad nu hvis du har flere stylesheets? I så fald skal du definere hp_register_style() for hvert stylesheet. Bare rolig! Du kan tage et eksempel fra det næste trin, hvor jeg har flere JS-scripts. Processen er den samme, så det vil rydde dine spørgsmål og hjælpe dig med at forstå, hvordan du vil gøre det job.

Trin 8: Konfigurer JavaScript

det HTML-tema, du arbejder med, bruger JavaScript og i sidefoden.php-fil, JavaScript-filer kaldes allerede i HTML-format. For at køre disse JS-filer er alt, hvad du skal gøre, at følge de samme handlinger, du udførte i det foregående trin.

åbn din sidefod.php fil og søg efter ” <script src=”af” CTRL+f”. Dette hjælper dig med at finde alle de JS-filer, du har. I mit tilfælde har jeg fem, og her skal jeg registrere og spørge dem alle.

Dernæst skal du åbne dine funktioner.php fil og indsæt 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-konfigurationsdelen. Men her vil du bruge vp_register_script i stedet for stil. Du registrerer og forespørger hver JS-fil i samme funktion.

nu kan du fjerne alle JS script links (jeg har fem) fra sidefoden.php-fil, Indsæt derefter følgende kodelinje i slutningen af koden (over </body> tag) og gem filen.

<?php wp_footer(); ?>

åbn nu din side på din bro.ser, og du vil bemærke, at det nye tema fungerer fint, men stadig har det et par manglende billeder.

trin 9: Konfigurer billeder

denne proces er ligetil, og her skal du definere stien til billederne.

Åbn først dit indeks.php fil og søg efter ” <img src=”ved” CTRL+f”. Dette vil hjælpe dig med at finde alle de billedfiler, du har. I mit tilfælde har jeg otte, og her har jeg brug for stien for dem alle.

for at give en sti til billeder; tilføj følgende PHP-kode inden for src-tags og gem 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" />

nu vil dit tema ligne HTML-temaet og hente alle billederne.

men det vil mangle funktioner, som f.eks.

Trin 10: aktiver brugerdefineret titel i

hvis du går ind i adminpanelet og ændrer hjemmesidens titel, vil det ikke påvirke sidens titel. For at aktivere denne funktion kan du bruge den indbyggede funktion bloginfo() med parameteren “navn” mellem titeltaggene i overskriften.php fil og gemme filen.

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

og på samme måde skal du bruge den indbyggede funktion bloginfo() med parameteren “navn” mellem H1-tags i overskriften.php fil og gemme filen.

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

nu vil dit tema hente den titel, du har angivet i Indstillinger -> generelt-> Sidetitel inde i admin-panelet.

trin 11: Tilføj navigationsmenu i menuen

når du besøger administratoren af din hjemmeside og navigerer til udseende, vil du ikke se en mulighed for Menu.

du skal først aktivere menuen ved at tilføje følgende kodelinje i funktionerne.php-fil.

add_theme_support( 'menus' );

dette vil aktivere menufunktionaliteten i dit tema, men det kræver en vis konfiguration for at administrere menuer fra dit dashboard.

find først, hvor din HTML-temanavigationsmenu er, og udskift den derefter ved hjælp af den indbyggede funktion(); Du kan læse mere om denne funktion her.

i dette tema, overskriften.php indeholder navigationsmenuen.

Find følgende kodelinjer:

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

Erstat ovenstående linjer med:

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

din menu vil nu dukke op på dit tema og tilføje fleksibilitet til din business tema.

Indpakning Op!

jeg håber, at denne artikel hjalp dig med at forstå, hvordan du konverterer en HTML-skabelon eller et sted til et Ordtrykstema. Dette er en detaljeret tutorial, hvor jeg har dækket elleve trin for at demonstrere processen.

hvis du har spørgsmål og forespørgsler, er du velkommen til at spørge når som helst i kommentarfeltet nedenfor.