Archívy dle tagu: wordpress

WordPress

Můj první WordPress plugin – fakt to nebolí

Pluginy na míru jsem pro klienty, kde mám na starosti řízení rozvoje webu, nechával psát často. Ale na vlastních projektech jsem, co šlo, cpal v lepším případě do child theme a co nešlo – to taky.

Nedávno jsem dostal následující zadání: potřebujeme vypsat pouze aktivní pozice (a neaktivní je nutné zřetelně označit, že již nejsou aktuální).

Číst více
Marketing Management

Nezdržujte svého programátora! 5 tipů jak si můžete užívat komunikaci s ajťáky

Pro většinu lidí je komunikace s ajťáky noční můrou – raději dvacet kliků než jeden telefonát s ajťákem… nebo vlastně… ajťáci se neradi baví po telefonu a jsou nepříjemní, když jim napíšu e-mail, tak nejspíš nepodepíšou, takže jediné co zbývá, je nahodit ticket a čekat. Následně si přes ticketing vyměníme dvacet zpráv, kdy se pokaždé dozvím, že chyba je u mě, a pak se to možná vyřeší, když se naštvaný ajťák konečně osobně staví.

Číst více
WordPress

Když je WordPress příliš velký – přehled malých CMS systémů a ukázka využití Sitecake

I když je WordPress modulárním systémem a v základní verzi po instalaci, bez pluginů a se základní šablonou je relativně malý a rychlý, i tak instalační verze obsahuje 1432 souborů ve 131 složkách (verze 4.6). Navíc je nutné i ten nejmenší WordPress téměř stále aktualizovat. Plus musí být WordPress napojený na databázi. Pokud chceme zrovna udělat one-page web bez nutnosti blogu, může být WordPress už overkill.

Ve skupině Frontendisti.cz na Facebooku se v květnu strhnula zajímavá diskuse, kdy účastníci doporučovali CMS menší než WordPress. Rozhodl jsem se je vyzkoušet pro nový microsite Webova-analytika.cz.

Sitecake CMS přihlášení


Malá CMS

Toto jsou doporučovaná malá CMS (seřazeno dle počtu zmínek):

  • GetSimple CMS
  • Jekyll
  • BoltCM
  • Grav
  • Webhook
  • Pagekit
  • Perch
  • Sitecake
  • Impresspages

Nemám bohužel znalosti pro hloubkové srovnání všech těchto CMS. Vyzkoušel jsem tedy jenom některé a zde jsou mé nesystematické poznámky:

  • zkontrolujte si vždy poslední aktualizaci a jak aktivní je komunita;
  • používáte-li základní Wedos hosting, připravte se na možné problémy – například u Pagekit dostanete bezpečnostní chybu, GetSimple CMS hned hlásí server error a když se přes něj dostanete, je problém s cestami. Stejný problém je i u Grav. Řešení se dají vygooglit, ale vše se mi zdá jako workaround. Druhým řešením je nepoužívat Wedos, ale to může být pro začátečníka náročné;
  • výbornou věcí u GetSimple CMS (a některých dalších) je, že nevyužívají databázi, data jsou uložena v XML. Přesuny jsou potom velmi snadné;
  • BoltCM, Grav, Sitecake a Pagekit mají skvělé šablony, většina je zdarma nebo velmi levně;
  • Webhook – nevýhoda i výhoda – nutnost instalovat desktop aplikaci

Ukázka využití Sitecake CMS pro Webova-analytika.cz

1. V prvé řadě jsem si zřídil hosting na Wedosu s HTTPS od Let’s Enrypt.

2. Zakoupil jsem Sitecake CMS. Nebrandovanou verzi pořídíte za 39 dolarů včetně všech budoucích updatů. Stáhl jsem si téma Creative by Start Boostrap.

3. Připravil jsem si texty, obrázky apod., upravil jsem barevné schéma tématu přímo v CSS.

4. Vložil jsem Boostrap kontaktní formulář, který jsem našel na webu Colorlib. K formuláři jsem vytvořil snadné PHP pro odesílání. Recaptcha bude následovat brzy.

5. Označil jsem prvky pomocí class sc-content, které mají být v budoucnosti snadno editovatelné pomocí Sitecake.

Sitecake CMS přihlášení

