Tvorba WP šablony – 2. díl – Z HTML do WP

19.05.2015 | Tomáš Kocifaj

V minulém díle jsme si ukázali, jak vytvořit základní kostru šablonu společně s nainstalovaný KT Frameworkem. V dnešním díle bychom si ukázali, jak příslušné HTML společně s CSS vzhledem „rozdělit“ do potřebných PHP souborů a vytvořit tak dynamickou šablonu pro WordPress.

Zdroj šablony po dokončení druhého dílu

HTML a CSS šablona

Každý máme nějaký postup, jak stránky nebo šablonu vytvářet. My si vždy připravíme čistou HTML a CSS šablonu, se všemi podstránkami, včetně javascriptu, fontů a jiných utilit, které naše stránky budou potřebovat. Finální HTML pak následně převedeme do WordPress šablony.

Pro ukázku nám však postačí již nějaká vytvořená HTML šablona, kterých je na internetu spoustu. Já jsem například zvolil tento Bootstrap template, který nám pomůže demonstrovat velkou škálu funkcí. Šablonu jsem stáhl, nahrál ji do svého projektu v NetBeans. Pokud to děláte jako já, mělo by to vypadat nějak takto:

Začneme si tím, že si zhotovíme úvodní stránku – tedy oživíme soubor index.php. V první řadě si budeme muset ujasnit několik věcí, které budou potřeba zařídit, aby naše stránky korektně pracovali.

Vytvoření hlavičky a patičky, kterou následně budeme všude používat.
Načtení externích zdrojů – JS a CSS soubory.
Rozdělení bloků úvodní stránky do přehlednější struktury.

Vytvoření hlavičky a patičky

Nyní vytvoříme základní kostru – bude se jednat o soubory header,php, index.php (ten již máme vytvořený, ale je zatím prázdný) a footer.php. Otevřeme si náš soubor index.html a postupně z něj vykopíruje určité části. Zbytek kódu nakopírujeme do index.php.

Hlavička (header.php)

V tomto souboru budou zapsané všechny informace a data, které se budou zobrazovat na každé podstránce. Především půjde o informace v tagu <head> a již část samotné stránky. Náš soubor header.php by měl tedy vypadat takto:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Moderna - Bootstrap 3 flat corporate template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="" />
<meta name="author" content="http://bootstraptaste.com" />
<!-- css -->
<link href="css/bootstrap.min.css" rel="stylesheet" />
<link href="css/fancybox/jquery.fancybox.css" rel="stylesheet">
<link href="css/jcarousel.css" rel="stylesheet" />
<link href="css/flexslider.css" rel="stylesheet" />
<link href="css/style.css" rel="stylesheet" />


<!-- Theme skin -->
<link href="skins/default.css" rel="stylesheet" />

<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

</head>
<body>
<div id="wrapper">
	<!-- start header -->
	<header>
        <div class="navbar navbar-default navbar-static-top">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="index.html"><span>M</span>oderna</a>
                </div>
                <div class="navbar-collapse collapse ">
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="index.html">Home</a></li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle " data-toggle="dropdown" data-hover="dropdown" data-delay="0" data-close-others="false">Features <b class=" icon-angle-down"></b></a>
                            <ul class="dropdown-menu">
                                <li><a href="typography.html">Typography</a></li>
                                <li><a href="components.html">Components</a></li>
								<li><a href="pricingbox.html">Pricing box</a></li>
                            </ul>
                        </li>
                        <li><a href="portfolio.html">Portfolio</a></li>
                        <li><a href="blog.html">Blog</a></li>
                        <li><a href="contact.html">Contact</a></li>
                    </ul>
                </div>
            </div>
        </div>
	</header>
	<!-- end header -->

<!DOCTYPE html>

<head>

<title>Moderna - Bootstrap 3 flat corporate template</title>

<!--[if lt IE 9]>

<![endif]-->

</head>

<body>

</button>

