Prezentacja z pierwszego WordUpa w Łodzi. Opisuje 10 sposobów na wykorzystanie widżetu GK News Show Pro.

1. Widżet GK News Show Pro
na 10 sposobów

3. Tomasz Dziuda
✓
Lead Developer
✓
@dziudek
✓
wp.dziudek.pl
✓
zebymniezapomnial.tumblr.com

4. GK News Show Pro

7. Gdzie szukać? (beta)
!
Github: https://github.com/GavickPro/GK-News-Show-Pro
!
Dokumentacja:
https:/
/github.com/GavickPro/GK-News-Show-Pro/wiki

8. Architektura widżetu

9. Kontener
Źródło
danych
Wpis
Format
wpisu

10. Składowe wpisu
✓
Tytuł
✓
Tekst
✓
Grafika
✓
Blok informacji
✓
Hiperłącze

11. Kontener
✓
Tworzy strukturę otaczającą wpisy
✓
Pozwala na tworzenie dowolnych układów
(i zachowań)

12. Źródło danych
✓
Źródło informacji wyświetlanych we wpisie
✓
Generuje elementy wpisu
✓
Mapuje dane dla formatu wpisu

13. Format wpisu
Opisuje strukturę wpisu za pomocą wstawek
zamienianych na odpowiednie wartości:
{ID} {URL} {TITLE} {TEXT}
{IMAGE_FULL}
{IMAGE_LARGE}
{IMAGE_MEDIUM}
{IMAGE_THUMBNAIL}
{CATEGORIES}
{AUTHOR_ID}
{AUTHOR_NAME}
{AUTHOR_URL} {DATE}
{COMMENT_COUNT}
{COMMENTS}
<h3>
<a href=“{URL}”>{TITLE}</a>
</h3>
!
<p>{TEXT}</p>
!
<small>{DATE}</small>

14. Konfiguracja

15. Wykorzystanie

16. #1 Czytnik RSS

19. #2 Galeria produktów
z WooCommerce

22. #3 Lista wpisów

25. news-list.format
<span>{DATE}</span>
<h3>
<a href="{URL}" title=“{TITLE}">{TITLE}</a>
</h3>
<p>
Dodane przez:
<a href=“{AUTHOR_URL}">{AUTHOR_NAME}</a>
</p>
Kod CSS: https:/
/gist.github.com/dziudek/7344172

26. #4 Galeria

29. #5 Filtry obrazów

30. Więcej o implementacji filtrów:
!
http://wp.dziudek.pl/devlog/wlasne-filtry-obrazu-sepia-greyscale-w-wp_image_editor

32. #6 Podmiana grafik

33. ✓ Zastosowanie
zupełnie innej grafiki niż ta
we wpisie
!
✓ Większa
optymalizacja grafik
!
✓ Lepsze
kadrowanie grafik

34. wp-content/uploads/gk_nsp_cache/overrides/NAZWA_PLIKU.jpg

35. #7 Blok z wpisami

38. #8 Treści z różnych
kategorii

41. #9 Offset

44. #10 Rekomendacje

46. testimonials.json
Kontener
Źródło
danych
Wpis
własny kod CSS
testimonials.format
Format
wpisu

47. testimonials.json
[
]
{
},
…
"URL": "http:/
/www.gavick.com",
"title": "High quality",
"text": "Proin non…”,
"author_name": "Tomasz Dziuda",
"image": “path/to/avatar.jpg”

48. testimonials.format
<blockquote>
<img src="{IMAGE}" alt="Testimonial" />
<h3>{TITLE}</h3>
<p>{TEXT}</p>
<strong>{AUTHOR_NAME}: <a href="{URL}">{URL}</
a></strong>
</blockquote>

49. CSS: https:/
/gist.github.com/dziudek/7356737

50. Pytania?