How to Convert HTML Website into WordPress Business Theme

How to Convert HTML Website into WordPress Business Theme

veel bedrijven vertrouwen nog steeds op eenvoudige HTML-websites voor hun online aanwezigheid. Deze HTML websites zijn meestal statisch, wat betekent dat je nodig hebt om de code te bewerken om zelfs een klein detail op de website te veranderen. Om dat te voorkomen, echter, kunt u uw HTML-website te converteren naar WordPress.

in deze tutorial leer ik je hoe je HTML converteert naar een WordPress business thema. Dit houdt alle HTML-elementen intact en geeft u de flexibiliteit van WordPress om elk element gemakkelijk aan te passen.

als u bekend bent met zowel HTML als WordPress, dan is deze tutorial goed voor u. Als je een newbie, probeer dit te doen met een dummy website op uw localhost zoals XAMPP.

• HTML-Website converteren naar WordPress
• welke WordPress-bestanden u nodig hebt
• CSS, JavaScript en afbeeldingen configureren
• WordPress-functies toevoegen om functionaliteit toe te voegen

HTML-Site converteren naar WordPress thema

voor deze tutorial heb ik hier een gratis HTML-bedrijfsthema opgepikt. De technieken zullen hetzelfde blijven, terwijl het omzetten van een business thema. Als u vragen hebt over uw bedrijfsthema, gewoon een reactie of een e-mail, en Ik zal blij zijn om te reageren.

laten we verder gaan. Neem eerst een kijkje op uw HTML-thema en markdown de koptekst, hoofdtekst, en voettekst elementen.

Header: de header zal het bovenste gedeelte bevatten.

hoofdtekst: het is een lange pagina, dus ik zoomde uit om een screenshot te maken, maar het hele middengedeelte is opgenomen in het hoofdtekst.

voettekst: het voettekstgedeelte bevat het onderste gedeelte.

Stap 1: Vereisten

ik hoop dat u WordPress al hebt geïnstalleerd op uw localhost zoals XAMPP (uw computer). Zo niet, we hebben al een gedetailleerde gids behandeld om u te helpen installeren en het opzetten van WordPress lokaal.

Stap 2: Maak uw themamap

voor deze tutorial gebruik ik XAMPP, en mijn WordPress site is geà nstalleerd onder de htdocs map. Om een WordPress thema te maken, moet u toegang tot uw thema ‘ s map en maak een nieuwe map.
nu, open XAMPP map > htdocs > WordPress map (in mijn geval is het testen) > wp-content > thema ‘ s.

In de map Thema ’s ziet u al uw geïnstalleerde WordPress thema’ s. Maak een nieuwe map en geef uw thema een naam.

Stap 3: Maak PHP-bestanden

de nieuw aangemaakte themamap is leeg en u moet enkele bestanden aanmaken om het functioneel te maken. Hiervoor moet u uw code editor te lanceren (VS Code) en open de hele WordPress theme map (in mijn geval, farhan-wordpress-thema).

Maak nu de volgende essentiële WordPress-bestanden om uw thema beter te organiseren.

1. stijl.css (bevat thema-details en CSS-bestanden)
2. index.php (dient de hoofdinhoud als andere optionele bestanden niet gedeclareerd zijn)
3. header.php (bevat de header elementen van het thema)
4. footer.php (bevat de voettekst elementen van het thema)
5. functies.php (bevat functies die op in het WordPress thema)

Stap 4: Kopieer CSS, afbeeldingen en JavaScript (JS) mappen

vanuit uw HTML-thema (hierboven gedownload), kopieer de assets map (CSS, JS, en afbeeldingen mappen) naar uw nieuwe WordPress theme map.

Na de verhuizing naar uw nieuwe WordPress theme map, zal het er zo uitzien:

Stap 5: Het activeren van een Nieuwe WordPress Theme

Nu, u hebt toegevoegd aan de belangrijke mappen die nodig zijn voor een wp theme. Vervolgens opent u uw WordPress site in uw browser en log in op uw Dashboard. Navigeer naar Uiterlijk > thema ‘ s, en u zult zien dat uw nieuwe thema is toegevoegd aan deze sectie.

dit thema ziet er leeg uit. Open uw stijl om de informatie en banner toe te voegen voor het nieuw gemaakte thema.css-bestand (eerder gemaakt) en plak de volgende code en sla het op (ctrl+s).

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