<a class="navbar-brand" href="index.html"><span>M</span>oderna</a>

</div>

<a href="#" class="dropdown-toggle " data-toggle="dropdown" data-hover="dropdown" data-delay="0" data-close-others="false">Features <b class=" icon-angle-down"></b></a>

<li><a href="typography.html">Typography</a></li>

<li><a href="components.html">Components</a></li>

<li><a href="pricingbox.html">Pricing box</a></li>

</ul>

</li>

<li><a href="portfolio.html">Portfolio</a></li>

<li><a href="contact.html">Contact</a></li>

</ul>

</div>

</header>

Patička (footer.php)

Stejně jako hlavička, i patička budou obsahovat tu část webových stránek, kterou je potřeba opakovat na každé podstránce. V našem případě tedy samotná vzhledová patička a načtení externích zdrojů v podobě javascriptů. Soubor s patičkou bude vypadat nějak takto:

	<footer>
	<div class="container">
		<div class="row">
			<div class="col-lg-3">
				<div class="widget">
					<h5 class="widgetheading">Get in touch with us</h5>
					<address>
					<strong>Moderna company Inc</strong><br>
					 Modernbuilding suite V124, AB 01<br>
					 Someplace 16425 Earth </address>
					<p>
						<i class="icon-phone"></i> (123) 456-7890 - (123) 555-7891 <br>
						<i class="icon-envelope-alt"></i> email@domainname.com
					</p>
				</div>
			</div>
			<div class="col-lg-3">
				<div class="widget">
					<h5 class="widgetheading">Pages</h5>
					<ul class="link-list">
						<li><a href="#">Press release</a></li>
						<li><a href="#">Terms and conditions</a></li>
						<li><a href="#">Privacy policy</a></li>
						<li><a href="#">Career center</a></li>
						<li><a href="#">Contact us</a></li>
					</ul>
				</div>
			</div>
			<div class="col-lg-3">
				<div class="widget">
					<h5 class="widgetheading">Latest posts</h5>
					<ul class="link-list">
						<li><a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a></li>
						<li><a href="#">Pellentesque et pulvinar enim. Quisque at tempor ligula</a></li>
						<li><a href="#">Natus error sit voluptatem accusantium doloremque</a></li>
					</ul>
				</div>
			</div>
			<div class="col-lg-3">
				<div class="widget">
					<h5 class="widgetheading">Flickr photostream</h5>
					<div class="flickr_badge">
						<script type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne?count=8&amp;display=random&amp;size=s&amp;layout=x&amp;source=user&amp;user=34178660@N03"></script>
					</div>
					<div class="clear">
					</div>
				</div>
			</div>
		</div>
	</div>
	<div id="sub-footer">
		<div class="container">
			<div class="row">
				<div class="col-lg-6">
					<div class="copyright">
						<p>
							<span>&copy; Moderna 2014 All right reserved. By </span><a href="http://bootstraptaste.com" target="_blank">Bootstraptaste</a>
						</p>
					</div>
				</div>
				<div class="col-lg-6">
					<ul class="social-network">
						<li><a href="#" data-placement="top" title="Facebook"><i class="fa fa-facebook"></i></a></li>
						<li><a href="#" data-placement="top" title="Twitter"><i class="fa fa-twitter"></i></a></li>
						<li><a href="#" data-placement="top" title="Linkedin"><i class="fa fa-linkedin"></i></a></li>
						<li><a href="#" data-placement="top" title="Pinterest"><i class="fa fa-pinterest"></i></a></li>
						<li><a href="#" data-placement="top" title="Google plus"><i class="fa fa-google-plus"></i></a></li>
					</ul>
				</div>
			</div>
		</div>
	</div>
	</footer>
</div>
<a href="#" class="scrollup"><i class="fa fa-angle-up active"></i></a>
<!-- javascript
    ================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="js/jquery.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.fancybox.pack.js"></script>
