WordUpy, lista podatności WordPressa i jego rozszerzeń, wprowadzenie do WP-API – WordPressowe Linki #34

Moja prelekcja z WordUpa w Łodzi

Ostatnio opowiadałem o wykorzystaniu możliwości ekranu personalizacji motywu. Będę też o tym mówił na WordUpie w Krakowie (31 października). Pamiętajcie też o WordUpach we Wrocławiu (17 października) i Warszawie (24 października).

Lista znanych podatności w WordPressie, wtyczkach i motywach

Obowiązkowa lektura dla wszystkich użytkowników WordPressa – warto ją śledzić by być na bieżącą ze wszystkimi podatnościami, zwłaszcza, że ostatnio coraz częsciej pojawiają się luki bezpieczeństwa w popularnych wtyczkach.

Wprowadzenie do WP-API

WordPress w wersji 4.1 wzbogaci się o API wykorzystujące format JSON – warto już teraz się z nim zapoznać, by wiedzieć jak wykorzystać drzemiące w tym API możliwości.

Eksperymenty z UI WordPressa

Krótki opis jednej z propozycji zmian jednego z najważniejszych miejsc kokpitu – ekranu dodawania wpisów.

Banner wtyczki w postaci PSD

Przydatny plik PSD do tworzenia bannerów dla wtyczek na oficjalne repozytorium WordPress.org.

Ważne zmiany na ThemeForest

Zanosi się na to, że wsparcie dla produktów z Theme Forest od 1. grudnia będzie udzielane tylko na 6 miesięcy, z możliwością wykupienia dodatkowej subskrypcji przedłużającej okres wsparcia.

GirlsWhoWP, Motyw 2015, IFTTT i WordPress oraz znane marki korzystające z WordPressa – WordPressowe Linki #33

GirlsWhoWP.com

W ostatnich tygodniach nawiązałem współpracę z Eweliną Muc i dzięki temu, będziecie mogli poczytać moje wpisy przeznaczone dla bardziej początkujących użytkowników WordPressa na jej portalu GirlsWhoWP. Moje dwa pierwsze wpisy to:

Motyw 2015

Można już zobaczyć jak może wyglądać nowy motyw domyślny WordPressa, który pojawi się prawdopodobnie z WordPressem 4.1 w grudniu. Mi osobiście się ta wizja bardzo podoba – zwłaszcza w zestawieniu z ładnym zdjęciem w panelu bocznym.

IFTTT i WordPress

Zestaw 24 zadań, które mogą znacząco przyśpieszyć Waszą pracę z WordPressem dzięki serwisowi IFTTT.

Omówienie poważnej luki bezpieczeństwa we wtyczce Slider Revolution

Jeżeli jeszcze przypadkiem jej nie zakutualizowaliście to czas najwyższy to zrobić.

WordPress 2014 Survey

Nadszedł już czas na wypełnienie dorocznej ankiety dotyczącej WordPressa 🙂

Znane marki i osoby używające WordPressa

Ciekawe zestawienie, prezentujące popularne serwisy i osoby, których strony WWW bazują na WordPressie.

Wprowadzenie do ekranu personalizacji motywu w WordPressie

Ekran personalizacji motywu to moim zdaniem jedno z ciekawszych udogodnień dla użytkownika, które zostało wprowadzone w WordPressie 3.4 i od tego czasu jest stale udoskonalane. Tym wpisem rozpoczynam serię artykułów o ekranie personalizacji. Warto pamiętać, że sporo istotnych udogodnień zostało wprowadzonych niedawno w WordPressie 4.0. Zaczynamy od luźnego wprowadzenia by w kolejnych wpisach przejść do kwestii ściśle związanych z programowaniem obsługi ekranu personalizacji. Czytaj dalej Wprowadzenie do ekranu personalizacji motywu w WordPressie

WordPress 4.0 – co nowego dla programistów?

W piątek na WordPress 4.0 Release Party we Wrocławiu pokazywałem prezentację na temat zmian w WordPressie 4.0, które mogą zainteresować programistów. Poniżej znajduje się moja prezentacja z tego wydarzenia:

Bazuje ona na moim porównaniu kodu WordPressa 3.9.2 i 4.0.0RC. Od razu podkreślam – to są najciekawsze zmiany jakie wychwyciłem i uznałem, że warto je pokazać. Wszystkich zmian jest dużo więcej, ale musiałbym mieć 2 godziny aby wszystkie je pokazać w trakcie prezentacji 😉

