Premiera WordPress 4.6 „Pepper” – co nowego?

Dosłownie przed chwilą pokazał mi się komunikat o możliwości aktualizacji WordPressa do wersji 4.6. Przedstawiam Wam zatem nowości, które prezentuje ta wersja.

    1. Usprawnione aktualizacje – Teraz instalacja nowego pluginu, jego aktualizacja bądź dodanie nowego motywu odbywa się bez przeładowywania strony i wyświetlania komunikatów.
      streamlined-updates
    2. Natywne fonty – W zależności od tego jakiego systemu operacyjnego używamy, w panelu WP zamiast Open Sans zobaczymy standardowe systemowe fonty. W developer tools widzimy poniższe rodziny fontów dla elementu body:
      font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
      native-fonts
    3. Sprawdzanie poprawności linków w treści – Gdy zdarzy się nam wpisanie niepopranego adresu w linku np. gdy zapomnimy dopisać http:// przed zewnętrznym zasobem, WordPress nas o tym poinformuje.
      inline-link-checker
    4. Jeszcze lepsze zapisywanie szkiców – w przypadku gdy zabraknie Ci zasilania, stracisz dostęp do Internetu czy przypadkowo odświeżysz stronę, odzyskanie stworzonej treści będzie jeszcze łatwiejsze.
      content-recovery

A co „pod maską”?

  1. Wsparcie dla dns-prefetch i prerender – WordPress korzystając z wp_resource_hints() standardowo prosi przeglądarkę o połączenie się z WordPressowym CDNem s.w.org. My możemy sami zadecydować kiedy i dla jakich zasobów skorzystać z dns-prefetch, preconnect czy prerender -> https://make.wordpress.org/core/2016/07/06/resource-hints-in-4-6/
  2. WP_Term_Query i WP_Post_Type – WP_Term_Query pozwala nam teraz operować z term_taxonomy_id. Drugie usprawnienie ma zmienić tablicę $wp_post_types w tablicę obiektów WP_Post_Type zawierających dodatkowe właściwości i metody do pracy z typami postów.
  3. Meta Registration API – zostało rozbudowane o typy danych, opisy oraz wsparcie REST API.
  4. Zaktualizowano biblioteki JavaScript – Masonry 3.3.2, imagesLoaded 3.2.0, MediaElement.js 2.22.0, TinyMCE 4.4.1 oraz Backbone.js 1.3.3
  5. Jeszcze szybsze Multi Site
  6. Nowa biblioteka do API – HTTP API korzysta teraz z biblioteki Requests, dzięki temu zyskujemy obsługę wielkości znaków w nagłówkach, równoległe żądania HTTP czy obsługę domen ze znakami diakrytycznymi.

[snippet] Usunięcie query string plików CSS i JS

Optymalizacja WordPressa to temat rzeka, istnieje wiele „trików”, mechanizmów czy pluginów, które pozwalają nam uzyskać cenne sekundy czasu ładowania naszej strony.

Jednym z tych trików jest usunięcie „query string” czyli unikalnego identyfikatora, który jest dopisywany przez WP do plików CSS czy JS. Gdy spojrzymy w źródło naszej strony to zauważymy tam wpisy podobne do poniższych:

/wp-content/plugins/contact-form-7/includes/css/styles.css?ver=4.5
/wp-includes/js/jquery/jquery.js?ver=1.12.4

Każdy arkusz stylów czy plik ze skryptami JS po znaku zapytania ma dopisek „ver=xxx”. Podczas tworzenia strony jest to pożądane gdyż przeglądarka, CDNy i serwery proxy nie „keszują” naszej strony i każda zmiana w kodzie jest widoczna po odświeżeniu strony w przeglądarce. Natomiast gdy ukończymy prace nad naszą witryną i jedyne zmiany, które będziemy później wprowadzać ograniczają się tylko do HTMLa (czyli przykładowo będziemy dodawali wpisy na naszym blogu) możemy wymusić na WP aby nie dodawał query string.

