Už jste někdy chtěli dočasně upravit webovou stránku, abyste viděli, jak by vypadala s konkrétními barvami, písmy, stylem? To je možné pomocí nástroje, který již ve vašem prohlížeči existuje, s názvem „ Zkontrolujte prvek “. To je sen pro všechny uživatele, kteří rádi manipulují s CSS.
V tomto tutoriálu vás provedeme základy kontroly položek a jak je používat s vaším webem WordPress.
Co je to nástroj pro kontrolu položek?
Moderní prohlížeče jako Google Chrome a Mozilla Firefox mají vestavěné nástroje, které umožňují webovým vývojářům ladit chyby. Tyto nástroje zobrazují HTML, CSS a JavaScript pro stránku a ukazují, jak se kód spouští.
Použití nástroje " Zkontrolujte prvek Můžete upravit kód HTML, CSS nebo JavaScript pro libovolnou webovou stránku a zobrazit své změny v reálném čase (pouze na vašem počítači).
Pro majitele a Webové stránkyTyto nástroje vám mohou pomoci zobrazit náhled toho, jak bude určitý styl vypadat, aniž byste změny skutečně použili pro všechny.
Pro autory jsou tyto nástroje úžasné, protože můžete snadno měnit informace umožňující identifikaci osob a současně pořizovat snímky obrazovky, což eliminuje potřebu skutečně vyblednout prvky.
Pro agenty podpory je to skvělý způsob, jak identifikovat chybu, která by mohla způsobit, že se vaše galerie nenačítají, nebo jim brání ve správném fungování.
Škrábáme pouze povrch případů použití, protože nástroj „ Zkontrolujte prvek Je opravdu mocný.
V tomto článku se zaměříme na nástroj “ Zkontrolujte prvek Z Google Chrome, protože je to náš prohlížeč dle výběru. Firefox má své vlastní vývojové nástroje, které lze vyvolat také výběrem nabídky " zkontrolovat prvek ".
Spuštění nástroje „Zkontrolovat prvek“ a lokalizace kódu
Tento nástroj můžete spustit stisknutím kláves CTRL + Shift + I na klávesnici. Případně můžete kliknout kamkoli na webovou stránku a poté vybrat Zkontrolovat položku nabídky prohlížeče.
Okno vašeho prohlížeče se rozdělí na dvě a spodní okno zobrazí zdrojový kód webové stránky.
Okno vývojářského nástroje je dále rozděleno do dvou oken. Nalevo uvidíte kód HTML stránky. V pravém podokně uvidíte pravidla CSS.
Když pohybujete myší nad zdrojem kódu HTML, zobrazí se zvýrazněná oblast zvýrazněná na webové stránce. Také si všimnete pravidel CSS pro tento prvek.
Můžete také vzít ukazatel myši na položku na webové stránce, kliknout pravým tlačítkem a vybrat možnost „ prohlédněte si prvek ". Ve zdrojovém kódu bude zvýrazněna položka, na kterou jste klikli.
Kód vývojář a vývojář Debugger
HTML a CSS v inspekčním okně prvku lze upravovat. Můžete dvakrát kliknout na zdrojový kód HTML a upravit kód, jak chcete.
Můžete také dvakrát kliknout a upravit atributy stylů v podokně CSS. Chcete-li přidat pravidlo, klikněte na ikonu plus na panelu stylů v horní části.
Pokud provedete změny v kódu CSS nebo HTML, tyto změny se okamžitě projeví v prohlížeči.
Všimněte si, že ne všechny provedené změny jsou uloženy kdekoli. Nástroj Zkontrolujte prvek Je ladicí nástroj a neuloží vaše změny do souboru na serveru. To znamená, že pokud stránku obnovíte, všechny vaše změny budou ztraceny.
Chcete-li skutečně provést změny, budete muset upravit styl svého WordPress téma nebo šablonu pro přidání změn, které chcete uložit.
Než začnete upravovat svůj WordPress téma existující pomocí nástroje " Zkontrolujte prvek Nezapomeňte uložit všechny své změny vytvořením podřízeného motivu.
Jak snadno najít chyby na WordPress
Nástroj Zkontrolujte prvek Má oblast s názvem „ konzola Což ukazuje všechny chyby, které na vašem webu existují. Než se pokusíte odladit chybu nebo požádat o pomoc od autorů tématu nebo pluginu, vždy stojí za to se podívat, abyste zjistili, co je špatně.
Například, pokud jste byli zákazníkem OptinMonster Kdo se diví, proč se jeho optin nenačte, můžete snadno najít problém, který naznačuje, že „ Slepka stránky se neshoduje ".
Pokud lišta sdílení nefungovala správně, uvidíte, že je příčinou chyba JavaScriptu.
To je pro tento tutoriál vše, doufám, že si ho můžete lépe přizpůsobit WordPress blog. Neváhejte a sdílejte tento návod se svými přáteli.