Wykorzystanie menadżera mediów we własnych wtyczkach

Dzięki wykorzystaniu menadżera mediów we własnych wtyczkach możemy znacząco ułatwić życie użytkownikowi – nie musi on z pamięci wprowadzać adresów do wybranych grafik. W tym wpisie chciałbym pokazać jak łatwo dodać obsługę menadżera mediów do własnej wtyczki/motywu.

Uproszczony schemat działania jakie chcemy osiągnąć prezentuje się następująco:

  1. Dodajemy do określonych przycisków akcję otwierania menadżera mediów po ich kliknięciu
  2. Definiujemy właściwości okna menadżera mediów wykorzystywanego przez nasz skrypt
  3. Dodajemy obsługę operacji wyboru obrazka
  4. Dodajemy obsługę operacji zamknięcia menadżera

Jak widać sama idea nie wygląda zbyt skomplikowanie – na szczęście większość operacji wykonywania jest po stronie skryptów menadżera mediów – musimy obsłużyć tylko kluczowe operacje takie jak wybór zdjęcia i zakończenie korzystania z menadżera. Czytaj dalej Wykorzystanie menadżera mediów we własnych wtyczkach

Front-endowe Inspiracje #2

3 API JavaScript, które mogą się okazać przydatne w przyszłości

Artykuł opisujący 3 API: Web Alarms API, Presentation API oraz Standby API, które są dopiero w początkowej fazie rozwoju, ale warto ten rozwój śledzić, gdyż mogą znacząco wzbogacić nasze webaplikacje. Polecam też lekturę wpisu o innych 5 API, które w przyszłości mogą znacząco usprawnić mobilne wersje stron internetowych.

jstinytest – najprostsza biblioteka do testów jednostkowych w JavaScript

Jeżeli nie macie czasu lub ochoty rozgryzać API i konfiguracji popularnych frameworków do testów jednostkowych w JavaScript, a jednocześnie potrzebujecie prostego mechanizmu przeprowadzania testów jednostkowych to jstinytest jest dla Was 🙂

Autopolyfiller dla JavaScript

Autopolyfiller to idealne rozwiązanie dla wszystkich, którzy nie chcą więcej pamiętać o tym dla jakiej przeglądarki i kiedy trzeba dodać kod by wesprzeć niezaimplementowaną funkcjonalność JavaScript. To taki autoprefixer tylko dla JavaScript 🙂

Offline-first

Zbiór materiałów na temat przygotowywania stron i webaplikacji, które sprawnie działają bez połączenia z Internetem.

baguetteBox

Skrypt tworzący popupy ze zdjęciami dla galerii zdjęć – w odróżnieniu od większości innych tego typu skryptów ten działa bez pomocy dodatkowych frameworków.

20 darmowych fontów stylizowanych na pismo odręczne

Świetny zestaw naprawdę ładnych i darmowych fontów.

gif.js

Biblioteka w JavaScript do manipulowania animowanymi grafikami w formacie GIF.

Pexels – kolekcja darmowych zdjęć

Kolejna strona z dużym zbiorem darmowych zdjęć na licencji Creative Commons Zero (CC0).

Mazwai – kolekcja darmowych filmów wideo

Kolekcja darmowych filmów wideo do wykorzystania we własnych projektach na licencji Creative Commons.

CSS Guidelines

Wytyczne służące tworzeniu czytelnego i skalowalnego kodu CSS.

CSS Shorthand Generator

Jeżeli macie problemy z zapamiętaniem skróconej składni CSS to ta strona wygeneruje skrócony kod za Was.

Wszystko co powinno się wiedzieć o wyrażeniach regularnych w JavaScript

Pokaźny zbiór użytecznych informacji na temat wyrażeń regularnych w JavaScript.

Dwa przykłady preloaderów dla stron

Strony WWW coraz częściej upodabniane są do aplikacji na tablety i smartfony – preloadery dla całych stron to jeden z przykładów na implementację efektów rodem z platform mobilnych.

Odpowiedzi na pytania z WordUpa w Krakowie

Na ostatnim WordUpie w Krakowie po mojej prelekcji pojawiło się kilka pytań wartych opisania z odpowiedziami w formie wpisu.