Dzięki temu zabiegowi nasza przeglądarka zapisze sobie zasoby naszej strony w pamięci podręcznej i nie będzie musiała ich za każdym razem pobierać z serwera. Gdy korzystamy z CDNa jak na przykład Cloudflare, on również nie „keszuje” plików z parametrami, więc aby w pełni wykorzystać jego możliwości możemy je usunąć.

Kod, który musimy dodać do naszego pliku functions.php wygląda następująco:

Przeprowadziłem krótki test WP z motywem Avada. Początkowo GTMetrix pokazał mi komunikat:
gt-remove-query-stringPo użyciu wyżej wymienionego snippetu, kolejny test wyglądał następująco:
gt-removed-query-stringCzas ładowania spadł o około 0.7 sekundy. Może nie jest to wynik fenomenalny ale pamiętajmy, że to tylko jeden ze sposobów, który można łączyć z innymi. Ziarnko do ziarnka…
gt-query-string-2

[snippet] Usunięcie zakładki „Opinie” w Woocommerce

Jedną z najlepszych funkcjonalności WordPressa są haki (hooks) czyli filtry i akcje. Umożliwiają one modyfikację naszych motywów i pluginów bez zmieniania ich kodu źródłowego a jedynie poprzez dopisywanie kilku linijek kodu do pliku functions.php.

Postanowiłem zatem stworzyć serię wpisów z różnymi snippetami, które mogą się Wam przydać podczas pracy nad stronami opartymi na WordPressie czy sklepami na WP + Woocommerce.

Pierwszy z nich będzie dotyczył usunięcia zakładki „Opinie” na podstronie produktu. Poniższy kod wystarczy wkleić na końcu pliku functions.php naszego motywu.

Optymalizacja obrazów WordPress

Kompresja czy optymalizacja obrazów wykorzystywanych na naszych stronach WWW jest bardzo ważnym zagadnieniem. Dzięki odpowiednim narzędziom jesteśmy w stanie znacząco zmniejszać rozmiar grafik bez utraty ich jakości. Strona internetowa, której obraz zostały zoptymalizowane jest „lżejsza” czyli pobieramy mniej megabajtów by wczytać jej zawartość a co za tym idzie skraca się czas jej ładowania. Taka strona jest przyjaźniejsza dla użytkowników bo przecież nikt nie chce czekać kilkunastu sekund na wyświetlenie zawartości, dodatkowo może to wpływać na naszą pozycję w wynikach wyszukiwania gdyż jednym z parametrów branych pod uwagę przez Google jest czas ładowania strony.

W poprzednim wpisie opisałem kilka narzędzi on-line służących do optymalizacji obrazów. Ale gdy nasza strona oparta jest na WordPressie, czynność tę możemy zautomatyzować poprzez odpowiednie pluginy, które, po wrzuceniu plików do biblioteki mediów same zajmą się ich optymalizacją.

  1. WP Smush
    Banner WP SmushNajpopularniejsza wtyczka do optymalizacji obrazów. W wersji bezpłatnej:

    • Korzysta z kompresji bezstratnej
    • Umożliwia ustawienie maksymalnego rozmiaru uploadowanego obrazu (pozwoli uniknąć wrzucenia przez użytkownika np. zdjęcia o ogromnych wymiarach)
    • Obsługuje pliki JPEG, PNG oraz GIF
    • Pozwala na automatyczną bądź ręczną optymalizację obrazów
    • Kompresuje tylko obrazy o rozmiarze 1MB i mniejsze
  2. EWWW Image Optimizer
    Banner EWWW Image OptimizerWtyczka ta również używa kompresji bezstratnej, umożliwia optymalizację nowych obrazów jak i tych, które były już w naszej bibliotece przed zainstalowaniem wtyczki. Dodatkowo optymalizuje obrazy m.in takiego pluginu jak NextGen Gallery (pliki te standardowo nie są widoczne w bibliotece mediów WP). Obrazy są optymalizowane na naszym serwerze. Wersja płatna kompresuje obrazy w chmurze.
  3. Kraken Image Optimizer
    Banner Kraken Image OptimizerPlugin ten wymaga od nas rejestracji w serwisie kraken.io (link referencyjny) gdzie uzyskujemy za darmo 100MB quota na testowanie wtyczki. Gdy uznamy, że spełnia ona nasze oczekiwania to możemy skorzystać z płatnych planów. Funkcjonalności:

    • Kompresja stratna jak i bezstratna plików JPEG, PNG oraz GIF i maksymalnym rozmiarze 32MB.
    • Licencja nie jest ograniczona do jednej strony – mając konto możemy korzystać z krakena na wszystkich naszych witrynach.
    • Automatyczna optymalizacja wgrywanych obrazów jak i ich wygenerowanych przez WP miniaturek
    • Ustawienie maksymalnych wymiarów wgrywanego pliku
    • Możliwość zachowania wybranych metadanych EXIF
    • Plugin do gulpa, grunta oraz możliwość optymalizacji poprzez WP-CLI

