Czy kiedykolwiek chciałeś tymczasowo edytować stronę internetową, aby zobaczyć, jak będzie wyglądać z określonymi kolorami, czcionkami, stylem? Jest to możliwe dzięki narzędziu, które już istnieje w Twojej przeglądarce o nazwie „ Sprawdź element ”. Jest to spełnienie marzeń wszystkich użytkowników, którzy lubią manipulować CSS.

W tym samouczku przeprowadzimy Cię przez podstawy inspekcji elementów i jak z nich korzystać w witrynie WordPress.

Kontrola elementu WordPress

Co to jest narzędzie do kontroli przedmiotów?

Nowoczesne przeglądarki, takie jak Google Chrome i Mozilla Firefox, mają wbudowane narzędzia, które pozwalają programistom na debugowanie błędów. Narzędzia te wyświetlają HTML, CSS i JavaScript strony i pokazują, jak działa kod.

Korzystanie z narzędzia „ Sprawdź element Możesz edytować kod HTML, CSS lub JavaScript dla dowolnej strony internetowej i zobaczyć swoje zmiany na żywo (tylko na komputerze).

Dla właściciela Witryna internetowa, te narzędzia mogą pomóc w podglądzie wyglądu określonego stylu bez faktycznego stosowania zmian u wszystkich.

Dla pisarzy te narzędzia są niesamowite, ponieważ podczas robienia zrzutów ekranu można łatwo zmieniać informacje umożliwiające identyfikację, co eliminuje potrzebę rozmycia elementów.

Dla pracowników pomocy technicznej jest to świetny sposób na zidentyfikowanie błędu, który może powodować, że galerie nie ładują się lub uniemożliwiają im prawidłowe działanie.

Dopiero zarysowujemy powierzchnię przypadków użycia, ponieważ narzędzie „ Sprawdź element Jest naprawdę potężny.

W tym artykule skupimy się na narzędziu „ Sprawdź element Z Google Chrome, bo to nasza ulubiona przeglądarka. Firefox ma własne narzędzia programistyczne, które można również wywołać, wybierając menu " sprawdź element ".

Uruchomienie narzędzia „Sprawdź element” i lokalizację kodu

Narzędzie można uruchomić, naciskając klawisze CTRL + Shift + I na klawiaturze. Możesz też kliknąć w dowolnym miejscu na stronie internetowej, a następnie wybrać opcję Sprawdź element menu przeglądarki.

kodowanie kodepascher

Okno przeglądarki zostanie podzielone na dwie części, a dolne okno pokaże kod źródłowy strony internetowej.

Okno narzędzia programisty jest dalej podzielone na dwa okna. Po lewej stronie zobaczysz kod HTML strony. W prawym okienku zobaczysz reguły CSS.

Kontrola kodu HTML-CSS

Przesuwając kursor myszy nad źródłem kodu HTML, zobaczysz podświetlony obszar podświetlony na stronie internetowej. Zauważysz również reguły CSS dla tego elementu, o którym mowa.

Reguły CSS elementu HTML

Możesz również przesunąć wskaźnik myszy nad element na stronie internetowej, kliknąć prawym przyciskiem myszy i wybrać „ sprawdź element ”. Element, który kliknąłeś, zostanie podświetlony w kodzie źródłowym.

Code Developer i Developer Debugger

HTML i CSS w oknie kontroli elementu można edytować. Możesz dwukrotnie kliknąć kod źródłowy HTML i edytować kod według własnego uznania.

Zmiana kodu źródłowego HTML

Możesz także kliknąć dwukrotnie i edytować atrybuty stylów w panelu CSS. Aby dodać regułę, kliknij ikonę plus w okienku stylu u góry.

dodaj nową regułę css

Po wprowadzeniu zmian w kodzie CSS lub HTML zmiany te zostaną natychmiast odzwierciedlone w przeglądarce.

zmień kod na żywo

Pamiętaj, że nie wszystkie wprowadzone tutaj zmiany są zapisywane w dowolnym miejscu. Narzędzie Sprawdź element Jest narzędziem do debugowania i nie zapisuje zmian w pliku na serwerze. Oznacza to, że jeśli odświeżysz stronę, wszystkie zmiany zostaną utracone.

Aby wprowadzić zmiany, musisz zmodyfikować styl swojego WordPress lub szablon, aby dodać zmiany, które chcesz zapisać.

Zanim zaczniesz edytować swój WordPress istniejące za pomocą narzędzia " Sprawdź element Pamiętaj, aby zapisać wszystkie zmiany, tworząc motyw podrzędny.

Jak łatwo znaleźć błędy w serwisie WordPress

Narzędzie Sprawdź element Ma obszar o nazwie „ Konsola Który pokazuje wszystkie błędy, które występują w Twojej witrynie. Przed próbą debugowania błędu lub poproszenia o pomoc autorów motywu lub wtyczki zawsze warto zajrzeć tutaj, aby zobaczyć, co jest nie tak.

konsola javascript

Na przykład, jeśli byłeś klientem OptinMonster Kto zastanawia się, dlaczego jego opcja nie ładuje się, możesz łatwo znaleźć problem wskazujący, że „ ślimak na swojej stronie nie zgadza się ".

Jeśli pasek udostępniania nie działał poprawnie, możesz zobaczyć, że spowodował go błąd JavaScript.

To wszystko w tym samouczku, mam nadzieję, że możesz lepiej dostosować swój blog WordPress. Podziel się tym samouczkiem ze znajomymi.