Najskuteczniejsza metoda dodawania skryptów wbudowanych w WordPress

Opublikowany: 2022-06-16

Skrypty wbudowane to dwa proste słowa, które przyprawiają programistów o dreszcze. Skrypty wbudowane to łatwy sposób na dodanie JavaScript (JS), CSS i HTML do tekstu posta WordPress. Chociaż można ich używać do wielu celów, jednym z ogólnych zastosowań jest wprowadzanie zmian w locie po opublikowaniu nowego artykułu WordPress. Niektórzy mogą twierdzić, że nie jest to konieczne, ale dzięki temu Twoja witryna będzie działać płynnie i wydajnie.

Jedną z rzeczy, którą większość użytkowników WordPressa przeocza, jest uzupełnianie skryptów na swoich stronach. Niezależnie od tego, czy chcesz zaimplementować tekst w wierszu na jednej stronie, czy w całej witrynie, istnieje wiele sposobów, aby to zrobić za pomocą WordPressa. Dodawanie skryptów wbudowanych do witryny WordPress może być tak proste , gdy zrozumiesz odpowiednie metody, aby zrobić to poprawnie. W tym poście na blogu omówimy najskuteczniejsze sposoby łatwego dodawania skryptów wbudowanych w WordPress. Czytaj dalej, aby dowiedzieć się więcej.

Dodawanie za pośrednictwem Wp_print_scripts

Jeśli chcesz dodać wbudowane teksty WordPress, odpowiedzią jest funkcja WordPress wp_print_scripts lub/i admin_print_scripts. WordPress wp_print_scripts może wyświetlać znaczniki tekstowe w nagłówku dokumentu, co zwykle ma miejsce w przypadku dołączania plików JS lub CSS. Ta funkcja WordPress pozwoli Ci uczynić Twoją witrynę bardziej interaktywną lub dodać nową funkcjonalność. Podobnie jak w przypadku każdej funkcji WordPress, przed użyciem jej w witrynie internetowej należy przestrzegać kilku prostych zasad.

Ta funkcja ustanawia trzy zmienne w oparciu o opcje wtyczki WordPress i wyświetla je w interfejsie użytkownika (sekcja head) za pomocą zaczepu admin_print_scripts. Aby dodać wbudowane znaki do obszaru administracyjnego, możesz również zastąpić wp_print_scripts funkcją admin_print_scripts i wywołać to dziennie.

Kiedy WordPress jest instalowany po raz pierwszy, zawiera wiele tekstów, które są automatycznie dodawane do witryny. Może to prowadzić do wydłużenia czasu ładowania i wykorzystania procesora na serwerze. Jednym ze sposobów walki z tym jest użycie funkcji wp_print_scripts, więc ładujesz teksty tylko wtedy, gdy są potrzebne lub pożądane. To powiedziawszy, rzućmy okiem na niektóre zalety i wady używania funkcji wp_print_script do dodawania znaków wbudowanych w poście WordPress:

Plusy:

Zawsze łatwo jest dodać dowolny tekst w wierszu do „sekcji nagłówka” stron WordPress;
Dodany kod nie będzie miał żadnych ograniczeń, co oznacza, że możesz dodać zmienne JS, funkcje, metody, warunki lub cokolwiek, co chcesz dodać do swojej witryny.

Cons:

Nie ma konkretnego sposobu powiązania dodanego kodu z zarejestrowanymi skryptami;
W większości przypadków kod wyjściowy na różnych czynnikach może nie być rzeczywistym i spójnym sposobem kontrolowania lokalizacji kodu wyjściowego. Jednak zawsze możesz użyć parametru <priority> pod <add_action> do kontrolowania lokalizacji dodanego kodu.

Użyj funkcji wp_add_inline_script()

Niedawno WordPress uruchomił nową funkcję dodawania wbudowanego JavaScript do postów WordPress. Jednak ta nowa integracja jest zgodna, począwszy od wersji 4.5 WordPress, i jest bardziej widocznym sposobem dodawania tekstów w tekście w porównaniu z innymi dostępnymi opcjami. Definiujemy funkcję wp_add_inline_script() i oczekujesz, że wykona zadanie bezbłędnie. Nawet najbardziej doświadczony programista WordPress może to potwierdzić.