6. Přidal jsem Google Tag Manager a provedl nejzákladnější nastavení Google Analytics.

7. Nastavil jsem cookie consent pomocí skriptu od Silktide.com.

8. Provedl jsem validaci webu přes W3 validator.

9. Upravil jsem meta tagy, og:tagy a ověřil web v Google Webmasters.

10. Spustil jsem web a vytvořil tento článek.

Celý proces 1 – 10 mi trval okolo 7 hodin, včetně učení.

Budu rád, když napíšete své zkušenosti z CMS do komentářů nebo ohodnotíte web webova-analytika.cz po jakéhokoliv stránce.

Číst více
WordPress

WP REST API – Praktický průvodce od úplných začátků

V poslední době se o WordPress REST API často píše. Dlouho
očekávanou událostí bylo přidání API přímo do jádra WordPressu 4.4. Tento
článek má za cíl přiblížit, co je WordPress API, jak je možné jej použít a následně
demonstrovat využití API v jazyce PHP a jQuery.

image


Co je WP REST API?

V překladu se jedná o WP (WordPress) REST (Representational
State Transfer) API (Application Programming Interface). Můžeme tedy
říci, že je to rozhraní pro programatické ovládání, úpravu a získávání dat z WordPressu
dle předem definované architektury. REST API není výhrada WordPressu, jedná se
v podstatě o standard. Více v článku REST:
architektura pro webové API
. Takže abych to řekl naprosto lidsky: dostanete
se k WordPressu zadem a můžete snadno pracovat s daty odkudkoliv a
tahat je kamkoliv.

Zadejte si do prohlížeče toto URL: http://www.allten.cz/wp-json/wp/v2/posts/1019.
Toto je JSON výstup získaný pomocí metody pro přístup k datům GET ze
stránky Allten.cz. Konkrétní se jedná o tento příspěvek: http://allten.cz/darujte-efektivitu-jako-vanocni-darek/,
jehož ID je 1019.

JSON (JavaScript Object Notation) je způsob zápisu dat
nezávislý na počítačové platformě, určený pro přenos dat. Jak vidíte na
odkazu http://www.allten.cz/wp-json/wp/v2/posts/1019,
je to příspěvek zobrazený jako objekt a vše je přesně strukturované. Pole mají
jasně definované názvy id, title, link atd.  

image


Toto je ukázka využití metody GET. Pro její využití stačí
zadat adresu do prohlížeče. GET není jediná metoda. REST podporuje další metody
POST (vytvořit), PUT (aktualizovat), DELETE (odstranit). Tento článek se bude
zabývat zejména metodou GET, jelikož je pro demonstraci nejpraktičtější a
nevyžaduje žádnou autentifikaci.

Pomocí těchto metod je možné pracovat defacto s celým WordPressem,
např. s příspěvky (včetně custom post types), stránkami, komentáři, taxonomiemi,
uživateli…

K čemu je možné WP REST API využít?

Možností je nespočet, já jsem již využil, nebo plánuji
využít následující:

  • Mám web, který není na WordPressu a chci na něm zobrazovat
    nejnovější příspěvky na WordPress blogu.
  • Mám pět micrositů a potřebuji, aby se část obsahu
    aktualizovala vždy dle hlavního webu.
  • Chci udělat předchozí, ale nechci pouze, aby se
    obsah/příspěvky zobrazovaly, ale aby se přímo nahrály, pokud je na druhé straně
    také WordPress.
  • Chci na klientském portálu zobrazovat novinky z dané služby.
  • Nedávno jsem viděl demonstraci mobilní aplikace, která byla
    spravována přes WordPress.

Potenciál WP API může jít ještě dále. Např. pomocí PPC se
v konkrétní den nejlépe prodávají Saně XYZ. Z analytického systému
zjistíme tato data, a jelikož e-shop funguje na WooCommerce, pomocí WP REST API
upravíme, aby se tyto saně zobrazovaly jako doporučovaný produkt a ještě k tomu
aby se o 10 % zlevnily.

Praktické aplikace WP REST API – krok za krokem

Předně je nutné aby WordPress z kterého data získáváme,
byl ve verzi 4.4 a měl nainstalovaný plugin pro WP REST API v2 (aktuální
verze k 25.12.2015).

