Jak dodać kod nagłówka i stopki w WordPress

Dostosowywanie witryny WordPress za pomocą kodu może być przerażające. Często będziesz musiał zagłębić się w podstawowe pliki, aby zmodyfikować konfiguracje lub dodać nowe parametry, co może spowodować uszkodzenie witryny, jeśli zrobisz to w niewłaściwy sposób.

Jednak dodawanie kodu nagłówka i stopki jest znacznie prostsze. Często wystarczy skopiować i wkleić określone fragmenty kodu. Oznacza to, że jeśli wiesz, jak uzyskać dostęp do plików nagłówka i stopki, najstraszniejsza część minęła.

W tym artykule nauczymy Cię, jak dodać kod nagłówka i stopki w WordPressie, zarówno ręcznie, jak i za pomocą wtyczki. Oba podejścia są bardzo proste, więc przejdźmy od razu!

Dlaczego może być konieczne dodanie kodu nagłówka i stopki w WordPress

Jeśli prowadzisz witrynę internetową, prawdopodobnie znasz co najmniej jedną usługę innej firmy, która wymaga osadzenia kodu, aby się z nią połączyć.

Niektóre z najpopularniejszych przykładów to Google Analytics, Search Console, Facebook Pixel i wiele innych narzędzi obejmujących śledzenie witryn.

Wszystkie te usługi wymagają dodania określonych skryptów między tagami nagłówka Twojej witryny. Nagłówek Twojej witryny to kluczowy element, w tym elementy takie jak skrypty, tytuły, pliki stylów i inne.

Tagi w stopce działają podobnie do ich odpowiedników w nagłówkach . Technicznie rzecz biorąc, jeśli dodasz fragmenty kodu do stopki witryny, powinny one działać tak samo, jak w przypadku umieszczenia ich w nagłówku.

Jednak ważne jest, aby zrozumieć, że Twoja witryna będzie uruchamiać skrypty w kolejności, w jakiej je umieszczasz. Dodatkowo kod nagłówka będzie   uruchomić przed załadowaniem strony, podczas gdy kod stopki zostanie uruchomiony po niej.

Jeśli masz możliwość wyboru i zależy Ci na optymalizacji witryny, przeniesienie JavaScript do stopki witryny może przyspieszyć ładowanie. Jednak niektóre usługi wyraźnie poproszą Cię o dodanie ich kodu do nagłówka, aby uniknąć problemów z wykonaniem.

Z reguły, jeśli serwis Cię o to poprosi, zalecamy skorzystanie z jego rad. W przypadku innych fragmentów kodu JavaScript umieść je w stopce witryny WordPress. Kod CSS zawsze trafia do nagłówka.

Jak dodać kod nagłówka i stopki w WordPressie (2 metody)

Jak to często bywa w przypadku WordPressa, możesz osiągnąć ten sam cel, modyfikując pliki ręcznie lub używając wtyczki.

Zacznijmy od rozmowy o podejściu do wtyczek.

1. Użyj wtyczki, takiej jak Head, Footer i Post Injection

Używanie wtyczki do dodawania kodu do plików nagłówka i stopki w WordPressie jest najbezpieczniejszym podejściem. Dzięki wtyczce nie musisz ręcznie modyfikować plików motywów ani upewnić się, że dodajesz skrypty we właściwym miejscu.

Chociaż istnieje wiele dobrych wtyczek do wyboru, naszą rekomendacją do tego zadania jest wtyczka Head, Footer i Post Injections.

Ta wtyczka zapewnia dużą kontrolę nad tym, gdzie w kodzie chcesz dodać fragmenty kodu. Oferuje również opcję dodawania różnych skryptów do renderowania witryny na urządzenia mobilne i komputery stacjonarne.

Aby dodać wtyczkę, przejdź do Wtyczki> Dodaj nowy w swoim panelu i użyj funkcji wyszukiwania, aby znaleźć wtyczkę. Kliknij zainstaluj, a następnie aktywuj wtyczkę.