voor de banner moet u een afbeeldingsbestand toevoegen aan uw nieuwe themamap. De afbeeldingsgrootte moet 800 bij 600 zijn en de afbeeldingsnaam moet Screenshot (png-formaat) zijn.

nadat u de schermafbeelding hebt toegevoegd.PNG-bestand, ververs uw wp-admin dashboard, en de afbeelding banner zal verschijnen.

nu kunt u de thema-informatie bekijken wanneer u op de banner klikt.

klik vervolgens op Activeren.

Stap 6: converteer HTML-Code naar Kop -, Index-en voettekst

de kop -, voettekst-en hoofdtekst zijn gemarkeerd met HTML-opmerkingen om deze eenvoudig toe te voegen aan uw WordPress PHP-bestanden en de code te converteren.

kopieer nu de headercode uit de index.html van het gedownloade thema in de header.php-bestand dat u hebt gemaakt in de map WordPress thema ‘ s. U moet kopiëren van <!DOCTYPE html> tot < / header> en sla het op.

kopieer op dezelfde manier over de voettekst en de hoofdtekst van de index.html in voettekst.php en index.php, respectievelijk.

voor de voettekst, kopieer van <voettekst> (in mijn geval is er een klassenaam gedefinieerd in de footer-tag, dus raak niet in de war) tot </html> in de voettekst.php-bestand en sla het op.

kopieer vervolgens alle code na de</header > tag en net voor de <footer> naar index.php en sla het op.

voeg WordPress functie get_header() aan de bovenkant en get_footer() aan het einde van de index.php bestand.

de get_header () is een ingebouwde functie die header aanroept.php en op dezelfde manier, get_footer () is een functie die footer roept.php.

voeg bovenaan de index de volgende code toe:php-bestand en sla het op.

<?php get_header(); ?>

om een voettekst aan te roepen, voegt u de volgende code toe aan het einde van de index.php code en sla het op.

<?php get_footer(); ?>

bezoek nu uw site en u zult iets als dit zien.

Stap 7: configureren van CSS

het feit dat uw thema er raar uitziet is omdat de CSS-bestanden niet op het thema worden toegepast.

u hebt al over de CSS-map gekopieerd van het HTML-thema naar uw WordPress theme-map. Nu, je nodig hebt om deze CSS-bestanden te bellen om het uiterlijk van het thema te voltooien.

Houd er rekening mee dat de namen van uw CSS — bestanden kunnen verschillen-dus dubbel-check voordat u dit proces uitvoert.

u vindt uw CSS-stylesheets in de header.php-bestand, dus je moet zoeken naar “rel=” stylesheet “” door CTRL + f.

verwijder daarna de Google font stylesheets omdat we ze niet nodig hebben. Nu, ik hoef alleen maar de werkelijke CSS stylesheet dwz <link rel=”stylesheet” href=”assets/css/style-starter registreren.css ” >.

WordPress begrijpt de reguliere CSS-stylesheetstructuur niet; daarom moet ik het CSS-stylesheet aanvragen en registreren. Ga naar de functies.php bestand en voeg de volgende code.

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

de wp_register_style zal u helpen uw CSS stylesheet te registreren.

de get_template_directory_uri (). ‘/href ‘ wordt gebruikt om het huidige pad van de sjabloonmap te verkrijgen. Het zal het huidige pad samenvoegen met het betreffende bestand. Dus hier, je nodig hebt om de locatie van uw CSS-bestand te definiëren (href). Je kunt zien hoe ik het pad van dat CSS-bestand heb gedefinieerd: get_template_directory_uri (). ‘/assets / css / style-starter.css”.

nu kunnen we de CSS stylesheet link uit de header verwijderen.php-bestand en vervang het met de volgende code en sla het bestand op.

<?php wp_head(); ?>

de wp_head() is een essentiële WordPress hook die is gedefinieerd onder de<head ></head > sectie van header.php.

wanneer u uw WordPress site bezoekt, zult u merken dat de CSS-bestanden daadwerkelijk worden gevraagd om uw nieuwe WordPress thema, maar toch, het ontwerp is niet in orde. Het is omdat je de js scripts nog niet hebt geconfigureerd.

