Hur konvertera HTML webbplats till WordPress Business Theme

Hur konvertera HTML webbplats till WordPress Business Theme

många företag förlitar sig fortfarande på enkla HTML-webbplatser för deras online-närvaro. Dessa HTML-webbplatser är vanligtvis statiska, vilket innebär att du måste redigera koden för att ändra även en mindre detalj på webbplatsen. För att undvika det kan du dock konvertera din HTML-webbplats till WordPress.

i den här handledningen lär jag dig hur du konverterar HTML till ett WordPress-företagstema. Detta håller alla HTML-element intakta och ger dig flexibiliteten i WordPress för att enkelt anpassa alla element.

om du är bekant med både HTML och WordPress, då denna handledning är bra för dig. Om du är nybörjare kan du försöka göra det med en dummy-webbplats på din localhost som XAMPP.

• konvertera HTML-webbplats till WordPress
• vilka WordPress-filer du behöver
• konfigurera CSS, JavaScript och bilder
• lägga till WordPress-funktioner för att lägga till funktionalitet

konvertera HTML-webbplats till WordPress-tema

för denna handledning har jag plockat upp ett gratis HTML-affärstema härifrån. Teknikerna kommer att förbli desamma när du konverterar alla affärstema. Om du har frågor om ditt företag tema, bara släppa en kommentar eller ett mail, och jag kommer gärna att svara.

Låt oss gå vidare. Ta först en titt på ditt HTML-tema och markera sidhuvudet, huvudkroppen och sidfotelementen.

rubrik: rubriken kommer att innehålla den övre delen.

huvuddel: det är en lång sida, så jag zoomade ut för att ta en skärmdump, men hela mittdelen ingår i huvudkroppen.

sidfot: sidfotavsnittet kommer att innehålla den nedre delen.

Steg 1: Förutsättningar

jag hoppas att du redan har WordPress installerat på din localhost som XAMPP (dvs din dator). Om inte, har vi redan täckt en detaljerad guide som hjälper dig att installera och konfigurera WordPress lokalt.

steg 2: Skapa din Temamapp

för denna handledning använder jag XAMPP, och min WordPress-webbplats är installerad under htdocs-mappen. För att skapa ett WordPress-tema måste du komma åt din teman-mapp och skapa en ny mapp.
öppna nu XAMPP-mappen > htdocs > WordPress-mappen (i mitt fall testar det) > wp-innehåll > teman.

i mappen teman ser du alla dina installerade WordPress-Teman. Skapa en ny mapp och namnge ditt tema.

steg 3: Skapa PHP-filer

den nyskapade temamappen är tom, och du måste skapa några filer för att göra den funktionell. För detta måste du starta din kodredigerare (VS-kod) och öppna hela WordPress-temamappen (i mitt fall farhan-wordpress-tema).

skapa nu följande viktiga WordPress-filer för att organisera ditt tema bättre.

1. stil.css (innehåller tema detaljer och CSS-filer)
2. index.php (tjänar huvudinnehållet om andra valfria filer inte deklareras)
3. rubrik.php (innehåller huvudelementen i temat)
4. sidfot.php (innehåller sidfotens element i temat)
5. funktioner.php (innehåller funktioner som på i WordPress tema)

steg 4: Kopiera CSS, bilder och JavaScript (JS) mappar

från ditt HTML-tema (hämtat ovan), kopiera mappen tillgångar (CSS, JS och bilder mappar) till din nya WordPress tema mapp.

när du har flyttat till din nya WordPress – temamapp kommer det att se ut så här:

Steg 5: Aktivera ett nytt WordPress-tema

nu har du lagt till de viktiga mappar som krävs för alla wp-teman. Öppna sedan din WordPress-webbplats i din webbläsare och logga in på din instrumentpanel. Navigera till utseende > teman, och du kommer att se ditt nya tema har lagts till i det här avsnittet.