<script src="js/jquery.fancybox-media.js"></script>
<script src="js/google-code-prettify/prettify.js"></script>
<script src="js/portfolio/jquery.quicksand.js"></script>
<script src="js/portfolio/setting.js"></script>
<script src="js/jquery.flexslider.js"></script>
<script src="js/animate.js"></script>
<script src="js/custom.js"></script>
</body>
</html>

<h5 class="widgetheading">Get in touch with us</h5>

<strong>Moderna company Inc</strong><br>

Modernbuilding suite V124, AB 01<br>

Someplace 16425 Earth </address>

<p>

<i class="icon-envelope-alt"></i> email@domainname.com

</p>

</div>

<h5 class="widgetheading">Pages</h5>

<li><a href="#">Press release</a></li>

<li><a href="#">Terms and conditions</a></li>

<li><a href="#">Privacy policy</a></li>

<li><a href="#">Career center</a></li>

<li><a href="#">Contact us</a></li>

</ul>

</div>

<h5 class="widgetheading">Latest posts</h5>

<li><a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a></li>

<li><a href="#">Pellentesque et pulvinar enim. Quisque at tempor ligula</a></li>

<li><a href="#">Natus error sit voluptatem accusantium doloremque</a></li>

</ul>

</div>

<h5 class="widgetheading">Flickr photostream</h5>

</div>

</div>

<p>

</p>

</div>

</ul>

</div>

</footer>

</div>

<!-- javascript

================================================== -->

</body>

</html>

Načtení externích zdrojů do šablony

Pokud se podíváme do HTML šablony do hlavičky uvidíme, jaké zdroje jsou v rámci šablony vyžadovány. V hlavičce vidíme, že šablona načítá celkem 5 CSS souborů. Neměli bychom zapomenou, že javascript by měl být načítán vždy na konci HTML dokumentu. Pokud tedy sjedeme v editoru více dolů, zjistíme, že šablona načítá také několik JS souborů a to celkem 11. Na všechny tyto zdroje nesmíme při vytváření zapomenout.

K tomu, aby nám vše korektně fungovalo budeme muset ještě doplnit některé důležité PHP funkce do header.php a footer.php

Upravená header.php bude vypadat nyní takto

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Moderna - Bootstrap 3 flat corporate template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="" />
<meta name="author" content="http://bootstraptaste.com" />

<?php wp_head(); ?>

<!-- Zbytek hlavičky ponecháme beze změny -->

<!DOCTYPE html>

<head>

<title>Moderna - Bootstrap 3 flat corporate template</title>

<?php wp_head(); ?>

Upravená footer.php bude vypadat nyní takto

<!-- Předchozí obsah patičky ponecháme opět stejný -->

	</footer>
</div>
<a href="#" class="scrollup"><i class="fa fa-angle-up active"></i></a>
<?php wp_footer(); ?>
</body>
</html>

</footer>

</div>

<?php wp_footer(); ?>

</body>

</html>

Využití komponenty KT Theme Config pro načtení zdrojů

K těmto účelům je připravená komponenta KT Theme Config, která nám pomůže s mnohým nastavení a budeme jí dále ještě velmi aktivně využívat.

Nyní ve složce yours založíme novou složku, kterou pojmenujeme requires a do ní vložíme složku common. Do té poté založíme php soubor, který pojmenujeme kt_theme_setup.inc.php.

Také bude potřeba přesunout všechny naše CSS soubory do složky css, kterou vytvoříme ve složce yours. Naše struktura šablony by měla vypadat nyní takto:

Nezapomeňte, že stejně jako CSS je potřeba dodat i ostatní zdroje – tedy složku JS a v našem případě šablony i FONTS. Stejně jako složku CSS tak vytvoříme složky ostatní a přesuneme do nich potřebné zdroje.

No nově založeného souboru kt_theme_setup.inc.php přidáme sadu kódů. Náš soubor by měl nyní obsahovat tyto informace.

<?php

$config = new KT_WP_Configurator();

