Podstawy Inspekcji Elementu: Dostosowywanie WordPressa dla użytkowników DIY

Wielu z nas jest ciekawych zrozumienia projektu strony internetowej bez ryzyka wprowadzania trwałych zmian. Inspektor elementów służy jako nieocenione narzędzie do tego celu, pozwalając na wprowadzanie tymczasowych zmian bezpośrednio w przeglądarce.

Wielu naszych użytkowników początkujących powiedziało nam, że edycja HTML/CSS jest dla nich trudna. Zawsze zalecamy tym użytkownikom eksperymentowanie z narzędziem Inspekcja.

Jest prosty i łatwy w użyciu, a wyniki swoich modyfikacji można zobaczyć natychmiast. Używamy go cały czas do podglądu zmian, od drobnych edycji tekstu po całkowite przeprojektowanie układu.

Ten przewodnik przeprowadzi Cię przez kroki efektywnego wykorzystania narzędzia Inspekcja elementu na Twojej stronie WordPress, pomagając Ci bezpiecznie i sprawnie wcielić w życie Twoje pomysły projektowe.

Czym jest narzędzie Inspekcja?

Niezliczoną ilość razy polegaliśmy na przeglądarkowych narzędziach deweloperskich, aby rozwiązywać problemy i eksperymentować ze zmianami na stronach internetowych. Nowoczesne przeglądarki internetowe, takie jak Google Chrome, Firefox, Safari i Microsoft Edge, są wyposażone we wbudowane narzędzia zaprojektowane, aby pomóc programistom stron internetowych bezproblemowo debugować błędy.

Narzędzia te wyświetlają kod HTML, CSS i JavaScript strony, pokazując jednocześnie, jak przeglądarka je przetwarza. Dla nas to jak próbowanie naszych kodów dostępu bez wpływu na faktyczną stronę internetową.

Możesz uzyskać dostęp do tych narzędzi deweloperskich na każdej stronie, klikając prawym przyciskiem myszy i wybierając „Inspektuj” z menu. Jest to jedna z naszych najczęściej używanych akcji podczas testowania zmian projektowych lub debugowania problemu.

Za pomocą narzędzia Inspekcja możesz tymczasowo edytować kod HTML, CSS lub JavaScript i zobaczyć zmiany na żywo na swoim ekranie. Używaliśmy go do podglądu wszystkiego, od drobnych poprawek stylistycznych po kompletne pomysły na układ. (Pokażemy Ci, jak to zrobić później w tym artykule.)

Najlepsze w tym wszystkim? Te zmiany nie wpływają na faktyczną stronę internetową. Po ponownym załadowaniu strony lub zamknięciu przeglądarki wszystko wraca do normy. To sprawia, że jest to bezpieczne i niezawodne narzędzie do testowania pomysłów.

Uznaliśmy to za szczególnie pomocne dla właścicieli stron internetowych typu „zrób to sam” i programistów, którzy potrzebują szybkiego sposobu na testowanie lub debugowanie. Oto tylko kilka przypadków użycia:

• Zastosuj nowe style CSS i natychmiast zobacz, jak wyglądają na Twojej stronie.
• Pisarze techniczni mogą edytować kod HTML na potrzeby zrzutów ekranu, ukrywać poufne informacje lub dostosowywać widoczny tekst.
• Programiści często używają go do identyfikacji częstych błędów WordPressa, debugowania problemów z JavaScript lub rozwiązywania błędów 404.

A to dopiero wierzchołek góry lodowej. Te narzędzia są niezwykle wszechstronne, co czyni je ulubionymi dla każdego, kto pracuje ze stronami internetowymi.

W tym przewodniku skupimy się na narzędziu Inspektora w Google Chrome, ponieważ jest to najpopularniejsza przeglądarka wśród naszych czytelników. Jednak Firefox, Safari i Microsoft Edge mają podobne narzędzia, do których można uzyskać dostęp za pomocą ich opcji Inspektora.

Gotowy do rozpoczęcia? Skorzystaj z poniższych linków, aby przejść do dowolnej sekcji artykułu i postępować zgodnie z instrukcjami:

• Uruchamianie narzędzia Inspekcja i lokalizowanie kodu
• Edycja i debugowanie kodu w narzędziu Inspekcja elementu
• Łatwo znajdź błędy na swojej stronie
• Jak używać narzędzia inspekcji na urządzeniach mobilnych (iOS lub Android)?
• Jak trwale zastosować zmiany z narzędzia Inspektuj element w WordPressie
• Najlepsze praktyki podczas korzystania z Inspektora elementów
• Często zadawane pytania dotyczące narzędzia Inspect Element
• Samouczek wideo
• Dowiedz się więcej o dostosowywaniu WordPressa

Uruchamianie narzędzia Inspekcja i lokalizowanie kodu

Możesz uruchomić narzędzie do inspekcji, naciskając CTRL + Shift + I (Command + Options + I dla MacOS) na klawiaturze.

Możesz również kliknąć w dowolnym miejscu na stronie internetowej i wybrać „Inspektuj” z menu przeglądarki.

Dostęp do narzędzia można również uzyskać z głównego menu przeglądarki.

W Google Chrome kliknij menu z trzema kropkami w prawym górnym rogu, a następnie przewiń w dół do opcji Więcej narzędzi » Narzędzia deweloperskie.

Okno przeglądarki podzieli się na dwie części.

Z jednej strony zobaczysz przeglądaną stronę. Z drugiej strony zobaczysz kod HTML i reguły CSS.

Położenie doku Inspektora jest zmienne, ale można je zmienić, klikając menu z trzema kropkami i wybierając pozycję „Dock side”. Ikonę do kliknięcia widać na powyższym obrazku.

Przesunięcie myszy nad kodem źródłowym HTML podświetli odpowiedni obszar na stronie internetowej.

Zauważysz również, że reguły CSS zmieniają się, gdy klikniesz na element w kodzie HTML.

Możesz również skierować wskaźnik myszy na element na stronie internetowej, kliknąć prawym przyciskiem myszy i wybrać narzędzie „Inspekcja”.

Element zostanie podświetlony w kodzie źródłowym.

Edycja i debugowanie kodu w narzędziu Inspekcja elementu

Zarówno kod HTML, jak i CSS w oknie narzędzia Inspekcja elementu są edytowalne. Możesz dwukrotnie kliknąć w dowolnym miejscu kodu źródłowego HTML i edytować kod według własnych upodobań.

Możesz również dwukrotnie kliknąć i edytować dowolne atrybuty i style w panelu CSS.

Aby dodać niestandardową regułę stylu, po prostu kliknij ikonę + na górze panelu CSS.

W miarę wprowadzania zmian w CSS lub HTML, zmiany te będą natychmiast odzwierciedlone w przeglądarce.

Te zmiany zostaną zapisane w tymczasowej pamięci przeglądarki i nie wpłyną na Twoją witrynę.

Aby wprowadzić zmiany, musisz dodać niestandardowy kod CSS do swojego motywu lub edytować odpowiedni szablon, aby dodać zmiany, które chcesz zapisać.

Zanim zaczniesz edytować swój istniejący motyw WordPress za pomocą narzędzia Inspekcja elementu, upewnij się, że utworzyłeś kopię zapasową WordPress.

Łatwo znajdź błędy na swojej stronie

Narzędzie Inspekcja ma obszar o nazwie Konsola, który pokazuje błędy, które wystąpiły podczas ładowania strony.

Podczas próby debugowania błędu lub zgłaszania prośby o wsparcie od autorów wtyczek, zawsze warto sprawdzić, czy nie ma żadnych błędów lub ostrzeżeń.

Korzystając z karty Konsola, możesz rozwiązać kilka typowych problemów. Na przykład, oto tylko kilka rzeczy, które możesz zrobić za pomocą konsoli Inspektora:

• Dowiedz się, dlaczego dodany obrazek się nie wyświetla
• Dlaczego wtyczka lub motyw nie działa poprawnie
• Który wtyczka lub rozszerzenie przeglądarki może powodować konflikt

Nawet użytkownicy nietechniczni mogą na to spojrzeć, aby znaleźć wskazówki, skąd bierze się problem.

