Ultimate Auction Pro Plugin

Opis instalacji i użycia pluginu Ultimate WooCommerce Auction Pro.

Pełną dokumentację znajdziesz tutaj.

Plugin WordPress Ultimate Auction Pro Plugin jest płatnym rozwiązaniem opartym na wtyczce Woocommece, więc aby go użyć, należy wpierw zainstalować i skonfigurować wtyczkę Woocommece na stronie.

Na co pozwala Ultimate Auction Pro Plugin?

Dzięki tej wtyczce, administrator może publikować swoje produkty aukcyjne do sprzedaży i tworzyć witrynę aukcyjną. Kupujący, zaś może licytować produkt na aukcji, a oferent, który zaoferuje najwyższą cenę, wygrywa.

Wtyczka oferuje kilka przydatnych funkcji, takich jak opcja zakupu premium, automatyczny debet, powiadomienia sms, transakcje offline dla kupującego i sprzedającego.

Działamy – instalacja i konfiguracja

  1. Po zakupie i instalacji wtyczki Ultimate Auction Pro Plugin wprowadzamy otrzymany, podczas zakupu, klucz licencyjny w zakładce opcji plugina License & Addon w polu Enter your license key i zatwierdzamy przyciskiem Activate License.
  2. konfiguracja zadań CRON w panelu administracyjnym serwera lub za pomocą pluginu WP Crontrol

Plugin działa tak, że każda aukcja ma swój określony status związany z czasem, co wymaga uruchomienia zadań w tle, które mogą sprawdzać określone zdarzenia, a następnie uruchamiać określone działania. Z tego powodu zostały wdrożone zadania CRON, które należy skonfigurować na swoim serwerze w panelu administratora(np. cPanelu). Dzięki temu mamy pewność, że status produktów aukcyjnych i powiadomienia e-mail beda prawidłowo uruchamiane.

W panelu WP w z menu plugina Ultimate Auction Pro Plugin (UAPP) przechodzimy do Settings/Ustawienia i w zakładce Auction/Aukcja mamy wypisane zadania CRON, które należy ustawić.

Logujemy się wiec na panel administracyjny serwera i wybieramy opcję zadanie CRON. I kolejno wprowadzamy zadnia do pola command/komenda i ustawiamy ich czas i po każdym zatwierdzamy klikając a Dodaj nowe zadanie CRON.

  • Pierwsze zadanie CRON – Auction Status – dotyczy statusu aukcji – jest ono odpowiedzialne za sprawdzanie statusu aukcji, jak np. zmiana z opcji przyszła aukcja na aktywna i z opcji aktywna aukcja na zakończona. Tutaj zalecane jest ustawienie co minutę.
  • Drugie zadanie CRON – Ending soon emails – służy do wysyłania wiadomości e-mail z informacją o zbliżającym się zakończeniu aukcji do oferentów. Zalecane jest ustawienie go na co godzinę.
  • Trzecie zadanie CRON – Payment Reminder – to przypomnienie o płatności – odpowiada za wysyłanie wiadomości e-mail z przypomnieniem o płatności. Zalecane jest ustawienie go na co godzinę.
  •  Czwarte zadanie CRON – Automatic Relisting – służy do automatycznego ponownego umieszczania na liście wygasających produktów opcyjnych. Zalecane jest ustawienie go na co godzinę.
  • Piąte zadanie CRON Ending soon sms, jest widoczne tylko wtedy jeśli administrator włączył powiadomienie sms. Jest ono odpowiedzialne za wysyłanie 'kończących się wkrótce’ wiadomości sms. Zalecane jest ustawienie go na co godzinę.

Podsumowując dostępnych jest pięć hooków dla zdarzeń CRON:

scheduled_process_auction
scheduled_ending_soon_email
scheduled_auto_relist
scheduled_payment_reminder_email
scheduled_ending_soon_sms

Tworzenie produktu na aukcję

Produkt aukcyjny tworzymy dokładnie tak jak każdy inny produkt w Woocommerce, czyli idziemy do menu produktów z paska bocznego, a następnie kliknij przycisk Dodaj nowy i otworzy się strona formularza nowego produktu.

Podajemy nazwę i opis produktu, a następnie w sekcji danych produktu, która zawiera wszystkie najważniejsze ustawienia produktu, z rozwijanej listy wybieramy produkt aukcyjny / Auction Product.

