Pokud jsem laik, který dlouho touží po zvládnutí aspoň základní problematiky programování, a chtěl bych se naučit jazyky potřebné pro WordPress, tedy tipuji – stylování v HTML a CSS + PHP – jak bych měl začít?
Od začátku cítím, že přes všechny možné pokusy mi chybí nějaký základ, který by mi pochopil jak se orientovat v kódu, jak kód funguje, jak v něm pracovat a hlavně jak se krok za krokem učit. Co se týče html, umím jen opravdu naprosté základy z JakPsatWeb, kdy si umím základně upravovat texty, jinak bohužel neumím vůbec nic. Jsou kódy, které jsem vypsal, ty správné?
Klišé na začátek: Stanovte si cíl a ujasněte motivaci
Hned na začátku si stanovte cíl, kterého chcete dosáhnout a odpovězte si na otázku „proč“. Musíte mít motivaci a musíte věřit, že dospějete do cíle. Pokud bude vaším cílem živit se prodejem vlastních pluginů, ale neumíte zatím programovat, je pravděpodobné, že dosažení tohoto cíle bude extrémně náročné (zejména pokud si představíte, jak ležíte u moře, kam jste se dostali díky tomu, že jste vydělali spoustu peněz prodejem pluginů, které ještě neumíte naprogramovat).
Prostě si realisticky stanovte, co se chcete naučit. Objeví se spousta dalších požadavků, které budete muset zvládnout, a spousta lákadel, která vás budou svádět ze stanovené cesty. Způsobů, jak programovat či vyvíjet je několik, namátkou
- pro backend (tedy administrační rozhraní),
- pro frontend (tedy design výsledných stránek),
- v JavaScriptu (jednostránkové dynamické aplikace),
- s konkrétními nástroji nebo platformami (třeba Bootstrap),
- jen mobilní aplikace,
- univerzálně (ze všeho trochu a pořád se doučovat to, co ještě neumím)
Pokud jde spíše o koníček a chcete mít ze všeho trochu (tzn. neplánujete kariéru JS kodéra), abyste byl v obraze, pak jakýsi slušný základ chápu takto:
- HTML5 – aspoň 80 % zpaměti
- CSS – základní „vyjadřování“ zpaměti, moderní součásti s pomocí manuálu
- JavaScript – chápat syntaxi a princip
- PHP – chápat syntaxi (vychází z JS) a princip
- jQuery – díky JS už princip a syntaxi budete znát, pak se hodí některé typické konstrukce (události a jejich obsluha)
- obecná pravidla a koncepty – naučit se co nejdřív (responzivita, mřížka, preprocesory atp.)
Pořád budete narážet na novinky a neznámé nové pojmy. Vytvořte si vlastní směr a mix technologií, kterým se budete věnovat. Ostatní sledujte, ale nemusíte umět všechno, dnes už to nejde.
Webová stránka je tvořena směsicí HTML, CSS a JavaScriptu
HTML je popisný jazyk, který se chápe za základní kód webových stránek. Dnes se obvykle nepíše ručně (jen jeho kousky), nechává se vytvářet nějakým nástrojem nebo postupem. Typickým generátorem HTML kódu může být PHP. Kód napsaný v PHP se zpracovává na serveru a jeho výsledkem bývá obvykle HTML kód, který se posílá klientovi (což je typicky prohlížeč). V tomto kódu ale mohou být také pasáže v JavaScriptu (což je naopak klientský kód a zpracovává se v prohlížeči). CSS se zpracovává také až v prohlížeči.
Prohlížeč obdržený kód zpracuje, načte potřebná data, např. externí JavaScripty, CSS styly, obrázky, písma a postupně je zpracuje. Průběžně nebo nakonec vše zobrazí. (Z toho vyplývá, že v prohlížeči se nikdy nemůže objevit PHP kód, a pokud se tak stane, pak jde o chybu programátora nebo konfigurace serveru.)
HTML
HTML (hypertext meta language) je popisný jazyk (spíše soustava značek, protože jazyk by měl mít gramatiku a pravidla, což u HTML úplně tvrdit nelze), pomocí jehož značek umisťujete do stránky určité prvky. Některé značky jsou párové, tzn. mají otevírací část a uzavírací část. Mohou tak „obalit“ jinou skupinu značek, což vytváří stromovou strukturu dokumentu, tzv. DOM (document object model), kde jsou nadřazené a podřazené prvky (rodiče a potomci).
V HTML nemáte vliv na místo na obrazovce, kde se prvek má objevit a vkládání prvků je statické a lineární, tzn. v HTML neexistuje možnost jak jednou vložený prvek přesunout na jinou pozici na obrazovce nebo v DOM; tuto pozici určuje pořadí prvků ve zdrojovém kódu.
<div class="content"> <h2>Nadpis v článku</h2> <p>Obsah článku...</p> </div> <div class="footer"> <p>Patička stránky</p> </div>
U prvků můžete ovlivnit jejich parametry a vložená data, nikoliv vzhled nebo pokročilé vlastnosti jako např. skrývání či změnu pozice. Data vkládáte přímo, neexistuje žádná návaznost na databázi. Nemáte informaci o stavu stránky a nemůžete odeslat data z formuláře ani je přijímat. Můžete jen sestavit konkrétní prvky, aby tvořily nějaký celek. Pokud zapomenete uzavírací značku prvku, celý DOM strom se může zhroutit a stránka se špatně vykreslí. Takto vypadá struktura DOM stromu uvedených značek:
body |- div (content) |- h2 |- p |- div (footer) |- p
CSS
CSS (cascading style sheets) je v základním chápání seznam vlastností jednotlivých HTML značek, které lze měnit. V širším chápání máme k dispozici podmínky pro zahrnutí či vyloučení některých značek podle určitých parametrů a CSS3 obsahuje nástroje pro manipulaci s prvkem po stránce a jeho přeměny (transitions).
CSS je koncept postavený na principu dědičnosti (kaskáda), která vzniká vnořením HTML značek do sebe, tedy vytvořením DOM. Popisem „cesty“ DOM stromem definujeme prvky, kterým chceme změnit nějakou vlastnost.
.content h2 {
color: #888;
}
JavaScript
JavaScript je jazyk spouštěný prohlížečem. Jeho hlavním účelem úprava načtené nebo již zpracované stránky, tzn. manipulace s DOM. Což znamená, že mění statický HTML a CSS kód poslaný ze serveru. Nedokáže sám o sobě pracovat s databází na serveru, protože běží v prohlížeči (k tomu je potřeba mít kód běžící na serveru, např. PHP). JavaScript dokáže se serverem komunikovat, aniž by bylo nutné celou stránku znovu načíst, operace probíhají na pozadí a označují se pojmem AJAX (asynchronní JavaScript a XML).
Typické použití spočívá v úpravě již definovaných vlastností CSS, načítání datových parametrů ze značek HTML5, vytvoření obsluhy pro události uživatelského rozhraní (events) a AJAX operace. Populární knihovna jQuery a množství jejích doplňků je napsána v JavaScriptu a jejím smyslem je zjednodušení příliš popisné syntaxe JavaScriptu a vytvoření bohatší nabídky prvků uživatelského rozhraní, komponent a efektů. Je součástí WordPressu.
PHP
Jak už bylo řečeno, PHP běží na serveru a jeho výstupem bývá směs HTML, JavaScriptu a řádkového CSS. Větší skripty se většinou načítají v samostatných souborech, ale krátké úryvky bývají vložený přímo do výsledného HTML, aby se zbytečně nezvyšoval počet požadavků na server.
Prohlížeč tedy obdrží rámcový HTML, v němž může najít řádkový CSS a JavaScript. Nejprve zpracuje HTML, sestaví DOM, následně aplikuje výchozí pravidla CSS (která interpretuje jeho jádro), načtená uživatelská CSS pravidla a nakonec začne provádět načtený JavaScript. Ten se ovšem může spustit kdykoliv později, jakmile uživatel se stránkou pracuje a JavaScript je připraven na tyto události reagovat.
Pak jsou ještě další okolnosti
Jakmile budete mít jasno v těchto základech, začněte tvořit první plugin pro WordPress. V ten okamžik narazíte na další „povinnosti“, které jsou spojeny s programováním pro WordPress. Protože pro něj neexistuje žádný framework, tedy připravená soustava knihoven s předpřipravenými vzory ani šablonovací systém, budete si muset najít optimální cestu, jak kód v souborech formátovat, jak soubory pojmenovávat a organizovat. Naštěstí existuje alespoň doporučení: standardy PHP kódu, základní pravidla pro psaní pluginů.
Populárním frameworkem je (Twitter) Bootstrap, který ve WordPressu jako aplikaci žádnou podporu ani opodstatnění nemá (myšleno při práci pro backend), ale používá se jako základ pro mnoho šablon (tedy frontend). Důležitý je například proto, že pro výsledné stránky vytvořil standardizované prostředí a sjednotil dřívější různé pokusy o mřížku (grid) čili rozložení prvků na stránce. To vše s ohledem na mobilní, tabletové a desktopové displeje.
Bootstrap není jediný framework, který můžete použít, ale je zřejmě nejpoužívanější (a to v celé oblasti web designu, nejen to wordpressové). Ale o tom až zase jindy.