Kompresja obrazów on-line

Bardzo często umieszczamy na naszych stronach internetowych wszelkiego rodzaju zdjęcia i grafiki. Jeśli jest to nasza strona firmowa to pokazujemy nasze biuro/sprzęt/pracowników czy portfolio. Gdy stworzymy jakąś infografikę ta również ląduje na stronie jako obraz. Niejednokrotnie umieszczamy także zdjęcia zajmujące cały ekran czy to do paralaksy czy jako grafika witająca użytkowników zaraz po wejściu na stronę. Zdjęcie o rozmiarach 1920x1200px czy infografika o długości kilku tysięcy pikseli potrafi „ważyć” nawet ponad jeden megabajt a nawet kilka. Co prawda żyjemy w czasach szerokopasmowego dostępu do Internetu w naszych domach i Internetu LTE w naszych urządzeniach mobilnych, ale pobranie kilku megabajtów i tak zajmuje trochę czasu. Tutaj pojawia się pewien problem gdyż nie chcemy zrezygnować ze zdjęć ale jednocześnie nie chcemy by nasza strona ładowała się kilkanaście sekund (chyba każdy z nas irytuje się gdy strona, którą odwiedzamy nie jest widoczna po maksymalnie kilku sekundach).

Na szczęście istnieją narzędzia, które potrafią zmniejszyć rozmiar naszych zdjęć czy grafik i to niekiedy nawet do 80%. Ich działanie polega na usunięciu metadanych dołączanych do obrazu przez aparaty fotograficzne czy programy graficzne (przykładowo metadane zdjęcia z aparatu zawierają nawet informacje czy do zdjęcia została użyta lampa błyskowa, na naszej stronie ta informacja jest kompletnie zbędna) a także zastosowanie algorytmów kompresji stratnej lub bezstratnej.  Dzięki temu przy niezauważalnej lub praktycznie niezauważalnej utracie jakości możemy znacząco zmniejszyć rozmiar naszego obrazu. A skoro obraz „waży” mniej to potrzebny jest krótszy czas na jego pobranie a co za tym idzie uzyskujemy szybsze załadowanie się naszej strony.

Poniżej przedstawiam listę trzech kompresorów on-line.

  1. Compressor.io – Narzędzie, które nie pozwala na kompresowanie wielu plików na raz ani zmiany poziomu kompresji ale, nie wiem dlaczego korzystam z niego najczęściej;)
    compressor-compressor
  2. Compressnow.com – pozwala na kompresję wielu obrazów na raz oraz posiada suwak do określenia poziomu kompresji
    compressnow-compressor
  3. Optimizilla.com – pozwala na kompresję wielu obrazów na raz oraz posiada suwak pozwalający na określenie z ilu kolorów ma się składać skompresowany obrazek.
    optimizilla-compressor

Przenoszenie WordPressa bez pomocy wtyczek

