O WordPressu odjinud

Tip do kódu: přesměrování

Přesměrování je jednou ze základních potřeb při programování nějaké funkce. Ve WordPressu existuje jednoduchý příkaz wp_redirect( $location, $status );, pomocí kterého můžete nastavit přesměrování a stavový kód. Nyní si vše ukážeme a vysvětlíme na příkladu. if($email_odeslan == TRUE){ wp_redirect( home_url() ); exit; } Pokud je email odeslán, přesměruj na hlavní stranu. WordPress používá funkci home_url() pro vložení URL hlavní strany. Nicméně můžete zadat také absolutní adresu jako například wp_redirect( http://zdenekvojacek.com ); exit;, nebo zadat jinou stánku na svém webu wp_redirect( home_url() . ‚/podstranka‘ ); exit; (tečkou se spojují řetězce). Jestliže chcete chcete použít i status, tak by příkaz byl: wp_redirect( ‚http://zdenekvojacek.com‘, 301 ); exit;. Tento příkaz vás přesměruje na zadanou adresu a přidá stavový kód, který říká že došlo k trvalému přesunu. Seznam stavů najdete například na wikipedii.

Dva a půl nových pluginů pro WordPress

Čas letí jak voda a já už dva a půl roku nenapsal nic na svůj blog. Čas to změnit! V poslední době jsem totiž vydal dva nové pluginy pro WordPress, které potřebují trochu propagace, no a taky jsem aktualizoval svůj nejspíš nejpopulárnější plugin Zalomení.

Zalomení

Psali mi někteří uživatelé WordPressu, že jim nefunguje Zalomení, ale rádi by ho používali. Někteří mi dokonce dali admin přístup na své weby, tak jsem se vrtal v tom, co je špatně. Bohužel jsem nepřišel na to, proč u nich chyba vzniká, když na mnohých jiných webech vše běží v pořádku, ale… trošku jsem si více nastudoval API WordPressu a zjistil, že nedělám věci úplně optimálně.

A tak jsem se nakonec rozhodl svůj plugin úplně přepsat. Nezůstal kámen na kameni. Pro uživatele víceméně vše funguje tak jako dříve, tedy kromě pár nových možností nastavení, které jsem tam na žádosti uživatelů přidal. Ale celé nastavení včetně jeho ukládání je nyní řešeno přímo interními funkcemi WordPressu, čímž se odstranil problém popisovaný výše.

Vše si samozřejmě vyžádalo pár ještě drobnějších úprav, takže těch verzí pluginu vyšlo v posledních dvou měsících několik, teď už je snad vše ustáleno a běhá, tak jak má.

Note: There is a file embedded within this post, please visit this post to download the file.
Stránka pluginu na webu WordPressu

Gallery Slice

Na jiném webu často publikuji galerie obrázků, no a občas se jedná o fakt velké galerie (třeba přes 100 obrázků). Je samozřejmě velmi nepraktické na domovské stránce a ostatních archivních stránkách, abyste tam měli nějakou obří galerii a museli k dalšímu článku dlouho scrollovat. Chtělo by to nějaké zkrácení, něco jako preview galerie.

Samozřejmě nejsem první, kdo se s takovým problémem setkal. Jenže ani jedno z (typů) řešení, které se nabízely, mě nezaujal. Většinou je záležitost řešena tak, že se galerie stránkuje po X obrázcích. Uživatel si pak zobrazí první stránku, druhou stránku, třetí a tak dále. Můj dojem ale je, že návštěvník, pokud ho zaujalo preview, tak si nechce zobrazovat x dalších stránek, každou zvlášť. Když už ho to zaujalo, tak chce vidět celý zbytek.

Něco takového nabízely šablony twentyten a twentyeleven, které byly výchozí ve starších verzích WordPressu. Jenže ty jako preview ukázaly zase jen jeden jediný obrázek z galerie, nic víc, teda ještě počet, kolik je v galerii obrázků celkem. No a když mě žádné existující řešení nezaujalo, tak to byl samozřejmě impuls k tomu, vytvořit své vlastní.

A tak vznikl plugin Gallery Slice. Pokud si ho nahrajete do svého WordPressu, pak na homepagi a archivech budou galerie zkráceny (oříznuty) jen na několik prvních obrázků (výchozí hodnota je 9, ale můžete si to nastavit podle svého). No a pod takto zkrácenou galerií se nachází odkaz Celá galerie →, pomocí něhož se návštěvníkovi skrz Ajax dotáhne celý zbytek galerie, pokud ho chce vidět.

Note: There is a file embedded within this post, please visit this post to download the file.
Stránka pluginu na webu WordPressu

Rajce embed

Poslední z nových pluginů jsem vzal jako takové svoje programátorské cvičení, abych se zase něco dál naučil ohledně PHP a WordPressu. Impulz nicméně vznikl z toho, že na mém jiném webu uživatelé umisťovali odkazy na galerie a obrázky z populárního českého webu Rajče. No a mě napadlo, že by bylo hezké, kdyby se místo odkazů zobrazil přímo obrázek nebo galerie.

Takže jsem vytvořil plugin, který pomocí standardních postupů WordPressu umožňuje vložit do příspěvku obrázek nebo galerii z Rajčete. To znamená, že stačí jako samostatný odstavec uvést URL adresu na obrázek nebo galerii a návštěvníkovi se místo adresy objeví příslušný obsah — obrázek nebo galerie.

Galerie se vkládá jako nativní galerie WordPressu, používá stejnou HTML strukturu a stejné CSS třídy. To znamená, že by měla být vizuálně zobrazena stejným způsobem, jako tradiční galerie, nicméně trochu to záleží i na použité šabloně. No a aby bylo vše konzistentní a integrované, galerie vkládané tímto pluginem Rajce embed budou také na homepagi zkracovány pomocí pluginu Gallery Slice, pokud používáte oba dva.

Tento plugin bude užitečný převážně lidem, kteří mají omezené množství prostoru pro svou instalaci WordPressu, ale chtěli by publikovat větší množství fotografií, ty se jim přímo do WordPressu ovšem nevejdou. Fotky tedy nahrajte na Rajče a pomocí pluginu Rajce embed je zobrazte ve WordPressu.

Note: There is a file embedded within this post, please visit this post to download the file.
Stránka pluginu na webu WordPressu

A to je pro tuto chvíli vše. V následujících týdnech asi projdu své další starší pluginy a zaktualizuji je, podobně jak jsem to udělal se Zalomením.

Dva a půl nových pluginů pro WordPress

Čas letí jak voda a já už dva a půl roku nenapsal nic na svůj blog. Čas to změnit! V poslední době jsem totiž vydal dva nové pluginy pro WordPress, které potřebují trochu propagace, no a taky jsem aktualizoval svůj nejspíš nejpopulárnější plugin Zalomení.

Zalomení

Psali mi někteří uživatelé WordPressu, že jim nefunguje Zalomení, ale rádi by ho používali. Někteří mi dokonce dali admin přístup na své weby, tak jsem se vrtal v tom, co je špatně. Bohužel jsem nepřišel na to, proč u nich chyba vzniká, když na mnohých jiných webech vše běží v pořádku, ale… trošku jsem si více nastudoval API WordPressu a zjistil, že nedělám věci úplně optimálně.

A tak jsem se nakonec rozhodl svůj plugin úplně přepsat. Nezůstal kámen na kameni. Pro uživatele víceméně vše funguje tak jako dříve, tedy kromě pár nových možností nastavení, které jsem tam na žádosti uživatelů přidal. Ale celé nastavení včetně jeho ukládání je nyní řešeno přímo interními funkcemi WordPressu, čímž se odstranil problém popisovaný výše.

Vše si samozřejmě vyžádalo pár ještě drobnějších úprav, takže těch verzí pluginu vyšlo v posledních dvou měsících několik, teď už je snad vše ustáleno a běhá, tak jak má.

Note: There is a file embedded within this post, please visit this post to download the file.
Stránka pluginu na webu WordPressu

Gallery Slice

Na jiném webu často publikuji galerie obrázků, no a občas se jedná o fakt velké galerie (třeba přes 100 obrázků). Je samozřejmě velmi nepraktické na domovské stránce a ostatních archivních stránkách, abyste tam měli nějakou obří galerii a museli k dalšímu článku dlouho scrollovat. Chtělo by to nějaké zkrácení, něco jako preview galerie.

Samozřejmě nejsem první, kdo se s takovým problémem setkal. Jenže ani jedno z (typů) řešení, které se nabízely, mě nezaujal. Většinou je záležitost řešena tak, že se galerie stránkuje po X obrázcích. Uživatel si pak zobrazí první stránku, druhou stránku, třetí a tak dále. Můj dojem ale je, že návštěvník, pokud ho zaujalo preview, tak si nechce zobrazovat x dalších stránek, každou zvlášť. Když už ho to zaujalo, tak chce vidět celý zbytek.

Něco takového nabízely šablony twentyten a twentyeleven, které byly výchozí ve starších verzích WordPressu. Jenže ty jako preview ukázaly zase jen jeden jediný obrázek z galerie, nic víc, teda ještě počet, kolik je v galerii obrázků celkem. No a když mě žádné existující řešení nezaujalo, tak to byl samozřejmě impuls k tomu, vytvořit své vlastní.

A tak vznikl plugin Gallery Slice. Pokud si ho nahrajete do svého WordPressu, pak na homepagi a archivech budou galerie zkráceny (oříznuty) jen na několik prvních obrázků (výchozí hodnota je 9, ale můžete si to nastavit podle svého). No a pod takto zkrácenou galerií se nachází odkaz Celá galerie →, pomocí něhož se návštěvníkovi skrz Ajax dotáhne celý zbytek galerie, pokud ho chce vidět.

Note: There is a file embedded within this post, please visit this post to download the file.
Stránka pluginu na webu WordPressu

Rajce embed

Poslední z nových pluginů jsem vzal jako takové svoje programátorské cvičení, abych se zase něco dál naučil ohledně PHP a WordPressu. Impulz nicméně vznikl z toho, že na mém jiném webu uživatelé umisťovali odkazy na galerie a obrázky z populárního českého webu Rajče. No a mě napadlo, že by bylo hezké, kdyby se místo odkazů zobrazil přímo obrázek nebo galerie.

Takže jsem vytvořil plugin, který pomocí standardních postupů WordPressu umožňuje vložit do příspěvku obrázek nebo galerii z Rajčete. To znamená, že stačí jako samostatný odstavec uvést URL adresu na obrázek nebo galerii a návštěvníkovi se místo adresy objeví příslušný obsah — obrázek nebo galerie.

Galerie se vkládá jako nativní galerie WordPressu, používá stejnou HTML strukturu a stejné CSS třídy. To znamená, že by měla být vizuálně zobrazena stejným způsobem, jako tradiční galerie, nicméně trochu to záleží i na použité šabloně. No a aby bylo vše konzistentní a integrované, galerie vkládané tímto pluginem Rajce embed budou také na homepagi zkracovány pomocí pluginu Gallery Slice, pokud používáte oba dva.

Tento plugin bude užitečný převážně lidem, kteří mají omezené množství prostoru pro svou instalaci WordPressu, ale chtěli by publikovat větší množství fotografií, ty se jim přímo do WordPressu ovšem nevejdou. Fotky tedy nahrajte na Rajče a pomocí pluginu Rajce embed je zobrazte ve WordPressu.

Note: There is a file embedded within this post, please visit this post to download the file.
Stránka pluginu na webu WordPressu

A to je pro tuto chvíli vše. V následujících týdnech asi projdu své další starší pluginy a zaktualizuji je, podobně jak jsem to udělal se Zalomením.

SERIÁL „ZAČÍNÁME S PROGRAMOVÁNÍM“ – CSS 2. ČÁST

Představme si několik základních CSS vlastností. Kaskádové styly jsou soupisem příkazů pro popis způsobu zobrazení stránek napsaných v jazycích HTML, XHTML nebo XML. “Jazyk” CSS byl navržen standardizační organizací W3C. CSS obsahuje velké množství vlastností. V tomto článku si představíme pouze ty nejdůležitější CSS vlastnosti, seznam všech najdete na stránkách W3Cschools.com. Všechny uvedené CSS vlastnosti jsou užitečné při lehkém dostylování šablony WordPressu. Často se totiž stane, že potřebujete upravit nějaké odsazení, změnit velikost obrázku, písma apod. Background – pozadí background-color barva pozadí prvky background-color:yellow; background-image obrázek na pozadí Color – barvy barva textu color:#00f; Font písma font-size velikost písma font-size:20px; font-weight tloušťka písma font-weight:900; font-weight:100; font-family styl písma font-family: Georgia, Arial, sans-serif font-family: Courier New, Courier, monotype Text text decoration úprava textu text-decoration:underline; text-decoration:overline; text-decoration:line-through; text align zarovnání textu text-align:left; text-align:right; text-align:center; float zarovnání prvku, nikoliv textu float:left; float:right;   Display – způsoby zobrazení display block Prvek se zobrazí do bloku. Jedná se v podstatě o základní zobrazení. 1.display:block; 2.display:block; 3.display:block; display none Prvek se nezobrazí. 1.display:block; 2.display:none; 3.display:block; 2. prvek má display:none; display inline Prvky se zobrazí v řadě za sebou. 1.display:inline; 2.display:inline; 3.display:inline; Border – rámečky okolo prvků border-color přidá prvku rámeček určité barvy border-color:red; border-width přidá prvku rámeček určité tloušťky border-width:4px; border-style Přidá prvku rámeček určitého typu border-style:solid; border-style:dotted; border-style:dashed; border-style:bouble; Zkrácený zápis Ve většině případů se pro rámeček používá zkrácený zápis, který je kombinací všech tři. border: 5px dotted #f0f; Margin – vnější odsazení prvků margin-left vnější odsazení prvku z levé strany margin-left:20px; margin-right vnější odsazení prvku z pravé strany margin-right:20px; margin-top vnější odsazení prvku shora margin-top:10px; margin-bottom vnější odsazení prvku zdola margin-bottom:10px; Padding – vnitřní odsazení padding-left vnitřní odsazení prvku zleva      padding-left:20px; padding-right vnitřní odsazení prvku zprava padding-right:20px; padding-bottom vnitřní odsazení prvku zdola padding-bottom:20px; padding-top vnitřní odsazení prvku zhora padding-top:20px;

Jak při kódování šablony implementovat menu

Dnes si povíme něco o tom, jak šablonu naučit používat menu. Když šablonu vytváříte, tak není samozřejmost, že bude mít menu – nestačí ho v administraci nastavit a doufat že se zobrazí. Osobně to dělám tak, že v každé šabloně mám functions.php, kde učím šablonu všemu, co chci aby uměla. V podstatě se nejedná o menu jako takové, ale o pozici, kam se bude vkládat menu, které si vytvoříte v administraci. Pozice se musí se zaregistrovat, to uděláte následující funkcí, kterou zapíšete do functions.php. [crayon-547a01ff09fd2549507941/] Poté, co tento kód zapíšete do functions.php se vám vaše pozice zobrazí v administraci a můžete jí přiřadit menu, pro které se rozhodnete. Pokud přidáváte více menu do šablony, můžete využít zkrácený zápis: [crayon-547a01ff09fe9749600931/] Dostanete se tam přes Vzhled -> Menu -> Umístění v šabloně          Na tomto obrázku vidíte vlevo zaregistrovanou pozici a vpravo můžete vybrat menu, které v ní zobrazíte. Když máte takto hotovou pozici i nastavené menu, jenž se v ní má zobrazit, tak vám už jen stačí říct šabloně, kde ho má vypsat. To uděláte tak, že do šablony vložíte kód, který se o to postará. [crayon-547a01ff09ff8727945693/] Nyní je hotovo. Šablona má pozici pro menu a vložené menu se vypisuje. Příště si povíme něco o tom, jak menu upravit.

Tip: jak u WordPressu zapnout zobrazení chyb (WP_DEBUG)

Při tvorbě šablony nebo pluginu, případně při jejich úpravě, se může stát, že se namísto WordPressu zobrazí jen bílá stránka. Obvykle to je z důvodu chyby v PHP kódu. K odhalení chyby není nic jednoduššího než zapnout WP_DEBUG, což je specifická součást redakčního systému WordPress, sloužící k zobrazení vzniklých chyb. WP_DEBUG je v základním nastavení vypnut (nastaven na false). K jeho aktivaci stačí otevřít wp-config.php a vložit do něj následující kód. define(‚WP_DEBUG‘, true); Od této chvíle se při načtení stránky budou, pouze v případě že nějaké jsou, zobrazovat chyby. Po opravení chyb je dobré WP_DEBUG vypnout, a to buď smazáním kódu ve wp-config.php anebo změnou true na false. define(‚WP_DEBUG‘, false); WP_DEBUG se nedoporučuje používat na živých stránkách, ale pouze při vývoji a testování.

Tip – jak jednoduše zjistit kód barvy

Jistě jste se už někdy setkali s tím, že potřebujete zjistit barvu z fotky, obrázku, videa, nebo jen z webu. Mně se nejlépe osvědčil produkt od Vlastimila Buriana Barvy, který denně využívám pro webdesign. Jedná se o inteligentního pomocníka pro práci s barvami s využitím nejen pro webdesign. S jednoduchým kapátkem snadno a rychle zjistíte barvu, a to v několika různých formátech. Kapátko sofistikované a přizpůsobitelné za chodu pomocí kolečka myši, včetně změny rychlosti myši; různé změny přes Ctrl, Alt, Shift + kolečko program lze mít minimalizovaný a vyvolat kapátko kdykoliv přes systémovou zkratku Shift + Alt + D Úprava barvy v barevných složkách RGB, HLS, CMY a CMYK Výstupní kód barvy hexadecimální: HTML, Delphi, C++, Visual Basic desítkový: Windows Color Reference (neboli Win32 ColorRef, označován dalšími názvy, např. GML pro aplikace Game Maker) Schránka automatické kopírování kódu do schránky inteligentní rozpoznání kódu a jeho prefixu při vkládání ze schránky Funkcionalita možno aktivovat režim dvou barev, se kterými lze pracovat simultánně a přepínat se mezi nimi lze spouštět v režimu kapátka, pokud jej při každém spuštění používáte modifikace barvy: inverzní, doplňková, stupeň šedi, desaturovaná, náhodná barva Barvy je Freeware produkt, který je možné stáhnout například odtud.

SERIÁL „ZAČÍNÁME S PROGRAMOVÁNÍM“ – CSS 1. část

Abychom mohli pokračovat s HTML, musíme si říci i něco málo o CSS kvůli formátování a struktuře těla stránky. CSS – Cascading Style Sheets CSS styly použijeme v podstatě kdekoliv, kde potřebujeme nějak ovlivnit vzhled webu. Ať už umístění jednotlivých prvků, jejich barvu či typ písma. Napojení externí soubor – Použití externího souboru pro CSS styly je nejpřehlednější a nejlepší způsob. Styly se Vám pak nemotají nikde v kódu a snadno je použijete kdekoliv na webu. Soubor se připojuje v hlavičce webu pomocí jednoduchého příkazu <link rel=”stylesheet” type=”text/css” href=”styly.css”> v hlavičce – Tyto styly se zapisují do hlavičky webu mezi tagy <style></style> <style> a { color:blue; } </style> přímý zápis – Slouží pouze k ovlivnění prvku, u kterého jsou zapsány. Nepíše se zde, co má ovlivnit pouze, jak to má ovlivnit. V našem případě barvu textu, který je v tagu <span> nastaví na modrou. <span style=”color:blue;”>text</span> class, id, tag tagy – Styly můžeme napojit přímo na HTML tagy. V takovém případě nám daný styl ovlivní všechny takové tagy na stránce. a { color:red;} Takto zapsaný styl nám u všech odkazů na webu nastaví červené písmo. class – Použijeme-li class, tak vytvoříme třídu, kterou následně můžeme přiřadit HTML prvkům, které chceme ovlivnit. .podrtzeni { text-decoration:underline; } <span class=”podtrzeni”>nějaký ten text</span> <span>nějaký ten text</span> <span class=”podtrzeni”>nějaký ten text</span> id – Používá se velmi podobně class. Class definuje celou třídu prvků, “id” se používá pro nastylování jednoho prvku (například konkrétní container pro menu). #tucne { font-weight:bold; } <span class=”tucne”>nějaký ten text</span> <span>nějaký ten text</span> <span class=”tucne”>nějaký ten text</span> Kombinace Při používání můžeme zápisy libovolně skládat a kombinovat. p a { color:red }   ->   všechny odkazy uvnitř odstavce obarví na červeno, ale ty, které v odstavci nejsou, zůstanou v původní barvě .blok .cervene { color:red }  ->  Najde prvky které mají třídu blok a v nich najde prvky, které mají třídu cervene a obarví je na červeno   Příště si povíme něco nejpoužívanějších stylech a co znamenají.

Automatické vytváření náhledových obrázků

WordPress umožňuje přidat ke každému příspěvku takzvaný náhledový obrázek. Není to obrázek vložený do textu, ale je ke konkrétnímu příspěvku přiřazený a zobrazuje se na místě vložení kódu. Speciální plugin umí tyto náhledové obrázky sám vytvářet z obrázků v obsahu příspěvku.

V praxi tedy, pokud chcete náhledové obrázky ve svém WordPressu používat, musíte vždy ke každému příspěvku nějaký vybrat, jak je vidět na obrázku vlevo. Dělá se to při psaní příspěvku v pravé části dole. Pokud kliknete na Zvolit náhledový obrázek, otevře se klasické rozhraní pro upload nového obrázku nebo pro výběr nějakého z galerie.

Aby se náhledový obrázek zobrazil v šabloně, musí být v šabloně potřebný kód. Většina šablon náhledové obrázky podporuje, pokud ne a chcete tuto funkci do WordPressu přidat, postupujte podle popisu na stránce na Post Thumbnails WordPress.org.

Je tedy potřeba přidat do functions.php například:

if ( function_exists( 'add_theme_support' ) ) {
add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 150, 150, true );


A na místo, kde se má náhledový obrázek zobrazovat, pak pro obrázek s třídou v CSS alignleft (tedy pro obrázek vlevo obtékaný textem na pravé straně) například:

<?php the_post_thumbnail('thumbnail', array('class' => 'alignleft')); ?>


Pořád je ale nutné náhledový obrázek vybrat a ke každému příspěvku ho ručně přidat. Pokud to nechcete dělat, použijte plugin Auto Post Thumbnail. Po jeho aktivování bude automaticky vytvářet náhledový obrázek a přidávat jej ke každému příspěvku, který publikujete. Podmínkou samozřejmě je, aby měl z čeho takový obrázek vytvořit, tedy musí být nějaký v obsahu příspěvku.

Plugin umí vytvořit náhledové obrázky ke všem příspěvkům i zpětně, po aktivací stačí jít na Nastavení – Auto Post Thumbnail a kliknout na tlačítko Generate Thumbnails. Plugin pak vytvoří náhledové obrázky ke všem příspěvkům, které ještě žádný nemají.

Auto Post Thumbnail najdete na adrese wordpress.org/plugins/auto-post-thumbnail