jak edytować kod WordPress (HTML, CSS, JavaScript i PHP)

kochamy WordPressa! Możesz wziąć prostą instalację WP i przekształcić ją w stronę swoich marzeń – i prawdopodobnie dlatego WordPress pozostaje najczęściej używanym CMS na świecie. Podczas gdy wtyczki są cenne w tworzeniu witryny wygląd i działać tak, jak chcesz, Są dni, w których trzeba edytować kody WordPress (HTML, CSS, JavaScript, PHP) w pliku rdzenia, postach i stronach.

w tym artykule przedstawimy Ci procedurę krok po kroku, jak dodać/edytować kody WordPress.

treść

1. Edycja kodów w WordPress
   • edytuj kod HTML w WordPress (klasyczny edytor)
   • Dodaj lub edytuj kod HTML w edytorze Gutenberga
   • Jak dodać lub edytować kod HTML w widżecie WordPress
2. edytowanie kodu źródłowego w motywie WordPress
   • jak edytować CSS witryny WordPress
     • jak edytować CSS WordPress za pomocą Edytora motywów
     • Edytuj CSS WordPress za pomocą wtyczki
     • Edycja kodu CSS WordPress za pomocą dostosowywania WordPress
   • Jak dodać JavaScript
     • Jak dodać Skrypty nagłówka i stopki za pomocą wtyczki
     • Dodaj JavaScript do postów i stron WordPress
   • Edycja PHP w WordPress
3. wnioski

Edycja kodów w WordPress

HTML, CSS, PHP i JavaScript to cztery języki programowania używane przez WordPress – każdy z własną funkcją.

HTML, na przykład, definiuje strukturę zawartości witryny, podczas gdy CSS określa wygląd witryny. JavaScript, z drugiej strony, modyfikuje HTML i CSS, aby zapewnić dynamiczną funkcjonalność.

teraz zobaczmy, jak dodawać i edytować te kody w WordPress.

jak edytować kod HTML w WordPress (WP Classic editor)

Edycja kodu HTML postu lub strony WordPress jest dość prosta. Nie musisz wychodzić poza pulpit nawigacyjny, aby to zrobić. Wystarczy kliknąć zakładkę „tekst” w edytorze postu/strony.

edytor tekstu pozwala dodawać, edytować i usuwać kod HTML. Aby wyświetlić zmiany, kliknij kartę „wizualne”. Nie zapomnij zapisać zmian.

Jak dodać lub edytować kod HTML w edytorze Gutenberg

dzięki edytorowi Gutenberg (block) masz jeszcze większą elastyczność. Możesz wprowadzić zmiany do całej strony / posta lub do pojedynczego bloku.

aby wprowadzić zmiany w kodzie HTML całego postu lub strony, po prostu kliknij trzy kropki znajdujące się w prawym górnym rogu ekranu. Kliknij „Edytor Kodu”.

teraz możesz edytować kod HTML posta. Aby zamknąć Edytor, naciśnij przycisk „Zakończ edytor kodu”u góry edytora.

jak zapewne wiesz, edytor Gutenberga składa się z pojedynczych bloków, które można edytować niezależnie. Aby edytować kod HTML pojedynczego bloku, po prostu przejdź do bloku. Następnie naciśnij trzy kropki nad blokiem i wybierz „Edytuj jako HTML”.

Możesz również użyć niestandardowego bloku HTML. Naciśnij symbol „Dodaj”w lewym górnym rogu edytora, aby dodać blok. Następnie kliknij blok „Niestandardowy HTML”i wpisz kod w wynikowym polu.

możesz kliknąć „Podgląd”, aby zobaczyć, jak wygląda w interfejsie.

nie zapomnij zapisać zmian.

Jak dodać lub edytować kod HTML w widżecie WordPress

są dni, w których może być konieczne dodanie kodu HTML na pasku bocznym lub stopce witryny. Aby to zrobić, przejdź do Wygląd> > widżety.

poszukaj widżetu „Niestandardowy HTML” i kliknij rozwijaną listę, aby wybrać miejsce, w którym chcesz utworzyć widżet. Następnie naciśnij „Dodaj Widget”.

