jak převést HTML webové stránky do WordPress Business Theme

jak převést HTML webové stránky do WordPress Business Theme

mnoho podniků se stále spoléhá na jednoduché HTML webové stránky pro jejich online přítomnost. Tyto webové stránky HTML jsou obvykle statické, což znamená, že budete muset upravit kód, abyste změnili i menší detail na webu. Chcete-li tomu zabránit, můžete převést svůj web HTML na WordPress.

v tomto tutoriálu vás naučím, jak převést HTML na obchodní téma WordPress. To udržuje všechny prvky HTML neporušené a poskytuje vám flexibilitu WordPress pro snadné přizpůsobení jakéhokoli prvku.

pokud jste obeznámeni s HTML i WordPress, pak je tento tutoriál pro vás dobrý. Pokud jste nováček, zkuste to udělat s fiktivní webové stránky na localhost jako XAMPP.

• Převod webových stránek HTML na WordPress
• které soubory WordPress potřebujete
• konfigurace CSS, JavaScriptu a obrázků
• přidání funkcí WordPress pro přidání funkcí

převod stránek HTML na téma WordPress

pro tento tutoriál jsem zde vyzvedl bezplatné obchodní téma HTML. Techniky zůstanou stejné při převodu jakéhokoli obchodního tématu. Máte-li dotazy týkající se vašeho obchodního tématu, stačí napsat komentář nebo e-mail a já vám rád odpovím.

pojďme dál. Nejprve se podívejte na téma HTML a označte prvky záhlaví, hlavního těla a zápatí.

záhlaví: záhlaví bude obsahovat horní část sekce.

hlavní tělo: je to dlouhá stránka, takže jsem se přiblížil, abych pořídil snímek obrazovky, ale celá středová část je součástí hlavního těla.

zápatí: část zápatí bude obsahovat spodní část.

Krok 1: Předpoklady