Na przykład, jeśli jesteś klientem OptinMonster i zastanawiasz się, dlaczego Twój formularz nie jest ładowany, możesz łatwo znaleźć problem „Slug Twojej strony nie pasuje”.

Korzystanie z narzędzi takich jak Konsola Inspektora Elementów może pomóc w zebraniu przydatnych szczegółów technicznych, gdy coś na Twojej stronie nie działa poprawnie. Udostępnianie tych informacji – takich jak komunikaty o błędach lub brakujące zasoby – może ułatwić zespołom wsparcia wtyczek lub motywów szybsze zrozumienie i rozwiązanie problemu.

Jak używać narzędzia inspekcji na urządzeniach mobilnych (iOS lub Android)?

Opcje programisty nie są domyślnie włączone w przeglądarkach mobilnych, ponieważ producenci zakładają, że większość użytkowników mobilnych z nich nie korzystałaby.

Najłatwiejszym sposobem rozwiązywania problemów i używania narzędzia inspekcji do problemów mobilnych jest użycie funkcji emulacji mobilnej w przeglądarce stacjonarnej.

Następnie możesz wybrać urządzenie z góry lub wymiary ekranu. Chrome będzie wtedy emulował ten rozmiar ekranu dla Ciebie.

Jak trwale zastosować zmiany z narzędzia Inspektuj element w WordPressie

Podczas pracy z narzędziem Inspekcja elementu możesz zastanawiać się, jak sprawić, by przetestowane zmiany stały się trwałe. W tej sekcji wyjaśnimy, jak to zrobić na swojej stronie WordPress.

Najpierw zidentyfikuj zmiany, które chcesz zachować i skopiuj je do pliku tekstowego za pomocą aplikacji takiej jak Notatnik lub TextEdit. Następnie możesz wypróbować jedną z poniższych metod.

1. Dodaj zmiany CSS do swojej witryny WordPress za pomocą edytora strony

Po skopiowaniu przejdź do swojego panelu administracyjnego WordPress i wybierz Wygląd » Edytor, aby uruchomić edytor strony.

Kliknij okno podglądu, aby rozpocząć edycję swojej witryny.

W edytorze kliknij przycisk Styl na górze, a następnie kliknij menu z trzema kropkami i wybierz „Dodatkowy CSS”.

Otworzy to panel Dodatkowy CSS, gdzie możesz po prostu wkleić kod CSS, który chcesz zapisać.

Możesz zobaczyć, jak Twoje zmiany zostaną zastosowane natychmiast w oknie podglądu. Nie zapomnij kliknąć „Zapisz”, aby opublikować swoje zmiany.

2. Dodaj niestandardowy CSS do swojej witryny za pomocą WPCode

Jeśli potrzebujesz łatwiejszego sposobu na dodanie niestandardowego CSS do swojej witryny, ta metoda jest dla Ciebie.

W tej metodzie użyjemy WPCode. Jest to najlepszy menedżer fragmentów kodu WordPress i pozwala dodawać niestandardowy kod, HTML i CSS do Twojej strony bez edycji motywu.

Uwaga: Istnieje również darmowa wersja WPCode, której możesz użyć. Zalecamy jednak przejście na płatny plan, aby odblokować jej pełny potencjał.

Używamy WPCode na naszych własnych stronach, ponieważ ułatwia zarządzanie kodem. Co ważniejsze, ma wbudowane zabezpieczenie, które wyłącza Twój kod, jeśli zwróci błąd. Szczegółowe informacje znajdziesz w naszej pełnej recenzji WPCode.

Najpierw musisz zainstalować i aktywować wtyczkę WPCode. Jeśli potrzebujesz pomocy, zapoznaj się z naszym poradnikiem jak zainstalować wtyczkę WordPress, aby uzyskać instrukcje.

Po aktywacji po prostu przejdź do Fragmenty kodu » + Dodaj nowy z poziomu panelu administracyjnego WordPress.

Następnie możesz najechać kursorem na opcję „Dodaj swój niestandardowy kod (nowy fragment)” w bibliotece fragmentów kodu i kliknąć „+ Dodaj niestandardowy fragment”.