Kolejne ustawienia:

  • typ sprzedaży – Selling Type: mamy dwa typy, jeden to aukcja, a drugi to kup teraz, oba są domyślnie zaznaczone

Jeśli wybierzesz aukcję, wyświetli ona dane związane z opcjami, takie jak sekcja oferty, licznik czasu, cena rezerwowa, które są widoczne na stronie produktu a kupujący może kupić produkt aukcyjny za pomocą systemu licytacji

Jeśli wybierzesz opcję kup teraz, przycisk kup teraz zostanie wyświetlony na stronie produktu – dzięki czemu kupujący może kupić produkty za pomocą numeru zakupu 10.

  • stan produktu – Product Condition – istnieją dwa stany produktu: nowy i używany
  • cena wywoławcza – Opening Price – należy ją wprowadzić, licytujący mogą rozpocząć licytację od tej ceny lub wyższej
  • cena rezerwowa – Lowest Price to Accept – gdy użytkownik złoży ofertę w tej cenie lub wyższej, przedmiot może zostać zakupiony, wszelakie oferty poniżej ceny rezerwowej nie są wygraniem aukcji
  • przyrost oferty – Bid Increment – domyślnie ustawiony na jeden, administrator może ustawić dowolną wartość, oznacza to, że bieżąca wartość oferty wzrasta o jeden (lub inna ustawioną wartość) przy każdej ofercie. Administrator może ustawić albo przyrost oferty, albo zmienny przyrost oferty, opisany poniżej.
  • zmienny przyrost oferty – Variable Bid Increment – po wybraniu tej opcji pojawiają się pola przyrostu oferty, możemy tu ustawić zakresy oferty i przypisany do nich przyrost, czyli np.: w przedziale od 10 – 100 zł przyrost możemy ustawić na co 10 zł, w przedziale 100 – 200 zł, przyrost co 20 zł, a powyżej 200 zł przyrost co 50 zł
  • wartość następnej oferty – Number of next bids – domyślnie jest ustawiona na 10, co oznacza, że wyświetli 10 postąpienie wartości w rozwijanej liście bezpośrednich przebić
  • cena kup teraz – Buy now price – tutaj administrator może dodać cenę przycisku kup teraz produktu aukcyjnego
  • data rozpoczęcia – Start Date i zakończenia – Ending Date – administrator musi wybrać datę rozpoczęcia i zakończenia aukcji produktu
  • opcja automatycznego zwolnienia – Enable Automatic Relist – za pomocą tej opcji administrator może automatycznie zwolnić produkt aukcyjny po wygaśnięciu aukcji. Zaznaczenie tej opcji spowoduje włączenie kolejnych opcji:
    • opcja kliku warunków – Keep repeating Relist if below conditions are met –  pozwala na ponowne umieszczenie produktu na iście w przypadku spełnienia jednego z poniższych warunków, zaznaczamy tylko wtedy jeśli ustawiamy więcej niż jeden warunek,
    • przywrócenie w przypadku braku płatności – Relist if winner has not paid – jeśli zwycięzca nie zapłaci za produkt aukcyjny, zostanie on ponownie wystawiony na aukcji,
    • przywrócenie w przypadku braku oferty – Relist if there are no bids in auction – jeśli aukcja zakończy się bez żadnych ofert, produkt aukcyjny zostanie automatycznie ponownie dodany
    • przywrócenie w przypadku nie osiągnięcia ceny minimalnej – Relist if reserve price has not met – jeśli żaden oferent nie złoży oferty równej lub wyższej od zarezerwowanej kwoty, produkt aukcyjny zostanie ponownie umieszczony na liście
    • administrator może włączyć tę opcję i ustawić czas w jakim aukcja będzie jeszcze wyświetlana po spełnieniu któregoś z ustawionych warunków.

Trzy rodzaje systemu licytacji

  • licytacja prosta – Simple Auction
  • licytacja przez pełnomocnika – Proxy Auction
  • licytacja cicha – Silent Auction

Możesz wybrać dowolny z nich dla konkretnego produktu aukcyjnego.

Najpierw należy włączyć opcję licytacji w ustawieniach aukcji czyli przejdź do Aukcje / Auction > Ustawienia / Settings.
Znajdziesz tutaj, poniżej Cron Job Setting i AJAX BIDDING, sekcje podzielone na:

  • ustawienia prostej aukcji / Simple Auction Settings
  • ustawienia aukcji przez pełnomocnika / Proxy Auction Settings
  • ustawienia cichej aukcji / Silent Auction Settings