Jak dodać do popupa własną logikę?

W zasadzie dobór metody zależy od poziomu skomplikowania zawartości popupa i logiki go obsługującej. Jeżeli potrzebujemy zawartości popupa mającej niewiele wspólnego z listą kontrolek to mamy do dyspozycji dwa rozwiązania – skorzystać z kontrolki typu container, która oferuje nam możliwość wstawienia własnego kodu HTML przez właściwość html oraz obsługę zdarzeń poprzez onclick, onmouseover etc. Przykładem wykorzystania tej kontrolki jest wtyczka charmap – polecam lekturę jej kodu.

Drugie wyjście to sposób w jaki rozwiązano to w wypadku wstawiania linków – istnieje wtyczka wplink, która korzysta z obiektu window.wpLink zdefiniowanego w pliku wp-includes/js/wp-link.js – w tym wypadku działa to tak, że kliknięcie przycisku powoduje wywołanie metody open obiektu window.wpLink z ID aktywnego edytora. Dzięki temu możemy wykonać w popupie w zasadzie dowolny kod a na koniec rezultaty umieścić w edytorze znając jego ID. Póki co polecam analizę kodu wspomnianej wtyczki i skryptu z nią związanego – możecie się spodziewać, że rozwinę ten temat w sierpniu na łamach bloga 😉

Jak usunąć buttony po nazwie (czy jest oddzielna metoda)?

Jest to bardzo dobre pytanie, gdyż związane jest ono z większą elastyką naszych skryptów. Wyobraźmy sobie sytuację w której korzystamy z następującego kodu:

function dziudek_remove_btn($btns) {
    unset($btns[0]);
    return $btns;
}

add_action('mce_buttons', 'dziudek_remove_btn');

Ten kod będzie działał dokładnie tak jak sobie to zaplanowaliśmy do momentu gdy użytkownik nie wpadnie na pomysł wstawienia na początku pierwszego rzędu przycisków własnego przycisku – wtedy nasz skrypt usunie ten nowo dodany przycisk a nie przycisk pogrubienia tekstu. Na szczęście możemy temu łatwo zaradzić modyfikując trochę kod usuwania przycisku:

function dziudek_remove_btn($btns) {
    $index = array_search('bold', $buttons);

    if($index !== FALSE) {
        array_splice($buttons, $index, 1);
    }

    return $btns;
}

add_action('mce_buttons', 'dziudek_remove_btn');

Powyższy kod korzysta z faktu, że przyciski są przechowywane w tablicach według nazw. Istnieje też druga metoda – można przyciski usunąć już na etapie działania filtra tinymce_before_init.

Niestety nie natrafiłem na dedykowaną funkcję służącą do usuwania przycisków po samej nazwie.

Jak wykorzystać w TinyMCE kontrolki wyboru kolorów w popupie?

Pytanie o kontrolki kolorów pojawia się bardzo często, niestety są one też najbardziej problematyczne w wykorzystaniu. Teoretycznie można umieścić kontrolkę wyboru kolorów w popupie z użyciem pola typu colorbutton. Problem polega na tym, że aby ta kontrolka zadziałała trzeba stworzyć spory kawałek kodu generujący listę kolorów – w najprostszym wypadku wymaga to skopiowania 3/4 kodu wtyczki textcolor, gdyż ta wtyczka posiada kod, który generuje całą strukturę bloku pozwalającego wybrać kolor tekstu/tła.

Mam pewien pomysł na podejście do tego problemu i myślę, że w sierpniu można spodziewać się wpisu na ten temat (podobnie jak w wypadku logiki w popupach).

Jaką korzyść dają nam przyciski wstawiające kod, który można uzyskać poprzez dostępne już w TinyMCE przyciski?

To pytanie zasugerowało mi, że sekcja prezentacji odpowiadająca na pytanie – „Dlaczego warto tworzyć wtyczki dla TinyMCE?” wymaga rozwinięcia 🙂 Przede wszystkim trzeba wziąć poprawkę na to, że moja prelekcja opisuje podstawowe funkcjonalności i rzeczywiście efekty mogą się wydawać powieleniem dostępnych już funkcji. Co nie zmienia faktu, że przy edycji dużej ilości tekstu nawet przycisk, który jednym kliknięciem zastępuje trzy kliknięcia w edytorze jest naprawdę dużym udogodnieniem (nieraz się o tym przekonałem na własnej skórze). No i pozostaje kwestia bardziej zaawansowanych rozwiązań przygotowywanych pod klientów – jeżeli musimy wstawiać np. mapy we wpisach to miło byłoby gdyby klient od razu widział podgląd tego co wstawił i nie musiał znać całego API skryptu generującego mapki – tu właśnie leży siła autorskich rozwiązań – możemy sobie i klientowi dość łatwo ułatwić życie i uniknąć zbędnych pytań.

 