Funkcja wp_add_inline_script() to sposób na dodawanie wbudowanych znaków do witryny bez edytowania kodu na stronie WordPress. Pozwala to na wprowadzanie zmian w czasie rzeczywistym bez konieczności dostępu do FTP lub korzystania z wtyczki. Ta funkcja jest również jedną z podstawowych integracji, których możesz użyć do dostosowania swojej witryny WordPress. Procedura umożliwia dodawanie tekstów wbudowanych w kodzie witryny, co oznacza, że zostaną one dodane bezpośrednio do tagów HTML na Twojej stronie internetowej. Pozwala to na znacznie większą personalizację niż używanie zewnętrznych plików JS lub linków do innych stron internetowych.

Plusy:

Funkcja wp_add_inline_script() to cenny sposób dodawania znaków wbudowanych do bloga WordPress;
Może to być łatwy i wygodny sposób dla programistów na dodawanie kodu JS bez zmiany motywu WordPress lub plików wtyczek lub edytowania pliku szablonu header.php;
Może to być przydatne przy dodawaniu skryptów, takich jak kod Google Analytics. Dzięki temu nie musisz edytować pliku header.php za każdym razem, gdy pojawia się aktualizacja funkcji lub ustawień Google Analytics.

Cons:

Jedyną wadą funkcji wp_add_inline_script() jest to, że jest ona dostępna tylko od wersji 4.5 WordPress.

Użyj funkcji wp_localize_script()

Funkcja wp_localize_script() to przydatne narzędzie WordPress do dodawania znaków wbudowanych do poszczególnych stron w witrynie WordPress. Jest to idealne rozwiązanie, jeśli potrzebujesz szybkich i tymczasowych funkcji na swoich stronach, takich jak wydarzenie lub promocja. Ta funkcja akceptuje zmienną liczbę argumentów i wyświetla listę ciągów JS dodanych do nagłówka dokumentu. Może to być pomocne, jeśli na przykład używasz jQuery i chcesz, aby kod skryptu był tylko na niektórych stronach.

Wp_localize_script() umieszcza plik JS w kolejce i nadaje mu identyfikator/uchwyt „shapeSpace_script”, który definiuje tablicę asocjacyjną zawierającą twoje zmienne. Na koniec, te zmienne JS są przekazywane do funkcji wp_localize_script() w celu dołączenia do zarejestrowanego skryptu shapeSpace_script. W rezultacie umożliwia zastosowanie dowolnych zmiennych JS, takich jak m.in. shapeSpace.varl. Ta funkcja jest dedykowana do lokalizowania zmiennych JS do użytku z tłumaczeniem języka i internacjonalizacją. Jednak większość programistów WordPress używa go jako powszechnego sposobu dodawania znaków wbudowanych do swoich witryn.

Plusy:

Wp_localize_script() włącza powiązanie „odczyt:wymagaj” z istniejącym zarejestrowanym skryptem. Oznacza to, że zapewnia doskonały i spójny sposób kontrolowania względnej lokalizacji niestandardowego tekstu wyjściowego Twojej witryny.

Cons:

Jedyną wadą jest to, że możesz dodawać tylko zmienne JS ( var = 'value' ). Nie można więc dodawać innych skryptów wbudowanych, takich jak funkcje, warunki, równania, między innymi za pomocą wp_localize_script().

Użyj funkcji zastępczej

Jak wspomniano wcześniej, określone metody, takie jak wp_add_inline_script(), są dostępne tylko od wersji 4.5 WordPress lub nowszej. Jednak łącząc wszystko razem, możesz stworzyć niezawodną metodę dodawania znaków wbudowanych do plików WordPress, niezależnie od używanej wersji WordPressa. Najskuteczniejszym sposobem na to jest użycie trzech funkcji we wtyczce post w sekcji head (front-end).

