Post on 26-May-2015
description
Tomasz Dziuda
✓ Lead Developer w GavickPro
✓ @dziudek
✓ wp.dziudek.pl
✓ zebymniezapomnial.tumblr.com
Darmowe rozszerzenia
✓ Oparte na licencji GPL
✓ Darmowe wsparcie techniczne
✓ Pełna funkcjonalność dostępna za darmo
✓ Łatwy wgląd do kodu źródłowego i jego zmian na Githubie: https://github.com/GavickPro
GK LESS
LESS?
LESS = CSS +
Zmienne
Funkcje
Mixiny
Warunki
Komentarze inline
DRY
Zagnieżdżone reguły
Operacje matematyczne
@base_size: 1000px;
.border-radius(@radius: 5px) { -webkit-border-radius: @radius; -moz-border-radius: @radius; border-radius: @radius;}
.parent { .border-radius; width: @base_size; .child { .border-radius; float: left; width: @base_size * 0.25; &:hover { background: #eee; } & > div { .border-radius; } } }
.parent { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; width: 1000px;}.parent .child { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; float: left; width: 250px;}.parent .child:hover { background: #eee;}.parent .child > div { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;}
LESS CSS>> Preprocessor >>
Dla zainteresowanych
✓ http://lesscss.org/
✓ http://less2css.org/
✓ http://ciembor.github.io/lesscss.org/
✓ https://github.com/dziudek/LESS-Mixins
✓ http://www.slideshare.net/dziudek/less-word-up-wrocaw2013
✓ http://getpreboot.com/
Konfiguracja
Możliwości
✓ Możliwość określenia katalogów wejściowych i wyjściowych
✓ Kompilacja wybranych plików LESS
✓ Kompilacja na życzenie
✓ Generowanie errorlogów
Gdzie pobrać?
Github: https://github.com/GavickPro/GK-LESS
Dokumentacja: https://www.gavick.com/documentation/wordpress-themes/plugins-for-wordpress/gk-less/
GK Tabs
Struktura Widżetu
Struktura Widżetu
Konfiguracja
Podstawowe
Interfejs
Animacja
Inne
Możliwości
✓ 6 wbudowanych styli
✓ Konfigurowalne animacje
✓ Konfigurowalny interfejs
✓ Cache
Konfigurowalny interfejs
Dostępne Style
Responsywność
✓ Obsługa gestów na ekranach dotykowych
✓ Pełna skalowalność
Własne Style
✓ Tworzymy plik o nazwie my-style.css
✓ Tworzymy w tym pliku odpowiedni nagłówek (File Header API):
/* Name: My style */
✓ Poprzedzamy wszystkie selektory CSS klasą .my-style
✓ Odświeżamy ustawienia widżetu, wybieramy z listy styli My style i cieszymy się nowym stylem :-)
Akcje i Filtry
✓ gk_tabs_before_tabs_wrapper
✓ gk_tabs_before_tabs_list
✓ gk_tabs_after_tabs_list
✓ gk_tabs_before_tabs
✓ gk_tabs_after_tabs
✓ gk_tabs_after_tabs_wrapper
✓ gk_tabs_tab_title
✓ gk_tabs_tab_content
✓ gk_tabs_prev_button
✓ gk_tabs_next_button
Gdzie znaleźć?
Github: https://github.com/GavickPro/GK-Tabs
Dokumentacja: https://www.gavick.com/documentation/wordpress-themes/plugins-for-wordpress/gk-tabs/
Przerwa dla Gardła ;-)
GK News Show Pro
Struktura
Wpis
Źródłodanych
Formatwpisu
Kontener
Wpis
✓ Standardowo składa się z:
✓ Tytułu
✓ Tekstu
✓ Grafiki
✓ Bloku informacji
✓ Hiperłącza
Kontener
✓ Struktura otaczająca wpisy
✓ Pozwala na tworzenie dowolnych układów
Źródło danych
✓ Źródło informacji wyświetlanych we wpisie
✓ Generuje elementy artykułu
✓ 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>
Dostępne źródła danych
✓ WordPress
✓ WooCommerce
✓ Pliki XML
✓ Pliki JSON
✓ Kanały RSS
Dostępne Kontenery
✓ Kontener domyślny
✓ News Gallery
✓ Title Overlay
Konfiguracja
Filtry i Akcje
✓ gk_nsp_art_title
✓ gk_nsp_art_text
✓ gk_nsp_art_image
✓ gk_nsp_art_info
✓ gk_nsp_art_readmore
✓ gk_nsp_link_title
✓ gk_nsp_link_text
✓ gk_nsp_before_article
✓ gk_nsp_after_article
✓ gk_nsp_before_link
✓ gk_nsp_after_link
✓ gk_nsp_before_wrapper
✓ gk_nsp_after_wrapper
Przykłady użycia
Gdzie znaleźć? (beta)
Github: https://github.com/GavickPro/GK-News-Show-Pro
Dokumentacja: https://github.com/GavickPro/GK-News-Show-Pro/wiki
Let’s talk about future
GavernWP v.2.0
[Screeny]
Nowe rodzaje responsywnego menu
Font Awesome
GK LESS - integracja
✓ Plik variables.less
✓ @nazwa: wartość; //Etykieta;opis
Nowe podstrony
✓ FAQ
✓ Team
✓ Team member
✓ Odświeżona Galeria
✓ Archiwum
Porządki
✓ Przegląd dokumentacji inline
✓ Usunięcie mało popularnych opcji
✓ Zmiana ustawień domyślnych na wygodniejsze
Optymalizacja
✓ Cache plików JSON
✓ Nowa struktura ustawień
✓ Zoptymalizowane Widget Rules
Kiedy?
~Listopad 2013
Ważne Adresy
✓ http://www.gavick.com/
✓ https://github.com/GavickPro
✓ @gavickpro
Pytania?