Jak dodać JavaScript tylko do określonej strony WordPress

Implementacja JavaScript na docelowej stronie WordPress

WordPress to łatwa w użyciu platforma, która ułatwia zarządzanie witryną i dostosowywanie jej. Jednak wdrożenie niektórych zmian może być trudne, na przykład wykonanie kodu JavaScript na określonej stronie. Możliwe, że skrypt dodany do sekcji „Głowa” Twojej witryny jest teraz obecny na każdej stronie. Jest to typowa trudność dla początkujących.

Zrozumienie, jak warunkowo zastosować plik JavaScript, jest kluczowe, jeśli używasz go do kierowania na konkretną stronę. JavaScript może mieć nieoczekiwane konsekwencje i obniżyć prędkość Twojej witryny, jeśli jest używany w całym tekście. Z tego powodu tak ważne jest ograniczenie skryptu do niezbędnej strony.

W tym artykule przeprowadzimy Cię przez proces zmiany konfiguracji WordPressa, tak aby JavaScript uruchamiał się tylko na wymaganych stronach. Odpowiedź jest zrozumiała także dla osób niebędących programistami; ten przewodnik jest przeznaczony dla tych, którzy dopiero zaczynają.

Zanim ukończysz tę lekcję, powinieneś czuć się komfortowo obsługując skrypty specyficzne dla strony w WordPress. Przeprowadzimy Cię przez dokładny kod i procedurę wymaganą, aby mieć pewność, że JavaScript będzie działał tylko tam, gdzie powinien, poprawiając wydajność Twojej witryny.

Zrozumienie roli JavaScript na określonych stronach WordPress

Sposób umieszczenia skryptu bezpośrednio w sekcji „Head” może spowodować, że będzie on ładował się na każdej stronie, gdy zajdzie potrzeba uruchomienia JavaScript plik na określonej stronie WordPress. Jeśli chodzi o wygodę użytkownika i wydajność, nie jest to idealne rozwiązanie. Powyższe opcje zapewniają bardziej efektywny sposób obsługi skryptów, ograniczając skrypt tylko do określonej strony. Na przykład możemy skorzystać z WordPressa is_page() metoda określania, czy użytkownik widzi określoną stronę na podstawie jej identyfikatora lub informacji o błędzie. Jest to główna technika stosowana, aby mieć pewność, że plik JavaScript ładuje się tylko wtedy, gdy jest to konieczne.

Pierwsza metoda wykorzystuje znaczniki warunkowe w pliku funkcje.php plik razem z wp_enqueue_script(). Technika ta wykorzystuje podstawową funkcję WordPressa, która dodaje skrypty w sposób zapewniający odpowiednie zarządzanie zależnościami i ładuje skrypt w odpowiednim obszarze strony. Przez wp_enqueue_scripts przechwytywanie akcji, funkcja JavaScript zostanie dodana tylko wtedy, gdy WordPress przetworzy stronę spełniającą wymagania is_page() wymóg. Oprócz tego, że jest skuteczny, zatrzymuje to bezcelowe wykonywanie skryptów na nieistotnych stronach.

Używanie krótkich kodów jest częścią drugiej strategii. Krótkie kody WordPress ułatwiają dodawanie materiałów dynamicznych do strony lub posta. dodaj_krótki kod() można użyć do utworzenia niestandardowego krótkiego kodu, który umożliwi warunkowe wstawienie skryptu do obszaru zawartości, jeśli zajdzie taka potrzeba. Zapewnia to więcej opcji, jeśli chcesz używać skryptu w określonych sekcjach, a nie na całej stronie witryny lub wpisu. Dodatkowo jest to bardziej przystępna opcja dla osób, które nie czują się komfortowo wprowadzając bezpośrednie zmiany w plikach PHP.