Pierwszą niezbędną rzeczą do zrobienia jest umieszczenie pliku JS w kolejce i wywołanie następującej funkcji, aby dodać wiersze wbudowane za pomocą funkcji wp_add_inline_script(). Trzecia funkcja to powrót do czegokolwiek starszego niż wersja 4.5. To bez wątpienia zadziała na WordPress 4.5 i każdej wyróżniającej się wersji. To tutaj dzieje się prawdziwa magia. Możesz przejść do metody awaryjnej, która wykona swoją pracę na wybranym wariancie WordPress, wracając do wersji 2.1 lub innej.

Plusy:

Możesz mieć wiele plików JS w swojej witrynie bez dodawania dodatkowych żądań HTTP w celu ich jednoczesnego załadowania. Oznacza to, że będziesz w stanie skrócić czas ładowania dla odwiedzających witrynę.
Jeśli jeden skrypt nie powiedzie się, inne skrypty w ramach tej samej funkcji rezerwowej będą nadal działać, ponieważ są ładowane asynchronicznie z różnych wątków ze względu na ich wzajemne zależności.

Cons:

Gdy skrypt się nie powiedzie, w kilku przypadkach użytkownik zobaczy pustą przestrzeń zamiast kodu. Może się wydawać, że nie jest to aż tak wielka sprawa, ale jest to kluczowa rzecz, o której należy pamiętać jako programista WordPress.

Podsumowanie dodawania skryptu wbudowanego w WordPress

Ograniczenie alternatywnych technik dostępnych do Twojej dyspozycji sprawia, że funkcja wp_add_inline_script() jest doskonałą metodą dodawania znaków w tekście WordPress. Jest to obecnie uważane za najskuteczniejsze rozwiązanie i wbrew powszechnemu przekonaniu funkcja ta może być wykorzystana w dowolnej wersji WordPressa, jeśli użyjesz techniki awaryjnej. Dla Twojej informacji, poniżej znajduje się krótkie podsumowanie najskuteczniejszych sposobów dodawania skryptów wbudowanych w rdzeniu WordPress:

wp_add_inline_script() pozwala dodać dowolny kod JS do dowolnego zarejestrowanego skryptu;
wp_print_scripts lub admin_print_scripts umożliwia zainstalowanie dowolnego kodu w sekcji front-end lub nagłówka;

wp_localize_script() umożliwia również dodawanie zmiennych JS do dowolnego zarejestrowanego skryptu;
Fallback pozwala stworzyć kompletną technikę, która działa dokładnie z każdą wersją WordPressa.

Uwaga: jeśli chcesz dodać styl wbudowany/CSS zamiast JavaScript, WordPress udostępnia zestaw funkcji „dodaj styl”, które przypominają te używane do dodawania skryptów. Na przykład sprawdź wp_print_styles i wp_add_inline_styles.

Wniosek

Skrypty wbudowane to szybki i łatwy sposób na dodanie funkcjonalności do Twojej witryny WordPress. Pisząc skrypt w JavaScript, możesz utworzyć skrypt wbudowany, który robi na stronie wszystko, co chcesz, bez konieczności używania dodatkowych wtyczek lub kodu. Ten samouczek przedstawia najskuteczniejsze metody dodawania skryptów wbudowanych w WordPress.

Czy jesteś edytorem WordPress z pewnym doświadczeniem w dodawaniu skryptów do witryn WP? Którą metodę poleciłbyś początkującemu programiście, który chce szybko wykonać zadanie? Zachęcamy do skorzystania z sekcji komentarzy, aby podzielić się swoją opinią i zadać wszelkie niepokojące pytania.

Biografia autora:

Arthur jest specjalistą od marketingu cyfrowego i blogerem biznesowym. Rozwija ciekawe startupy za pośrednictwem różnych mediów społecznościowych i dzieli się swoim doświadczeniem z klientami, aby lepiej promować ich biznes. W wolnym czasie Arthur studiuje język japoński i pisze artykuły na temat trendów cyfrowej transformacji.