Jak edytować HTML w WordPress?

Znając podstawy HTML, możemy pozwolić sobie na dodawanie do naszej strony wielu ciekawych, wizualnych urozmaiceń.

Jeżeli dołożymy do tego znajomość CSS, będziemy mogli na przykład dodać do wpisu tego rodzaju ramkę:

W tym wpisie dowiesz się:

Jak edytować HTML we wpisie WordPress?

Edycja HTML w nowym edytorze Gutenberg

Od piątej wersji WordPress domyślnym edytorem jest Gutenberg. Choć niektórzy nadal preferują i korzystają z klasycznego, zacznę od Gutenberga, do którego sam przekonałem się dopiero w tym roku.

Sposób 1 (edycja HTML w całym wpisie):

1. Naciśnij na ikonę trzech pionowo ustawionych kropek w prawym górnym rogu ekranu.

2. Wybierz opcję Edytor kodu.

3. Wprowadź odpowiednie zmiany w kodzie i zapisz swój wpis lub znów naciśnij ikonę trzech pionowo ustawionych kropek i tym razem kliknij Edytor Wizualny, by wrócić do domyślnego edytora.

Sposób 2 (edycja HTML jedynie w obrębie danego bloku):

Moim zdaniem w wielu przypadkach ten sposób jest nieco lepszy od pierwszego, ponieważ możemy dodać HTML jedynie tam, gdzie chcemy i zapobiec sytuacji, w której skasujemy coś, czego skasować nie powinniśmy.

1. Naciśnij lewym przyciskiem myszy na miejsce w tekście, w którym chcesz edytować HTML (dany blok).

2. Wybierz ikonę trzech pionowo ustawionych kropek z zasobnika (tego, w którym możesz np. pogrubić tekst, czy dodać hiperłącze). Jeżeli zasobnik się nie wyświetla (zwykle powinien pojawić się nad kursorem lub w lewym górnym rogu ekranu w zależności od ustawień edytora), spróbuj napisać jakiś tekst (np. literkę “a”) – później możesz ją usunąć.

3. Wybierz opcję Edytuj w HTML.

4. Wprowadź dowolne zmiany w kodzie HTML danego bloku.

5. Zapisz zmiany lub ponownie naciśnij na ikonę trzech pionowo ustawionych kropek i wybierz opcję Edytuj wizualnie.

Edycja HTML w klasycznym edytorze

Klasyczny edytor pozwala na szybkie przełączanie się między zakładkami wizualną i tekstową.

Jedyne co wystarczy zrobić, by przejść do warstwy kodu to w prawym górnym rogu (tuż nad polem do wpisywania tekstu) przełączyć zakładkę z “Wizualny” na “Tekstowy”.

Później możecie wprowadzić swoje zmiany w kodzie HTML i zapisać swój wpis lub wrócić do edytora wizualnego.

Przyznam, że w moim przypadku takie przełączanie wersji edytora w jego klasycznej wersji często powodowało pewne bugi. Nie jestem pewien, jak wygląda to obecnie, ale jeżeli macie problemy, a często przełączacie się na kod — chociażby z tego względu warto rozważyć przesiadkę na Gutenberga. Nie jest on aż tak straszny jak go malują.

Jak edytować HTML w szablonie WordPress?

Czasami możecie zechcieć zmienić coś więcej niż HTML w swoim wpisie, bo możecie chcieć edytować kod swojego szablonu po to, by na przykład dodać gdzieś jakiś banner lub inny element.

Jest to stosunkowo proste, zwłaszcza jeżeli macie już jakieś doświadczenie w kodowaniu.

Edycja kodu szablonu WordPress

Niezależnie od tego czy macie doświadczenie, czy nie. Jak zawsze, proponuję zacząć od sporządzenia kopii zapasowej, tak na wszelki wypadek.

Wówczas możecie edytować dowolny plik szablonu, w którym będziecie chcieli coś zmienić. Możecie zrobić to z poziomu panelu administracyjnego (Wygląd -> Edytor plików motywu) lub w Waszych plikach szablonu wp-content/themes/nazwa-szablonu/.

Zwykle najważniejsze pliki do edycji to np. header.php, content.php, footer.php, czy sidebar.php. Nazewnictwo może się różnić w zależności od danego szablonu, dlatego czasem trzeba trochę poszukać, aż znajdziecie to, czego szukacie. Z tego powodu polecam takie zmiany wykonywać na lokalnej wersji strony (np. za pomocą XAMPP), a nie na warstwie produkcyjnej, po której podczas — czasami nieudolnego — wprowadzania naszych zmian będą sobie chodzić użytkownicy.

Jeżeli zmienicie coś w plikach, pamiętajcie później, by wgrać zmiany na Wasz serwer (np. z wykorzystaniem klienta FTP jak chociażby FileZilla).

Prosta edycja poszczególnych elementów strony w HTML

Alternatywnie, w szablonach, które obsługują widgety, możecie wejść w Wygląd -> Widgety i tam dodać własny widget z kodem HTML.

Jest to znacznie mniej elastyczna opcja od tej pierwszej, jednak w niektórych przypadkach działa i może okazać się wystarczająca.

Plusem tej opcji jest to, że nie musicie przesadnie martwić się o przypadkowe popsucie czegoś w kodzie, ani też nie musicie niczego wgrywać na serwer (nie jest to budowa statków kosmicznych, ale wiem, że osoby niezwiązane z kodowaniem mogą mieć z tym na początku pewne problemy).