Następnie musisz wybrać „Fragment CSS” jako typ kodu z listy opcji, które pojawią się na ekranie.

Następnie, na górze strony, możesz dodać tytuł dla swojego niestandardowego fragmentu kodu CSS. Może to być cokolwiek, co pomoże Ci zidentyfikować kod.

Po wprowadzeniu tytułu możesz wpisać lub wkleić niestandardowy kod CSS w polu „Podgląd kodu”.

Po dodaniu niestandardowego kodu CSS kliknij przycisk „Zapisz fragment” i przełącz status na „Aktywny”.

3. Dodaj fragment kodu HTML do swojej witryny WordPress

Aby dodać zmiany w HTML do swojej strony, musisz wkleić je w odpowiednim pliku szablonu w swoim motywie.

Aby dowiedzieć się, który plik motywu należy edytować, zapoznaj się z naszym przewodnikiem jak znaleźć pliki do edycji w motywie WordPress.

Będziesz musiał użyć klienta FTP lub aplikacji menedżera plików na swoim koncie hostingowym, aby edytować pliki swojego motywu.

Alternatywnie, możesz również użyć WPCode do dodawania niestandardowych fragmentów HTML. Po prostu dodaj nowy fragment kodu i wybierz HTML jako typ fragmentu.

Następnie podaj tytuł dla swojego fragmentu HTML, który pomoże Ci go zidentyfikować.

Poniżej dodaj swój niestandardowy kod HTML w polu podglądu.

WPCode pozwala wybrać, gdzie chcesz wstawić dowolny fragment kodu.

Przewiń w dół do obszaru „Wstawianie” i kliknij „Lokalizacja”, aby wyświetlić dostępne opcje.

Po wybraniu lokalizacji nie zapomnij kliknąć „Zapisz” i przełączyć status fragmentu na Aktywny.

Możesz teraz odwiedzić swoją witrynę, aby zobaczyć ją w akcji.

Najlepsze praktyki podczas korzystania z Inspektora elementów

Korzystanie z narzędzia Inspekcja może przypominać otwieranie tajnego okna do projektowania stron internetowych. Ale aby w pełni je wykorzystać, oto kilka najlepszych praktyk, szczególnie pomocnych, jeśli dopiero zaczynasz:

• Zacznij od bezpiecznego eksplorowania: Wszelkie zmiany wprowadzone w Narzędziach deweloperskich są tymczasowe. Dlatego śmiało eksperymentuj bez obaw – nic nie zepsujesz na stałe.
• Wypróbuj różne style i układy: Testuj kolory, czcionki, odstępy lub pozycjonowanie, aby zobaczyć, co wygląda dobrze, zanim zastosujesz zmiany w swoim rzeczywistym motywie lub arkuszu stylów.
• Rób notatki z tego, co działa: Jeśli podoba Ci się zmiana, skopiuj kod CSS i wklej go do pliku tekstowego lub aplikacji do notatek, aby go nie zgubić.
• Testuj w różnych przeglądarkach: Poprawka projektu, która świetnie wygląda w Chrome, może wyglądać inaczej w Firefoksie lub Safari, dlatego zawsze sprawdzaj dwukrotnie.
• Zachowaj porządek: Prowadź rejestr wszystkich wprowadzonych zmian i powodów ich wprowadzenia. Pomoże to, jeśli kiedykolwiek będziesz musiał cofnąć jakąś zmianę lub rozwiązać problemy później.
• Nie edytuj na żywo stron pochopnie: Jeśli się uczysz, lepiej ćwiczyć na stronie stagingowej lub w środowisku testowym, aby uniknąć przypadkowych problemów na Twojej aktywnej stronie.

Często zadawane pytania dotyczące narzędzia Inspect Element

Poniżej znajdują się niektóre z najczęściej zadawanych przez naszych użytkowników pytań dotyczących korzystania z narzędzia Inspektora.

1. Czy mogę używać narzędzia Inspekcja na dowolnej stronie internetowej, czy tylko na mojej własnej?

