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.
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źć:
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.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.sidebar.php – Zarządza paskiem bocznym strony. Możesz tutaj dostosować wygląd i zawartość paska bocznego, dodając widgety, linki, informacje kontaktowe, itp.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.page.php – Służy do prezentacji indywidualnych stron (np. 'O nas’, 'Kontakt’). Możesz tutaj dostosować układ i styl każdej strony.single.php – Kontroluje, jak wyświetlane są pojedyncze posty blogowe. To miejsce na dostosowania dotyczące wyglądu pełnych wpisów na blogu.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.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.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.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 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:
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!).
W dashboardzie systemu, wystarczy, że przejdziesz do zakładki Wygląd > Edytor plików motywu:
Znajdziesz tutaj kod PHP, HTML i CSS Twojego obecnego motywu:
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.
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:
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ą.
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:
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:
2. Wybierając blok o nazwie Własny HTML:
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.
Wypełnij poniższy formularz, a nasz specjalista odezwie się do Ciebie, by porozmawiać o Twojej stronie internetowej.