Szybkie wsparcie: 511 280 732 lub [email protected]
Dominik Krawiec ✅ Ekspert SEO & WordPress

Jak edytować kod szablonu w WordPress?

Edycja kodu szablonu pozwala na wprowadzenie poprawek w kodzie HTML strony internetowej. Możesz to zrobić na kilka sposobów, w zależności od stopnia zaawansowania planowanych zmian. W tym poradniku przedstawiam najlepsze sposoby na edycję szablonu z poziomu panelu WordPressa, a także serwera FTP.

Po co tracisz czas?

Ciągłe wprowadzanie poprawek na swojej stronie to uciążliwe zajęcie.
Z pewnością masz ważniejsze sprawy na głowie.
Zadbam o Twojego WordPressa.

... jeśli koniecznie chcesz zrobić to samodzielnie

Wykonaj poniższe kroki.

  1. Przejdź do zakładki Wygląd > Edytor plików motywu.
  2. Z listy po prawej stronie wybierz plik, który Cię interesuje.
  3. Zapisz jego treść przed wprowadzeniem zmian.
  4. W razie problemów, przywróć kod z kopii pliku.
  5. Weryfikuj zmiany w kodzie po wyczyszczeniu pamięci podręcznej.

Jak wygląda struktura plików w systemie WordPress?

Aby szablon mógł zostać zainstalowany, musi posiadać minimum dwa pliki – index.php, w którym zdefiniowana będzie struktura HTML oraz style.css wraz ze specjalną deklaracją motywu, np:

/*
Theme Name: Twenty Twenty
Theme URI: https://wordpress.org/themes/twentytwenty/
Author: the WordPress team
Author URI: https://wordpress.org/
*/

Źródło: https://developer.wordpress.org/themes/basics/main-stylesheet-style-css/

Kiedy są one obecne, jesteś już w stanie włączyć dany motyw z poziomu Kokpitu. Jeśli ich jednak zabraknie, system może zgłosić błąd krytyczny związany z brakiem wymaganych plików. Warto o tym pamiętać, zabierając się za edycję szablonu.

Rzadko jednak spotyka się motywy składające się tylko z dwóch plików. Dla bezpieczeństwa, wygody, a przede wszystkim – czytelnego kodu, twórcy WordPressa zaprojektowali strukturę, która pozwala na szybkie odnalezienie właściwego fragmentu źródła.

Zaglądając do folderu z plikami szablonu (szukaj go w /wp-content/themes/nazwa_szablonu), możesz tam znaleźć:

  1. header.php – Tutaj znajdziesz początek struktury HTML Twojej strony, włącznie z tagami <head> i otwierającym <body>. Możesz zmieniać lub dodawać elementy takie jak logo, menu nawigacyjne, i inne komponenty nagłówka.
  2. footer.php – W tym pliku umieszczasz wszystko, co ma się pojawić na dole każdej strony. Idealne miejsce na informacje o prawach autorskich, linki do polityki prywatności, i inne elementy stopki.
  3. sidebar.php – Zarządza paskiem bocznym strony. Możesz tutaj dostosować wygląd i zawartość paska bocznego, dodając widgety, linki, informacje kontaktowe, itp.
  4. index.php – Główny plik szablonu, odpowiada za domyślny sposób wyświetlania treści. Możesz tu modyfikować układ i prezentację postów oraz stron.
  5. page.php – Służy do prezentacji indywidualnych stron (np. 'O nas’, 'Kontakt’). Możesz tutaj dostosować układ i styl każdej strony.
  6. single.php – Kontroluje, jak wyświetlane są pojedyncze posty blogowe. To miejsce na dostosowania dotyczące wyglądu pełnych wpisów na blogu.
  7. category.php – Plik z widokiem kategorii wpisów blogowych.
  8. style.css – Główny plik stylów, definiujący wygląd Twojego szablonu. Tutaj możesz zmieniać kolory, czcionki, układy, i inne elementy wizualne.
  9. functions.php – Umożliwia dodawanie niestandardowych funkcji i rozszerzanie możliwości szablonu. Idealne miejsce na dodanie własnych hooków, filtrów i funkcji.
  10. Dodatkowe szablony – Takie jak archive.php (dla archiwów), search.php (dla wyników wyszukiwania), 404.php (dla stron błędów). Każdy z tych plików umożliwia specyficzne dostosowania dla różnych części Twojej strony.
  11. Folder zasobów – Zawiera obrazy, skrypty JavaScript, CSS i inne pliki. Tutaj zarządzasz zewnętrznymi zasobami, które są wykorzystywane w szablonie.
  12. Pliki opcjonalne – Możesz dodać pliki takie jak comments.php dla zarządzania komentarzami, czy pliki dla niestandardowych typów postów. Dają one dodatkową kontrolę nad specyficznymi aspektami Twojego szablonu.

Zdarza się, że strona internetowa działa w oparciu o tzw. szablon potomny, czyli motyw dziedziczący pliki z innego motywu. Nazwane są one zwykle wg schematu: /nazwa-szablonu-child. Zasada jest wtedy prosta:

