Školení WordPressu

Chcete si sami vytvořit webové stránky, které by šly snadno upravovat a doplňovat? Rádi se dozvíte nové informace o redakčním systému WordPress? Navštivte WordPress workshop od společnosti H1.cz, kde se vám budu věnovat jako lektor a během 2 dnů vás s tímto CMS systémem naučím pracovat.

“Na dvoudenním workshopu se naučíte, jak vyrobit vlastní web na nejrozšířenějším CMS systému – WordPress. Díky praktickým ukázkám se mnohem rychleji naučíte pracovat s tímto systémem. Cílem workshopu je, abyste si připravili základní kostru svého nového firemního webu.”

Workshop je určený převážně pro začátečníky a mírně pokročilé.

Co se na workshopu naučíte:

  • nainstalovat systém WordPress
  • ovládat jej na uživatelské ale také administrátorské úrovni
  • vytvořit strukturu webu
  • psát a spravovat příspěvky a stránky
  • používat kategorie a štítky
  • pracovat s fotkami a jiným externím obsahem
  • instalovat šablony a pluginy
  • spravovat komentáře

Pro mírně pokročilejší uživatele mám na kurzu připraveno několik okruhů a zajímavostí:

  • editace šablon a práce s widgety
  • WordPress a SEO
  • propojení s Google Analytics
  • WordPress a sociální sítě
  • jak stavět web na WordPressu profesionálně

První vypsaný termín workshopu je 24. červenec 2012 (úterý) v Praze. Budu rád, když vás tam uvidím. Registrovat se můžete na stránkách WordPress workshopu.

Zaujal vás workshop? Máte dotazy k obsahu školení? Rád vám na cokoliv odpovím v komentářích.

Čestina pro plugin eshop (WordPress)

Už déle než půl roku běží můj eshop s hodinkami Wenger postavený čistě na WordPressu. A to díky tomuto pluginu – eshop. Nebudu tvrdit, že všechno šlo lehce, ale nakonec se dobrá věc podařila.

Dnes bych se s vámi chtěl podělit o český překlad pro tento plugin. Stáhnout si jej můžete zde – eshop-cs_CZ. K jeho fungování budete potřebovat nainstalovat ještě jeden plugin – eshop Languages plugin.

Pokud nebudete s mým překladem spokojeni, tak k jeho úpravě můžete použít program Poedit (pro Mac i Windows).

Aktualizováno: 26.3.2013 jsem nahrál novější verzi češtiny. Stahujte opět na eshop-cs_CZ.

Upload obrázků z URL

Určitě už jste někdy řešili problém, že jste v článku použili obrázek z cizího (zcela legálního) zdroje, ale ten po čase z původního zdroje zmizel. To pak mělo za následek, že váš článek (web, aplikace, atd) byl bez původního obrázku a zpětně jej dohledat jinde je většinou problém.

Jak to řešit?

Nahrávat obrázky vždy k sobě. To však s sebou přináší spoustu práce navíc, než jen odkázat na obrázek jinam (stáhnout obrázek k sobě, nahrát jej na FTP, zalinkovat v článku). Pokud vám to, stejně jako mně, přijde zbytečně moc práce, vyzkoušejte plugin Grab & Save.

Po jeho instalaci se vám v nabídce Nahrát/vložit objeví další možnost s názvem Grab & Save. Zde zadáte URL cílového obrázku a plugin už udělá vše za vás. Stáhne soubor, nahraje k vám na server a předloží k vložení do příspěvku. Všechno je rychlé a intuitivní.

Nekonečná smyčka (načítání příspěvků)

Líbí se vám postupné načítání obsahu při doscrollování na konec stránky? Určitě to znáte ze sociálních sítí Google Plus nebo Facebook, kde se tak načítají další a další příspěvky na News Feedu (ať už po dojetí na konec stránky nebo po kliknutí na odkaz). Nově existuje plugin Infinite Scroll, který tuto funkcionalitu zprostředkuje i pro váš blog / stránku postavenou na WordPressu. Nebude tak již potřeba klikat na odkazy Starší články / Novější články, ale návštěvník si pohodlně váš web proscrolluje.

Demo ukázka

Jak výsledný blog funguje se můžete podívat na www.alet.cz. Stačí scrollovat až dolů. Plugin jednoduše načítá za pomoci AJAXu a funkce Load() další a další příspěvky z databáze.

Jak na implementaci

  1. Stáhněte si nejnovější verzi pluginu – Infinite Scroll (zip)
  2. V nastavení pluginu projděte jednotlivé kroky (hlavně zkontrolujte obalující divy a jejich jména)
  3. Vložte do hlavičky vaší šablony knihovnu JQuery
  4. Upravte si třídy, které stylují plugin. Například u #infscr-loading se hodí přidat vlastnost text-align: center, aby se načítání zobrazovalo vycentrované.

Pokud by vám plugin nefungoval, prostudujte si návod.

WordPress a permalinks bez hierarchie

V předchozím článku jsem psal o možnosti drobečkové navigace ve WordPressu. S tím nám ale vyvstává další problém, který musíme řešit, pokud chceme zachovat pěkná a krátká URL. WordPress totiž v URL kopíruje stromovou strukturu stránek. Pokud tedy vytvoříte stránku Ovoce a její podkategorii Jablka, bude výsledná URL vypadat následovně http://www.example.com/ovoce/jablka/. Jak se tedy zbavit hierarchie v URL?

Existuje plugin s názvem Custom Permalinks. Po jeho instalaci můžeme v URL editovat nejen název za lomítkem, ale celou strukturu. Nejlépe to uvidíme na obrázku, kde je vybraná nadřazená sekce stránky a přesto můžeme vytvořit krátké URL bez odkazu na rodiče.