Tak, możesz użyć narzędzia inspekcji na dowolnej stronie internetowej. Po prostu kliknij prawym przyciskiem myszy i wybierz narzędzie Inspekcja z menu przeglądarki, aby zobaczyć kod stojący za dowolną stroną internetową. Studiowanie kodu innych stron internetowych to szybki sposób na naukę i doskonalenie własnych umiejętności CSS/HTML.

2. Dlaczego nie mogę znaleźć narzędzia Inspekcja w mojej przeglądarce?

Google Chrome może ukrywać opcję Inspekcja w menu prawego kliknięcia, szczególnie gdy wiele rozszerzeń dodaje własne opcje do menu prawego kliknięcia.

Dodatkowo funkcja prawego kliknięcia może być wyłączona za pomocą JavaScript, co może ukryć opcję „Inspektuj”. W takich przypadkach nadal możesz otworzyć Narzędzia deweloperskie, używając skrótu klawiaturowego Ctrl + Shift + I (lub Cmd + Option + I na Macu) lub przechodząc do Menu » Więcej narzędzi » Narzędzia deweloperskie.

3. Czy mogę zobaczyć zmiany w różnych przeglądarkach?

Tak, Inspekcja Elementu jest dostępna w głównych przeglądarkach, pozwalając na testowanie i obserwowanie zmian w Chrome, Firefox, Safari i Edge.

4. Jak Inspektuj element może pomóc w debugowaniu JavaScript?

Narzędzie Inspekcja elementu zawiera kartę Konsola, na której można zobaczyć błędy i ostrzeżenia JavaScript. To narzędzie jest niezwykle pomocne, gdy trzeba zrozumieć, co jest nie tak ze skryptami na Twojej stronie. To jak bezpośrednie połączenie z procesem myślowym przeglądarki, pozwalające szybko zidentyfikować problemy.

5. Czy Inspektuj element może wpłynąć na bezpieczeństwo mojej witryny?

Nie, używanie narzędzia Inspekcja elementu nie wpłynie na bezpieczeństwo Twojej strony internetowej. Jest to narzędzie przeglądarki, które tymczasowo zmienia sposób wyświetlania lub zachowania strony na Twoim lokalnym komputerze, nie zmieniając danych backendowych ani ich integralności.

Samouczek wideo

Subskrybuj WPBeginner

Dowiedz się więcej o dostosowywaniu WordPressa

Jeśli chcesz dowiedzieć się więcej o tym, jak możesz używać narzędzia Inspekcja do robienia więcej rzeczy na swojej stronie WordPress, poniższe zasoby będą dobrym punktem wyjścia:

• Jak dostosować swój motyw WordPress – ten przewodnik dla początkujących pokazuje krok po kroku, jak dostosować swój motyw WordPress.
• Jak prawidłowo dodać niestandardowy CSS w WordPress – Ten samouczek pokazuje wiele sposobów na łatwe dodanie niestandardowego CSS w WordPress.
• Jak zoptymalizować dostarczanie CSS w WordPressie – Zbyt wiele pojedynczych plików CSS może obniżyć wydajność. Ten samouczek pokazuje, jak zoptymalizować dostarczanie CSS, aby przyspieszyć działanie WordPressa.
• Domyślny arkusz stylów CSS generowany przez WordPress – Ta poręczna instrukcja pokaże Ci wiele klas CSS, które WordPress domyślnie dodaje do różnych elementów. Następnie możesz użyć tych klas CSS w swoim niestandardowym kodzie CSS, aby zmienić wygląd tych elementów.

Mamy nadzieję, że ten artykuł pomógł Ci poznać podstawy narzędzia Inspect Element i jak go używać z Twoją witryną WordPress. Możesz również zapoznać się z naszym domyślnym arkuszem ściągawki CSS generowanym przez WordPress dla początkujących, aby przyspieszyć swoje umiejętności tworzenia motywów, lub naszym ostatecznym zestawem narzędzi WordPress dla profesjonalistów.

Jeśli podobał Ci się ten artykuł, zasubskrybuj nasz kanał YouTube po samouczki wideo WordPress. Możesz nas również znaleźć na Twitterze i Facebooku.