Licytacja prosta jest domyślnie włączona – więc nie trzeba jej ręcznie wyłączać.
Proxy – tutaj administrator musi włączyć pierwszą opcję – włączy to licytację proxy.
Silent – tutaj, również, administrator musi włączyć pierwszą opcję – włączy to licytację typu silent.

Licytacja proxy (znana również jako licytacja automatyczna) – automatyczny system licytacji sprawia, że licytujący nie musi wracać, aby ponownie licytować za każdym razem, gdy ktoś złoży kolejną ofertę. Zalogowany składający ofertę, może wprowadzić maksymalną kwotę, jaką jest skłonny zapłacić za przedmiot. Sprzedawca i inni licytujący nie widzą maksymalnej oferty. System będzie składać oferty w jego imieniu, korzystając z automatycznej kwoty przyrostu oferty, która jest oparta na bieżącej wysokiej ofercie. System będzie licytować tylko tyle, ile jest konieczne, aby upewnić się, że pozostaniesz oferentem o najwyższej cenie lub aby osiągnąć cenę rezerwową, do maksymalnej kwoty.

Aukcja z cichymi ofertami to rodzaj procesu aukcyjnego, w którym wszyscy oferenci jednocześnie składają ciche oferty prowadzącemu aukcję, dzięki czemu żaden oferent nie wie, ile zaoferowali inni uczestnicy aukcji. Zwycięzcą licytacji zostaje zazwyczaj oferent, który złożył najwyższą ofertę.

Aby ukryć nazwy i loginy oferantów na wykazie aukcji (w sekcji zakładek opisu produktu) należy w ustawieniach odznaczyć opcję Mask Username

Aukcja z licytacją przez pełnomocnika

Licytacja proxy jest również znana jako licytacja automatyczna.

W opcjach pluginu UAPP w zakładce Settings Auctions (poniżej CRON job settings) należy zaznaczyć opcję Enable Proxy Bidding by włączyć licytacji proxy i zapisać ustawienia.

Następnie w opcjach produktu aukcyjnego również odznaczamy możliwość licytowania tego produktu w sposób automatyczny przez zaznaczenie opcji Enable proxy bidding.

Od strony użytkownika, czyli widoku strony:

gdy użytkownik 1 (U1) złoży ofertę na produkt aukcyjny, a inny użytkownik 2 (U2) przebije ofertę U1, standardowo, U1 musi ponownie wrócić i złożyć ofertę o wyższej kwocie, aby pozostać najwyższym oferentem. Aby uniknąć powrotów, U1 może skorzystać z automatycznego licytowania (za pomocą przycisku Custom bid button), które składa ofertę w jego imieniu, w momencie gdy inny użytkownik przebije ofertę U1.

Pozwala to na wprowadzenie maksymalnej kwotę oferty przez U1. Sprzedawca i inni licytujący nie widzą maksymalnej oferty U1. Wtyczka składa oferty zamiast U1, korzystając z automatycznego zwiększania kwoty oferty i składa je tylko o tyle ile jest to konieczne, aby upewnić się, że U1 pozostaje najwyższym oferentem.

 

Ukrycie nazw i ofert licytujących:

Nazwa oferenta i wartość oferty w wersji podstawowej są widoczne, jeśli istnieje potrzeba ukrycia nazwy oferenta i wartości oferty przed innymi użytkownikami, jest to możliwe dzięki ustawieniu maskowania nazwy użytkownika.

Przejdź do opcji wtyczki i Ustawień, a następnie włącz ustawienie maskowania nazwy użytkownika i maskowania kwoty oferty w sekcji Proxy Auction Settings i zapisz je.

Na stronie będzie widać, że wyświetlana jest tylko pierwsza i ostatnia litera a kwoty są zamienione na gwiazdki ***.

Licytacja cicha

w ustawieniach plugina, w sekcji Silent Auction Settings zaznacz opcje Enable Silent Bidding i zapisz ustawienia.

Aukcja z cichą licytacją to rodzaj procesu aukcyjnego, w którym wszyscy oferenci jednocześnie składają 'niewidoczne’ oferty prowadzącemu aukcję, dzięki czemu żaden oferent nie wie, ile zaoferowali inni uczestnicy aukcji. Najwyższa oferta jest zwykle ogłaszana zwycięzcą procesu licytacji.