Seznam všech možných
zdrojů a metod naleznete na v2.wp-api.org.
Toto je naprosto nezbytný zdroj, kde např. zjistíte, že pro vypsání obsahu
příspěvku musíte použít metodu GET a adresu http://www.example.com/wp-json/wp/v2/posts/[id].

Vypsání obsahu článku pomocí WP API

Cílem je zobrazit na wp-api-demo.marketingmakers.net nadpis
a obsah článku z Allten.cz. První příklad ukazuje zobrazení tohoto článku
pomocí PHP. Příklad je kompletně komentovaný:

<!doctype html>
<html>
<head>
 <meta charset="utf-8" />
 <title>WP API - PHP - výpis obsahu příspěvku</title>
</head>
<body>
<?php
// nastavení připojení k webové stránce - stáhnuto někde na netu
$curl = curl_init();
curl_setopt_array($curl, array(
    CURLOPT_RETURNTRANSFER => 1,
    CURLOPT_URL => 'http://www.allten.cz/wp-json/wp/v2/posts/1019',
    CURLOPT_USERAGENT => 'Codular Sample cURL Request'
));
// odeslání příkazu a uložení odpovědi do proměnné
$resp = curl_exec($curl);
// uzavření requestu
curl_close($curl);
// odpověď je přijata jako JSON, ten je třeba dekódovat
$json_data = json_decode($resp, true);
// první si uložím nadpis článku - jelikož cesta je content.rendered
// získám nejdříve první pole a následně proměnnou.
$json_data_help = $json_data["content"];
$obsah = $json_data_help["rendered"];
// a nyní stejným postupem získám obsah článku
$json_data_help_two = $json_data["title"];
$nadpis = $json_data_help_two["rendered"];
// Teď už jenom vše vypsat
?>

<h1><?php echo $nadpis; ?></h1>
<div><?php echo $obsah; ?></div>

</body>
</html>

Vyzkoušejte na: http://wp-api-demo.marketingmakers.net/obsah_prispevku_php.php

Stejného výsledku je možné dosáhnout i pomocí dalších
jazyků, zejména jsem vygooglil příklady s ASP, Ajax. Jelikož je mi velmi
sympatický jQuery a zároveň se vykonává až na straně klienta, přikládám ukázku:

<!doctype html>
<html>
<head>
 <meta charset="utf-8" />
 <title>WP API - jQuery - výpis obsahu příspěvku</title>
 <script src="https://code.jquery.com/jquery-1.10.2.js"></script> 
 <!-- Jelikož je využito jQuery, je nutné vložit knihovnu -->
</head>
<body>

<script>
// definuji proměnné, které budu dále využívat
var nadpis;
var obsah;
// uložím do proměnných data z JSON
$.getJSON("http://www.allten.cz/wp-json/wp/v2/posts/1019", function(json){
           myjson = json;
		   nadpis = myjson.title.rendered;
		   obsah = myjson.content.rendered;		   
      })
  .done(function() {
    // vypíšu data do vhodných elementů na základě ID
    $("#nadpis").append(nadpis);
    $("#obsah").append(obsah);
  });
</script>
<!-- Zde mám připraven prázdný nadpis a prázdný div, kam vložím data -->
<h1 id="nadpis"></h1>
<div id="obsah"></div>

</body>
</html>

Vyzkoušejte na: http://wp-api-demo.marketingmakers.net/obsah_prispevku_jquery.html

Vypsání seznamu příspěvků pomocí WP API

V příkladu jsou vypsány pouze titulky příspěvků. Pokud
máte základy HTML/PHP/JS, dokážete si snadno do příkladu dosadit i odkaz. Mírné
komplikace jsou s náhledovými obrázky (řešení zde
– přidání adresy náhledového obrázku do JSON výstupu) a s custom post
types (řešení
zde
– přidání CPT do API).

Pokud programování není vaším šálkem kávy, vznikají již
pluginy pro práci s API. Velmi nadějný se zdá REST API Post Embeds.

Vypsání seznamu příspěvků pomocí PHP:

<!doctype html>
<html>
<head>
 <meta charset="utf-8" />
 <title>WP API - PHP - výpis seznamu příspěvků</title>