doufám, že již máte WordPress nainstalován na localhost jako XAMPP (tj. Pokud ne, již jsme se zabývali podrobným průvodcem, který vám pomůže lokálně nainstalovat a nastavit WordPress.

Krok 2: Vytvořte složku motivu

pro tento tutoriál používám XAMPP a můj web WordPress je nainstalován pod složkou htdocs. Chcete-li vytvořit téma WordPress, musíte přistupovat ke složce témat a vytvořit novou složku.
nyní otevřete složku XAMPP > htdocs > WordPress folder (v mém případě je to testování) > wp-content > témata.

ve složce témata uvidíte všechna nainstalovaná témata WordPress. Vytvořte novou složku a pojmenujte své téma.

Krok 3: Vytvořit soubory PHP

nově vytvořená složka motivu je prázdná a je třeba vytvořit některé soubory, aby byla funkční. K tomu musíte spustit editor kódu (VS Code) a otevřít celou složku motivu WordPress (v mém případě farhan-wordpress-theme).

nyní vytvořte následující základní soubory WordPress, abyste lépe uspořádali své téma.

1. styl.css (obsahuje podrobnosti o tématu a soubory CSS)
2. index.php (slouží hlavnímu obsahu, pokud nejsou deklarovány jiné volitelné soubory)
3. záhlaví.php (obsahuje hlavičkové prvky motivu)
4. zápatí.php (obsahuje zápatí prvky motivu)
5. funkce.php (obsahuje funkce, které v tématu WordPress)

Krok 4: Zkopírujte složky CSS, obrázky a JavaScript (JS)

z motivu HTML (staženého výše) zkopírujte složku aktiva (složky CSS, JS a obrázky) do nové složky motivu WordPress.

po přesunu do nové složky WordPress téma, bude to vypadat takto:

Krok 5: aktivujte nové téma WordPress

nyní jste přidali důležité složky, které jsou vyžadovány pro jakékoli téma wp. Dále otevřete svůj web WordPress ve svém prohlížeči a přihlaste se k řídicímu panelu. Přejděte na vzhled > témata a uvidíte, že vaše nové téma bylo přidáno do této sekce.

toto téma vypadá prázdné. Chcete-li přidat informace a banner pro nově vytvořené téma, otevřete svůj styl.css soubor (vytvořený dříve) a vložte následující kód a uložte jej (ctrl + s).

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

pro banner musíte přidat soubor obrázku do nové složky motivů. Velikost obrázku by měla být 800 x 600 a název obrázku by měl být Snímek obrazovky (formát png).

po přidání snímku obrazovky.soubor png, obnovte řídicí panel wp-admin a zobrazí se banner obrázku.

nyní můžete zobrazit informace o motivu, když kliknete na banner.

dále jednoduše klikněte na Aktivovat.

Krok 6: převést HTML kód do záhlaví, indexu a zápatí

záhlaví, zápatí a hlavní tělo jsou označeny HTML komentáři snadno přidat do WordPress PHP souborů a převést kód.

Nyní zkopírujte kód záhlaví z indexu.html staženého motivu do záhlaví.php soubor, který jste vytvořili ve složce WordPress Témata. Musíte kopírovat z <!DOCTYPE html> do < / header> a uložte jej.

podobně zkopírujte přes zápatí a hlavní prvky těla z indexu.html do zápatí.php a index.php, resp.

pro zápatí zkopírujte z < zápatí> (v mém případě je v zápatí definován název třídy, takže se nezaměňujte) do < / html> do zápatí.php soubor a uložte jej.

dále zkopírujte celý kód za značkou < / header> a těsně před zápatí < > do indexu.php a uložte jej.

přidat WordPress funkce get_header() v horní části a get_footer () na konci indexu.php soubor.

get_header () je vestavěná funkce, která volá v záhlaví.php a podobně, get_footer () je funkce, která volá zápatí.Linux.

přidejte následující kód v horní části indexu.php soubor a uložte jej.

<?php get_header(); ?>

Chcete-li volat v zápatí, vložte na konec indexu následující kód.php kód a uložte jej.

<?php get_footer(); ?>

nyní navštivte své stránky a uvidíte něco takového.

Krok 7: konfigurace CSS

skutečnost, že Vaše téma vypadá divně, je proto, že soubory CSS nejsou aplikovány na téma.

Již jste zkopírovali složku CSS z motivu HTML do složky motivu WordPress. Nyní musíte tyto soubory CSS zavolat, abyste dokončili vzhled motivu.

mějte na paměti, že názvy souborů CSS se mohou lišit-proto před provedením tohoto procesu zkontrolujte.

v záhlaví najdete styly CSS.php soubor, takže je třeba hledat“rel=“ stylesheet „“ CTRL + f.

poté odeberte styly písma Google, protože je nepotřebujeme. Nyní stačí zaregistrovat skutečný CSS stylesheet tj. <link rel= „stylesheet“ href= “ assets/css/style-starter.css “ >.

WordPress nerozumí pravidelné struktuře stylů CSS; proto musím zjistit a zaregistrovat styly CSS. Přejděte na funkce.php soubor a přidejte následující kód.

<?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 vám pomůže zaregistrovat CSS styl.

get_template_directory_uri() . ‚/href ‚ se používá k získání aktuální cesty k adresáři šablony. To bude zřetězit aktuální cestu s příslušným souborem. Zde tedy musíte definovat umístění souboru CSS (href). Můžete vidět, jak jsem definoval cestu k tomuto souboru CSS: get_template_directory_uri (). ‚/aktiva / css / styl-startér.css“.

Nyní můžeme odstranit odkaz CSS stylů z záhlaví.php soubor a nahraďte jej následujícím kódem a uložte soubor.

<?php wp_head(); ?>

wp_head () je základní WordPress hák, který je definován pod <head> </head> sekce záhlaví.Linux.

když navštívíte své stránky WordPress, všimnete si, že soubory CSS jsou skutečně enqueued na vaše nové téma WordPress, ale přesto design není v pořádku. Je to proto, že jste ještě nenakonfigurovali skripty JS.

do záhlaví.php, mám jeden CSS styl a zaregistroval jsem ho pouze ve funkcích.Linux. Ale co když máte více stylů? V takovém případě je třeba definovat wp_register_style () pro každý styl. Neboj se! Můžete si vzít příklad z dalšího kroku, kde mám více JS skriptů. Proces je stejný, takže vymaže vaše dotazy a pomůže vám pochopit, jak budete tuto práci dělat.

Krok 8: Nakonfigurujte JavaScript

téma HTML, se kterým pracujete, používá JavaScript a v zápatí.php soubor, JavaScript soubory jsou již volány ve formátu HTML. Chcete-li spustit tyto soubory JS, vše, co musíte udělat, je sledovat stejné akce, které jste provedli v předchozím kroku.

otevřete zápatí.php soubor a vyhledejte „<script src= „pomocí“ CTRL + f“. To vám pomůže najít všechny soubory JS, které máte. V mém případě jich mám pět a tady se musím zaregistrovat a poptat všechny.

Dále musíte otevřít své funkce.php soubor a vložte následující kód:

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

můžete vidět, že struktura kódu je stejná jako dříve v konfigurační části CSS. Zde však místo stylu použijete wp_register_script. Zaregistrujete a enqueue každý soubor JS ve stejné funkci.

nyní můžete odstranit všechny odkazy JS script (mám pět) z zápatí.vložte následující řádek kódu na konec kódu (nad značkou < / body>) a uložte soubor.

<?php wp_footer(); ?>

nyní otevřete svůj web v prohlížeči a všimnete si, že nové téma WordPress funguje dobře, ale přesto má několik chybějících obrázků.

Krok 9: konfigurace obrázků

tento proces je přímočarý a zde musíte definovat cestu obrázků.

nejprve otevřete index.php soubor a vyhledejte „<img src= „pomocí“ CTRL + f“. To vám pomůže najít všechny obrazové soubory, které máte. V mém případě jich mám osm a tady potřebuji cestu pro všechny.

a zadejte cestu k obrázkům; Přidejte následující PHP kód do značek src a uložte soubor.

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

nyní bude vaše téma vypadat podobně jako téma HTML a načíst všechny obrázky.

ale bude postrádat funkce WordPress, jako je změna názvu webu a navigační nabídka WordPress.

Krok 10: povolte vlastní název v WordPress

pokud přejdete do administračního panelu WordPress a změníte název webu, nebude to mít vliv na název webu. Chcete-li tuto funkci povolit, Můžete použít vestavěnou funkci WordPress bloginfo() s parametrem „název“ mezi značkami titulů v záhlaví.php soubor a uložte soubor.

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

a podobně je třeba použít WordPress vestavěnou funkci bloginfo () s parametrem „name“ mezi značkami h1 v záhlaví.php soubor a uložte soubor.

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

nyní vaše téma vyzvedne název, který jste nastavili v nastavení – > Obecné – > název webu uvnitř panelu wp-admin.

krok 11: přidat WordPress navigační Menu v WordPress

když navštívíte WordPress admin vašeho webu a přejděte na vzhled, neuvidíte možnost Menu.

musíte nejprve povolit Menu přidáním následujícího řádku kódu do funkcí.php soubor.

add_theme_support( 'menus' );

to umožní funkci Menu ve vašem motivu, ale potřebuje nějakou konfiguraci pro správu nabídek z řídicího panelu WP.

nejprve zjistěte, kde je vaše navigační nabídka motivu HTML, a poté ji nahraďte pomocí vestavěné funkce WordPress wp_nav_menu (); více o této funkci si můžete přečíst zde.

v tomto tématu záhlaví.php obsahuje navigační nabídku.

najděte následující řádky kódu:

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

nahraďte výše uvedené řádky:

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

vaše nabídka WordPress se nyní zobrazí na vašem tématu a přidá flexibilitu vašemu obchodnímu tématu WordPress.

Balení!

doufám, že tento článek vám pomohl pochopit, jak převést šablonu HTML nebo web na téma WordPress. Toto je podrobný návod, kde jsem se zabýval jedenácti kroky k prokázání procesu.

Máte – li jakékoli dotazy a dotazy, můžete se kdykoli zeptat v sekci komentářů níže.