Jeśli w folderze podrzędnego motywu nie ma wybranego pliku, może on znajdować się w szablonie nadrzędnym. Często zdarza się, że edytujemy plik, a zmiany nie są widoczne – warto wtedy upewnić się, że znajdujemy się w odpowiednim katalogu.

W jaki sposób edytować pliki źródłowe w szablonie WordPress?

W poprzedniej części wyjaśniłem, gdzie warto szukać plików odpowiedzialnych za określone części serwisu – nagłówek, szablonu pojedynczego wpisu, czy paska bocznego z widżetami.

Zanim przejdziesz do modyfikacji, warto wykonać kopię zapasową całego szablonu. Upewnisz się tym samym, że w razie ewentualnych problemów łatwo przywrócisz swoje pliki. Następnie upewnij się, że Twój szablon jest zaktualizowany.

Jeśli powyższe dwa punkty są odhaczone, możesz zacząć edytować swój szablon. Masz na to dwa główne sposoby:

  1. Edycja kodu z poziomu panelu WordPressa.
  2. Pobranie plików z poziomu klienta FTP, np. FileZilla.

Przedstawię Ci te obie proste metody. Osobiście dla szybkich poprawek stosuję często pierwszy sposób, a po pliki z poziomu serwera sięgam, gdy szykują się większe zmiany na stronie klienta. Z doświadczenia wiem, że drugi sposób jest bardziej pracochłonny, ale też bezpieczniejszy (pamiętaj o kopii!).

Edycja kodu z poziomu panelu WordPress

W dashboardzie systemu, wystarczy, że przejdziesz do zakładki Wygląd > Edytor plików motywu:

edycja strony wordpress

Znajdziesz tutaj kod PHP, HTML i CSS Twojego obecnego motywu:

kod html wordpress

Po lewej stronie zobaczysz pole edytora, natomiast z prawej znajduje się lista plików, które możesz edytować z tego poziomu.

Po zakończeniu edycji, kliknij przycisk Aktualizuj plik.

Pobranie plików z poziomu klienta FTP

Ta metoda jest bezpieczniejsza przede wszystkim dlatego, że daje możliwość utworzenia szybkiej kopii pliku, który chcesz edytować.

Aby dostać się do plików z poziomu FTP, potrzebujesz:

  1. Danych dostępowych do serwera (nazwa użytkownika, host, hasło, port)
  2. Klienta FTP, czyli programu do łączenia się z serwerem (przykładowe to FileZilla, WinSCP lub TotalCommander).

Po zalogowaniu musisz przeklikać się do katalogu zawierającego pliki szablonu – /wp-content/themes/nazwa-szablonu. Zobaczysz tam strukturę, o której pisałem wcześniej:

Teraz wystarczy, że pobierzesz wybrany plik na swój komputer. Przyda Ci się również program do edycji, np. Visual Studio Code lub Notepad++. Pliki z kodem źródłowym otworzysz jednak w dowolnym edytorze tekstowym, np. Notatniku.

Po zakończeniu edycji, zapisz zmiany i wgraj z powrotem plik na serwer. Zmiany powinny pojawić się na stronie po odświeżeniu jej w przeglądarce. Jeśli ich nie widzisz, możliwe, że musisz wyczyścić pamięć podręczną.

Edycja kodu HTML w edytorze Gutenberg

Kod HTML podstron lub wpisów opublikowanych na swojej stronie, możesz zmieniać także bezpośrednio z poziomu ich edycji. Przejdź do zakładki Wpisy lub Strony i wybierz właściwą pozycję.

Klikając w ikonkę trzech kropek w prawym-górnym rogu, możesz zmienić tryb wizualny na edytor kodu HTML:

edycja html wpisu wordpress

W ten sposób możesz wprowadzać proste zmiany w HTML i CSS we wpisach na blogu lub stronach ofertowych.

Również poszczególne bloki w edytorze Gutenberg możesz przekształcić na kod źrodłowy:

  1. Wybierając opcję Edycja w HTML w ustawieniach danego bloku.
edytuj w html wordpress

2. Wybierając blok o nazwie Własny HTML:

blok własny html wp

W poradniku przedstawiłem najlepsze sposoby na edycję kodu w szablonie swojej strony na WordPress. Więcej o blokach w Gutenbergu możesz przeczytać w poradniku jak dodać i edytować wpis. Jeśli potrzebujesz pomocy przy poprawkach na stronie, skorzystaj z jednego z pakietów opieki nad stroną. Skontaktuj się z nami, wypełniając poniższy formularz.

Zadbam o Twoją stronę internetową

Wypełnij poniższy formularz - odezwę się do Ciebie, by porozmawiać o Twojej stronie internetowej.



    Wysyłając wiadomość, akceptujesz politykę prywatności i wyrażasz zgodę na przetwarzanie podanych danych osobowych w celu przygotowania oferty.
    🔒 Twoje dane są bezpieczne.

    Copyright 2024 WooCado - Opieka nad stroną Polityka prywatności