Wprowadź kod HTML i kliknij „Zapisz”.

i to wszystko!

edytowanie kodu źródłowego w motywie WordPress

motywy WordPress składają się z różnych plików. Należą do nich pliki CSS, PHP i JavaScript dla Twojej witryny. W przeciwieństwie do edycji kodu HTML witryny, należy zachować szczególną ostrożność podczas edycji kodu źródłowego motywu. Dzieje się tak dlatego, że możesz złamać całą witrynę poprzez zmiany wprowadzone do motywu.

oto kilka rzeczy, na które należy zwrócić uwagę przed edytowaniem kodu źródłowego motywu.

Edytuj motyw podrzędny, a nie motyw nadrzędny: jeśli chcesz zmodyfikować kod w plikach motywu, zaleca się wykonanie tego w przypadku motywu podrzędnego.

to dlatego, że wszystkie modyfikacje znikną, gdy następnym razem zaktualizujesz swój motyw. Ale gdy używasz motywu podrzędnego, twoje zmiany pozostają, nawet po zaktualizowaniu motywu nadrzędnego.

aby dowiedzieć się, jak stworzyć motyw potomny dla siebie, sprawdź nasz kompletny samouczek na temat motywów potomnych WordPress.

wykonaj pełną kopię zapasową witryny: Przed edycją plików źródłowych WordPress nie zapomnij wykonać kopii zapasowej swojej witryny. Zobacz nasz post o tym, jak utworzyć kopię zapasową, aby wiedzieć, jak to zrobić. Z drugiej strony możesz zrezygnować ze stresu związanego z tworzeniem kopii zapasowych, gdy otrzymasz plan konserwacji z Fixrunner. Mamy nocne wsparcie.

Istnieją 3 podstawowe sposoby edycji kodu źródłowego szablonu: edytor motywów, wtyczka i FTP.

jak edytować CSS witryny WordPress

jak wspomniano wcześniej, CSS witryny jest odpowiedzialny za jej wygląd. Jeśli chcesz zmienić rodzinę czcionek, rozmiar, schemat kolorów itp., edytuj CSS.

możesz edytować CSS:

1. za pośrednictwem edytora motywów
2. za pomocą WordPress Customizer
3. z wtyczką

każdy z nich będzie działał dobrze.

jak edytować WordPress CSS za pomocą Edytora motywów

jeśli nie wiesz, WordPress jest wyposażony w wbudowany edytor motywów. Możesz wprowadzać zmiany w swoich plikach szablonów bezpośrednio stąd.

aby uzyskać dostęp do edytora motywów, przejdź do wyglądu >> edytora motywów.

edytor kodu i pasek boczny po prawej stronie otworzą się na ekranie. Wybierz dowolny plik motywu z paska bocznego i wprowadź zmiany w pliku.

wyświetlane pliki różnią się w zależności od motywu. Jednak wszystkie motywy WordPress zawierają te pliki 2:

• styl.css: tutaj możesz zmienić czcionki, schemat kolorów i ogólny wygląd motywu.
• funkcje.php: Ten plik zawiera kod PHP, który zmienia domyślne funkcje witryny.

.rozszerzenie css to Pliki CSS. Wprowadź żądane zmiany i kliknij „zaktualizuj plik”, aby zapisać.

jak edytować kod CSS WordPress za pomocą wtyczki

jeśli nie masz wiedzy o CSS lub wolisz po prostu trzymać się z dala od kodów, możesz użyć wtyczki. W ten sposób zmodyfikujesz wygląd witryny bez potrzeby edytowania plików motywów.

na przykład niestandardowe CSS i JS to wtyczka, która pozwala dostosować wygląd witryny bez konieczności modyfikowania plików motywów. Wtyczka jest wyposażona w łatwy w użyciu edytor tekstu z podświetleniem składni.

możesz dodać tyle kodów, ile chcesz i nie stracisz ich po zmianie motywu.

aby skorzystać z wtyczki, wystarczy ją pobrać, zainstalować i aktywować.

