Na začátku (webu) byly všechny webové stránky tvořeny pouze textem a statickým HTML. Nyní, o více než 20 let později, je však web mnohem jiný. Webové stránky jsou mnohem složitější. Poskytují bohatší a příjemnější zážitky jak tvůrcům stránek, tak jejich návštěvníkům.
Z velké části je to díky projektům s otevřeným zdrojovým kódem, jako je WordPress. Kterému se za posledních zhruba deset let podařilo splnit jeho hlavní poslání – demokratizovat publikování na internetu (a ještě mnohem více v tomto procesu), takže každý, kdo má nainstalovaný WordPress a správné téma/pluginy, může mít moderní webové stránky s pokročilým designem a funkcemi. Není potřeba žádné kódování – dokonce ani HTML!“
Pro zapálené uživatele WordPressu, jako jsem já, je proto téměř těžké uvěřit, že v roce 2018 může ještě někdo provozovat statický web v HTML namísto webu ve WordPressu s tématem a pluginy. Faktem ale je, že stále existuje značné množství aktivních webů pouze ve formátu HTML. (Nebo HTML s trochou CSS.)
Připouštím, že majitelé těchto webů mohou mít dobré důvody, proč neprovedli upgrade nebo konverzi. Možná se obsah jejich stránek nikdy nemění a již zavedené jednoduché formátování a design jsou použitelné? Nebo je to možná méně obtěžující než se starat o aktualizaci webu ve WordPressu? Obojí jsou platné důvody (mimo jiné). Ukázkové příklady hesla: „Neopravuj, co není rozbité.“
Mám však pocit, že tyto důvody nemusí být tím hlavním, proč někteří (možná mnozí) ještě nepřešli na nový systém. Tím nejzřejmějším je, že prostě nevědí, jak převést své stránky v HTML na stránky ve WordPressu. Zejména bez ztráty obsahu nebo nutnosti provádět nadměrné formátování po jednotlivých stránkách.
Naštěstí, jak už to u WordPressu bývá, existuje řada způsobů, jak tento problém vyřešit. Některé možnosti jsem shrnul níže.
Přihlaste se k odběru našeho kanálu Youtube
Vaše možnosti převodu statického webu HTML na web WordPress
Jak se rozhodnete převést statický web HTML na web WordPress, bude nepochybně záviset na vašich osobních preferencích, požadované časové/finanční investici a úrovni dovedností s kódem. Budete se muset sami rozhodnout, co je pro vás nejlepší, ale díky níže uvedeným shrnutím byste se měli být schopni rychle rozhodnout a přejít rovnou k nejdůležitějším informacím v tomto příspěvku pro vaši konkrétní situaci.
Existují tři hlavní možnosti:
1. Ručně vytvořit téma WordPressu na základě vaší současné statické stránky ve formátu HTML.
To bude vyžadovat, abyste se dostali do svého kódu. Budete muset získat přístup do adresáře svého aktuálního webu přes FTP a použít stávající kód jako výchozí bod. Odtud budete muset vytvořit potřebné soubory pro téma WordPressu a zkopírovat kousky kódu z kodexu WordPressu. To je poměrně jednoduché a přímočaré, pokud máte nějaké zkušenosti s HTML, CSS a trochou PHP.
2. Nainstalujte si předem připravené téma a jednoduše přeneste svůj obsah.
Tato možnost je pravděpodobně nejlepší na pomezí jednoduchosti a hodnoty. Za předpokladu, že již máte hosting pro své stávající webové stránky, budete muset utratit peníze pouze v případě, že se rozhodnete zakoupit prémiové téma. Zásuvný modul, který budeme používat pro import obsahu, je volně dostupný v oficiálním repozitáři zásuvných modulů WordPress.
3. Zaplacení služby převodu HTML do WordPressu, která váš web znovu vytvoří.
Jedná se o nejjednodušší řešení, protože nevyžaduje, abyste dělali cokoli. K seznámení s WordPressem však příliš nepřispěje a cena se bude lišit podle toho, koho se rozhodnete najmout. Touto možností se v následujících kapitolách nebudu zabývat, protože pokud vás tato cesta zajímá, můžete jednoduše rychle vyhledat poskytovatele služeb a ti se postarají o zbytek.
Příprava na převod HTML do WordPressu
Nezáleží na tom, jakou cestu se rozhodnete zvolit níže, je několik věcí, které budete chtít udělat, než se do toho ponoříte.
První je výběr hostingového plánu. Budete si chtít prohlédnout možnosti, které existují, a rozhodnout se pro balíček, který nejlépe vyhovuje vašim potřebám. Nebo byste si možná místo toho chtěli vytvořit místní instalaci WordPressu? Vždy ji můžete později migrovat na hostingovou službu.
Jakmile si vyberete, budete muset nainstalovat WordPress a přihlásit se do administrace WP. V tomto bodě se naše dvě možné cesty rozdělují.
Ruční konverze statického webu HTML do WordPressu
Pokud je vaším cílem nejen dostat obsah ze statického webu HTML do WordPressu, ale také duplikovat stávající design, znamená to, že si budete muset vytvořit vlastní motiv. Naštěstí to není tak děsivé, jak by se mohlo na první pohled zdát. Obnáší to pouze vytvoření několika složek a souborů, trochu kopírování a vkládání a následné nahrání výsledku.
Budete potřebovat editor kódu, například Sublime nebo Notepad++, a přístup jak k adresáři vašeho webu HTML, tak k adresáři nové instalace WordPressu.
Krok 1: Vytvoření nové složky motivu a potřebných souborů
Na ploše vytvořte novou složku, do které uložíte soubory motivu. Pojmenujte ji podle toho, jak chcete, aby se vaše téma jmenovalo.
Dále vytvořte v editoru kódu několik souborů (které všechny patří do nové složky tématu). Zatím s nimi nic nedělejte. Jen je nechte otevřené pro další úpravy.
- Style.css
- Index.php
- header.php
- sidebar.php
- footer.php
Krok 2: Zkopírujte stávající CSS do nového souboru stylů
Pokud chcete duplikovat design, pravděpodobně to znamená, že máte alespoň nějaké CSS, které chcete uložit. Prvním souborem, který budete chtít upravit, je tedy soubor Style.css.
Pro začátek přidejte na začátek souboru následující text.
/*Theme Name: Replace with your Theme's name.Theme URI: Your Theme's URIDescription: A brief description.Version: 1.0Author: YouAuthor URI: Your website address.*/
Po této části jednoduše vložte své stávající CSS níže. Soubor uložte a zavřete.
Krok 3: Oddělte své stávající HTML
Než se pustíme do třetího kroku, dovolte mi krátkou poznámku o tom, jak WordPress funguje. WordPress používá PHP k volání a načítání částí dat ze své základní databáze. Každý soubor, který v tomto malém návodu použijeme, je navržen tak, aby WordPressu sdělil, která část obsahu vašeho webu se má zobrazit a kde.
Když tedy říkám, že „rozsekáme“ váš stávající HTML, ve skutečnosti jednoduše vystřihneme a vložíme části vašeho stávajícího kódu do různých souborů, které jsme právě vytvořili, aby WordPress věděl, kde je má zobrazit.
Jdeme na to.
Nejprve otevřete soubor index.html vašeho stávajícího webu. Zvýrazněte vše od začátku souboru až po úvodní značku div class=“main“. Zkopírujte a vložte tuto část do souboru header.php, uložte a zavřete.
Druhé se vraťte do souboru index.html. Zvýrazněte element aside class=“sidebar“ a vše uvnitř něj. Zkopírujte a vložte tuto sekci do souboru sidebar.php, uložte a zavřete.
Třetí, v souboru index.html označte vše za postranním panelem a zkopírujte a vložte to do souboru footer.php, uložte a zavřete.
Nakonec v souboru index.html označte vše, co zbývá (měla by to být hlavní obsahová sekce), a vložte to do souboru index.php. Uložte, ale ještě nezavírejte.
Soubor index.html však nyní můžete zavřít a přejít k posledním krokům. Téměř hotovo!
Krok 4: Dokončení souboru index.php
Pro dokončení souboru index.php vašeho nového tématu se musíte ujistit, že dokáže vyvolat další sekce (kromě hlavního obsahu), které jsou umístěny v ostatních vytvořených souborech. Nebo jinak řečeno, dát dohromady prvky, které jsme právě „rozsekali“.
Na samý začátek souboru index.php umístěte následující řádky php.
<?php get_header(); ?>
Na samý konec souboru index.php umístěte tyto řádky php.
<?php get_sidebar(); ?><?php get_footer(); ?>
A nakonec musíme přidat to, čemu se říká Smyčka. To je primární část php, kterou WordPress používá k zobrazení obsahu příspěvku návštěvníkům. Posledním krokem při vytváření souboru index.php vašeho nového tématu je tedy přidání níže uvedeného kódu do části s obsahem.
<?php if ( have_posts() ) : ?><?php while ( have_posts() ) : the_post(); ?> <div <?php post_class(); ?>> <div class="post-header"> <div class="date"><?php the_time( 'M j y' ); ?></div> <h2><a href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2> <div class="author"><?php the_author(); ?></div> </div><!--end post header--> <div class="entry clear"> <?php if ( function_exists( 'add_theme_support' ) ) the_post_thumbnail(); ?> <?php the_content(); ?> <?php edit_post_link(); ?> <?php wp_link_pages(); ?> </div> <!--end entry--> <div class="post-footer"> <div class="comments"><?php comments_popup_link( 'Leave a Comment', '1 Comment', '% Comments' ); ?></div> </div><!--end post footer--> </div><!--end post--><?php endwhile; /* rewind or continue if all posts have been fetched */ ?> <div class="navigation index"> <div class="alignleft"><?php next_posts_link( 'Older Entries' ); ?></div> <div class="alignright"><?php previous_posts_link( 'Newer Entries' ); ?></div> </div><!--end navigation--><?php else : ?><?php endif; ?>
Uložení souboru index.php a zavření. Vaše téma je nyní hotové! Zbývá už jen nahrát jej na váš web WordPress.
Krok 5: Nahrání nového motivu
Když jste vytvořili soubory motivu a máte je všechny uloženy ve složce nového motivu, budete se muset dostat do adresáře nové instalace WordPress.
Umístěte složku nového motivu do adresáře /wp-content/themes/. Poté přejděte zpět do administrace WP > Vzhled > Motivy a váš nově vytvořený motiv by se tam měl objevit. Pokračujte v jeho aktivaci!
V tuto chvíli už zbývá jen naplnit nový web WordPress obsahem vašeho starého webu. Postupujte podle následující části (přeskočte část o použití předem vytvořeného motivu), abyste viděli, jak se to provádí.
Použití předem vytvořeného motivu WordPressu a import obsahu HTML
Pokud se vám výše uvedené kroky zdají příliš náročné nebo zdlouhavé, pak si buďte jisti, že existuje i jiný způsob. Místo toho, abyste jakýkoli návrh, se kterým náhodou právě pracujete, převedli na téma WordPressu, můžete využít některý z tisíců motivů dostupných na širším trhu WordPressu.
Existují motivy zdarma a prémiové motivy. Než se rozhodnete, které je pro vás nejlepší, můžete si přečíst, která témata jsou určena pro vaše potřeby, a procházet je podle kategorií témat zde na webu Elegant Themes i jinde.
Jakmile si vyberete téma, které se vám líbí (a stáhnete si jeho zazipovaný balíček souborů), budete se chtít vrátit do administrace WP > Vzhled > Témata > Přidat nové a nainstalovat/aktivovat nové téma WordPressu.
Po dokončení tohoto kroku budete mít novou webovou stránku WordPressu a téma – ale nic víc. Po zobrazení náhledu bude váš web bez obsahu a pravděpodobně bude vypadat tak nějak nudně. To je v pořádku, protože dále budeme importovat obsah vašeho starého webu.
V administraci WP přejděte na položku Pluginy > Přidat nový a vyhledejte plugin s názvem HTML Import 2 od Stephanie Leary. Po instalaci a aktivaci tohoto pluginu postupujte podle jeho praktického návodu a importujte celý adresář stránek HTML. Kompletně i s obrázky!
Poté budete mít veškerý svůj starý obsah živý ve WordPressu a naformátovaný vaším novým tématem. Nebo pokud jste si výše vytvořili vlastní téma, měly by vaše stránky vypadat v podstatě stejně jako předtím – jen běžet na WordPressu.
Závěr
Pokud jste tento příspěvek použili jako návod pro migraci svých webových stránek na WordPress, pak jste se právě připojili k jedné z největších open source komunit na světě. Vítejte! Je to zábavné místo se spoustou vývojářů, designérů, bloggerů, kutilů a dalších – všichni budují, hrají si a tvoří s WordPressem a tématy/zásuvnými moduly pro WordPress.
Pokud jste „chytili WordPress“, oficiální web WordPress.org je plný užitečných témat, zásuvných modulů a dalších zdrojů. Pokud byste chtěli soubory s tématy dále upravovat, prozkoumejte Codex, kde najdete zdánlivě nekonečné množství tipů, triků a variací.