Następnie w opcjach produktu aukcyjnego również odznaczamy możliwość licytowania tego produktu w sposób automatyczny przez zaznaczenie opcji Enable Silent Bidding.

Od strony użytkownika, czyli widoku strony, widzimy zmiany, w porównaniu ze standardową aukcją:

  • nie mamy na górze widocznej kwoty Obecnej oferty a jedynie w tym miejscu informację, że aukcja jest cicha,
  • nie będzie widocznej informacji czy użytkownik wygrywa czy przegrywa po podaniu oferty
  • nie będzie widocznej informacji czy kwota rezerwowa została, czy nie, osiągnięta
  • będziemy mieli na dole, mniejszą czcionką podaną cenę wywoławczą
  • nie będzie wyboru ani przycisku oferty bezpośredniej
  • będzie tylko przycisk Oferta niestandardowa

Funkcja licytacji Ajax

W podstawowej wersji działania pluginu UAPP gdy oferent składa ofertę na produkt aukcyjny, należy odświeżyć stronę, aby uzyskać aktualne dane.

Jeśli nie chcemy by konieczne było odświeżanie strony za każdym razem, gdy ktoś złoży ofertę na produkt aukcyjny, możemy włączyć opcję AJAX.
W panelu admina, w opcjach pluginu UAPP, w zakładce Settings mamy sekcję z ustawieniami AJAX BIDDING.

Tutaj mamy dostępne są dwie opcje:

  • opcja „By enabling this setting, bids will be placed without page refresh”  – jest włączenie ustawienia, aby oferty były składane bez odświeżania strony,
  • opcja „Get Bid amount information instantly without page refresh” – pozwala aby, gdy jeden użytkownik złoży ofertę na aukcji, inni użytkownicy przeglądają ten produkt aukcyjny, będzie natychmiast wiedzieć o innych ofertach, bez odświeżania strony internetowej

Kolejnym ustawieniem „Check Bidding Information” to sprawdzenie informacji o licytacji – tutaj należy wprowadzić interwał czasowy pomiędzy dwoma żądaniami AJAX.
Domyślną wartością tego pola jest jeden – oznacza to, że informacje o ofertach będą pobierane co jedną sekundę.

Ostatnie ustawienie „Sync Timer on Auction List Page (it is only for global timer)” – to zsynchronizowanie licznika czasu na stronie listy aukcji.
Po włączeniu tej opcji, gdy strona załaduje się po 5 sekundach, do serwera zostanie wysłane żądanie AJAX w celu uzyskania czasu serwera i obliczenia czasu pozostałego do wygaśnięcia oraz zaktualizowania licznika czasu na stronie produktu.
Jeśli witryna ładuje się długo i z tego powodu licznik czasu nie jest prawidłowo aktualizowany, to ustawienie, rozwiązuje ten problem.

anti-sniping

Czym jest sniping? Na aukcjach internetowych zazwyczaj licytujący składa ofertę na kilka sekund przed zakończeniem aukcji, co może spowodować wyjście z bieżącej najwyższej oferty i nie daje szansy innym oferentom na przebicie oferty 'snajpera’.

Wtyczka UAPP zapewnia administratorowi konfigurację, w której w określonym czasie przed wygaśnięciem aukcji, dzięki czemu aukcja zostaje przedłużona o określony przedział czasu.

Administrator może ustawić ten przedział czasowy w ustawieniach Pluginu – daje to wszystkim oferentom możliwość ponownego złożenia ofert.

Ustawienia anty-snipingu

Opcje wtyczki UAPP – Ustawienia – sekcja Timer i Soft Close / Avoid Sniping

Pierwszą opcją to wybór w jaki sposób odliczany będzie czas. Dostępne są dwa rodzaje timerów:

  • timer oparty na jquery, jest on idealny lokalnie, gdy oferenci znajdują się w jednej strefie czasowej i jest ustawiony domyślnie,
  • timer oparty na react, który jest globalny, idealny, gdy oferenci są z całego świata.

Kolejne ustawienie to anty-sniping, jak użytkownicy powinni widzieć zaktualizowany czas pozostały do końca.
Ma tu dwie opcje:

  • automatyczne odświeżanie strony, tutaj licznik czasu dla wszystkich użytkowników jest aktualizowany automatycznie
  • ręczne odświeżanie strony, plugin powiadomi użytkownika, wyświetlając komunikat na stronie produktu, a następnie użytkownik musi ręcznie odświeżyć licznik czasu

