Automatyczny znak wodny na zdjęciach w WordPressie
Znak wodny pomaga oznaczyć zdjęcia publikowane w sklepie internetowym, portfolio lub na blogu. Może zawierać logo, nazwę marki albo inny element identyfikujący właściciela materiału.
Poniższy kod tworzy w WordPressie kompletny system znaku wodnego. Pozwala wybrać własny obraz, ustawić jego pozycję, przezroczystość i wielkość, a następnie automatycznie nakłada go na nowe zdjęcia.
Rozwiązanie może być używane również w WooCommerce. Zdjęcia produktów przesyłane do biblioteki mediów są przetwarzane razem z pozostałymi obrazami obsługiwanymi przez kod.
Kod nie ogranicza działania wyłącznie do produktów WooCommerce. Automatycznie przetwarza wszystkie nowe, obsługiwane obrazy dodawane do biblioteki mediów, z wyjątkiem pliku używanego jako źródło znaku wodnego.
Jeśli znak ma trafiać wyłącznie na zdjęcia produktów, kod wymaga dodatkowego warunku sprawdzającego powiązanie obrazu z produktem.
Co robi przygotowany kod?
Po aktywowaniu fragmentu w panelu WordPressa pojawia się nowa strona: Ustawienia → Znak wodny.
Z tego miejsca administrator może:
- wybrać obraz znaku wodnego z biblioteki mediów,
- przesłać nowy plik logo,
- ustawić pozycję znaku na zdjęciu,
- określić jego przezroczystość,
- wybrać wielkość znaku,
- zobaczyć podgląd ustawień na żywo,
- automatycznie oznaczać nowe zdjęcia,
- ręcznie zsynchronizować znak na istniejącym obrazie.
Wybierasz logo, określasz jego wielkość i miejsce, a WordPress nakłada je na nowe zdjęcia oraz ich wygenerowane rozmiary.
Automatyczne znakowanie nowych zdjęć
Kod uruchamia się podczas generowania metadanych i rozmiarów nowego obrazu. WordPress tworzy wtedy między innymi miniaturę, rozmiar średni, duży oraz dodatkowe warianty zarejestrowane przez motyw i wtyczki.
Znak wodny jest nakładany na:
- plik w pełnym rozmiarze,
- miniatury WordPressa,
- rozmiary używane w archiwum produktów,
- dodatkowe rozmiary obrazów utworzone przez motyw lub wtyczki.
Dzięki temu znak nie znajduje się wyłącznie na dużym zdjęciu produktu. Może być widoczny również na kafelkach sklepu, listach produktów i innych miejscach korzystających z mniejszych wersji obrazu.
Dlaczego zdjęcie w archiwum produktu może pojawić się z opóźnieniem?
Po przesłaniu dużego zdjęcia WordPress musi wygenerować wszystkie wymagane rozmiary, utworzyć kopie czystych plików i nałożyć znak na każdy wariant. Na wolniejszym hostingu albo przy dużej liczbie rozmiarów może to potrwać od kilkunastu sekund do nawet kilku minut.
Z tego powodu w archiwum produktów przez pewien czas może być widoczna starsza wersja zdjęcia, obraz bez znaku albo chwilowo puste miejsce. Nie zawsze oznacza to błąd kodu. Czasami należy poczekać kilka minut, aż wszystkie pliki zostaną przetworzone i wyświetlone.
Czas pracy zależy między innymi od:
- wymiarów i wagi oryginalnego zdjęcia,
- liczby rozmiarów generowanych przez WordPress,
- wydajności serwera,
- użycia Imagick albo GD,
- wielkości pliku znaku wodnego.
Szczególnie silnik GD może potrzebować więcej czasu, ponieważ zmiana przezroczystości znaku jest wykonywana na poziomie pojedynczych pikseli.
Pamięć podręczna może blokować odświeżenie zdjęcia
Nawet po poprawnym zapisaniu nowego pliku przeglądarka, wtyczka cache, serwer lub sieć CDN mogą nadal pokazywać wcześniejszą wersję obrazu.
Jeśli znak wodny nie pojawia się w archiwum produktu, wykonaj kolejno:
Poczekaj na przetworzenie
Przy dużych zdjęciach odczekaj kilka minut.
Odśwież stronę bez cache
Użyj twardego odświeżenia przeglądarki albo sprawdź stronę w trybie prywatnym.
Wyczyść cache WordPressa
Usuń pamięć podręczną wtyczki optymalizacyjnej i cache serwera.
Wyczyść CDN
Jeśli korzystasz z Cloudflare albo innej sieci CDN, usuń również jej cache obrazów.
Nie synchronizuj tego samego obrazu wielokrotnie tylko dlatego, że zmiana nie jest od razu widoczna. Najpierw odczekaj, wyczyść cache i sprawdź bezpośredni adres pliku.
Pozycja, wielkość i przezroczystość
Kod udostępnia dziewięć pozycji znaku:
- środek,
- cztery narożniki,
- środek górnej i dolnej krawędzi,
- środek lewej i prawej krawędzi.
Wielkość można ustawić na 25, 50, 75 lub 100 procent wymiarów zdjęcia. Wartość 0 procent pozostawia obraz bez widocznego znaku.
Przezroczystość jest regulowana w zakresie od 0 do 100 procent. Podgląd w panelu zmienia się na żywo, ale ustawienia są zapisywane dopiero po kliknięciu przycisku „Zapisz”.
Jaki plik wybrać jako znak wodny?
Najlepszy efekt daje logo zapisane jako PNG albo WebP z przezroczystym tłem.
Plik powinien:
- mieć czytelny kształt,
- zachowywać jakość po zmniejszeniu,
- nie posiadać dużego pustego marginesu,
- kontrastować z typowymi zdjęciami sklepu.
Wybrany plik zostaje oznaczony jako źródło znaku. Kod nie nakłada znaku wodnego na samo logo.
Synchronizacja istniejących zdjęć
Automatyczne znakowanie obejmuje nowe obrazy. Dla zdjęć znajdujących się już w bibliotece mediów kod dodaje przycisk: „Synchronizacja znaku wodnego”.
Po jego użyciu kod:
Przywraca czystą kopię
Jeżeli wcześniej utworzono backup, obraz nie jest znakowany kolejny raz na poprzednim znaku.
Pobiera aktualne ustawienia
Stosuje bieżącą pozycję, wielkość i przezroczystość.
Przetwarza wszystkie rozmiary
Aktualizuje pełny obraz oraz dostępne miniatury.
Kod nie zawiera przycisku masowego przetworzenia całej biblioteki. Istniejące zdjęcia synchronizuje się pojedynczo w szczegółach załącznika.
Kopie czystych plików
Przed pierwszym nałożeniem znaku kod tworzy kopię każdego przetwarzanego pliku. Dzięki temu późniejsza synchronizacja może najpierw przywrócić czysty obraz, a dopiero potem zastosować nowe ustawienia.
Kopie są zapisywane w katalogu:
wp-content/uploads/.sws-watermark-backups
Kod tworzy pliki ochronne dla serwerów Apache i IIS. Na serwerze Nginx warto dodatkowo sprawdzić, czy katalog kopii nie jest dostępny publicznie i w razie potrzeby zablokować go w konfiguracji serwera.
Obsługiwane formaty i wymagania serwera
Jako zdjęcia docelowe obsługiwane są:
- JPEG,
- PNG,
- WebP,
- AVIF, jeśli serwer potrafi ten format odczytać i zapisać.
SVG i GIF jako obrazy docelowe są pomijane. Kod wymaga przynajmniej jednego silnika przetwarzania:
- Imagick,
- GD.
Panel ustawień wyświetla informację o aktywnym silniku. Jeżeli serwer nie posiada Imagick ani GD, podgląd może działać, ale pliki nie zostaną zmodyfikowane.
Jak dodać kod przez Code Snippets?
Zainstaluj Code Snippets
W panelu WordPressa przejdź do sekcji wtyczek, zainstaluj Code Snippets i aktywuj ją.
Dodaj nowy fragment PHP
Utwórz nowy snippet i nadaj mu nazwę, na przykład „SWS znak wodny”.
Wklej cały kod
W Code Snippets nie dodawaj znacznika otwierającego <?php. Kod w poniższym boxie został już przygotowany bez tego znacznika.
Uruchom fragment wszędzie
Zapisz snippet i ustaw jego działanie w całej witrynie.
Skonfiguruj znak
Przejdź do Ustawienia → Znak wodny, wybierz plik, ustaw pozycję, wielkość i przezroczystość, a następnie zapisz zmiany.
Gotowy kod
Poniższy fragment jest przeznaczony do wtyczki Code Snippets. Przed aktywacją wykonaj kopię zapasową plików i bazy danych, a następnie przetestuj działanie na jednym obrazie.
Kod fizycznie modyfikuje pliki obrazów w katalogu uploads. Tworzy własne kopie czystych plików, ale pełna kopia bezpieczeństwa strony nadal jest konieczna.
Ładowanie kodu…Jak przetestować działanie?
Wybierz znak
Użyj prostego pliku PNG z przezroczystym tłem.
Prześlij testowe zdjęcie
Nie zaczynaj od najważniejszego zdjęcia produktu.
Sprawdź różne rozmiary
Otwórz pełny obraz, miniaturę oraz kafelek produktu w archiwum.
Zmień ustawienia
Zmień pozycję albo wielkość i użyj synchronizacji na zdjęciu testowym.
Sprawdź cache
Zweryfikuj stronę w trybie prywatnym i po wyczyszczeniu pamięci podręcznej.
Podsumowanie
Kod tworzy rozbudowany system znaku wodnego bez instalowania osobnej wtyczki do obrazów. Udostępnia panel ustawień, podgląd na żywo, automatyczne znakowanie nowych plików, ręczną synchronizację i kopie czystych obrazów.
Najważniejszą rzeczą jest cierpliwość podczas przetwarzania. Duże zdjęcie i wiele rozmiarów mogą wymagać kilku minut. Jeżeli zmiana nie pojawia się od razu w archiwum produktów, trzeba sprawdzić cache przeglądarki, WordPressa, serwera i CDN.
Przed użyciem na działającym sklepie należy wykonać kopię zapasową i przeprowadzić test na jednym obrazie.