Gdy wtyczka jest aktywna, możesz przejść bezpośrednio do Ustawienia > Nagłówek i stopka . Zobaczysz wiele pól, w których możesz dodać fragmenty kodu.

Jeśli zagłębisz się w opcje wtyczki, zobaczysz, że oferuje ona wiele dodatkowych miejsc docelowych dla Twoich fragmentów kodu. Jednak w większości przypadków możesz trzymać się zakładki Head and footer .

W przypadku kodu globalnego upewnij się, że umieszczasz te fragmenty kodu w polu Na każdej stronie . Jeśli jednak potrzebujesz tylko kodu do uruchomienia na stronie głównej, użyj opcji Tylko na stronie głównej .

Po zakończeniu dodawania kodu do swojej witryny zapisz zmiany we wtyczce i gotowe!

2. Dodaj fragmenty kodu za pomocą pliku functions.php

Ręczne dodawanie kodu nagłówka i stopki w WordPressie nie jest skomplikowane, ale wymaga więcej rozważań niż podejście z wtyczkami.

Możesz dodać kod bezpośrednio do plików header.php lub footer.php aktywnego motywu. Możesz znaleźć te pliki w katalogu /public_html/wp-content/themes/ , otwierając folder aktywnego motywu i zaglądając do środka:

Możesz uzyskać dostęp do tych plików za pośrednictwem protokołu przesyłania plików (FTP) i edytować je za pomocą ulubionego edytora kodu. Jednak bezpośrednia edycja plików nagłówka i stopki może być kłopotliwa. Mając to na uwadze, mamy dwie rekomendacje, jeśli planujesz użyć podejścia ręcznego:

1. Utwórz motyw potomny dla swojego motywu. W ten sposób nie stracisz żadnych dostosowań po zaktualizowaniu motywu nadrzędnego.
2. Użyj zaczepów, aby dodać kod za pomocą pliku functions.php . Zapewnia to czystsze podejście do ręcznej edycji plików nagłówka i stopki.

W idealnym przypadku zawsze powinieneś używać motywu potomnego, jeśli planujesz dostosowywać dowolny rodzaj motywu. Możesz uzyskać dostęp do pliku functions.php motywu potomnego w jego folderze w katalogu /wp-content/themes .

Otwórz plik functions.php w edytorze kodu. Aby dodać żądany kod, musisz użyć albo wp_head   lub wp_footer   hak.

Poniższy fragment kodu dodaje Twój niestandardowy kod do nagłówka Twojej witryny:

 add_action('wp_head', 'test_script'); function test_script() { ?> <!-- Here comes your custom code in HTML format. --> <?php }

Możesz użyć haka wp_footer zamiast wp_head , jeśli chcesz umieścić kod w stopce. Jeśli chcesz, możesz również zmienić nazwę funkcji (test_script) .

Kiedy skończysz modyfikować plik functions.php , pamiętaj, aby zapisać zmiany i to wszystko. Jakikolwiek kod, który dodałeś, powinien już działać!

Wniosek

Wiele usług stron trzecich, takich jak Google Analytics lub Facebook Pixel, wymaga dodania fragmentów kodu do Twojej witryny, aby mogły się z nią połączyć. Jest to jednak tylko jeden z wielu przypadków, w których musisz dodać kod do nagłówka i stopki w WordPressie, więc warto wiedzieć, jak to zrobić.

Istnieją dwa sposoby dodawania fragmentów kodu do nagłówka i stopki. Możesz użyć wtyczki, takiej jak „Nagłówek, stopka i wstrzykiwanie postów”, lub dodać fragmenty kodu za pomocą pliku functions.php .

Masz pytania dotyczące dodawania kodu nagłówka i stopki w WordPressie? Porozmawiajmy o nich w sekcji komentarzy poniżej!