</head>
<body>
<?php
// nastavení připojení k webové stránce - stáhnuto někde na netu
$curl = curl_init();
curl_setopt_array($curl, array(
    CURLOPT_RETURNTRANSFER => 1,
    CURLOPT_URL => 'http://www.allten.cz/wp-json/wp/v2/posts/?filter[posts_per_page]=25',
    CURLOPT_USERAGENT => 'Codular Sample cURL Request'
));
// odeslání příkazu a uložení odpovědi do proměnné
$resp = curl_exec($curl);
// uzavření requestu
curl_close($curl);
// odpověď je přijata jako JSON, ten je třeba dekódovat
$json_data = json_decode($resp, true);

?>
<ul>
 <?php
 // for cyklus, který získává titulky. Jedná se o vnořené pole
    for ($i = 0; $i < count($json_data); ++$i) {
        $help = $json_data[$i];
		$help_two = $help["title"];
		echo "<li>". $help_two["rendered"] ."</li>";
    }
	?>
</ul>

</body>
</html>

Vyzkoušejte na: http://wp-api-demo.marketingmakers.net/seznam_prispevku_php.php

Vypsání příspěvků pomocí jQuery:

<!doctype html>
<html>
<head>
 <meta charset="utf-8" />
 <title>WP API - jQuery - výpis seznamu příspěvků</title>
 <script src="https://code.jquery.com/jquery-1.10.2.js"></script> 
 <!-- Jelikož je využito jQuery, je nutné vložit knihovnu -->
</head>
<body>

<script>
// definuji proměnné, které budu dále využívat
var prispevky;
$.getJSON("http://www.allten.cz/wp-json/wp/v2/posts/?filter[posts_per_page]=25", function(json){
           prispevky = json;   
      })
  .done(function() {
    for ( var i = 0, l = prispevky.length; i < l; i++ ) {
    $("#vypis").append("<li>" + prispevky[i].title.rendered + "</li>");
	// typický for cyklus, který zajistí výpis příspěvků a připojení 
	// každého dalšího článku do seznamu odrážek.
}
  });  
</script>
<!-- Zde mám připraven prázdný odrážkový seznam -->
<ul id="vypis">
</ul>

</body>
</html>

Vyzkoušejte na: http://wp-api-demo.marketingmakers.net/seznam_prispevku_jquery.html

Postman – nezbytný nástroj pro REST API

Výborným nástrojem pro práci s REST API, nejen na
WordPressu, je rozšíření
pro Chrome – Postman
. Naprosto intuitivně, v přehledném uživatelském
prostředí si můžete všechny příkazy vyzkoušet dříve, než je budete programovat.

image


A teď hurá na WordPress REST API. Před tím pár vět…

Jak vidíte, REST API se zdá být velmi nadějným „nástrojem“,
který posune WordPress opět mnohem dále. 

Nedávno se mi klient ptal, jestli je
to bezpečné
. No… je to asi tak bezpečné, jako každý jiný WordPress plugin, takže
bych se využití API nebál. Aktuální verze API je 2.0 (25.12.2015). Tento článek
nemusí pro novější verze fungovat, principy by měly zůstat stejné.

Dále bych chtěl upozornit na rizika využití jQuery/Ajax. Jedná se
o jazyk, který je závislý na povoleném Javascriptu, klientském prostředí a tento
obsah nebude vhodně hodnocen vyhledávači. Pro účel práce s API je PHP/ASP
rozhodně lepším řeším. Na druhou stranu, jQuery je velmi jednoduché a pokud vám
jde o rychlé řešení bez ohledu na vyhledávače, může být užitečné.

Zároveň vás prosím, napište své dotazy, nápady a use cases
do komentářů
. Moje druhá prosba jde za zkušenými programátory – napište, jak
byste kód zjednodušili a vylepšili.

Těším se na Vaše reakce a nápady!  

Číst více
JavaScript/PHP

SyntaxHighlighter

SyntaxHighlighter

Číst více
WordPress

Prezentace a videa z poslední WordPress konference – E-mailing a SEO

Na poslední WordPress konferenci jsem přednášel základy SEO  a e-mail marketing. Zde přináším prezentace a videa. Doporučuji rovněž přednášky dalších vystupujících (kanál NasWP.cz na YouTube).