detta tema ser tomt ut. För att lägga till information och banner för det nyskapade temat, öppna din stil.css-fil (skapad tidigare) och klistra in följande kod och spara den (ctrl+s).

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

för bannern måste du lägga till en bildfil i din nya temamapp. Bildstorleken ska vara 800 x 600, och bildnamnet ska vara skärmdump (png-format).

när du har lagt till skärmdumpen.PNG-fil, uppdatera din wp-admin-instrumentpanel och bildbannern visas.

nu kan du se temainformationen när du klickar på bannern.

Nästa, klicka på Aktivera.

steg 6: konvertera HTML-kod till sidhuvud, Index och sidfot

sidhuvudet, sidfoten och huvudkroppen är markerade med HTML-kommentarer för att enkelt lägga till den i dina WordPress PHP-filer och konvertera koden.

kopiera nu rubrikkoden från indexet.html av det nedladdade temat i rubriken.php-fil du skapade i mappen WordPress themes. Du måste kopiera från <!DOCTYPE html> till < / header> och spara den.

på samma sätt, kopiera över sidfoten och huvudkroppselement från index.html till sidfot.php och index.php, respektive.

för sidfoten, kopiera från <sidfot> (i mitt fall finns det ett klassnamn definierat i sidfoten, så bli inte förvirrad) till </html> i sidfoten.php-fil och spara den.

kopiera sedan all kod efter </header> taggen och strax före <footer> till index.php och spara det.

Lägg till WordPress-funktion get_header() överst och get_footer() i slutet av indexet.php-fil.

get_header() är en inbyggd funktion som anropar header.php och liknande, get_footer () är en funktion som kallar sidfot.php.

Lägg till följande kod högst upp i indexet.php-fil och spara den.

<?php get_header(); ?>

för att anropa en sidfot, infoga följande kod i slutet av indexet.php-kod och spara den.

<?php get_footer(); ?>

besök nu din webbplats så ser du något liknande.

Steg 7: konfigurera CSS

det faktum att ditt tema ser konstigt ut beror på att CSS-filerna inte tillämpas på temat.

du har redan kopierat över CSS-mappen från HTML-temat till din WordPress-temamapp. Nu måste du ringa dessa CSS-filer för att slutföra utseendet på temat.

Tänk på att namnen på dina CSS — filer kan skilja sig-så dubbelkolla innan du utför denna process.

du hittar dina CSS-formatmallar i rubriken.php-fil, så du måste söka efter”rel=” stylesheet ”” med CTRL + f.

efter det, ta bort Google font stylesheets eftersom vi inte behöver dem. Nu behöver jag bara registrera det faktiska CSS-stilarket, dvs <link rel=” stylesheet”href=” assets/css/style-starter.css ” >.

WordPress förstår inte den vanliga CSS-formatmallen struktur; det är därför jag måste köa och registrera CSS-formatmallen. Gå till funktionerna.php-fil och Lägg till följande kod.

<?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 hjälper dig att registrera ditt CSS-formatmall.

den get_template_directory_uri() . ’/href ’ används för att hämta den aktuella mallkatalogvägen. Det kommer att sammanfoga den aktuella sökvägen med respektive fil. Så här måste du definiera platsen för din CSS-fil (href). Du kan se hur jag definierade sökvägen för den CSS-filen: get_template_directory_uri (). ’/tillgångar/css / stil-starter.css’.

nu kan vi ta bort CSS-stilarklänken från rubriken.php-fil och ersätt den med följande kod och spara filen.

<?php wp_head(); ?>

wp_head() är en viktig WordPress-krok som definieras under avsnittet <head> </head> i rubriken.php.

när du besöker din WordPress webbplats, kommer du att märka att CSS-filer faktiskt kö till din nya WordPress tema, men ändå, designen är inte i ordning. Det beror på att du inte har konfigurerat JS-skript ännu.

