W artykule:
Czy chcesz dodać JavaScript do swoich stron lub postów WordPress?
Czasami może być konieczne dodanie kodu JavaScript do całej witryny lub do określonych stron i postów. Domyślnie WordPress nie pozwala dodawać kodu bezpośrednio do postów.
W tym artykule pokażemy, jak łatwo dodać JavaScript na stronach lub postach WordPress.
Co To jest JavaScript?
JavaScript jest językiem programowania, który działa w przeglądarce użytkownika, a nie na serwerze. To oprogramowanie po stronie klienta pozwala programistom robić wiele fajnych rzeczy bez spowalniania witryny.
Jeśli chcesz osadzić odtwarzacz wideo, dodać kalkulatory lub inną usługę innej firmy, często będziesz proszony o skopiowanie i wklejenie fragmentu kodu JavaScript do swojej witryny WordPress.
Typowy fragment kodu JavaScript może wyglądać tak:
<script type= "text / javascript"> // Trochę kodu JavaScript < / script> <!-- Inny Przykład: -!> <script type=" text/javascript"src =" /path/to/some-script.js " > < / script>
Ale jeśli dodasz fragment kodu javascript do postu lub strony WordPress, zostanie on usunięty przez WordPress podczas próby jego zapisania.
Mając to na uwadze, zobaczmy, jak łatwo dodać JavaScript do stron lub postów WordPress bez łamania swojej witryny. Możesz użyć szybkich linków poniżej, aby przejść od razu do metody, której chcesz użyć.
- Dodaj JavaScript do całej witryny za pomocą wtyczki
- Dodaj JavaScript ręcznie za pomocą kodu
- Dodaj JavaScript do pojedynczych postów i stron za pomocą wtyczki
Metoda 1. Dodaj JavaScript do całej witryny WordPress za pomocą Wstaw nagłówki i stopki wtyczki
Czasami wtyczka lub narzędzie będzie wymagać skopiowania i wklejenia fragmentu kodu JavaScript na swojej stronie internetowej, aby działać poprawnie.
Zwykle te skrypty trafią do sekcji nagłówka lub stopki Twojego bloga WordPress, więc kod jest ładowany na każdym widoku strony.
Na przykład po zainstalowaniu Google Analytics kod musi być uruchamiany na każdej stronie witryny, aby mógł śledzić odwiedzających witrynę.
Możesz ręcznie dodać kod do swojego nagłówek.php lub stopka.php pliki, ale zmiany te zostaną nadpisane podczas aktualizacji lub zmiany motywu.
Dlatego zalecamy korzystanie z wtyczki WordPress, aby dodać JavaScript do całej witryny WordPress.
Najlepszą wtyczką do tego zadania jest wtyczka Wstaw nagłówki i stopki.
Pierwszą rzeczą, którą musisz zrobić, to zainstalować i aktywować wtyczkę. Aby uzyskać więcej informacji, zobacz nasz przewodnik krok po kroku, jak zainstalować wtyczkę WordPress.
Po aktywacji musisz przejść do Ustawienia ” Wstawianie nagłówków i stopek.
Tutaj zobaczysz trzy pola dla sekcji nagłówek, treść i stopka.
Możesz teraz wkleić skopiowany JavaScript do jednego z tych pól i kliknąć przycisk „Zapisz”.
Wtyczka automatycznie załaduje kod dodany na każdej stronie twojej witryny.
Metoda 2. Dodawanie kodu JavaScript do WordPress ręcznie za pomocą kodu
Dzięki tej metodzie musisz dodać kod do plików WordPress. Jeśli nie robiłeś tego wcześniej, sprawdź nasz przewodnik, jak skopiować i wkleić kod w WordPress.
Najpierw pokażemy, jak dodać kod do nagłówka witryny WordPress. Musisz skopiować poniższy kod i dodać go do swoich funkcji.php, we wtyczce specyficznej dla witryny lub za pomocą wtyczki urywki kodu.
function wpb_hook_javascript () {
?>
< script>
// Twój kod javscript idzie
< / script>
<?php
}
add_action ('wp_head', 'wpb_hook_javascript');
Dodawanie JavaScript do konkretnego postu WordPress za pomocą kodu
Jeśli chcesz dodać JavaScript tylko do jednego posta WordPress, musisz dodać logikę warunkową do kodu.
Zapoznaj się z poniższym fragmentem kodu:
function wpb_hook_javascript () {
if (is_single ('5')) {
?>
<script type= "text / javascript">
// Twój kod javscript idzie tutaj
< / script>
<?php
}
}
add_action ('wp_head', 'wpb_hook_javascript');
Powyższy kod uruchomi JavaScript tylko wtedy, gdy identyfikator postu pasuje do '5′. Upewnij się, że zastąpisz „5”własnym identyfikatorem postu.
Aby znaleźć identyfikator postu, otwórz post, w którym chcesz uruchomić JavaScript. Następnie w adresie URL strony znajdziesz identyfikator posta.
Dodawanie JavaScript do konkretnej strony WordPress za pomocą kodu
Jeśli chcesz dodać JavaScript tylko do jednej strony WordPress, musisz dodać logikę warunkową do kodu, tak jak powyżej.
Spójrz na poniższy przykład:
function wpb_hook_javascript () {
if (is_page ('10')) {
?>
<script type= "text / javascript">
// Twój kod javscript idzie tutaj
< / script>
<?php
}
}
add_action ('wp_head', 'wpb_hook_javascript');
Powyższy kod uruchomi JavaScript tylko wtedy, gdy identyfikator strony to ’10’. Upewnij się, że zastępujesz ” 10 ” własnym identyfikatorem strony.
Identyfikator strony można znaleźć przy użyciu tej samej metody, co powyżej. Po prostu otwórz stronę, którą chcesz uruchomić JavaScript i zanotuj identyfikator strony w adresie URL.
Dodawanie JavaScript do określonego posta lub strony WordPress za pomocą kodu w stopce
Jeśli chcesz, aby JavaScript działał w stopce witryny zamiast nagłówka, możesz dodać następujący fragment kodu do swojej witryny.
function wpb_hook_javascript_footer () {
?>
< script>
// Twój kod javscript idzie
< / script>
<?php
}
add_action ('wp_footer', 'wpb_hook_javascript_footer');
Ten fragment kodu haka do wp_footer zamiast wp_head. Możesz również dodać tagi warunkowe, aby dodać javaScript do określonych postów i stron, takich jak powyższe przykłady.
Metoda 3. Dodawanie kodu Javascript wewnątrz postów lub stron WordPress za pomocą wtyczki
Innym sposobem na dodanie JavaScript do poszczególnych postów i stron jest użycie wtyczki. Możesz wybrać, gdzie w treści chcesz osadzić kod JavaScript.
Najpierw musisz zainstalować i aktywować wtyczkę Code Embed. Aby uzyskać więcej informacji, zobacz nasz przewodnik dla początkujących, jak zainstalować wtyczkę WordPress.
Po aktywacji musisz edytować post lub stronę, na której chcesz dodać JavaScript. Następnie musisz włączyć pola niestandardowe, które są domyślnie ukryte.
Aby go wyświetlić, musisz kliknąć menu z trzema kropkami w prawym górnym rogu ekranu, a następnie wybrać „opcje” z menu.
Spowoduje to wyświetlenie okienka, w którym musisz sprawdzić opcję „Pola niestandardowe” w sekcji „Zaawansowane panele”.
Następnie kliknij przycisk „Włącz i przeładuj”, aby przeładować edytor postów.
Następnie zobaczysz pole meta „Pola niestandardowe” bezpośrednio pod edytorem treści.
Następnie kliknij link „Wprowadź nowy”.
Pojawią się teraz pola Nazwa i wartość pola niestandardowe.
Musisz podać nazwę niestandardowego pola z prefiksem „CODE” (na przykład „CODEmyjscode”), a następnie wkleić kod JavaScript do pola Wartość.
Następnie kliknij przycisk „Dodaj niestandardowe pole”, aby zapisać niestandardowe pole.
Teraz możesz użyć tego niestandardowego pola, aby osadzić kod JavaScript w dowolnym miejscu tego posta lub strony. Po prostu dodaj ten kod osadzania w dowolnym miejscu w treści postu.
{{CODEmyjscode}}
Upewnij się, że klikniesz „Aktualizuj” lub „Publikuj”, aby zapisać stronę lub post i uruchomić kod JavaScript.
Pro tip: Metody te są przeznaczone dla początkujących i właścicieli witryn. Jeśli uczysz się motywu WordPress lub rozwoju wtyczek, musisz odpowiednio zapytać JavaScript i arkusze stylów do swoich projektów.
Mamy nadzieję, że ten artykuł pomógł Ci dowiedzieć się, jak łatwo dodać JavaScript na stronach lub postach WordPress. Możesz również zapoznać się z naszym przewodnikiem na temat wyboru najlepszej platformy blogowej i naszych ekspertów wybierających najlepsze oprogramowanie AI chatbot dla Twojej witryny.
Jeśli podoba Ci się ten artykuł, zasubskrybuj nasz kanał YouTube dla samouczków wideo WordPress. Znajdziesz nas również na Twitterze i Facebooku.