// --- CSS Styly ------------------

$config->assetsConfigurator()
        ->addStyle("bootstrap")
        ->setSource(KT_WPFW_CSS_URL . "/bootstrap.min.css")
        ->setEnqueue();

$config->assetsConfigurator()
        ->addStyle("jquery-fancybox")
        ->setSource(KT_WPFW_CSS_URL . "/fancybox/jquery.fancybox.css")
        ->setEnqueue();

$config->assetsConfigurator()
        ->addStyle("jcarousel")
        ->setSource(KT_WPFW_CSS_URL . "/jcarousel.css")
        ->setEnqueue();

$config->assetsConfigurator()
        ->addStyle("flexslider")
        ->setSource(KT_WPFW_CSS_URL . "/flexslider.css")
        ->setEnqueue();

$config->assetsConfigurator()
        ->addStyle("main-style")
        ->setSource(KT_WPFW_CSS_URL . "/style.css")
        ->setEnqueue();

$config->assetsConfigurator()
        ->addStyle("default")
        ->setSource(KT_WPFW_CSS_URL . "/default.css")
        ->setEnqueue();

// --- JS ------------------

$config->assetsConfigurator()->addScript(KT_WP_JQUERY_SCRIPT)->setEnqueue(); // Nemusíme zadávat zdroj, jQuery je součástí WP

$config->assetsConfigurator()
        ->addScript("jquery-easing", KT_WPFW_JS_URL . "/jquery.easing.1.3.js")
        ->setInFooter()
        ->setEnqueue();

$config->assetsConfigurator()
        ->addScript("bootstrap", KT_WPFW_JS_URL . "/bootstrap.min.js")
        ->setInFooter()
        ->setEnqueue();

$config->assetsConfigurator()
        ->addScript("jquery-fancybox", KT_WPFW_JS_URL . "/jquery.fancybox.pack.js")
        ->setInFooter()
        ->setEnqueue();

$config->assetsConfigurator()
        ->addScript("jquery-fancybox-media", KT_WPFW_JS_URL . "/jquery.fancybox-media.js")
        ->setInFooter()
        ->setEnqueue();

$config->assetsConfigurator()
        ->addScript("google-code-prettify", KT_WPFW_JS_URL . "/google-code-prettify/prettify.js")
        ->setInFooter()
        ->setEnqueue();

$config->assetsConfigurator()
        ->addScript("jquery-quicksand", KT_WPFW_JS_URL . "/portfolio/jquery.quicksand.js")
        ->setInFooter()
        ->setEnqueue();

$config->assetsConfigurator()
        ->addScript("setting-js", KT_WPFW_JS_URL . "/portfolio/setting.js")
        ->setInFooter()
        ->setEnqueue();

$config->assetsConfigurator()
        ->addScript("flexslider-js", KT_WPFW_JS_URL . "/jquery.flexslider.js")
        ->setInFooter()
        ->setEnqueue();

$config->assetsConfigurator()
        ->addScript("animate-js", KT_WPFW_JS_URL . "/animate.js")
        ->setInFooter()
        ->setEnqueue();

$config->assetsConfigurator()
        ->addScript("custom-js", KT_WPFW_JS_URL . "/custom.js")
        ->setInFooter()
        ->setEnqueue();


$config->initialize();

<?php

$config = new KT_WP_Configurator();

// --- CSS Styly ------------------

$config->assetsConfigurator()

->addStyle("bootstrap")

->setSource(KT_WPFW_CSS_URL . "/bootstrap.min.css")

->setEnqueue();

$config->assetsConfigurator()

->addStyle("jquery-fancybox")

->setSource(KT_WPFW_CSS_URL . "/fancybox/jquery.fancybox.css")

->setEnqueue();

$config->assetsConfigurator()

->addStyle("jcarousel")

->setSource(KT_WPFW_CSS_URL . "/jcarousel.css")

->setEnqueue();

$config->assetsConfigurator()

->addStyle("flexslider")