Zdjęcie dzięki uprzejmości Kasi Karus – współorganizatorki WordUpa w Krakowie.

Jak w prosty sposób stworzyć cache dla shortcode’ów?

Czasami zdarza się, że shortcode przed zwróceniem efektów swojego działania musi wykonać dużo czasochłonnych operacji – np. jeżeli robimy shortcode, który zwraca statusy z Twittera dla określonego zapytania. W takim wypadku powinniśmy stworzyć cache z dwóch powodów:

  • pobranie informacji o statusach z Twittera wymaga pobrania tych danych z zewnętrznego serwera co może zająć sporo czasu
  • Twitter nakłada limity zapytań do swojego API

Na szczęście stworzenie prostego mechanizmu cache dla shortcode’ów jest w WordPressie bardzo proste.

Przyjmijmy, że nasz shortcode pobiera 3 różne parametry z wartościami domyślnymi i zamieniane na zmienne o odpowiednich nazwach w poniższy sposób:

$atts = shortcode_atts(array(
'param1' => 'lorem',
'param2' => 'ipsum',
'param3' => 'dolor'
), $atts);

extract($atts);

Zatem nasz shortcode ma poniższą składnię:

[txt][shortcode param1=”x” param2=”y” param3=”z”][/txt]

Pierwsza istotna obserwacja – nasz shortcode zwróci te same rezultaty dla takich samych wartości parametrów, zatem ciąg złożony z wartości tych parametów może śmiało posłużyć za identyfikator rezultatów danego shortcode’a. Do przechowania zawartości cache wykorzystamy Transients API.

Zatem nasz mechanizm cache będzie potrzebował dwóch kluczowych fragmentów kodu – zapisu i odczytu zawartości cache.

Zacznijmy od odczytu zawartości cache, gdyż ta operacja jest wykonywana przez rozpoczęciem operacji przez nasz shortcode:

$cache = get_transient(md5('PREFIX'.serialize($atts)));

if($cache) {
    return $cache;
}

Jak wspominałem – wykorzystujemy ciąg wartości parametrów jako identyfikator, do tego sugeruję dodać też jakiś własny prefix – dzięki temu zabezpieczymy się przed sytuacją gdy wszystkie parametry będą puste. Jeżeli cache dla danej konfiguracji istnieje to po prostu funkcja zwróci od razu zawartość cache, bez wykonywania dodatkowych operacji.

Następnie cały kod wyjściowy generowany przez shortcode umieszczamy w zmiennej np. $cache_output – jeżeli dobrze tworzycie swoje shortcode’y to zapewne taką zmienną z zawartością rezultatów już posiadacie (nie używacie w shortcode’ach echo, prawda?). Na koniec działania naszego shortcode’u możemy umieścić zawartość tej zmiennej w bazie danych:

set_transient(md5('PREFIX'.serialize($atts)) , $cache_output, 10 * 60);

Jak widać dzięki stworzeniu 6 dodatkowych linijek kodu mały gotowy mechanizm cache.

Osobiscie polecam do listy parametrów takiego shortcode’a dodać też parametr cache_time – dzięki temu będzie można określić czas przechowywania cache, a ostatnia linijka związana z cache zmieni się na:

set_transient(md5('PREFIX'.serialize($atts)) , $cache_output, $cache_time * 60);

Powyższe rozwiązanie ma tą zaletę, że w wypadku shortcode’ów w których istnieje niewielkie zróżnicowanie wartości parametrów do przechowywania rezultatów nawet z kilku tysięcy wpisów, będzie potrzeba kilku-kilkunastu rekordów w bazie danych. Natomiast sugeruję ostrożność w wypadku gdy przy podobnej liczbie wpisów mamy unikalne konfiguracje shortcode’ów – wtedy istnieje ryzyko, że ilość rekordów w bazie danych będzie zbliżona do liczby wpisów.