Archívy dle tagu: wordpress

JavaScript/PHP Webová analytika WordPress

Sledování odeslání formulářů v Contact Form 7 pomocí GTM

Plugin CF 7 je velmi populární WordPress plugin, vždy aktualizovaný, lehce použitelný a skvěle měřitelný.

Měřit plugin CF 7 je možné několika postupy:

Číst více
Webová analytika WordPress

Nasazení Enhanced Ecommerce na WordPress za hodinu

Zatím mám ten dojem, že se klienti, hlavně majitelé menších eshopů, Enhanced Ecommerce bojí jak čert kříže. Hlavně se obávají finanční náročnosti. Kouzlo na tom je, že např. na WordPressu s eshopovým modulem WooCommerce je možné Enhanced Ecommerce naimplementovat za hodinu.

Číst více
Content in English WordPress

Why and how did I left Tumblr and migrate to WordPress?

I had been using Tumlbr for more than 4 years after I left Posterous. Unfortunately, Tumblr started to be really poor for my needs and it also limited me from development of my website. The main reasons why I decided for WordPress -> Tumblr migration were:

Číst více
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
1 2