Poniżej, w polu tekstowym, możemy ustawić komunikat wyświetlany w ręcznym odświeżaniu licznika czasu.

Kolejne ustawienie „Anti-sniping: What do you want to do?” pozwala na wybór akcji, czy chcemy rozszerzyć czas czy zresetować.

Jeśli pierwsza opcja zostanie wybrana, a oferent złoży ofertę we wspomnianym czasie, licznik zostanie przedłużony zgodnie z ustawieniem.
Jeśli druga opcja jest wybrana i oferent złoży ofertę we wspomnianym czasie, produkt aukcji zostanie zresetowany.

Kolejne ustawienie „Anti-sniping: Extend Auction options” – możliwe jest do ustawienia, tylko wtedy gdy opcja „Anti-sniping: What do you want to do?” ustawiona jest na Extend Auction.

I mamy tu dostępne dwie opcje:

  • rekurencyjne przedłużanie aukcji, będzie przedłużać aukcję, jeśli oferta zostanie złożona, aby spełnić wymagania czasowe
  • przedłużenie aukcji tylko raz, spowoduje to przedłużenie aukcji tylko raz i wysłanie wiadomości e-mail do wszystkich oferentów wprowadzających najnowszą ofertę.

Ostatnie dwa ustawienia służą do ustawienia czasu anty-sniping:

  • pierwsza określa, czas w jakim ma zacząć działać – oznacza to, że gdy ustawimy 5min, i do zamknięcia aukcji pozostało pięć min, a ktoś złoży ofertę na aukcji, przedłuży lub zresetuje czas o ustawienie w kolejnym polu,
  • ta określa o ile czasu ma się przedłużyć lub zresetować aukcja, czyli jeśli ustawimy 3min, i do końca aukcji pozostało pięć min i ktoś złoży ofertę, czas aukcji zostanie wydłużony lub zresetowany o wprowadzone 3 min.

 

Node.js

Node to środowisko uruchomieniowe JavaScript o otwartym kodzie źródłowym – co oznacza, że możemy wykonywać JavaScript na naszej maszynie, a nie tylko w przeglądarce.

Node instalujemy pobierając go ze strony nodejs.org, i wybieramy wersję LTS (zalecana) lub Current.

Aby zweryfikować poprawność instalacji Node, w oknie wiersza poleceń wprowadzamy polecenie node -v, które wyświetli numer wersji.

Node jest dostarczany wraz z menedżerem pakietów o nazwie NPM (Node Package Manager). Aby sprawdzić, czy jest zainstalowany, wpisujemy do wiersza poleceń polecenie npm -v, które powinno również podać numer wersji.

Więc aby skorzystać z narzędzi do kompilacji, musimy najpierw zainicjować menedżera pakietów.

Robimy to wywołując komendę npm init.
Wyświetlą nam się ustawienia do wybrania, na początek możemy poprzez klikanie Enter wybrać te predefiniowane.

Efektem będzie utworzenie pliku package.json, który jest naszym plikiem package.config – tutaj możemy zdefiniować moduły, których chcemy użyć, a także możemy zdefiniować tutaj skrypty, które możemy wykonać, aby na przykład uruchomić nasze narzędzie do kompilacji.

A tu można wybierać z pośród wielu, jak np.: jest gulp.js, webpack, Parcel.

Animacje w css

Animacje w css dzięki nim możesz stopniowo zmieniać określone style danego elementu w czasie – to naprawdę potężne narzędzie. Animacje css możesz traktować jak oś czasu. Aby utworzyć animację, musisz najpierw określić kilka klatek kluczowych. Dla zdefiniowania klatki kluczowej używamy zapytania @keyframes i nadajemy jej, jej własna, specyficzną nazwę.

Dla pierwszej klatki kluczowej na początku animacji czyli 0% definiujesz właściwości startowe i tak samo dla ostatniej klatki czyli 100% również definiujesz właściwości.

