Webdesign: Návody a tipy pro tvorbu webu a wordpress šablon


WordPress Theme – jak na to:

Kapitola 1. Definice “Themes”

Na úvod chci napsat něco o tématech obecně. Téma je vlastně HTML šablona, která obléká, jako kabát, redakční systém WordPress. Můžete si tedy vytvořit jakýkoliv HTML layout a ten si do tématu poskládat. Budu počítat s tím, že vy, kteří tento článek čtete jste schopni nějaký layout vytvořit, zaměřím se na konstrukci tématu jakožto pluginu, který pouze nahrajeme na server a v menu „Design“ ho aktivujeme. Největší problém je pochopit, jak vlastně téma funguje, jak se ohlašuje serveru a jak vlastně skládat jednotlivé funkce, které nám volají dynamický obsah.

At the begining I would like to say something about Themes in global. Theme is, in fact, HTML template, which suite as cloat CMS WordPress. So you can create any HTML layout, and than put it in Theme. So I will count that, those who reading this post, can create any layout in HTML. I will focus at construction on theme as an plugin, you can upload at server and just activate in “Design” menu. Most problem is to comprehense how the theme system function, and how server will get nown about it, how to put individual functions, which calling dynamic content.

Pro ukázku si vezmu například Default Theme – Kubrick, které je v každé instalaci WP automaticky k dispozici. A jelikož je to open source, není problém toto téma rozebrat a použitelné kousky si takříkajíc vypůjčit. Vyhneme se tedy tomu muset specifikovat v kódu tématu kde a kdy jsme prováděli jaké změny. Výhoda wordpressu je ta, že všechny jeho komponenty, tedy i témata, jsou pod GPL licencí, tedy vše, co je v nich napsáno, je možné zkopírovat a použít ve vlastním kódu.

For example I get default Theme – Kubrick, that is available in WP automaticaly. And because it is open source, is not problem to make any changes in it. This is the ability of WordPress, all components, so themes as well, are under GPL licence, so, everything written in that, is possibly to copy and use in your own code.

Budeme nejdříve potřebovat ohlásit Téma WordPressu, aby pochopil, že je to téma a že ho může použít. Uděláme si pro tento článek „Ukázkové Téma“ . Potřebujeme někam napsat definici tématu, k tomu nám poslouží soubor style.css lokalizovaný v adresáři:

We start with inicialization of theme for the WordPress core to use it as view of our website. We will make for this issue “Preview Theme”. So in beginning we need to make definition of Theme, that serve to us basic css file localised in folder:

‘www_root/wp-content/themes/ukazkove_tema/’

‘www_root/wp-content/themes/preview_theme/’

Definice začíná v prvním řádku souboru style.css a vypadá takto:

Definition is startin at first line of style.css file and looks like this:

/*
Theme Name: Jméno tématu
Theme URI: URI na kterém je domovská stránka tématu
Description: popis tématu
Version: číslo verze
Author: Vaše jméno
Author URI: vaše URI
Tags: Značky použité v tématu

Jméno tématu 1.0

http://mojedoména.cz/mojetéma/

This theme was designed and built by Vase Jmeno,
whose blog you will find at http://vasedomena.info/

The CSS, XHTML and design is released under GPL:

http://www.opensource.org/licenses/gpl-license.php

*/

/*
Theme Name: Jméno tématu
Theme URI: URI na kterém je domovská stránka tématu
Description: popis tématu
Version: číslo verze
Author: Vaše jméno
Author URI: vaše URI
Tags: Značky použité v tématu

Jméno tématu 1.0

http://mojedoména.cz/mojetéma/

This theme was designed and built by Vase Jmeno,
whose blog you will find at http://vasedomena.info/

The CSS, XHTML and design is released under GPL:

http://www.opensource.org/licenses/gpl-license.php

*/

Dále pokračujeme psaním samotného stylu. Je dobré syly nějakým způsobem strukturovat pomocí komentářů na označení stylovaných oblastí, abychom se v nich nakonec úplně neztratili. Nebo si rozdělit třídy a identifikátory, které si dále strukturujeme podle oblastí – já osobně si styly dělím podle šablon – kategorie, stránky, hlavička a tak podobně…

Than we can continue with writing own style. Is good to structuralize it somehow, usefull are comments for marking of styled parts, than we can handle some changes in future easily. Or to split indentificators, which then structuralize by parts of website. I differencing them by templates in website – categories, pages, content, header, and so…

Tags: ,