Příklad použití můžeme vidět například zde:

Věřím, že cest, jak tuhle funkcionalitu obejít, je spoustu, ale tahle se mi zdá nejjednodušší a zcela plní svůj účel.

Jak na drobečkovou navigaci ve WordPressu

Pohání váš web WordPress a potřebujete do něj vložit drobečkovou navigaci? Klasicky v případě, kdy na Worpdressu provozujete eshop nebo jiný složitější server, se tato potřeba stává často nutností.

Nejdříve krátká definice, co to drobečková navigace je:

Drobečková navigace (anglicky breadcrumb), je typ navigace, která pomáhá návštěvníkům orientovat se ve struktuře webu. Umožňuje jednak snadno zjistit, kde ve struktuře webu se návštěvník nachází, jednak snadný přechod na stránky ve vyšší úrovni hierarchie webu. Má podobu lineárního seznamu odkazů oddělených obvykle znakem >, např.:

Úvodní stránka > Hlavní kategorie > Podkategorie > Detail produktu

Drobečková navigace by měla obsahovat odkazy na všechny stránky (úvodní stránka, sekce, podsekce), které by musel zákazník projít hlavní navigační strukturou z úvodní stránky. Poslední položka v drobečkové navigaci odpovídá právě načtené stránce a jako jediná není odkazem.

Konvenčně je umístěna pod hlavičkou webu, nad hlavním nadpisem stránky. Drobečková navigace by měla být umístěna na všech stránkách kromě titulní stránky.

Zdroj: H1.cz

Ve výchozím nastavení a vzhledu možnost zobrazení drobečkové navigace neexistuje, a proto se musíme poohlédnout po schopném pluginu. Jedním z takových je Breadcrumb NavXT. Práce s ním je jednoduchá a intuitivní.

Nastavení pluginu se provádí v administračním menu Nastavení > Breadcrumb NavXT. Zde je několik záložek, kde vyplníte znak pro oddělování odkazů, název odkazu pro domovskou stránku, zda má být poslední položka odkazem, apod.

V dalším článku vám povím, jak nastavit Permalinks (hezká a krátká URL) bez toho, aniž by kopíroval hierarchii webu (se zapnutou drobečkovou navigací).

Jak přidat Google Plus One na svůj web

Možností je vždycky několik. Pokud poháníte svůj web na WordPressu, tak můžete použít plugin Plus One Button. Osobně jsem s ním ale moc nepochodil, protože nesplňoval moje požadavky.

Proto doporučuji si Google Plus One na svůj web přidat manuálně. Nezabere to víc než 5 minut a výsledek je přesně podle vašich představ. Použijeme k tomu Google Plus One generátor přímo od Googlu.

Ten nám vygeneruje následující zdrojový kód:

<!-- Place this tag in your head or just before your close body tag -->
<script type="text/javascript" src="http://apis.google.com/js/plusone.js">
 {lang: 'cs'}
</script>
<!-- Place this tag where you want the +1 button to render -->
<g:plusone size="tall"></g:plusone>

Jak už komentáře napovídají. Stačí vložit první část kódu do hlavičky před uzavírající tag Head a nebo do patičky stránky před uzavírací tag Body. Otevřeme si proto editor šablony v našem WordPressu a dáme upravit soubor Header.php, Footer.php nebo Index.php (záleží na vaší šabloně, kde se hlavička či patička webu nachází). Zde pak vložíme následující zdrojový kód:

<script type="text/javascript" src="http://apis.google.com/js/plusone.js">
 {lang: 'cs'}
 </script>

Dalším krokem bude vložení samotného tlačítka do příspěvků. Otevřeme si proto soubory Index.php, Single.php a Page.php (opět v závislosti na tom, kde všude chceme Plus One přidat) a vložíme zde následující kód:

<g:plusone size="tall"></g:plusone>

Abychom zajistili správné fungování tlačítka na úvodní stránce i na stránkách kategorií či archivu, doplníme kód o atribut href a využijeme funkci The_Permalink, která nám vrátí URL právě zobrazovaného článku.

<g:plusone href="<?php the_permalink(); ?>" size="tall"></g:plusone>

Zajistíme tak plusjedničkování právě těch příspěvků, které chceme. Pokud tuto úpravu neuděláme, tak se nám označí vždy celá stránka a po reloadu budou zdánlivě označeny všechny příspěvky na stránce.

Nasazení Google Plus One je opravdu jednoduché. Jaké to bude mít benefity, to uvidíme teprve časem..

Zdroje:

WordPress a firemní web

Krátké povídání o redakčních systémech a úvod do CMS WordPress.

Redakční systémy obecně

Pryč už je doba, kdy se editovaly webové stránky přímo ve zdrojovém kódu a kdo tedy neznal alespoň základy HTML, CSS a nedej bože i skriptovacího jazyka PHP, tak si ani neškrtnul. Dnes už existují efektivní nástroje, díky kterým je editace webového obsahu srovnatelná s prací ve Wordu nebo poznámkovém bloku. Tyto nástroje se nazývají redakční systémy, publikační systémy nebo zkratkou CMS (Content management system). Mnoho z nás se s nimi každodenně setkáváme a přitom nemusíme tušit, že se jedná o právě o redakční systémy. Často jsou integrovány do firemního informačního systému nebo je používáme při psaní svého osobního blogu apod. Mezi CMS rozlišujeme několik podkategorií. Patří sem Web CMS, Enterprise CMS, Document CMS. Podrobně se budeme zabývat pouze webovým CMS a konkrétně WordPressem.

Přečíst celý článek »