Następnie aby zastosować tę animację do elementu, należy wybrać element docelowy, dodając do niego nazwę animacji animation-name. Następnie wystarczy określić czas trwania animacji css animation-duration i tu możesz podać na przykład 1 minutę lub 1 milisekundę. Oraz podajesz ilość powtórzeń animacji, ponieważ defaultowo animacja odtwarza się tylko raz animation-iteration-count. Jeśli chcesz by animacja odtwarzała się cały czas ustawiasz parametr na wartośćinfinite.

 

Podstawy kodowania – strony internetowe

Strona internetowa, w głównej podstawie składa się z:

  • HTML, który przechowuje strukturę i dane, takie jak np. teksty i obrazy
  • CSS, który jest odpowiedzialny za wygląd strony i jej elementów
  • Javascript, który sprawia, że strona będzie bardziej interaktywna

Strony internetowe oglądamy w przeglądarce gdzie dokument html jest wyświetlany/renderowany na podstawie żądania pobieranego z serwera.

HTML – to skrót od Hyber Text Markup Language – czyli standardowy język znaczników, opisujący strukturę strony internetowej, która składa się z elementów HTML, takich jak: nagłówki (<h1>-<h6>), paragrafy (<p>), linki (<a>), obrazki (<img>).

CSS – skrót od Cascading Style Sheets – czyli język służący do opisu wyglądu dokumentu. Informuje przeglądarkę w jaki sposób ma wyrenderować konkretny element, jaki kolor ma mieć tło, jaka wielkość czcionki ma być wyświetlona. A takze pozwala na bardziej zaawansowane czynności jak animacje, przejścia, filtry, tryby mieszania.

JavaScript / JS – to język programowania, dzięki któremu strona internetowa może być bardziej interaktywna, pozwala na modyfikację elementów, ich wyglądu w odpowiedzi na reakcję użytkownika. Dzięki niemu możemy zaimplementować złożone funkcje na stronach internetowych. Przykładowo umożliwia: tworzenie dynamicznie aktualizowanych treści lub kontrolowanie multimediów, animowanie obrazów, reagowanie na pozycje myszy lub uruchamianie kamery internetowej.

HTML

tutaj posługujemy się znacznikami zwanymi tagami, tworzymy je za pomocą ostrych nawiasów <> wpisując wewnątrz nazwę tagu. mamy dwa rodzaje znacznikówze względu na ich zapis:

  • posiadające tag otwierający i zamykający, tak jak np.: <body></body>, <p></p> – gdzie pomiędzy znacznikami zamieszczamy ich zawartość, która mogą również stanowić inne tagi
  • zawarte w całości w jednej części tagu, tak zwane samo-zamykające się jak np.: <img src=”” alt=””>,  których parametry wypisujemy w atrybutach

Poprawność kodu html możemy zweryfikować wykorzystując walidator kodu HTML.

Zgodnie ze specyfikacją html tag Section służy do opisania sekcji na stronie, podczas gdy tag Article opisuje samodzielny fragment treści, taki jak np. wpis na blogu.

nałożenie lini na tło strony


body
    &::before, &::after
      content: ''
      height: 100%
      position: absolute
      top: 0
      z-index: -1
      border-left: 1px solid #D8D8D8
      border-right: 1px solid #D8D8D8
      opacity: 0.2
    &::before
      width: 10.83%
      left: 24.06%
    &::after
      width: 17.55%
      right: 17.66%

losowe tło – style dodane inline

Czasami jest taka potrzeba lub konieczność by dodać losowe tło w kodzie samej strony WP, poniżej przykład jak można to zrobić. Zaczynamy od stworzenia katalogu na serwerze bg_random gdzie zamieszczamy 9 stworzonych graficznych teł. Następnie w kodzie strony w znacznikach style zamieszczamy odpowiedni kod, który wykorzystuje funkcję php rand. W tym przypadku również taki który obsługuje urządzenia z matryca Retina.

<style>
  body.single-page {
    background-image: url('<?php echo get_template_directory_uri(); ?>/images/bg_random/<?php echo rand(1,9); ?>.png');
  }
  @media
  only screen and (-webkit-min-device-pixel-ratio: 1.25),
  only screen and ( min--moz-device-pixel-ratio: 1.25),
  only screen and ( -o-min-device-pixel-ratio: 1.25/1),
  only screen and ( min-device-pixel-ratio: 1.25),
  only screen and ( min-resolution: 200dpi),
  only screen and ( min-resolution: 1.25dppx)
  {
    body.single-page {
      background-image: url('<?php echo get_template_directory_uri(); ?>/images/bg_random/<?php echo rand(1,9); ?>@2x.png');
    }
  }
