Envato Elements - pobieraj co chcesz, ile chcesz

Znajomy pracuje w firmie, nie takiej małej, ale też nie takiej dużej, ale mają tam dział IT. I choć dział ten pełni głównie funkcję helpdesku, to szef wpadł na pomysł, że zaoszczędzi, a chłopaki zrobią mu stronę internetową. Nigdy tego żaden z nich nie robił, ale po konsultacji ze mną kolega postanowił działać. Jako motyw doradziłem mu w takim przypadku Divi od Elegant Themes, dałem kilka wskazówek, wskazałem kilka przydatnych wtyczek (nie, wtyczek Yoast SEO czy W3 Total Cache zdecydowanie nie było na tej liście) i kolega wziął się do pracy…

Modyfikacja wybranych elementów za pomocą jQuery

Wszystko szło względnie dobrze, od czasu do czasu coś zasugerowałem czy podpowiedziałem, i tak strona powoli nabierała kształtów, Może bez jakiegoś „wow”, ale jak na totalnego amatora i tak całkiem nieźle to wyszło. Przynajmniej do momentu, aż nie przyszło do wdrożenia pewnej funkcjonalności, którą wspomniany szef podpatrzył u swojego znajomego, a która sprawiła, że kolega odkrył, że nawet najlepszy page builder nie zawsze wystarczy. Zwłaszcza gdy uwierzymy w hasła w stylu „bez pisania ani linijki kodu”.

Okazało się, że by wszystko działało i ładnie się raportowało, przycisk musi mieć ustawiony identyfikator (tag ID). W przypadku standardowego przycisku (przycisk jako samodzielny moduł) w Divi nie ma takiego problemu:

Mamy tutaj w ustawieniach zaawansowanych (u mnie jest to po angielsku, dlatego, że wolę tak pracować, niż korzystać z tłumaczeń, które nie zawsze są doskonałe i czasem wprowadzają zamieszanie) pole „CSS ID” i „CSS Class”, gdzie możemy ustawić zarówno identyfikator (np. ID_ELEMENTU), jak i klasę (np. DODATKOWA_KLASA).

Kod HTML takiego przycisku będzie wtedy wyglądał mniej więcej tak:

<div class="et_pb_button_module_wrapper et_pb_button_0_wrapper">
	<a id="ID_ELEMENTU" class="et_pb_button et_pb_button_0 DODATKOWA_KLASA" href="#">Tekst CTA</a>
</div>

Inaczej wygląda sytuacja w przypadku, gdy korzystamy z jakiegoś bardziej rozbudowanego modułu, w którym przycisk jest tylko jednym z kilku elementów. W takiej sytuacji w ustawieniach zaawansowanych wprawdzie mamy pole „CSS ID” i „CSS Class”, ale dotyczy one całego modułu, a nie np. przycisku:

I w takim przypadku kod HTML będzie wyglądał np. tak:

<div id="ID_ELEMENTU" class="et_pb_module et_pb_fullwidth_slider_0 DODATKOWA_KLASA">
	[...]
	<div class="et_pb_button_wrapper"><a class="et_pb_button et_pb_more_button" href="#">Tekst CTA</a></div>
	[...]
</div>

I z taką właśnie sytuacją spotkał się mój znajomy – potrzebował nadać atrybut ID dla przycisku, a mógł tylko do modułu.

Dodawanie atrybutu do (prawie) dowolnego obiektu za pomocą jQuery

Rozwiązań tego problemu mamy pewnie kilka, ale z racji tego, że już wcześniej coś podobnego robiłem dla koleżanki (również w połączeniu w motywem Divi), to od razu zasugerowałem koledze, by skorzystał z JavaScripu, a konkretnie jQuery, gdzie w 2-3 linijka można ogarnąć temat:

<script>
jQuery(function($){
	$('a.et_pb_button').attr('id', 'ID_ELEMENTU');
});
</script>

Gdybyśmy mieli na stronie więcej elementów typu „a.et_pb_button”, to można doprecyzować kod, wskazując, w którym elemencie nadrzędnym ma dokonać zmiany (w naszym przypadku może skorzystać z klasy „et_pb_fullwidth_slider_0” lub „DODATKOWA_KLASA”):

<script>
jQuery(function($){
	$('.DODATKOWA_KLASA a.et_pb_button').attr('id', 'ID_ELEMENTU');
});
</script>

W efekcie czego (z doprecyzowaniem lub bez, ale pamiętajcie, że na stornie może być tylko jeden element o danym ID) do przycisku zostanie dodany atrybut ID „ID_ELEMENTU”. Można oczywiście korzystać również z innych znaczników (ID, klas itp.), zależnie od potrzeb i stopnia rozbudowania strony.

I teraz jeszcze mała porada, bo kolega sprawdzał w źródle strony, czy faktycznie identyfikator prawidłowo się dodaje. I oczywiście jakby nie kombinował, ile razy by nie wklejał kodu ode mnie, za każdym razem w źródle strony widział przycisk bez atrybutu ID.

Dzieje się tak dlatego, że przy podglądzie źródła strony nie wykonuje się skrypt. Dlatego, jeśli już, to najłatwiej to zweryfikować za pomocą narzędzi dla deweloperów/programistów, które są obecnie dostępne praktycznie w każdej przeglądarce (na komputerach):

Jak widać, atrybut ID jest prawidłowo przypisany do przycisku (akurat w tym przypadku jest to przycisk w module CTA (wezwanie do działania), ale to akurat nie ma większego znaczenia).