i rubriken.php, jag har ett CSS-stilark, och jag registrerade det bara i funktioner.php. Men vad händer om du har flera stilmallar? I så fall måste du definiera wp_register_style() för varje formatmall. Oroa dig inte! Du kan ta ett exempel från nästa steg, där jag har flera JS-skript. Processen är densamma så det kommer att rensa dina frågor och hjälpa dig att förstå hur du kommer att göra det jobbet.

steg 8: Konfigurera JavaScript

HTML-temat du arbetar med använder JavaScript och i sidfoten.php-fil, JavaScript-filer kallas redan i HTML-format. För att köra dessa JS-filer behöver du bara följa samma åtgärder som du utförde i föregående steg.

öppna din sidfot.php-fil och Sök efter ” <script src= ”med”CTRL+f”. Detta hjälper dig att hitta alla JS-filer som du har. I mitt fall har jag fem, och här måste jag registrera och köa dem alla.

Därefter måste du öppna dina funktioner.php-fil och klistra in följande kod:

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 att kodstrukturen är densamma som du gjorde tidigare i CSS-konfigurationsdelen. Men här kommer du att använda wp_register_script istället för stil. Du registrerar och köar varje JS-fil i samma funktion.

nu kan du ta bort alla JS-skriptlänkar (jag har fem) från sidfoten.php-fil, klistra sedan in följande kodrad i slutet av koden (ovan </body> tagg) och spara filen.

<?php wp_footer(); ?>

öppna nu din webbplats i din webbläsare så märker du att det nya WordPress-temat fungerar bra, men det har fortfarande några saknade bilder.

steg 9: konfigurera bilder

denna process är enkel, och här måste du definiera bildernas väg.

öppna först ditt index.php-fil och Sök efter ” < img src= ”med”CTRL+f”. Detta hjälper dig att hitta alla bildfiler du har. I mitt fall har jag åtta, och här behöver jag vägen för dem alla.

för att ge en sökväg till bilder; Lägg till följande PHP-kod i src-taggar och spara 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 kommer ditt tema att likna HTML-temat och hämta alla bilder.

men det kommer att sakna WordPress-funktioner, till exempel att ändra webbplatstitel och WordPress-navigeringsmeny.

steg 10: aktivera anpassad titel i WordPress

om du går in i WordPress-adminpanelen och ändrar webbplatsens titel påverkar det inte webbplatsens titel. För att aktivera den här funktionen kan du använda WordPress inbyggd funktion bloginfo() med parametern ”namn” mellan titeltaggarna i rubriken.php-fil och spara filen.

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

och på samma sätt måste du använda WordPress inbyggd funktion bloginfo() med parametern ”namn” mellan H1-taggarna i rubriken.php-fil och spara filen.

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

nu, ditt tema kommer att plocka upp titeln som du anger i Inställningar -> allmänt-> Site Titel inne i wp-admin panel.

steg 11: Lägg till WordPress-navigeringsmenyn i WordPress

när du besöker WordPress-administratören på din webbplats och navigerar till utseende ser du inte ett alternativ för Meny.

du måste aktivera menyn först genom att lägga till följande kodrad i funktionerna.php-fil.

add_theme_support( 'menus' );

detta aktiverar menyfunktionen i ditt tema, men det behöver viss konfiguration för att hantera menyer från din WP-instrumentpanel.

först, hitta var din HTML-tema navigeringsmenyn är och sedan ersätta den med WordPress inbyggd funktion wp_nav_menu(); du kan läsa mer om denna funktion här.

i detta tema, rubriken.php innehåller navigeringsmenyn.

hitta följande rader med kod:

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

ersätt ovanstående rader med:

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

din WordPress-meny kommer nu att dyka upp på ditt tema och lägga till flexibilitet i ditt WordPress-företagstema.

Förpackning!

jag hoppas att den här artikeln hjälpte dig att förstå hur man konverterar en HTML-mall eller webbplats till ett WordPress-tema. Detta är en detaljerad handledning där jag har täckt Elva steg för att demonstrera processen.

om du har några frågor och frågor Är du välkommen att fråga när som helst i kommentarfältet nedan.