Inna metoda jest idealna do dynamicznego ładowania skryptów na stronach, które mają określone parametry w adresie URL, ponieważ wykorzystuje jQuery do wyszukiwania określonych wzorców w adresach URL. okno.lokalizacja.href I $.getScript() są używane w tym podejściu do sprawdzenia, czy konkretny ciąg znaków znajduje się w adresie URL i odpowiedniego załadowania pliku JavaScript. To podejście sprawdza się dobrze w sytuacjach takich jak witryny e-commerce lub strony docelowe z unikalnymi kodami śledzenia, gdzie struktura adresu URL wymaga użycia skryptu. Wszystkie te techniki są modułowe, nadają się do wielokrotnego użytku i zapewniają, że skrypty ładują się tylko wtedy, gdy są potrzebne, co poprawia komfort użytkownika i wydajność.

// functions.php - Adding JavaScript to a specific WordPress page
function load_custom_js_on_specific_page() {
    // Check if we are on a specific page by page ID
    if (is_page(42)) { // Replace 42 with the specific page ID
        // Enqueue the external JavaScript file
        wp_enqueue_script('custom-js', 'https://example.com/code.js', array(), null, true);
    }
}
// Hook the function to wp_enqueue_scripts
add_action('wp_enqueue_scripts', 'load_custom_js_on_specific_page');

// functions.php - Using shortcodes to add JavaScript to a specific page
function add_js_via_shortcode() {
    // Return the script tag to be added via shortcode
    return '<script src="https://example.com/code.js" type="text/javascript"></script>';
}
// Register the shortcode [custom_js]
add_shortcode('custom_js', 'add_js_via_shortcode');
// Now, use [custom_js] in the page editor where the script should run

<script type="text/javascript">
jQuery(document).ready(function($) {
    // Check if the URL contains a specific query string or slug
    if (window.location.href.indexOf('specific-page-slug') > -1) {
        // Dynamically load the JavaScript file
        $.getScript('https://example.com/code.js');
    }
});
</script>

// Inside page-specific template file (e.g., page-custom.php)
<?php get_header(); ?>
<!-- Page Content -->
<script src="https://example.com/code.js" type="text/javascript"></script>
<?php get_footer(); ?>

Optymalizacja ładowania JavaScript na stronach WordPress

Miejsce załadowania skryptu ma kluczowe znaczenie podczas używania JavaScript na poszczególnych stronach WordPress. WordPress domyślnie pozwala na ładowanie skryptów na stronie stopka Lub chodnikowiec. Ze względu na wydajność zwykle zaleca się ładowanie skryptu w stopce, szczególnie w przypadku korzystania z zasobów zewnętrznych. Dzięki temu użytkownicy mogą cieszyć się szybszym ładowaniem strony, opóźniając wykonanie JavaScript do momentu zakończenia ładowania strony.

Możesz zmienić wp_enqueue_script() metoda ładowania skryptu w stopce poprzez przekazanie PRAWDA jako ostatni parametr. Robiąc to, możesz mieć pewność, że skrypt zostanie załadowany przed ostatnim tagiem treści i pozostałą częścią zawartości strony. Ponieważ mniej istotne skrypty są opóźniane, a ważniejsze zasoby mają priorytet, technika ta pomaga skrócić pozorny czas ładowania. Chociaż nowicjuszom ta optymalizacja może wydawać się niewielka, ma ona duży wpływ na szybkość i funkcjonalność witryny WordPress.

Pomijanie pamięci podręcznej i kontrola wersji to dwa inne istotne elementy. WordPress zapewnia łatwą metodę korzystania z wp_enqueue_script() funkcja dodawania numeru wersji do skryptów. Możesz mieć pewność, że użytkownicy nie otrzymają nieaktualnego kodu JavaScript ze swojej pamięci podręcznej, dodając argument wersji. Dzięki temu zawsze ładowana jest najnowsza wersja skryptu, co jest niezwykle pomocne podczas tworzenia lub aktualizacji skryptu. Ta procedura zmniejsza ryzyko kolizji skryptów i zwiększa funkcjonalność strony internetowej.