Modyfikacja działania (prawie) dowolnego obiektu za pomocą jQuery

I tak sobie pomyślałem, że skoro już piszę artykuł na ten temat, to od razu dodam jeszcze jeden podobny element. Wprawdzie kolega akurat takiej potrzeby (jeszcze?) nie miał, ale wspomniana koleżanka owszem.

Chodzi o modyfikację zachowania wybranego obiektu – w naszym przypadku przycisku, tak by jego naciśnięcie wykonało (dodatkową) zdefiniowaną akcję. W takiej sytuacji znowu możemy skorzystać z JavaScript/jQuery, za pomocą którego do wybranego elementu dodamy dodatkową akcję:

<script>
jQuery(function($){
	$('a.et_pb_button').click(function() {
		alert('Witamy na Webinsider.pl');
	});
});
</script>

Dodanie kodu jak powyżej spowoduje, że kliknięcie w przycisk (element „a” o klasie „et_pb_button”) spowoduje wyświetlenie okna z tekstem „Witamy na Webinsider.pl”. Oczywiście jest to tylko przykład, i zazwyczaj w tym miejscu wstawia się jakieś bardziej przydatne funkcje (np. przekazanie zdarzenia do statystyk).

Czasem bywa też tak, że tak naprawdę jedyne co chcemy, to by wykonały się zdefiniowane funkcje, a sam przycisk jest tylko i wyłącznie niezbędnym gadżetem, który ma skłonić użytkownika do kliknięcia. W takiej sytuacji możemy zablokować standardowe funkcje obiektu (przycisku):

<script>
jQuery(function($){
	$('a.et_pb_button').click(function(e){
		e.preventDefault();
		e.stopPropagation();
		e.stopImmediatePropagation();
		alert('Witamy na Webinsider.pl');
	});
});
</script>

I w teorii być może wystarczyłoby tutaj skorzystać z funkcji „preventDefault()”, ale z doświadczenia wiem, że bardzo często to nie wystarcza, i zdecydowanie bezpieczniej zaserwować cały pakiet. Ba, można nawet jeszcze dodać pod „alert(…);” linijkę „return false;”, jakby ktoś chciał dołożyć do tego jeszcze jedną cegiełkę… ;-)

Dodawanie kodu (nie tylko) JavaScript do nagłówka strony w WordPressie

Jeśli chodzi o dodawanie kodu JS/jQuery do nagłówka strony w WordPressie (choć opisane powyżej metody zadziałają również w przypadku stron niedziałających na WordPressie) to pisałem jak to zrobić m.in. przy okazji artykułów:

Możemy też skorzystać z jednej z licznych wtyczek w repozytorium WordPressa, wystarczy poszukać czegoś w stylu „header and footer code injcetion”. Nie będę polecał żadnej konkretnej, bo po prostu z żadnej nie korzystam.

Wiele motywów zawiera odpowiednie opcje bezpośrednio w swoich ustawieniach, więc tutaj w ogóle nie trzeba nic dodatkowego instalować (lub pisać), wystarczy w odpowiednim miejscu wkleić nasz kod:

W przypadku motywu Divi, na którym bazujemy w tym artykule, wystarczy przejść od ustawień motywu (Wp-Admin: Divi -> Theme Options/Opcje motywu), następnie przejść do sekcji „integrations” (integracje), aktywować „header code” i w odpowiednim polu wkleić kod.

(!) Zgłoś błąd na stronie
Potrzebujesz profesjonalnej pomocy? Skontaktuj się z nami!
Spodobał Ci się artykuł? Zapisz się do naszego Newslettera - ZERO SPAMu, same konkrety, oraz dostęp do dodatkowych materiałów przeznaczonych dla subskrybentów!
Na podany adres e-mail otrzymasz od nas wiadomość e-mail, w której znajdziesz link do potwierdzenia subskrypcji naszego Newslettera. Dzięki temu mamy pewność, że nikt nie dodał Twojego adresu przez przypadek. Jeśli wiadomość nie przyjdzie w ciągu najbliższej godziny (zazwyczaj jest to maksymalnie kilka minut) sprawdź folder SPAM.

Patryk

CEO Webinsider.pl, a do tego CTO, CIO, CFO, CMO, CSO, COO i CRO ;-)
Pasjonat nowych technologii - od sprzętu po oprogramowanie, od serwerów po smartfony i rozwiązania IoT. Potencjalnie kiepski bloger, bo nie robi zdjęć "talerza" zanim zacznie jeść.

Dumny przyjaciel swoich psów :-)
Napisz komentarz
wipl_napisz-komentarz_01Jeśli informacje zawarte na tej stronie okazały się pomocne, możesz nam podziękować zostawiając poniżej swój komentarz.

W tej formie możesz również zadać dodatkowe pytania dotyczące wpisu, na które – w miarę możliwości – spróbujemy Ci odpowiedzieć.
Linki partnerskie
Niektóre z linków na tej stronie to tzw. „linki partnerskie”, co oznacza, że jeśli klikniesz na link i dokonasz wymaganej akcji (np. zakup/rejestracja) możemy otrzymać za to prowizję. Pamiętaj, że polecamy tylko te produkty i usługi, z których sami korzystamy, i uważamy, że są tego na prawdę warte… :-)
Znaki towarowe i nazwy marek
W niektórych wpisach (oraz innych miejscach na stronie) mogą być przedstawione/użyte znaki towarowe i/lub nazwy marek, które stanowią własność intelektualną tych podmiotów, a zostały użyte wyłącznie w celach informacyjnych.