Dodawanie kodu do nagłówka lub stopki WordPress

Z wielu różnych powodów możliwe jest, że w pewnym momencie będziesz chciał lub musiał dodać kod do nagłówka lub stopki witryny WordPress. Niestety platforma nie zapewnia prostego ani prostego sposobu na zrobienie tego po wyjęciu z pudełka.

Dobrą wiadomością jest to, że możesz łatwo temu zaradzić za pomocą motywu potomnego i pliku functions.php lub wtyczki WordPress. Bez względu na to, którą metodę wybierzesz, będziesz mógł łatwo ulepszyć swoją witrynę za pomocą niestandardowych funkcji, danych użytkowników i strategii zwiększania wydajności.

W tym poście wyjaśnimy kilka przypadków, w których możesz potrzebować lub chcieć dodać kod do nagłówka i stopki witryny WordPress. Następnie udostępnimy instrukcje krok po kroku dotyczące dwóch metod umożliwiających edytowanie tych elementów w celu utworzenia niestandardowego nagłówka lub stopki. Zacznijmy!

Dlaczego warto edytować kod nagłówka i stopki WordPress?

Powody, dla których możesz chcieć edytować nagłówek lub stopkę WordPress, są liczne i zróżnicowane. Prawdopodobnie najbardziej oczywistym jest to, że czasami chcesz stylizować swoją witrynę za pomocą niestandardowego kodu i potrzebujesz sposobu na dodanie tego kodu do nagłówka i/lub stopki.

Są to jednak również najlepsze lokalizacje dla kodów śledzących, takich jak ten używany w Google Analytics. Kody te mogą dostarczyć cennych informacji na temat zachowań użytkowników w celu ulepszenia strategii marketingowych i dotyczących treści.

Ponadto WordPress domyślnie nie zawiera metatagów. Są one dodawane do nagłówka Twojej witryny, aby ułatwić wyszukiwarkom indeksowanie Twoich stron. Chociaż nie są one teraz tak istotne jak kiedyś, dodanie ich do nagłówka nie zaszkodzi – mogą one jedynie poprawić widoczność Twojej witryny.

Wreszcie, być może znasz praktykę przenoszenia kodu JavaScript blokującego renderowanie „pod zakładkę”. Zwykle oznacza to dodanie go do stopki WordPress, co będzie wymagało edycji jego kodu. Ta technika może pomóc poprawić wydajność Twojej witryny poprzez skrócenie czasu ładowania.

Jak ręcznie dodać kod do nagłówka lub stopki WordPress (w 2 krokach)

Istnieją dwie podstawowe metody dodawania kodu do nagłówka lub stopki WordPress. Pierwszym z nich jest ręczna edycja motywu witryny, a drugim użycie wtyczki. Chociaż ręczna edycja plików motywu jest bardziej ryzykowna i trudna, dla niektórych bardziej zaawansowanych użytkowników jest to preferowana metoda.

Krok 1: Utwórz motyw potomny

Ręczne dodawanie kodu do nagłówka lub stopki WordPress wymaga edycji niektórych plików motywu. Kiedy musisz to zrobić, zawsze mądrze jest edytować motyw potomny zamiast bezpośrednio mieszać w plikach motywu nadrzędnego. W ten sposób możesz uniknąć utraty zmian podczas aktualizacji motywu.

Na szczęście proces ręcznego tworzenia motywu potomnego jest dość prosty i możesz uzyskać dostęp do samouczków WordPress, których potrzebujesz, aby dostosować nagłówki. Jeśli jednak musisz szybko utworzyć motyw potomny, pomocna może być wtyczka do tworzenia motywów, taka jak Child Theme Configurator.

Dzięki wtyczce do tworzenia motywów możesz łatwo wygenerować motyw potomny za pomocą kliknięcia przycisku, chociaż w pełni ręczne podejście może być równie szybkie, gdy metoda zostanie wyłączona.

Krok 2: Edytuj plik functions.php motywu Twojego dziecka