Gdy tworzymy swój motyw bądź konfigurujemy jakiegoś „gotowca” to nie robimy tego na docelowej domenie a gdzieś, w ukryciu przed robotami indeksującymi i ewentualnymi odwiedzającymi. Jest to podyktowane względami SEO bo nie chcemy aby roboty zaindeksowały naszą witrynę z frazami „Lorem Ipsum” lub zawartością „demo”. A gdy na przykład odświeżamy layout to nie chcemy by nasi klienci/czytelnicy widzieli stronę, która się „rozjeżdża”.

Gdy uznamy, że nasza strona jest już gotowa do tego by można ją było pokazać światu musimy wykonać kilka czynności aby po wpisaniu jej adresu była ona widoczna. Istnieje kilka sposobów na migrację strony, w tym wpisie pokażę jak zrobić to bez pomocy zewnętrznych pluginów typu Duplicator, ten sposób opiszę w kolejnym wpisie. Tak więc zaczynamy.

  1. Jeśli migrujemy z innego serwera to za pomocą klienta FTP skopiujmy sobie pliki naszego WordPressa na nasz komputer. Jeśli strona była tworzona lokalnie to punkt ten oczywiście pomijamy. (Bardziej zaawansowani użytkownicy mogą przenieść sobie pliki bezpośrednio pomiędzy serwerami za pomocą SSH).
  2. Logujemy się do phpMyAdmin tworzonej strony, przechodzimy do zakładki „Eksport” i eksportujemy sobie naszą bazę danych (Niektóre hostingi pozwalają na eksport bazy z poziomu swoich paneli zarządzania)
    phpmyadmin-eksport-compressor
  3. Pobrane wcześniej pliki kopiujemy do folderu docelowej strony
  4. Na docelowym hostingu tworzymy sobie nową bazę danych i logujemy się do niej za pomocą phpMyAdmin
  5. Wybieramy zakładkę „Import” i importujemy plik stworzony w punkcie 2.
    phpmyadmin-import-compressor
  6. Po zaimportowaniu bazy przechodzimy do zakładki SQL i wklejamy kod poniższego zapytania
    phpmyadmin-sql-compressor

    Gdzie oczywiście zamieniamy http://www.staradomena.pl na adres na którym tworzyliśmy witrynę a http://www.nowadomena.pl na adres docelowy. Po zmianie danych klikamy „Wykonaj”
  7. Wracamy do naszego klienta FTP i gdy skopiowały się nam już wszystkie pliki to otwieramy sobie do edycji plik wp-config.php
  8. W pliku wp-config.php znajdujemy sekcje:

    Gdzie define('DB_NAME', 'database_name'); – to nazwa naszej nowej bazy danych utworzonej w punkcie 4
    define('DB_USER', 'username'); – to nazwa użytkownika w/w bazy
    define('DB_PASSWORD', 'password'); – to hasło do bazy danych
    Po wypełnieniu w/w danych wysyłamy plik na serwer.
  9. Przechodzimy pod adres naszej nowej strony i powinniśmy ją zobaczyć.
  10. Może się zdarzyć tak, że zobaczymy komunikat „Błąd łączenia z bazą danych”. Należy wtedy sprawdzić dane podane w pliku wp-config.php gdyż być może wkradła nam się literówka bądź spacja. Możliwe jest również, że nasz hosting posiada inny adres bazy danych. Wtedy musimy znaleźć w panelu sterowania hostingu ów adres i zamienić go w linii /** Nazwa hosta serwera MySQL */
    define('DB_HOST', 'localhost');

    Ponownie zapisujemy plik i wysyłamy go na serwer.