->setSource(KT_WPFW_CSS_URL . "/flexslider.css")

->setEnqueue();

$config->assetsConfigurator()

->addStyle("main-style")

->setSource(KT_WPFW_CSS_URL . "/style.css")

->setEnqueue();

$config->assetsConfigurator()

->addStyle("default")

->setSource(KT_WPFW_CSS_URL . "/default.css")

->setEnqueue();

// --- JS ------------------

$config->assetsConfigurator()->addScript(KT_WP_JQUERY_SCRIPT)->setEnqueue(); // Nemusíme zadávat zdroj, jQuery je součástí WP

$config->assetsConfigurator()

->addScript("jquery-easing", KT_WPFW_JS_URL . "/jquery.easing.1.3.js")

->setInFooter()

->setEnqueue();

$config->assetsConfigurator()

->addScript("bootstrap", KT_WPFW_JS_URL . "/bootstrap.min.js")

->setInFooter()

->setEnqueue();

$config->assetsConfigurator()

->addScript("jquery-fancybox", KT_WPFW_JS_URL . "/jquery.fancybox.pack.js")

->setInFooter()

->setEnqueue();

$config->assetsConfigurator()

->addScript("jquery-fancybox-media", KT_WPFW_JS_URL . "/jquery.fancybox-media.js")

->setInFooter()

->setEnqueue();

$config->assetsConfigurator()

->addScript("google-code-prettify", KT_WPFW_JS_URL . "/google-code-prettify/prettify.js")

->setInFooter()

->setEnqueue();

$config->assetsConfigurator()

->addScript("jquery-quicksand", KT_WPFW_JS_URL . "/portfolio/jquery.quicksand.js")

->setInFooter()

->setEnqueue();

$config->assetsConfigurator()

->addScript("setting-js", KT_WPFW_JS_URL . "/portfolio/setting.js")

->setInFooter()

->setEnqueue();

$config->assetsConfigurator()

->addScript("flexslider-js", KT_WPFW_JS_URL . "/jquery.flexslider.js")

->setInFooter()

->setEnqueue();

$config->assetsConfigurator()

->addScript("animate-js", KT_WPFW_JS_URL . "/animate.js")

->setInFooter()

->setEnqueue();

$config->assetsConfigurator()

->addScript("custom-js", KT_WPFW_JS_URL . "/custom.js")

->setInFooter()

->setEnqueue();

$config->initialize();

Framework sám vytvoří konstanty na cesty pro JS a CSS v rámci šablony. Je ale důležité si uvědomit, že klíč „WPFW“ je použit na základě našeho parametru, který jsme vložili při inicializaci našeho modulu v souboru kt_init.inc.php ve funkci kt_initialize_module();

Dokončení a úprava index.php

Nyní, nám už jen zbývá provést úpravu souboru index.php – ten bychom měli mít zatím úplně prázdný. Vezmeme obsah našeho HTML souboru index.html a vše překopírujeme. Nyní umažeme obsah, který jsme nakopírovali do header.php a nahradíme ho funkci get_header(). Stejnou věc uděláme i v dolní části, kde umažeme stejný obsah jako ve footer.php a nahradíme ho jinou – ale podobnou funkcí – get_footer(). Obě funkce nám zajistí to, že obsah header.php a footer.php se vloží na potřebné místo naší šablony.

<?php get_header(); ?>

<section id="featured">
    .
    .
    .
</section>
<section class="callaction">
    .
    .
    .
</section>
<section id="content">
    .
    .
    .
</section>

<?php get_footer(); ?>

<?php get_header(); ?>

</section>

</section>

</section>

<?php get_footer(); ?>

Místo zdlouhavého HTML jsem mezi bloky <section> doplnil pouze tečky pro ukázku struktury souboru index.php. Nyní provedeme to, že si ještě pěkně zpřehledníme náš index.php, aby tam nebylo toho obsahu tolik a my jsme s v tom pěkně vyznali.

