Při použití WordPressu jste si určitě všimli možnosti výměny šablon, jak bezplatných tak zakoupených od nejrůznějších poskytovatelů. Pokud jste – stejně jako já – omezeni tím, že nechcete nic investovat, nebo prostě nemáte dostatek prostředků na zakoupení profi šablony, budete nejspíše hledat v oficiálním šablonovém adresáři WordPressu. Pokud ani tam nenajdeme nic co bychom byli ochotni považovat za šablonu svého webu anebo daná šablona zrovna obsahuje nějaké dobře právně zajištěné logo, které se nám nelíbí, nezbývá než si vytvořit vlastní šablonu stavěnou přesně podle vlastní chuti.
Jako první si musíme uvědomit, co vše od šablony očekáváme – Bude schopná měnit obrázek v hlavičce? Bude mít dva anebo raději tři úrovně nadpisů? Potřebuju URL ikonu? Budu psát česky nebo jiným jazykem? – tyto všechny (a stovky dalších) otázky by vám měly proudit hlavou při takovémto rozmýšlení. Jestliže už jste si to promysleli (popřípadě zakreslili nebo zapsali) je nutné se podle toho zařídit. Tvorba samotného designu je kapitola sama pro sebe a budu předpokládat, že už nějaký máte předpřipravený anebo odněkud stažený a upravený.
Založíme tedy novou složku (na flashdisku či přímo v počítači – to je jedno), která by se měla nazývat podle plánovaného názvu vyší šablony – tzn. když vytvářím šablonu „Citrus“ tak složku pojmenuji „citrus“ (nejlépe použít jen velké anebo malé znaky A-Z, čísla, pomlčky a podtržítka). Jestliže máme složku, vytvoříme v ní dva soubory – index.php a style.css. Soubor index.php slouží jako funkční kostra úvodní stránky (popř. seznamu příspěvků, samozřejmě), a ve style.css se nachází náš CSS styl, spolu s informacemi pro WordPress. Bez těchto dvou souborů se vám šablona v seznamu šablon nezobrazí. Když máme takto vytvořené soubory, zkontrolujeme jestli jsou správně kódovány a pokud ano, zkopírujeme HTML kód naší kostry do souboru index.php. Následně do souboru style.css vložíme veškerý CSS kód a na začátek souboru umístíme komentář s informacemi tak, jak je bude následně WordPress prezentovat:
/* Theme Name: Název naší šablony Description: Krátký popis [nejlépe v Angličtině] Theme URI: [adresa, kde je šablona spravována popř. dostupná ke stažení] Author: [vaše jméno či nick] Author URI: [adresa webu autora] Version: [verze např. 0.1, 1.6, 2.7 ap.] Tags: [klíčová slova odpovícající vaší šabloně - podle oficiálně uznaných] License: druh licence (není potřeba) License URI: (adresa na které najdete podrobnou definici licence - taktéž není potřeba) General comments (optional). */
a dále do něj zkopírujeme všechny styly, používané v designu. Uložíme a otevřeme soubor index.php, který máme již vytvořený v prvních krocích, ve kterém umažeme naše styly (pokud tam ještě jsou). Místo nich do hlavičky (<head>) vložíme kód pro načtení externího stylu, teď už s přidanou funkcí pro získání URL adresáře aktuálně aktivní šablony:
<link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/style.css"/>
Všímejte si prosím, že je za funkcí přidáno lomítko. To je protože funkce neuzavírá adresu lomítkem a název souboru by se skombinoval s názvem adresáře. Taktéž do hlavičky přidáme, nebo upravíme informaci o kódování – že s tím stále otravuju – je to velmi důležité. Pokud je šablona jen pro vás, můžete tam vložit přímý zápis pro kódování UTF-8:
<meta http-equiv="content-type" content="text/html charset=UTF-8" />
Pokud však chcete šablonu publikovat pro užitek jiných, je na místě použít tento zápis, který zajistí, že sám WordPress definuje správné kódování pro daný jazyk:
<meta http-equiv="content-type" content="<?php bloginfo('html_type'); echo" charset="; bloginfo('charset'); ?>" />
Teď je potřeba udělat další základní věc (nejen kvůli SEO optimalizaci), upravit tagy <title> a <meta> tak aby se aktualizoval jejich obsah podle aktuálně zobrazovené stránky. Parametry funkce wp_title zastupují obsah který odděluje titulek článku a titulek webu ( | )volba zobrazení nebo nezobrazení výsledku (true) a pozici oddělovače (left/right).
<meta name="description" content="<?php bloginfo('description'); ?>" />
<?php wp_title( ' | ', true, 'right' ); bloginfo('name'); ?>
Poslední věc, kterou musíme udělat, je přidat před konec hlavičky kód, který zařídí správné vkládání funkcí a šablon z pluginů, funkce WP_HEAD()
<?php wp_head(); ?>
Pomocí hlavičky můžete upravovat spousty doplňujících funkcí, ale to byla poslední věc potřebná pro základní definice pro tvorbu šablon a tímto bychom také uzavřeli toto téma použitím </head>.
V příštím článku proměníme stránku v šablonu, která zobrazuje obsah.
1 komentář u “WordPress – Jak na vlastní šablonu – hlavička”