W teorii, dobrze napisany motyw powinien zacząć działać po wykonaniu wyżej wymienionych czynności. W praktyce może być inaczej i na przykład nie będą nam się wyświetlały niektóre obrazy. Co prawda miało być bez pluginów ale w takim przypadku może być pomocna wtyczka Velvet Blues Update URLs w której podajemy stary i nowy adres a ona zajmie się ich podmianą. Może się również zdarzyć tak, że w motywie jakieś URLe są wpisane „na sztywno” (choć nie powinny bo od tego są funkcje WP jak get_template_directory_uri() ) – wtedy nie pozostaje nic innego jak edycja plików motywu i ich podmiana.

Zabezpieczanie WordPressa

Według w3techs.com udział WordPressa w wynku CMSów wynosi 59,6%. Dodatkowo jest na nim oparta praktycznie co czwarta strona internetowa w sieci (26,6%). Popularność WP wiąże się z tym, że jest przeprowadzane wiele ataków na strony na nim oparte. Wyobraźcie sobie, że spammerzy znajdują bardzo poważną lukę i ich boty atakują jedną czwartą internetu umożliwiając rozsyłanie spamu, ataki ddos czy wstrzykują na strony swoje linki. Oczywiście popularność WordPressa to również wiele ludzi, którzy pracują nad tym aby był on jak najlepiej zabezpieczony. Niestety zawsze pojawią się jakieś dziury, które są błyskawicznie wykorzystywane. Dodatkowo każda strona korzysta z wtyczek i motywu, które nie są rozwijane przez ogólnoświatową społeczność a przez małe grupy ludzi i to właśnie wtyczki czy motywy są najczęściej źródłami problemów (jak na przykład dziura w bardzo popularnym Revolution Slider, która doprowadziła do wycieku danych w aferze „Panama Papers”).

Dlatego jeśli decydujemy się na wykorzystanie WordPressa do stworzenia naszej witryny musimy się nią na bieżąco zajmować.

Najważniejsze jest instalowanie aktualizacji bo te prócz wprowadzania różnych udogodnień i nowych funkcjonalności, łatają również dziury w zabezpieczeniach. Ale dobra konfiguracja WP, dzięki której znacząco zmniejszamy ryzyko uszkodzenia naszej strony to nie tylko aktualizacje.

Już na etapie tworzenia strony warto jest skorzystać z tej prezentacji, która w bardzo przystępny sposób opisuje na co zwrócić uwagę, czego się wystrzegać, o co dbać oraz, co najważniejsze, jak zabezpieczyć naszego WordPressa.

Prezentacja „Wyczaruj sobie spokój”
http://wpmagus.pl/pliki/prezentacje/wyczaruj-sobie-spokoj/#/

Naprawa „Witryna jest tymczasowo niedostępna”

Gdy aktualizujemy wtyczki lub samego WordPressa przełącza się on w tryb konserwacji. Oznacza to tyle, że podczas tych kilku sekund gdy następuje aktualizacja, ktokolwiek wejdzie na naszą stronę zobaczy komunikat o pracach konserwacyjnych.

Komunikat konserwacja wordpress

Zwykle po zakończeniu aktualizacji nasz WordPress powinien wrócić do swojego normalnego działania, ale może się zdarzyć tak, że ów komunikat nie znika.

Rozwiązanie tego problemu jest bardzo proste. Musimy połączyć się z naszym serwerem FTP (na przykład przy pomocy klienta FTP jak Filezilla), wejść w katalog w którym znajdują się pliki WordPressa oraz usunąć plik o nazwie .maintenance

konserwacja

Własny kolor paska adresu w mobilnym Chrome

Mobilna wersja przeglądarki Chrome dla systemu Android posiada bardzo fajną funkcjonalność, która pozwala na zmianę koloru paska adresu na dowolny, wybrany przez nas. Po wczytaniu strony pasek może przyjąć kolor, na przykład, nagłówka naszej strony co tworzy efekt całości z przeglądarką.

Kolorowy pasek adresu Chome

Uzyskanie tego efektu jest bardzo proste. Wystarczy jedna linijka kodu dodana do sekcji <head> naszej strony.
<meta name="theme-color" content="#4a148c">
Gdzie #4a148c zamieniamy na wybrany przez nas kolor.