Šablony GetSimple jsou v základu HTML a CSS, přičemž HTML je v souborech .php, protože redakční systémy využívají PHP funkce a proměnné pro svoji snadnou přenositelnost bez nutnosti přepisovat odkazy.
Stejně jako HTML a CSS soubory i soubory PHP otvíráme v editorech typu PSPad.
Cardinal, Innovation?
Předem je dobré ještě říci, že budeme vycházet především ze šablony Cardinal, která je psaná ještě v XHTML 1.0 transitional, kdežto Innovation již přechází do HTML 5. Nicméně budeme využívat prvky z obou dvou.
Pokud se podíváte na obě šablony, themes nebo templates - chcete-li, najednou, zjistíte, že se liší nejen v použité verzi HTML, ale také ve struktuře. Zatímco schéma Cardinal je celé v jednom souboru template.php (+ styly a obrázky), Innovation je již strukturované do více souborů. Základní template.php zůstává, kolem něj jsou však ale samostatné soubory, např. header.inc.php, a ty jsou propojené do základního template.php pomocí příkazu v template.php include(' '), např. include('header.inc.php') (respektive include_once('header.inc.php')). Tím se dostáváme k příkazům v šablonách, které je dobré alespoň pochopit.
Základní PHP funkce v šablonách
Celý redakční systém má již nadefinované funkce a pomocí celkem jasných příkazů s nimi pracujeme. Není jich mnoho, nemusíme si je pamatovat, ale je dobré mít ponětí, abychom věděli, s čím a proč vlastně pracujeme.
Každá ze zmiňovaných funkcí jsou v psány v PHP, proto musí být uzavřeny v
<?php FUNKCE; ?>
include_once('soubor.php')
Základní stavební kámen každé šablony, pokud ji nechceme mít celou v jednom souboru jako je to u šablony Cardinal. Tímto příkazem celkem očekávaně vložíte obsah jiného souboru do tohoto, takže třeba hlavičku můžete mít napsanou v samostatném souboru, tak, jako byste ji psali normálně, a tímto příkazem s přepsáním jména souboru ji vložit.
get_page_clean_title()
Tento příkaz jednoduše zjistí titulek vaší stránky (ten, který jste zadali nebo zadáte do titulku při tvorbě oné stránky v prostředí GetSimple) a vloží ho na místo příkazu v konkrétní stránce. Používá se především v titulku <title> v kombinaci s následujícím.
get_site_name()
Zjistí a vloží jméno vaší stránky na místo příkazu, které jste zadali při instalaci GetSimplu nebo poté v nastavení GetSimplu. Dává se také do titulku (který je v hlavičce), kdy titulek pak vypadá nějak takto:
<title> <?php get_page_clean_title(); ?> - <?php get_site_name(); ?> </title>
Což se může projevit třeba jako:
Kontakty - Osobní web Pepy Nováka)
get_theme_url()
Zjistí a použije adresu až k dané šabloně. Používá se především v cestě ke stylům (CSS). Pokud máme soubor se styly v kořenovém adresáři šablony (na stejné úrovni jako je template.php), pak bude adresa ke stylům vypadat následovně.
<link href="/<?php get_theme_url(); ?>/style.css" rel="stylesheet" />
get_header()
Vloží na své místo čtyři základní meta tagy - keywords, description, cannonical a generated. Keywords a description se vyplňují při tvorbě každého článku přímo v administraci GetSimple, cononical a generated jsou vyplňěny automaticky. Téměř nutně by měl být v každé hlavičce.
get_site_url();
Adresa webu. Mění se s tím, co máme v uživatelském rozhraní GetSimple v nastavení jako základní adresu pro GetSimple. Mám-li web na hostingu plně v provozu, adresa bude vypadat nějak takto: http://pepa-novak.cz. Jeho využití je především v drobečkové navigaci jako výchozí odkaz struktury. Ano, mohli bychom tam použít i adresu na tvrdo, museli bychom ji pak ale měnit s každým přesunutím webu - z localhostu (virtuálního serveru) na hosting i při každé změně domény. Hodí se také do hlavičky jako odkaz na úvodní stránkou skrytý za logem webu..
get_page_title()
Stejné jako get_page_clean_title(), ale s tím rozdílem, že HTML zůstává. Proto se používá v nadpisu každé stránky (<h1></h1>). V GetSimple je generován z titulku zadaném při tvorbě stránky v administraci.
get_page_content()
Získá obsah stránky a umístí jej na své místo. Právě proto je jeho umístě výhradně v obalovém divu (<div></div>). V šabloně Cardinal jde o <div id="page-content">, který je ještě v <div id="content">. Šablona Innovation je v HTML 5, tam se tato funkce vyskytuje v tagu <section></section>.
get_page_slug()
Page slug je název stránky z hlediska adresy. Generuje se sám z našeho titulku stránky, ale můžeme ho také ručně jakkoliv změnit hned pod titulkem. Máme-li stránku např. Curriculum vitae, automaticky vygenerovaný page slug bude curriculum-vitae, a při použití Fancy URLs by byla adresa na tuto stránku http://pepa-novak.cz/curriculum-vitae.
get_navigation(get_page_slug(FALSE))
Jak už sám název napovídá, nejedná se o nic jiného než o menu. Menu, které jsme vytvořili nebo vytvoříme opět v administraci GetSimple. Vkládá se obvykle mezi tagy <ul></ul> v divu menu, při vhodném nastylování může být ale také bez problémů přímo v tazích <div></div>.
Innovation_Parent_Link(get_parent(FALSE))
Speciální funkce napsaný v souboru functions.php v šabloně Innovation. I z jejího jména je patrné, k čemu by mohla sloužit. Získá odkaz na rodičovskou stránku, jsme-li hlouběji zanořeni do podstránek webu. Používá se proto hlavně v drobečkové navigaci.
V jakých částech webu jaké funkce?
Struktura různých stránek se může mírně lišit, ale naše struktura jako obecný návod jistě poslouží. Pro inspiraci poslouží jistě i předinstalované šablony.
Meta hlavička
Do tagů <title></title> patří jistě tyto dvě funkce:
get_page_clean_title(); get_site_name();
. Stránku pak máte pojmenovanou jak chcete a zároveň title obsahuje název webu.
Cesta k CSS souborům by měla obsahovat funkci get_theme_url() pro proměnlivost cesty k CSS souborům při přesouvání webu z místa na místo.
A nakonec get_header(), který vkládáme volně mezi tagy <head></head> pro proměnlivé meta tagy, hlavně keywords a description.
Hlavička s logem
Klikatelné logo v záhlaví/hlavičce každého webu je dnes samozřemost. A aby byl odkaz opět proměnlivý podle umístění webu, používáme na href odkazu
get_site_url();
a pro title odkazu
get_site_name();
Drobečková navigace
Pro přehlednost i SEO je drobečková navigace velmi důležitá. A opět nikdo nechce přepisovat všechny odazy ručně podle aktuálního umístění webu, to bychom nedělali nic jiného. A tak na úvodní stránku webu v drobečkové navigaci použijeme odkaz na
get_site_url();
na další stránku rodičovskou stránku odkaz na
Innovation_Parent_Link(get_parent(FALSE));
a na současnou stránku pouze text titulku naší stránky
get_page_clean_title();
Navigační menu
Není nic jednoduššího než mezi <ul></ul> tagy vložit funkci
get_navigation(get_page_slug(FALSE));
Obsah stránky
Vždy se skládá z nadpisů a obsahu. Proto mezi tagy <h1></h1> vložíme
get_page_title();
a pod nadpis volně do divu s obsahem
get_page_content();
Sidebar
Sidebar na mnohých webech není vůbec třeba, pokud ho ale bude chtít použít, klíčová funkce bude
get_component('sidebar');
Patička a copyright div
Patička bývá také nedílnou součástí každé stránky stejně jako podpis/copyright v dolní části. Ty však stanovujeme staticky, "na pevno", a tak nemusíme využívat žádných funkcí PHP.
Jak to poskládat dohromady?
Nyní už známe funkce a principy vytváření samotné stránky, tak jak to dáme dohromady? Stačí upravit template tak, aby obsahoval include_once na všechny potřebné soubory (takto to má šablona Innovation), nebo můžeme mít vše obsažené v jednom souboru (šablona Cardinal). My rozhodně přikláníme k první možnosti, ale ani druhá není špatná. Pouze méně přehledná. Pro nováčky je ale určitě snažší na pochopení, jestliže vidí všechny soubory v jednom souboru a nemusí mít otevřených 8 souborů najednou. Také stojí za to zmínit několik pravidel, kterých byste se měli držet, aby vaše úprava šablony byla úspěšná.
- Netvořte nové CSS soubory - přepisujte původní.
- V CSS přejmenovávejte třídy ani identifikátory (.class a #id) systematicky - i když se to z počátku nezdá, ušetříte si tím mnoho práce. Místo toho zkopírujte své styly ze statického webu (pokud jej máte, jinak piště rovnou) do původních CSS souborů. Čím více webů na tomto systémů pak vytvoříte, tím rychleji to půjde.
- Nepotřebné části kódu mažte, pokud je neplánujete přepisovat pro vaši šablonu. Pomůže v přehlednosti. Resetování stylů na začátku CSS ale ponechte, web pak vypadá ve všech prohlížečích stejně s přesností 1px (z IE se ale Mozilla ani Opera nestane)
- Nekomplikujte si co nemusíte :)
- Vytvořte si svůj prototyp šablony, na které budete schopni psát všechny weby. V CSS už nebudete muset nic přejmenovávat, nebudete muset upravovat template.php ani jehou součásti a vše půjde rychle od ruky.
Teď si názorně ukážeme, jak takový web může vypadat v praxi včetně kódu.
Template
Jak jsme řekli, jsou dvě možnosti. Jednou je metoda použitá v Innovation šabloně, kdy includujeme jednotlivé části kódu (meta tagy, hlavičku, drobečkovou navigaci...), druhou pak vepsání veškerého kódu do jednoho souboru. Ať si vyberete jakoukoliv cestu, v principu se od sebe lišit nebudou, pouze budou rozdělení na více souborů.
Ukážeme si, jak upravit šablonu pro web s hlavičkou, obsahem, postranním menu a podpisem pod stránkou s využitím šablon Innovation i Cardinal a také trošky vlastního kódu. Abychom celý kód hezky strukturovali a měli vše přehledně, rozdělíme ho do několika souborů. Názvy tříd a identifikátorů jsou použity z šablony Cardinal, proto byste měli následně upravovat styly právě ze šablony cardinal, abysteste zamezili zbytečnému a pracnému přepisování. Ne všechny prvky obsažené v našem template se vyskytují ve stylech Cardinal šablony (to platí i pro Innovation), proto si některé budete muset dopsat.
Každý nový .php soubor pro template by měl začínat konstrukcí
<?php if(!defined('IN_GS')){ die('you cannot load this page directly.'); }?>
Pak již píšeme HTML tagy (+php funkce), jak jsme zvyklí.
Naším cílem v template.php je takovýto kód, který si rozebereme níže podrobněji.
Na každý pád je soubor template.php nejdůležitější. Ptáte se jak vytvořit šablonu? Musíte do souboru template.php. Nebo jen nevíte, jak upravit šablonu? Opět musíte do souboru template.php. V našem případě tento soubor spolupracuje s několika dalšími soubory, které jsou v tomto vložené jen pomocí funkce. Obsah vnořených souborů ale můžeme bez problémů umístit právě na místo funkce s vložením.
<?php if(!defined('IN_GS')){ die('you cannot load this page directly.'); }
include_once('hlavickaMeta.inc.php'); ?>
<body id="<?php get_page_slug(); ?>" >
<div id="container-web">
<?php include_once('hlavickaWeb.inc.php'); ?>
<?php include_once('drobeckovaNavigace.inc.php'); ?>
<?php include_once('navigacniMenu.inc.php'); ?>
<div id="c_content">
<h1><?php get_page_title(); ?></h1>
<?php get_page_content(); ?>
</div>
<?php include_once('patickaWeb.inc.php'); ?>
<?php include_once('patickaCopyright.inc.php'); ?>
</div>
</body>
</html>
hlavickaMeta.inc.php
Takto nějak může vypadat tento soubor, aby vše fungovalo jak má. Pokud nechcete strukturovat template.php do dalších souborů, můžete všechen tento kód pod čarou zkopírovat na místo
include_once('hlavickaMeta.inc.php'); ?>
Všimněte si, že <html> tag v tomto souboru začíná, končí ale v souboru template.php. Není zde nic zvláštního, pouze funkce v tazích <title></title>, <link /> a generování některých meta tagů pomocí get_header().
<?php if(!defined('IN_GS')){ die('you cannot load this page directly.'); }?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs-cz" lang="cs-cz" dir="ltr" >
<head>
<title><?php get_page_clean_title(); ?> - <?php get_site_name(); ?></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="Pragma" content="no-cache" />
<meta name="robots" content="all,follow" />
<meta name="content-language" content="cs" />
<meta name="author" content="Tomáš Janeček, WebPrezent, www.webprezent.cz" />
<meta name="revisit-after" content="7 days" />
<link rel="shortcut icon" href="/favicon.ico" />
<link href="/<?php get_theme_url(); ?>/style.css" rel="stylesheet" />
<?php get_header(); ?>
</head>
hlavickaWeb.inc.php
Zde na žádný složitý kód nenarazíme. Pouze jednoduchá struktura divu hlavičky, kam patří právě logo.
<?php if(!defined('IN_GS')){ die('you cannot load this page directly.'); }?>
<div id="header">
<a id="logo" href="/<?php get_site_url(); ?>" title="<?php get_site_name(); ?>">
</a>
</div>
drobeckovaNavigace.inc.php
Běžná drobečková navigace. Název identifikátoru id="breadcrumbs" je použitý z Innovation, protože Cardinal šablona neobsahuje drobečkovou navigaci.
<?php if(!defined('IN_GS')){ die('you cannot load this page directly.'); }?>
<p id="breadcrumbs" >
<a href="/<?php get_site_url(); ?>">Úvod</a>
<?php Innovation_Parent_Link(get_parent(FALSE)); ?> <?php get_page_clean_title(); ?>
</p>
navigacniMenu.inc.php
Navigační menu. Pozor při úpravách v CSS, původní Cardinal navigační menu bylo horizontální a nyní máme vertikální, tudíž CSS musí doznat významnějších změn. Nebo také lze umístit horizontální menu jako div pod drobečkovou navigaci.
<?php if(!defined('IN_GS')){ die('you cannot load this page directly.'); }?>
<div id="navMenu">
<ul class="nav">
<?php get_navigation(get_page_slug(FALSE)); ?>
</ul>
</div>
patickaWeb.inc.php
V našem případě je hlavička včetně obrázku na pozadí kompletně nastylovaná přes CSS, proto div zůstává prázdný. Není třeba žádná PHP funkce.
<?php if(!defined('IN_GS')){ die('you cannot load this page directly.'); }?>
<div id="footer">
</div>
patickaCopyright.inc.php
Poslední malý div vpravo nebo vlevo dole v rohu pod patičkou, kde se podepisuje autor webu. Obvykle obsahuje i odkaz jako referenci na tvůrce. Také zde není třeba žádných funkcí, pouze HTML a CSS.
<?php if(!defined('IN_GS')){ die('you cannot load this page directly.'); }?>
<div id="footerCopyright" class="small">
<strong>Webdesign</strong> 2013 <a href="http://tomas-janecek.php5.cz">Tomáš Janeček</a>, WebPrezent <a href="http://www.webprezent.cz" title="WebPrezent - Tvorba webových
stránek" target="_blank">Tvorba webových stránek</a>
</div>
Poslední krok
Nyní již máte template připravený a je jen na vás, abyste se zorientovali v identifikátorech a třídách jednotlivých prvků a vhodně nastylovali CSS ke všem použitým prvkům. Nezapomeňte se podpívat, jaké možnosti nabízí editor GetSimplu při psaní nové stránky nebo úpravě stávající. Je dobré mít nastylované všechny tyto možosti, aby se nestalo, že budete mít web s rudě červeným písmem a při použití nadpisu 5. úrovně nebyl najednou červený, protože jste nastylovali třeba jen tři základní úrovně nadpisů (<h1> až <h3>).
Přestože není struktura template v GetSimple nikterak složitá, je třeba nad ní pár hodin strávit a zkoušet její možnosti. Člověk, co do teď psal pouze statické weby v HTML a CSS, se bude muset nad vším pozastavit na trochu déle, věřím ale, že pár PHP funkcí a tagů nebude příliš velkou překážkou.
GetSimple je skvělý nenáročný redakční systém na spíše menší weby, umožňuje ale i plno dalších funkcí díky pluginům, o kterých se dočtete v dalším článku s názvem "Návod na užitečné GetSimple pluginy". Byla by škoda nechat GetSimple ladem.
