Nevyhovují vám nabízené šablony ve WordPressu? A zdají se vám šablony z ThemeForestu upravené pro WordPress hodně drahé? Pak je nejvyšší čas naučit se tvořit šablony sami.
Styly
Všechny šablony jsou uložené v adresáři wp-content/themes ve vaší instalaci WordPressu. Každá šablona má svůj samostatný adresář, ve kterém se musí nacházet soubor style.css obsahující hlavní CSS styl šablony.
Na začátku tohoto souboru se v komentářích uvádí podrobnosti o šabloně, které následně WordPress zobrazuje v nabídce šablon:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
/* Theme Name: Moje úžasná šablona Theme URI: http://www.uzasnesablony.cz/themes/moje Author: Kozel Zahradník Author URI: http://www.kozelzahradnik.cz/ Description: Moje úžasná šablona je responzivní, moderní, plochá, na blogy i e-shopy orientovaná, zcela univerzální šablona. Version: 1.0.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: uzasna-moje Tags: light, two-columns, right-sidebar, fluid-layout, responsive-layout, translation-ready, custom-background, custom-colors, custom-menu, post-formats Ještě nějaké povídání o mojí šabloně. */ |
Za zmínku stojí zejména Tags, které by měly odpovídat běžně užívaným tagům u jiných šablon, aby (pokud bude moje šablona zveřejněna), ji bylo možné snadno vyhledat podle jejích vlastností. Záhadné pole Text Domain obsahuje název lokalizačního souboru, který bude případně načten, aby bylo možné příslušnou šablonu lokalizovat (viz tag translation-ready).
Všechny cesty k souborům použité v rámci CSS souboru se zapisují relativně vzhledem k poloze souboru style.css, tzn. pokud umístíte obrázky do adresáře wp-content/themes/uzasna/images a styl máte v wp-content/themes/uzasna/styles.css, pak uvnitř odkazujete obrázky jako images/obrazek.png.
Šablony
Kaskádovým stylem lze ovlivnit celou řadu prvků ve standardní šabloně stránky, ale bez úpravy HTML šablony se zřejmě neobejdeme. K tomuto účelu slouží sada souborů v jazyce PHP, které umístíme do stejného adresáře jako CSS styl.
Základní šablonu představuje soubor index.php, který obsahuje popis samotné šablony pro situace, kdy neexistuje žádný bližší popis (např. pro vzhled speciálních stránek apod.). Uvnitř souboru je možné uvádět přímo HTML kód proložený PHP značkami vyvolávající vnitřní funkce WordPressu. Příkladem takového volání může být zobrazení názvu aktuální stránky pomocí
|
1 |
<?php wp_title( '' ); ?> |
Pokud neodkážeme ze základní šablony na použití hlavičky a patičky pomocí speciálních šablonových souborů, vygeneruje nám WordPress začátek a konec stránky podle svého, což nám nejspíš nebude vyhovovat. Z tohoto důvodu je obecná struktura index.php následující:
|
1 2 3 4 5 |
<?php get_header(); ?> <div class="content"> <!-- tady bude naše vlastní šablona pro stránku a sidebary --> </div> <?php get_footer(); ?> |
a kód pro hlavičku umístíme do souboru header.php a pro patičku do footer.php. V hlavičkové části nezapomene zadefinovat příslušné hlavičky (charset, viewport, klíčová slova, popis, titulek, autora, faviconu, připojit CSS styl apod.). Uvnitř šablon se na obrázky, JavaScripty a CSS soubory odkazujeme pomocí funkce WordPressu vracející cestu do adresáře šablon:
|
1 |
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/style.css" /> |
Cyklus zobrazování příspěvků
Poslední podstatná část hlavního šablonového souboru index.php je zajištění zobrazení obsahu stránky nebo seznamu příspěvků, což zajistí několik funkcí WordPressu posuzujících, zda na stránce jsou příspěvky (seznam příspěvků) nebo jeden příspěvek nebo obsah jedné stránky. Základní cyklus by mohl obsahovat např.
|
1 2 3 4 5 6 7 8 9 |
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); // Tady bude řešeno zobrazení jednoho příspěvku nebo jeden obsah stránky endwhile; else : echo 'Nejsou žádné příspěvky.'; endif; ?> |
Přičemž pokud je třeba zobrazit jeden příspěvek nebo obsah stránky, je možné se rozhodnout podle funkce is_page() takto:
|
1 2 3 4 5 6 7 |
<?php if ( is_page() ) : the_content(); else : ?> <div class="post"> <h3 class="posthead"><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h3> <div class="editorial">Napsal <?php the_author_posts_link(); ?> v <?php the_time(); ?>.</div> <div class="entry"><?php the_content(); ?></div> </div> <?php endif; ?> |
Ve variantě stránky je zobrazen pouze obsah, ve variantě příspěvku jsou formátovány jednotlivé části příspěvku (autor, titulek, datum příspěvku a jeho obsah). Možnosti WordPressu ve stylování jednotlivých příspěvků jsou zde značné.
Pro vytvoření jednoduché šablony (bez komentářů, sidebarů, menu apod.) nám tyto znalosti zcela postačí.