inne wtyczki WordPress używane do edycji CSS obejmują CSS hero, wtyczkę Genesis Extender, Niestandardowy CSS WordPress itp.

Edycja kodu CSS WordPress za pomocą WordPress Customizer

zamiast używać Edytora motywów WordPress, możesz użyć wbudowanego WordPress Customizer.

aby odwiedzić WordPress customizer, przejdź do „Wygląd > > Dostosuj” na pulpicie nawigacyjnym:

następnie kliknij dodatkowy CSS.

otworzy się edytor kodu. Dodaj swój własny css i naciśnij przycisk Publikuj.

Jak dodać JavaScript do witryny WordPress

gdy musisz dodać do swojej witryny dynamiczną zawartość, taką jak animacje, kalkulatory, suwaki, odtwarzacz wideo lub powiązane elementy interaktywne, JavaScript jest przydatny.

możesz również dodać Javascript do swojej witryny WordPress, gdy potrzebujesz:

• zwiększ funkcjonalność wtyczki.
• podłącz zewnętrzny element, taki jak Google Analytics do swojej witryny.
• Ukryj lub wyświetl elementy HTML.
• wykonuj złożone operacje na zmiennych CSS.

teraz dodawanie lub edytowanie Javascript nie jest tak proste jak edycja HTML lub CSS. Powinieneś uważać na to, jak piszesz kod i gdzie go dodajesz.

przede wszystkim są dwa miejsca gdzie można dodać Javascript:

1. nagłówek lub stopka Twojego motywu: JavaScript dodany w tych lokalizacjach działa w całej witrynie
2. na stronie lub po

Jak dodać Skrypty nagłówka i stopki za pomocą wtyczki

najprostszym sposobem na dodanie skryptów nagłówka i stopki w WordPress jest za pomocą wtyczki. Ta metoda jest bardziej wartościowa, jeśli chcesz dodać Skrypty niezależne od motywu, które pozostają nawet po zmianie motywu.

WordPress domyślnie nadpisuje nagłówek.plik php podczas aktualizacji. Ale kiedy używasz wtyczki, nie musisz się martwić o ponowne dodanie kodu, nawet podczas aktualizacji lub zmiany motywu.

przykładem tej wtyczki jest wtyczka Wstaw nagłówki i stopki:

umożliwia łatwe dodawanie kodu wstaw do nagłówka i stopki witryny WP. Gdy chcesz dodać Skrypty Google Analytics lub kod piksela Facebooka, ta wtyczka jest przydatna.

aby skorzystać z wtyczki, zainstaluj ją i aktywuj. Następnie uzyskaj dostęp do edytora JavaScript, otwierając ustawienia > Wstaw nagłówki i stopki:

strona zawiera 3 pola tekstowe, w których można dodawać skrypty do nagłówka, treści i stopki witryny.

po dodaniu skryptu do żądanej sekcji, naciśnij przycisk Zapisz na dole strony.

Notka Boczna: niektóre motywy (takie jak Genesis Framework) mają tego rodzaju funkcjonalność (umożliwiają wstawianie kodów w dowolnym miejscu witryny), więc nie potrzebujesz wtyczki.

Jak dodać JavaScript do postów i stron WordPress

Oprócz dodawania kodów JS w nagłówku i stopce witryny (co działa w całej witrynie), możesz dodawać je indywidualnie do postów i stron.

pierwszą rzeczą do zrobienia jest zainstalowanie wtyczki Code Embed. Następnie aktywuj go.

następnie musisz włączyć niestandardowe pola dla swojego posta lub strony.

jeśli używasz klasycznego edytora, otwórz stronę lub post, na którym musisz dodać kod JS w edytorze WP. Następnie kliknij „Opcje ekranu” w prawym górnym rogu pulpitu nawigacyjnego i zaznacz opcję „Pola niestandardowe”.

jeśli używasz edytora Gutenberg, oto jak uzyskać dostęp do funkcji niestandardowych pól WP:

kliknij pionowe kropki 3 w prawym górnym rogu ekranu i wybierz Opcje:

