wordup Łódź #1 - widżet gk news show pro na 10 sposobów
DESCRIPTION
Prezentacja z pierwszego WordUpa w Łodzi. Opisuje 10 sposobów na wykorzystanie widżetu GK News Show Pro.TRANSCRIPT
Widżet GK News Show Pro na 10 sposobów
✓ Lead Developer
✓ @dziudek
✓ wp.dziudek.pl
✓ zebymniezapomnial.tumblr.com
Tomasz Dziuda
GK News Show Pro
Gdzie szukać? (beta) !
Github: https://github.com/GavickPro/GK-News-Show-Pro !
Dokumentacja: https://github.com/GavickPro/GK-News-Show-Pro/wiki
Architektura widżetu
Wpis
Źródło danych
Format wpisu
Kontener
Składowe wpisu
✓ Tytuł
✓ Tekst
✓ Grafika
✓ Blok informacji
✓ Hiperłącze
Kontener
✓ Tworzy strukturę otaczającą wpisy
✓ Pozwala na tworzenie dowolnych układów (i zachowań)
Źródło danych
✓ Źródło informacji wyświetlanych we wpisie
✓ Generuje elementy wpisu
✓ Mapuje dane dla formatu wpisu
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>
Konfiguracja
Wykorzystanie
#1 Czytnik RSS
#2 Galeria produktów z WooCommerce
#3 Lista wpisów
<span>{DATE}</span> <h3> <a href="{URL}" title=“{TITLE}">{TITLE}</a> </h3> <p> Dodane przez: <a href=“{AUTHOR_URL}">{AUTHOR_NAME}</a> </p>
news-list.format
Kod CSS: https://gist.github.com/dziudek/7344172
#4 Galeria
#5 Filtry obrazów
Więcej o implementacji filtrów: !
http://wp.dziudek.pl/devlog/wlasne-filtry-obrazu-sepia-greyscale-w-wp_image_editor
#6 Podmiana grafik
✓Zastosowanie zupełnie innej grafiki niż ta we wpisie
!
✓Większa optymalizacja grafik
!
✓Lepsze kadrowanie grafik
wp-content/uploads/gk_nsp_cache/overrides/NAZWA_PLIKU.jpg
#7 Blok z wpisami
#8 Treści z różnych kategorii
#9 Offset
#10 Rekomendacje
Wpis
Źródło danych
Format wpisu
Kontener
testimonials.json
testimonials.format
własny kod CSS
[ { "URL": "http://www.gavick.com", "title": "High quality", "text": "Proin non…”, "author_name": "Tomasz Dziuda", "image": “path/to/avatar.jpg” }, … ]
testimonials.json
<blockquote> <img src="{IMAGE}" alt="Testimonial" /> <h3>{TITLE}</h3> <p>{TEXT}</p> <strong>{AUTHOR_NAME}: <a href="{URL}">{URL}</a></strong> </blockquote>
testimonials.format
CSS: https://gist.github.com/dziudek/7356737
Pytania?