V rootu šablony si založíme složku partials a do ní vytvoříme několik souborů. Soubory bychom měli pojmenovat podle funkčních bloků naší šablony, já jsem zvolil tyto názvy:

index-slider.php – Zde bude část s úvodním „slidrem“.
main-offer-list.php – Přehled hlavní nabídky služeb.
recent-works.php – Tady umístíme výpis „referencí“.

Do těchto souborů nyní postupně „vykopírujeme“ HTML obsah našeho souboru index.php dle funkčních bloků, které jsem naznačil. Toto rozdělení do bloků je vždy závislé na tom, jak je Váš design připraven, jak lze funkční bloky rozdělit a jak jste vy nebo kodér HTML připravil.

Můj index.php vypadá nyní takto:

<?php get_header(); ?>

<?php get_template_part("partials/index-slider"); ?>

<section class="callaction">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <div class="big-cta">
                    <div class="cta-text">
                        <h2><span>Moderna</span> HTML Business Template</h2>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section id="content">
    <div class="container">
        <?php get_template_part("partials/main-offer-list"); ?>
        <?php get_template_part("partials/recent-works"); ?>
    </div>
</section>

<?php get_footer(); ?>

<?php get_header(); ?>

<?php get_template_part("partials/index-slider"); ?>

<h2><span>Moderna</span> HTML Business Template</h2>

</div>

</section>

<?php get_template_part("partials/main-offer-list"); ?>

<?php get_template_part("partials/recent-works"); ?>

</div>

</section>

<?php get_footer(); ?>

Funkce get_template_part() my vždy vrátí ze složky partials („partials/“) příslušný název souboru, který jsem přidal za lomítko. Do těchto souborů jsem již pouze nakopírovat příslušný obsah HTML. Co to tedy znamená? Neděje se nic jiného, než se na místo, kam jsem zapsal funkci get_template_part() vloží ta část HTML, které je zapsána v souboru, jehož název jsem předal v parametru funkce za lomítkem.

Závěr

V dnešním dílu jsme si udělali základní přípravu úvodní stránky naší šablony. Načetli jsme pomocí komponenty KT Theme Config externí zdroje do šablony. Udělali jsme základní rozdělení HTML do potřebných souborů a šablona nám korektně funguje. Zatím se na ní pouze nezobrazují obrázky, které zatím odkazují na špatnou cestu – to si ale ukážeme příště společně s dalším osazením naší úvodní stránky a dalších potřebných částí.

Předchozí článek « Tvorba WP šablony – 1. díl – Vytvoření šablony

Další článek Tvorba WP šablony – 3. díl – Osazujeme Index »

Podobné články

Tvorba WP šablony – 5. díl – Práce s post_type

Na úvodní stránce nám chybí už jen vytvořit seznam referencí, které chceme prezentovat. K tomu budeme potřebovat vlastní post_type a…

Tvorba WP šablony – 1. díl – Vytvoření šablony

To, proč jsme s tímto projektem začali, byl důvod, že jsme jednotlivé šablony pro WordPress chtěli vytvářet opravdu efektivně, kvalitně…

Tvorba WP šablony – 3. díl – Osazujeme Index

V minulém díle jsme naší šablonu zhotovili do stavu, kde již máme potřebné prvky ve WordPressu. Nyní bude potřeba zhotovit pro…

Tvorba WP šablony – 4. díl – Osazujeme Index podruhé

V minulém díle jsme provedli základní vytvoření kostry šablony, načetli jsme do FE externí zdroje, jako jsou obrázky, javascriptové a…

O autorovi: Tomáš Kocifaj

Tomáš aktivně v oboru tvorby webových stránek podniká už 6. rok. Za tu dobu nasbíral spoustu zkušeností, dovedností a představu o tom, jak by měla práce takového člověka probíhat. Čím by se neměl zdržovat, zatěžovat a podle toho také s kolegou Martinem začal psát tento projekt.