Po skonfigurowaniu motywu potomnego musisz uzyskać dostęp do jego pliku functions.php i edytować go. Zanim zaczniesz, zawsze dobrze jest wykonać kopię zapasową witryny, na wypadek popełnienia błędów i łatwego przywrócenia poprzedniego stanu.

Zwykłym sposobem edycji pliku functions.php jest użycie protokołu FTP (File Transfer Protocol) i klienta FTP, takiego jak FileZilla. Możesz jednak także edytować niektóre pliki z pulpitu nawigacyjnego WordPress. Aby uzyskać do niego dostęp, przejdź do Wygląd > Edytor motywów .

Otrzymasz ostrzeżenie, że zamierzasz edytować pliki motywu — kliknij przycisk Rozumiem , aby kontynuować. Następnie upewnij się, że wybrałeś właściwy plik. Upewnij się, że na pasku bocznym po prawej stronie edytora witryny wybrano Funkcje motywu (functions.php) .

Teraz możesz dodać swój niestandardowy kod na końcu tego pliku i kliknąć Aktualizuj plik, gdy skończysz.

Jak dodać kod do nagłówka lub stopki WordPress za pomocą wtyczki (w 2 krokach)

Chociaż w niektórych przypadkach ręczna edycja plików motywu WordPress w celu dodania kodu do sekcji stopki lub nagłówka może być łatwiejsza, użycie wtyczki jest zwykle bezpieczniejszą drogą. Na potrzeby tego artykułu użyjemy jednej z najpopularniejszych i najwyżej ocenianych wtyczek do tego zadania, Header, Footer i Post Injections.

Istnieje jednak wiele wtyczek dostępnych w katalogu wtyczek WordPress i innych miejscach, które mogą pomóc w tym zadaniu.

Krok 1: Zainstaluj i aktywuj wybraną wtyczkę

Na początek musisz zainstalować i aktywować wtyczkę, której chcesz użyć. Możesz to zrobić, pobierając plik .zip wtyczki z katalogu wtyczek lub innego sklepu internetowego, a następnie przesyłając go do swojej witryny. Alternatywnie przejdź do Wtyczki > Dodaj nowy na pulpicie nawigacyjnym.

Tutaj możesz wyszukać wtyczkę stopki lub nagłówka, której chcesz użyć. Niezależnie od wybranej metody, zakończysz ten krok, klikając przycisk Instaluj , a następnie Aktywuj, gdy pojawi się opcja.

Krok 2: Dodaj fragmenty kodu do wstrzyknięć nagłówka, stopki i posta

Po zainstalowaniu wtyczki powinieneś być w stanie przejść do Ustawienia> Nagłówek i stopka na pulpicie nawigacyjnym.

Tutaj znajdziesz edytor tekstu do dodawania fragmentów kodu – takich jak kod śledzenia Google Analytics lub niestandardowy JavaScript – które chcesz umieścić w nagłówku i/lub stopce.

Na tej stronie możesz wiele osiągnąć. W pierwszych dwóch polach możesz dodać kod do sekcji nagłówka. Pole po lewej stronie dodaje kod do każdej strony w Twojej witrynie – jest to przydatne na przykład w Google Analytics. Pole po prawej stronie doda kod tylko do Twojej strony głównej.

Kolejne pola dodają kod do kodu treści i stopki Twoich stron. Pola po lewej stronie służą do przeglądania na komputerze, a te po prawej do mobilnych wersji kodu. Po zakończeniu edycji nie zapomnij kliknąć przycisku Zapisz u dołu ekranu.

Popraw jakość swojej witryny dzięki WP Engine

Nie ma wątpliwości, że chcesz, aby Twoja witryna WordPress zapewniała użytkownikom najwyższy poziom obsługi cyfrowej. Dodanie kodu do stopki lub nagłówka WordPress to przydatna taktyka dostosowywania witryny, wdrażania Google Analytics lub poprawy wydajności.

W WP Engine mamy szeroką gamę zasobów dla programistów, które mogą pomóc Ci przenieść doświadczenie witryny WordPress na nowy poziom. Sprawdź je już dziś!