</style>

parę sposobów na randomowy kolor tła

Fajnie mieć możliwość dodania do wybranego elementu losowego koloru np. tła. Ciekawie sprawdza się to w sliderach z treścią, kiedy każdy kolejny slid ma inne tło.

Jednym z rozwiązań jest stworzenie tablicy wybranych kolorów i użycie funkcji php array_rand.

Tworzymy tablice kolorów i poniżej, w zmiennej $bg_color pobieramy losowy element tablicy, czyli losowy kolor

$bg_colors = array( "#d7bbe3", "#F2C4DE", "#71B1D9", "#AED8F2", "#F2DEA2", "#F2CDC4", "#ABD3DB", "#C2E6DF", "#D1EBD8" );
$bg_color = $bg_colors[array_rand($bg_colors)];

Kolejnym krokiem jest dodanie tej wartości inlinowo do wybranego elementu html:

<div class="sliderSimple" style="background-color: <?php echo $bg_color; ?>"></div>

I dzięki temu otrzymujemy, każdy slid z innym kolorem, w losowej kolejności, po odświeżeniu strony, kolory znów się przetasowują, dzięki czemu element wygląda ciekawiej :)

Trochę ciekawiej robi się, kiedy chcemy tą sztuczkę zastosować do elementu before lub after ale tutaj użyć możemy zmienne kaskadowe CSS które definiujemy w pliku .css za pomocą funkcji var().

plik .css

.sliderSimple::before {
  content: '';
  width: 66px;
  height: 66px;
  background-color: var(--nws-color);
}

a następnie, w pliku gdzie mamy kod samej strony (np. .php w przypadku WordPress) przypisujemy wartość zmiennej losowo wygenerowanego koloru:

<div class="sliderSimple" style="--nws-color: <?php echo $bg_color; ?>"></div>

WordPress – jak sprawdzić czy w treści jest użyty shortcode

Kiedy potrzebujemy zamieścić skrypt, który jest tylko umieszczany wtedy kiedy zamieszczamy konkretny shortcode w treści strony, można skorzystać z funkcji has_shortcode

gdzie jako pierwszy parametr podajemy gdzie szuka, czyli w poniższym przypadku treść posta, strony a jako drugi jakiego shortcode szuka:

<?php
if ( has_shortcode( $post->post_content, 'socialReviews' ) ) { ?>
  <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<?php } ?>

skróty klawiaturowe w figmie

sift + G – włącza/ wyłącza linię sitaki
shift + C – ukrywa / pokazuje komentarze

Dodanie efektu lightbox do natywnej galerii WordPress

Jeśli nie chcemy stosować dodatkowego plugina z efektem lightbox, który doda swój skrypt na każdej stronie możemy zastosować rozwiązanie pozwalające wykorzystać skrypt lightbox i dodać tylko do wybranych stron.

ja korzystam z efektu lightbox2 od lokesh – do pobrania tutaj.

W footer.php zaznaczam by plik. js pobierał się tylko do wybranej strony poprzez kod:

<?php if ( is_page(3901) ) { ?>
  <!-- //gallery -->
  <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/js/lightbox.css"/>
  <script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/lightbox.js"></script>
<?php } ?>

Kod który pozwala dodać do konkretnej strony do treści odpowiedni atrybut:

add_filter('wp_get_attachment_link', 'nws_add_gallery_attr');
function nws_add_gallery_attr($link) {
  if ( is_page(3901) ) {
    global $post;
    return str_replace('<a href', '<a data-lightbox="lightboxgallery" href', $link);
  }
}

Ciekawym rozwiązaniem może tez być modyfikacja z użyciem filtra the_content, jak w tym prostym przykładzie gdzie tylko dodajemy tekst po głównej treści

function nws_added_page_content ( $content ) {
    if ( is_page(39011) ) {
        return $content . '<p>Your content added to  pages (not posts).</p>';
    }

    return $content;
}
add_filter( 'the_content', 'nws_added_page_content');

Jeszcze te rozwiązania mogą być ciekawe ale nie miałam okazji ich przetestować.
Add data attribute to a gallery link
Adding a lightbox to WordPress

WordPress optymalizacja

htaccess – przechowywanie plików w pamięci cache przeglądarki

