Dostałem zapytanie o umieszczenie formularza zapisu do newslettera w ramach usługi MailerLite na stronie internetowej działające na WordPressie. Niby nic nadzwyczajnego, ale tutaj miejsce, gdzie ów kod miał być umieszczony, było bardzo precyzyjnie wybrane i niekoniecznie łatwo dostępne do modyfikacji.
Dodawanie niestandardowego kodu HTML i JavaScript do strony za pomocą JavaScript
W takiej sytuacji jest kilka rozwiązań, zaczynając od wielu tzw. hooków dostępnych w WordPressie, gdzie za pomocą odpowiedniego filtra (lub akcji) możemy m.in. wstawić dodatkowy kod, np. właśnie zapisu do newslettera. Niestety w tym przypadku takiej możliwości nie było, bo akurat w tym konkretnym „wymarzonym na wstawienie formularza miejscu” takiego hooka nie było.
Dalej możemy np. skorzystać z różnych opcji związanych z theme builder, czyli opcja dostępna w wielu motywach, wielu tzw. page builderach (Divi, Elementor, Gutenberg), gdzie możemy często dość swobodnie odgórnie zmodyfikować nie tylko wygląd konkretnej strony, ale ogólnie szablonu dla różnych typów stron, w tym np. stron związanych z WooCommerce, bo akurat konkretnie tego dotyczyło zapytanie. Jednak również i taka opcja w przypadku tej strony, a konkretnie tego sklepu, nie występowała.
Dalej mamy atak z grubej rury, czyli bezpośrednia modyfikacja – oczywiście z wykorzystaniem motywu potomnego – plików motywu. I choć jest to rozwiązanie, które faktycznie najczęściej pozwala przeprowadzić takie modyfikacje, to jednak nie jestem jego zwolennikiem, i wykorzystuje je tylko wtedy, gdy faktycznie nie ma innego wyjścia. Głównie dlatego, że w przypadku większych zmian np. w motywie bazowym (lub np. WooCommerce, jak w tym przypadku), może się wszystko rozjechać, gdy zmodyfikowany przez nas plik, zacznie się rozmijać z tym, czego np. motyw w nowszej wersji oczekuje, że w nim znajdzie.
Natomiast istnieje jeszcze (przynajmniej) jedno, niekoniecznie standardowe rozwiązanie, czyli wykorzystanie JavaScriptu (celowo pomijam jQuery ;-)). Załóżmy, że mamy obiekt o ID „content” (#content):
<div id="content">[KOD HTML]</div>
Chcemy tu przed jego końcem umieścić trochę dodatkowego kodu HTML (lub JavaScript). W tym celu możemy skorzystać z kodu:
<script type="text/javascript">
document.getElementById('content').insertAdjacentHTML('beforeend','[DODATKOWY KOD HTML]');
</script>
W wyniku czego otrzymamy:
<div id="content">[KOD HTML][DODATKOWY KOD HTML]</div>
Kluczowy jest tutaj element „beforeend”, który definiuje, gdzie ma być wstrzyknięty dodatkowy kod. Możemy skorzystać z takich tagów:
- beforebegin – tuż przed, na zewnątrz obiektu (before)
- afterbegin – na samym początku, wewnątrz obiektu (prepend)
- beforeend – na samym końcu, wewnątrz obiektu (append)
- afterend – tuż za, na zewnątrz obiektu (insertAfter)
W przypadku, gdy obiekt gdzie chcemy się wstrzelić, nie ma ID, a np. klasę lub ogólnie mamy do dyspozycji tylko jego typ (uwaga na wielokrotne występowanie obiektu o danej klasie lub typie), możemy kod lekko zmodyfikować, by „zaatakować” np. obiekt „p” o klasie „summary”:
document.querySelector('p.summary').insertAdjacentHTML('beforeend','[DODATKOWY KOD HTML]');
Dzięki czemu taki kod HTML:
<p class="summary">[KOD HTML]</p>
zmienimy na:
<p class="summary">[KOD HTML][DODATKOWY KOD HTML]</p>
A z racji tego, że o WordPressie mowa, to całość możemy jeszcze ubrać w funkcję, dzięki której kod JavaScript modyfikujący HTML strony dodamy do stopki:
function webinsider_wp_add_code2footer() {
?>
<script type="text/javascript">
document.querySelector('p.summary').insertAdjacentHTML('beforeend','[DODATKOWY KOD HTML]');
</script>
<?php
}
add_action( 'wp_footer', 'webinsider_wp_add_code2footer' );
Oczywiście ten kod (JavaScript) można dodać do strony inaczej, tak samo, jak nie musi to być strona na WordPressie…
- Zero Trust od Cloudflare, czyli prosty i bezpieczny sposób na dostęp do lokalnych zasobów z zewnątrz, bez publicznego adresu IP i otwierania portów na routerze - 1970-01-01
- Home Assistant i integracja z IMGW-PIB, czyli tworzymy automatyzację z powiadomieniami bazując na sensorach zagrożenie i alarm powodziowy - 1970-01-01
- Home Assistant 2024.9 i kolejne przydatne nowości w widoku „sekcje”, dzięki którym jeszcze lepiej można dopasować wygląd - 1970-01-01