Pro zkušené specialisty opakuji, že prezentace jsou určené začátečníkům. Budu tedy rád za diskusi pod článkem, která bude toto brát na zřetel. Jakékoliv dotazy, nápady prosím rovněž do komentářů nebo na mail.

Číst více
Konference, školení, novinky

Už v sobotu přednáším na WordPress konferenci!

V sobotu Vám na konferenci Jak vytvořit stránky na WordPressu pomůžu se SEO a e-mail marketingem! 

A nejen to, i díky Marketing Makers se konference pořádá, jelikož jsme stříbrným sponzorem události! Pro zájemce, máme ještě jeden volňásek. Ačkoliv cena 99 Kč za takovou konferenci, to je přeci směšný. 

image


Těšíme se na Vás! 

image

Číst více
Konference, školení, novinky

Konference Jak vytvořit stránky na WordPressu

Konference Jak vytvořit stránky na WordPressu

Číst více
Performance marketing Webová analytika

Sklik konverze v pluginu Contact Form 7

Sklikové konverze se zachytávají pomocí iframe. Vynikající plugin Contact Form 7 pro WordPress umožňuje nastavit skript, který se má vykonat po odeslání formuláře (viz obrázek dole, zaslání události do Analytics).

Problémem je, že sem není možné vložit iframe a ani iframe pomocí document.write. Ačkoliv s document.write to bude korektní JavaScript, odeslání formuláře skončí prázdnou stránkou nebo v lepším případě přesměrováním.

image

Jak zaslat konverzi do Sklik z formuláře CF 7 ve WordPress?

Nejeelegantnější metodou je využití Google Tag Manager, který vykoná operaci asynchroně a do GTM pošleme pouze dataLayer, že byl formulář odeslán. Následně je možné poslat informace do jakéhokoliv systému. Pokud vám předchozí text přijde jako sci-fi, není to cesta pro vás. Navíc je často implementace GTM u malého webu “kanón na vrabce”.

Proto jsem s využitím událostí, které zasílá Contact Form 7 vytvořil následující skript, který stačí vložit do footer.php (Vzhled – Editor – footer.php) před uzavírací tag </body>.

image

<script>jQuery(document).on('mailsent.wpcf7', function () {
jQuery(".sklikframe").attr("src","//c.imedia.cz/checkConversion?c=000000000&color=ffffff&v=");    
console.log('Konverze Sklik zapoctena');
});</script>
<iframe class="sklikframe" width="1" height="1" frameborder="0" scrolling="no" src="">
</iframe>

Pouze místo c=000000000 vložte svůj kód, který si vygenerujete v Sklik (Nástroje – Sledování konverzí – Vytvořit konverzi).

Co skript dělá?

Skript poslouchá, zda nastalo k odeslání formuláře (mailsent.wpcf7). Dále je už při načtení stránky vložen prázdný iframe. Jakmile je formulář odeslán, nahradí skript zdroj iframu. Že vše funguje, si můžete ověřit v nástrojích pro vývojáře, kde se v sekci Source načte zdroj c.imedia.cz a zároveň se v Console objeví Konverze Sklik započtena. S událostmi CF 7 se dá velmi dobře pracovat, přehled událostí naleznete na StackOverflow.

Update: Nápady z Facebooku

Po sdílení na Facebooku se objevilo několik hezkých nápadů, zejména jQuery.append.

Vladimír Smitka – A proč nepřesměrovat po odeslání formuláře na děkovací stránku, kde jsou kódy vloženy jednoduše staticky? Já tedy fandím GTM, ale přesměrování mi přijde nejjednodušší způsob, jak měřit konverze (poznámka – lze udělat pomocí window.location).

Druhým nápadem je využít jQuery.append:

jQuery('<iframe class="sklikframe" width="1" height="1" frameborder="0"
scrolling="no" src="//c.imedia.cz/checkConversion?c=000000000&color
=ffffff&v=">').appendTo('body');

Upozornění – vypněte cachovací plugin

Pokud používáte cachovací plugin, vypněte minifikaci JavaScriptu. Nejen že nemusí fungovat korektně tento skript, ale pravděpodobně nebudou korektně fungovat ani další analytické a retargetingové skripty. Před nasazením vše pečlivě otestujte.

Číst více
WordPress

Report ze 7. WordPress konference z Hluboké nad Vltavou v kostce

V sobotu 3. října jsem vyrazil do svých oblíbených jižních Čech na 7. WP konferenci. A bylo to opět super, poklona organizátorům a přednášejícím. A jelikož jsou již k dispozici videa, bude můj report opravdu v kostce. Tři až čtyři body ke každé přednášce, co jsem si odnesl.

image

Wedos – WordPress na VPS SSD

  • Z mého pohledu – cca 40 minut magie na Linuxu.
  • Bezpečnostní doporučení: do hesla dejte speciální znak a nepřihlašujte se jako root.
  • Pro ty, kteří nemají šajna jak nastavit VPS, vznikne „prasárna“ – něco jako VPN – už aby to bylo.

Adam Ježek – Jak optimalizovat pro návštěvníky webů stojících na WordPressu

  • Trošku SEO a UX neuškodí.
  • Zopakujme si délku popisků. Aktuální doporučení 55 znaků (ale bacha na šířku znaků, jelikož Google hodnotí na základě pixelů).
  • Když chcete dělat web pro Čechy, ať je česky a ne anglicky. Používejte správně hreflang tagy.

Milan Pichlík – Automatizované produktové katalogy na WordPressu

  • Změna vnímání – jedná se v podstatě o microsite eshopu.
  • Sežeňte si kvalitní feed, pro začátek využijte WP All Import za 99 USD a vytvořte si affialite eshop. Šablona musí podporovat WooCommerce a schema.org
  • Super trh je ČR, jelikož má Seznam.
  • Zaměřte affiliate eshop na longtaily.

Borek Bernard – krátký update o VersionPress v.2

  • Perfektní a inspirativní příběh od začátku VP do dneška. Borek popsal i začátky, jak získávali prostředky a jak jim pomohlo, když o nich napsal WP Tavern nebo Hacker news.
  • VersionPress se stále vylepšuje, ale limitace jsou pořád značné.
  • Ale už teď je možné jej efektivně využívat a vracet změny pomocí „Zpět jako ve Wordu“

Jan Čejka – Automatizace prodeje ve WordPressu

  • Vyvinul plugin pro fakturaci nad GoPay a automatizaci procesu prodeje.
  • Lze využít s homogením produktem – např. eshop, videa apod. poté je web naprosto automatizovaný.
  • Cena je nyní tak nízká, že konkurence v publiku doporučila zdražení (které podle Honzy přijde).

Vláďa Musílek – WP REST API

  • WordPress se mění. Nyní je možné WP používat jako backend jakéhokoliv systému a pomocí API z něj načítat pouze vybrané informace.
  • REST API je nyní dostupné pouze jako plugin, snad se brzy integruje do samotného jádra WordPressu.
  • Se zabezpečením je to trošku sporné, ale pro určité operace je nutné se už teď přihlásit.

2046 – Jak odolat masivní návštěvnosti

  • Za mě trošku paskvil, který je ale nutné aplikovat, když opravdu hrozí masivní návštěvnost. Aneb pojďme vyvinout web na WP, vložíme ho na live.neco.cz a následně na neco.cz vložíme čistou html verzi. Nedochází k připojení k databázi, bezpečnostně dokonalé, rychlé odpovědi, minimální zatížení serveru.
  • Problém s předchozím způsobem jsou dynamické věci, ale jde řešit externími službami (komentáře od Facebooku, e-mail marketing formy od MailChimpu a nebo i WP REST API).
  • Dá se řešit nástroji, ale výsledek není vždy 100% a je nutné dolazovat.

Vladimír Smitka – Analýza výkonu (Xdebug, Query Monitor)

  • Vláďa killer. Super přednáška, jak zanalyzovat a optimalizovat výkon (nejen) WordPressu.
  • Nebo vlastně tři přednášky a u té poslední jsem jenom žasnul.
  • Pluginy a serverové nástroje pro zjištění, kde je slabé místo WordPressu – doporučené nástroje P3 profiler, Query Monitor, nejvíce oslavovaný Blackfire.io.
  • Doporučuji shlédnout video a prezentaci.

Takže WordPress konference byla opět super a už jenom vše vyzkoušet v praxi.

Číst více
1 2