następnie zaznacz pole „niestandardowe pola” znajdujące się w sekcji Zaawansowane Panele.

teraz opcja „Pola niestandardowe” działa w pełni w Twojej witrynie.

oto co dalej. Przewiń w dół postu (w edytorze classic lub Gutenberg), zobaczysz sekcję, w której można dodawać niestandardowe pola.

kliknij Enter new i wprowadź nazwę dla nowego niestandardowego pola w polu 'Nazwa’ (niech nazwa zaczyna się od kodu słowa np. CODEjsforpage). Następnie w polu „Wartość” wprowadź fragment kodu JS. Na koniec zapisz zmiany, naciskając przycisk „Dodaj niestandardowe pole”.

w tym momencie możesz wstawić kod JS w dowolnym miejscu postu lub strony. Po prostu dodaj kod do osadzenia: {{CODEjsforpage}} tam, gdzie chcesz, aby Kod był.

Edycja PHP w WordPress

istnieją 2 podstawowe sposoby edycji PHP w WordPress – edytor kodu WP i klient FTP.

1. Edytor kodu WordPress

jest to najprostsza metoda edycji PHP, o ile możesz zalogować się do pulpitu WordPress.

aby rozpocząć, Utwórz motyw potomny i aktywuj go. Następnie przejdź do Wygląd >> edytor motywów.

Wybierz motyw potomny, który chcesz edytować. Kliknij, aby otworzyć plik, który chcesz edytować (pliki PHP kończą się na.rozszerzenie php). Na przykład, jeśli chcesz edytować stopkę witryny, kliknij stopkę.plik php po prawej stronie ekranu. Teraz Edytuj plik w edytorze WordPress.

nie zapomnij kliknąć przycisku Aktualizuj plik. Spowoduje to zapisanie zmian.

2. Edycja kodu PHP przez FTP

przy użyciu klienta FTP to kolejna metoda edycji plików php. Jest to najbardziej przydatne, gdy nie masz dostępu do pulpitu WordPress, prawdopodobnie w wyniku błędu WordPress lub ataku złośliwego oprogramowania.

jeśli masz dostęp do edytora kodu WordPress, użyj go na wszelkie sposoby. Jest szybciej.

to powiedziawszy, pierwszą rzeczą, którą musisz zrobić, jest pobranie klienta FTP (najlepiej FileZilla). Następnie otwórz go i kliknij „plik > > menedżer witryny”.

następnie wprowadź dane logowania FTP (domenę, nazwę użytkownika i hasło). Te dane są zwykle takie same jak dane logowania cPanel. Jeśli tego nie wiesz, skontaktuj się z firmą hostingową WordPress.

teraz kliknij „Połącz”.

po połączeniu będziesz mieć dostęp do podstawowych plików WordPress. Aby edytować określony plik, powiedzmy wpconfig.php, kliknij plik prawym przyciskiem myszy i wybierz Widok / edytuj z listy opcji. Po edycji kodu Zapisz zmiany i prześlij edytowany plik z powrotem na serwer, gdy zostanie o to poproszony przez Filezilla.

wniosek

WordPress jest kochany przez wielu za swoją elastyczność i solidne opcje dostosowywania. Jeśli nie podoba Ci się funkcja, nie musisz się jej trzymać. Możesz go zmienić za pomocą wtyczki lub bezpośrednio edytując kod WordPress.

miejmy nadzieję, że możesz teraz edytować HTML, CSS, JavaScript i PHP w WordPress. Zachęcamy do zapoznania się z pięknem, jakie WordPress ma do zaoferowania. Pamiętaj jednak, aby zachować ostrożność, zwłaszcza podczas dodawania lub edytowania kodów źródłowych.

aby pomóc ci stać się pro WordPress, mamy samouczki wideo, a także blog szkoleniowy WordPress. Sprawdź je, aby dowiedzieć się WordPress. A jeśli nadal potrzebujesz pomocy w swojej witrynie WordPress, skontaktuj się z naszymi programistami WordPress i ekspertami ds. wsparcia, aby zacząć działać.

banner vector created by GraphiqaStock – www.freepik.com