Przejdź do głównej treści

Podstawy konfigurowania witryny WordPress

Divi: najłatwiejszy w użyciu motyw WordPress

Divi: Najlepszy motyw WordPress wszechczasów!

więcej Pobieranie 901.000, Divi jest najpopularniejszym motywem WordPress na świecie. Jest kompletny, łatwy w użyciu i zawiera więcej niż darmowe szablony 62. [Zalecane]

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).

W przypadku właściciela witryny narzędzia te mogą pomóc wyświetlić podgląd określonego stylu bez faktycznego wprowadzania zmian dla 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 ".

Łatwo stwórz swoją stronę internetową dzięki Elementor

Elementor pozwala łatwo stworzyć dowolny projekt strony internetowej o profesjonalnym wyglądzie. Przestań płacić drogo za to, co możesz zrobić sam. [Bezpłatny]

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 zmienić styl motywu lub szablonu WordPress, aby dodać zmiany, które chcesz zapisać.

Zanim zaczniesz edytować istniejący motyw WordPress 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

Z łatwością stwórz swój sklep internetowy

Uzyskaj woocommerce, najlepsze wtyczki e-commerce do sprzedaży produktów swoich fizycznych i cyfrowych na WordPressie. [Zalecane]

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ć swojego bloga WordPress. Udostępnij ten samouczek znajomym.

Ten artykuł zawiera komentarze 0

Zostaw komentarz

Twoj adres e-mail nie bedzie opublikowany. Wymagane pola są oznaczone *

Ta strona używa Akismet, aby zmniejszyć niechciane. Dowiedz się więcej o sposobie wykorzystania danych komentarzy.

Powrót do góry