Pluginy, návody, tipy, triky a šablony pro WordPress
Během posledních dní se objevila docela zajímavá informace (česky) o tom, že mohou být některé weby penalizovány a ztrácet návštěvnost z vyhledávačů, pokud mají blokované indexování JS a CSS pomocí souboru robots.txt. Důležitý je ale zejména fakt, že je v současné době částečně postižen téměř každý web ve WordPressu. WordPress automaticky generuje soubor robots.txt, a to prostřednictvím funkce […]
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.
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í.
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.
CryptX
http://wordpress.org/plugins/cryptx/
No more SPAM by spiders scanning you site for email adresses. With CryptX you can hide all your email adresses, with and without a mailto-link, by converting them using javascript or UNICODE. You can choose to add a mailto-link to all unlinked email adresses with only one klick at the settings.
*
There is also a core WordPress function for it: antispambot().
The usage of the function is pretty simple:
<?php
$my_email_address = "my.secret.email.address@gmail.com";
$my_email_address_cloaked = antispambot( $my_email_address );
echo $my_email_address_cloaked;
?>
But you can’t use PHP in your content (unless you’re using a plugin for that purpose). To use this function in your content, you can utilize a cool little shortcode like the one below. By using the shortcode above, you can cloak email addresses anywhere in your posts.
<?php
function antispambot_sc( $atts ) {
extract( shortcode_atts( array(
'email' => ''
), $atts ) );
return antispambot( $email );
}
add_shortcode( 'antispambot', 'antispambot_sc' );
// Usage: [antispambot email="my.cloaked.email.address@gmail.com"]
?>
*
případně
function cwc_mail_shortcode( $atts , $content=null ) {
for ($i = 0; $i < strlen($content); $i++) $encodedmail .= "&#" . ord($content[$i]) . ';';
return '<a href="mailto:'.$encodedmail.'">'.$encodedmail.'</a>';
}
add_shortcode('mailto', 'cwc_mail_shortcode');
Použití shortcode:
[mailto]email@yourdomain.com[/mailto]
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í.
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
Jenom krátce upozorním na jeden drobný trik, který pomůže usnadnit práci, zejména pokud používáte šablony, které mají definovaných mnoho oblastí pro widgety. Na začátek něco pro připomenutí. Ve WordPressu 3.9 je možné upravovat, přidávat a přemisťovat widgety přímo v rámci aktuálního náhledu (menu Vzhled – Přizpůsobit). Nemusíte se ale už obávat, že hrátkami s nastavením widgetů […]
WP Tab Widget
http://wordpress.org/plugins/wp-tab-widget/screenshots/
AJAXified plugin which loads content (recent, popular, comments…) by demand, and thus it makes the plugin incredibly lightweight.
Whiteboard framework for WordPress was developed to speed up the development of WordPress themes. Whiteboard does so by eliminating the time spent on code common to all WordPress themes and includes non-intrusive code that improves the overall WordPress theme in many ways – including SEO, speed, usability, mobile support, and multi-lingual support.
Whiteboard is not like most other WordPress Frameworks out there. While most other WordPress Frameworks include a mess of styles, functions, and content areas that have to be cleaned out for nearly every project, Whiteboard remains a true WordPress Framework. Whiteboard includes only the core WordPress structure and does not get fancy with unnecessary functions. While Whiteboard does include Less Framework and a minimal theme.
