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…