Najłatwiejszy sposób na dodanie kodu JavaScript do witryny WordPress

Cieszę się że tu jesteś.

Jeśli nie jesteś doświadczonym programistą WordPress, dodanie JavaScript do swojej witryny może być dość onieśmielające. Nawet gorzej…

Możesz poważnie zepsuć swoją stronę, jeśli nie będziesz ostrożny.

W tym samouczku poznasz najszybszy i najbezpieczniejszy sposób dodawania nowego kodu JavaScript do witryny WordPress.

Dodaj nowy Javascript do WordPress

Zwykle dodajesz motyw podrzędny lub wtyczkę, która następnie ładuje nowy plik JavaScript w Twojej witrynie.

Jest to jednak dużo pracy, jeśli potrzebujesz tylko dodać jeden lub dwa fragmenty kodu JS. Najłatwiejszym rozwiązaniem jest użycie wtyczki Simple Custom CSS i JS.

Zainstaluj i aktywuj tę wtyczkę w swojej witrynie, a zobaczysz nowy element niestandardowego menu CSS i JS dodany do pulpitu nawigacyjnego. Najedź kursorem na nowy element menu i kliknij opcję „Dodaj niestandardowy JS", ​​aby rozpocząć dodawanie kodu JavaScript.

Dodaj JavaScript

Na następnej stronie zobaczysz edytor kodu, w którym możesz wprowadzić plik JS, który chcesz dodać do swojej witryny.

Bardzo pomocne są również komentarze w edytorze

Nadaj swojemu JS tytuł, aby łatwo zapamiętać, dlaczego go dodałeś, a następnie wprowadź swój kod w edytorze poniżej. Pamiętaj, aby najpierw usunąć komentarze, ponieważ nie musisz ich dodawać do swojej witryny.

Przetestuj JavaScript

Jeśli chcesz się upewnić, że działa, możesz dodać ten JS do swojej witryny:

jQuery(document).ready(function( $ ){
    $('.logged-in').on('click', function(){
        alert('The code is working!'); 
    });
});

Oto jak będzie wyglądać w edytorze.

Wszystko, co robi ten kod, to wyświetlanie okna alertu po kliknięciu w dowolnym miejscu witryny, na przykład:

Dotyczy tylko zalogowanych użytkowników, więc nie będzie przeszkadzać odwiedzającym, gdy dodasz go do testu.

Gdy masz pewność, że działa, możesz zamienić fragment kodu testowego na prawdziwy JS, który chcesz dodać do swojej witryny.

Skonfiguruj opcje JS

Prosty niestandardowy CSS i JS zawiera kilka przydatnych opcji do decydowania o tym, w jaki sposób Twój JavaScript zostanie dodany do witryny.

Po pierwsze, jeśli dodajesz tylko trochę kodu, zachowaj typ linkowania jako „Wewnętrzny”, co po prostu dodaje kod do strony. Jest to prostsze niż ładowanie innego pliku i nie wpływa na czas ładowania witryny.

Następnie, jeśli dodajesz skrypt analityczny, prawdopodobnie powiedzą, czy powinieneś dodać go do nagłówka lub stopki. W przeciwnym razie najlepiej jest domyślnie używać stopki.

Na koniec, jeśli Javascript ma wpływać na odwiedzających, pozostaw zaznaczoną opcję „In Frontend” dla ustawienia Gdzie w witrynie. Opcja „W administratorze” dotyczy tylko sytuacji, gdy chcesz załadować JavaScript podczas przeglądania stron na pulpicie nawigacyjnym WP, i oczywiście opcja „Na stronie logowania” dotyczy tylko strony logowania członka.

Wniosek

Takie podejście jest DUŻO łatwiejsze niż tworzenie nowej wtyczki lub motywu potomnego.

Nie wspominając o tym, że Simple Custom CSS i JS to niesamowita wtyczka i prawdopodobnie znajdziesz dla niej więcej zastosowań w przyszłości. Dostępna jest również wersja pro, która jest zdolna do imponujących dostosowań, jeśli potrzebujesz większej elastyczności.

Jeśli masz pytania lub uwagi dotyczące tego posta, zostaw komentarz poniżej.