in de header.php, ik heb een CSS stylesheet, en ik registreerde het alleen in functies.php. Maar wat als je meerdere stylesheets hebt? In dat geval moet je wp_register_style() definiëren voor elk stylesheet. Geen zorgen! Je kunt een voorbeeld nemen uit de volgende stap, waar ik meerdere js scripts heb. Het proces is hetzelfde, zodat het uw vragen zal wissen en u helpen begrijpen hoe u dat werk zal doen.

Stap 8: Configureer JavaScript

het HTML-thema waarmee u werkt gebruikt JavaScript, en in de voettekst.php-bestand, JavaScript-bestanden worden al aangeroepen in HTML-formaat. Om deze JS-bestanden uit te voeren, hoeft u alleen maar dezelfde acties te volgen die u in de vorige stap hebt uitgevoerd.

Open uw voettekst.php-bestand en zoek naar “<script src = “door” CTRL + f”. Dit zal u helpen alle JS-bestanden die u hebt te vinden. In mijn geval heb ik er vijf, en hier moet ik ze allemaal registreren en onderzoeken.

vervolgens moet u uw functies openen.php bestand en plak de volgende code:

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

u kunt zien dat de code structuur is hetzelfde als je eerder deed in de CSS configuratie Deel. Maar hier gebruikt u wp_register_script in plaats van stijl. U registreert en onderzoekt elk JS-bestand in dezelfde functie.

nu kunt u alle JS script links (Ik heb vijf) uit de voettekst verwijderen.php bestand, plak dan de volgende regel code aan het einde van de code (boven </body> tag) en sla het bestand op.

<?php wp_footer(); ?>

nu, open uw site in uw browser, en u zult merken dat de nieuwe WordPress thema werkt prima, maar nog steeds, het heeft een paar ontbrekende beelden.

stap 9: Images

configureren dit proces is eenvoudig, en hier moet u het pad van de images definiëren.

open eerst uw index.php-bestand en zoek naar “<img src = “door” CTRL + f”. Dit zal u helpen alle beeldbestanden die je hebt te vinden. In mijn geval heb ik er acht, en hier heb ik het pad voor ze allemaal nodig.

om een pad naar afbeeldingen te geven; voeg de volgende PHP-code toe binnen src-tags en sla het bestand op.

<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 zal uw thema er hetzelfde uitzien als het HTML-thema en alle afbeeldingen Ophalen.

maar het zal WordPress-functies missen, zoals het wijzigen van de sitetitel en het WordPress-navigatiemenu.

stap 10: aangepaste titel inschakelen in WordPress

als u in het WordPress admin panel gaat en de titel van de website wijzigt, heeft dit geen invloed op de titel van de site. Om deze functie in te schakelen, kunt u gebruik maken van WordPress ingebouwde functie bloginfo() met de parameter “naam” tussen de titel tags in de header.php bestand en sla het bestand.

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

en op dezelfde manier moet u gebruik maken van WordPress ingebouwde functie bloginfo () met de parameter “naam” tussen de H1-tags in de header.php bestand en sla het bestand.

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

nu zal uw thema de titel ophalen die u hebt ingesteld in Instellingen – > Algemeen – > sitetitel in het paneel WP-admin.

stap 11: WordPress Navigatie Menu toevoegen in WordPress

wanneer u de WordPress admin van uw site bezoekt en navigeert naar Uiterlijk, zult u geen optie voor Menu zien.

u moet het Menu eerst inschakelen door de volgende regel code toe te voegen aan de functies.php bestand.

add_theme_support( 'menus' );

toe Dit zal de Menu-functionaliteit in uw thema inschakelen, maar het heeft enige configuratie nodig om menu ‘ s vanaf uw WP-dashboard te beheren.

zoek eerst waar uw HTML thema navigatie menu is en vervang het met behulp van WordPress ingebouwde functie wp_nav_menu (); u kunt hier meer over deze functie lezen.

In dit thema, de header.php bevat het navigatiemenu.

Zoek de volgende regels code:

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

vervang bovenstaande regels door:

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

uw WordPress menu zal nu verschijnen op uw thema en flexibiliteit toe te voegen aan uw WordPress business thema.

Inpakken!

ik hoop dat dit artikel u heeft geholpen om te begrijpen hoe u een HTML-sjabloon of site converteert naar een WordPress thema. Dit is een gedetailleerde tutorial waar ik heb behandeld Elf stappen om het proces aan te tonen.

als u vragen en query ‘ s hebt, aarzel dan niet om op elk gewenst moment te vragen in het commentaar gedeelte hieronder.