Ustawienia „cachowania” za pomocą modułu mod_expires przez dodanie odpowiednich reguł w pliku .htaccess

<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault A600
ExpiresByType text/javascript A604800
ExpiresByType application/javascript A604800
ExpiresByType text/css A604800
ExpiresByType image/gif A604800
ExpiresByType image/png A604800
ExpiresByType image/jpeg A604800
ExpiresByType image/x-icon A604800
ExpiresByType text/html A60
</IfModule>

Ustawienia .htaccess obejmujące kompresję

# BEGIN Compress text files
<ifModule mod_deflate.c>
AddOutputFilterByType DEFLATE \
 text/html \
 text/xml \
 text/css \
 text/plain \
 image/svg+xml \
 application/xhtml+xml \
 application/xml \
 application/rdf+xml \
 application/rss+xml \
 application/atom+xml \
 text/javascript \
 text/ecmascript \
 application/javascript \
 application/x-javascript \
 application/ecmascript \
 application/json \
 application/x-font-ttf \
 application/x-font-otf \
 font/truetype \
 font/opentype \
 application/x-pointplus
</ifModule>
# END Compress text files

# BEGIN Expire headers
<ifModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 2592000 seconds"
ExpiresByType image/x-icon "access plus 2592000 seconds"
ExpiresByType image/jpeg "access plus 2592000 seconds"
ExpiresByType image/jpg "access plus 2592000 seconds"
ExpiresByType image/png "access plus 2592000 seconds"
ExpiresByType image/gif "access plus 2592000 seconds"
ExpiresByType application/x-shockwave-flash "access plus 2592000 seconds"
ExpiresByType text/css "access plus 604800 seconds"
ExpiresByType text/javascript "access plus 604800 seconds"
ExpiresByType application/javascript "access plus 604800 seconds"
ExpiresByType application/x-javascript "access plus 604800 seconds"
ExpiresByType text/html "access plus 604800 seconds"
ExpiresByType application/xhtml+xml "access plus 604800 seconds"
</ifModule>
# END Expire headers

# BEGIN Cache-Control Headers
<ifModule mod_headers.c>
<filesMatch "\.(ico|jpe?g|png|gif|swf)$">
Header set Cache-Control "public"
</filesMatch>
<filesMatch "\.(css)$">
Header set Cache-Control "public"
</filesMatch>
<filesMatch "\.(js)$">
Header set Cache-Control "private"
</filesMatch>
<filesMatch "\.(x?html?|php)$">
Header set Cache-Control "private, max-age=360, must-revalidate"
</filesMatch>
</ifModule>
# END Cache-Control Headers

# BEGIN Turn ETags Off
Header unset Pragma
FileETag None
Header unset ETag
# END Turn ETags Off

Pamiętaj by kod ten dodać w pliku .htaccess po lini: # END WordPress inaczej cały kod zostanie nadpisany.

ACF Group

Proste pobranie wartości pola Group

$field = get_field('hero');
 if( $field ):
 echo $field['name'];
endif;

Pobranie ID pola Group

$field = get_field_object('hero');
echo $field['ID'];

Pobranie wszystkich wartości pól pola Group

if(function_exists('acf_get_field_groups')) {
 $fieldGroup = acf_get_field_group('hero');
 $fields = acf_get_fields_by_id(11);

 var_dump($fields);
}

Dodanie tłumaczenia do szablonu strony na systemie WordPress

Aby wprowadzić plik z tłumaczeniami w naszym szablonie strony zbudowanej na WordPress powinnismy:

  • stworzyć w katalogu szablonu, katalog languages
  • stworzyć odpowiednie pliki zawierajace tłumaczenia w odpowiednich formatach pl_PL.po i pl_PL.mo najlepiej za pomocą programu PoEdit
  • wprowadzić odpowiedni kod do pliku functions.php
  • wywołujemy użycie tłumaczenia poprzez textdomain i zapis:  _e(„Some text”, 'atcom’)

function nws_setup()
{
load_theme_textdomain('atcom', get_template_directory() . '/languages');
}

add_action('after_setup_theme', 'nws_setup');

Zliczanie tagów

Niektóre portale społecznościowe mają ograniczoną ilość tagów jakie można zamieścić w wpisie, poniższe pole pozwoli ci na zweryfikowanie ile tagów w tekście już użyłeś. Z uwzględnieniem że tagi są oznakowane #.